유저 프로필 컴포넌트 (#110)

* fix: box이름을 headerbox로 변경

* feat: TILOG_AUTH환경변수 추가

* feat: getme 커스텀훅 작성

* fix: 이벤트리스너로 리팩터링 및 로직 분리

* fix: 로그아웃 로직 수정

* feat: callback page 작성

* fix: 헤더 디자인 수정

* fix: 리덕스 삭제

* fix: 리덕스 삭제

* fix: code smell

* fix: 이미지 컴포넌트 원자로 이동
no-image 컴포넌트 작성
인터페이스 작성

* feat: 유저 이름 컴포넌트 작성
인터페이스 작성

* feat: 유저 프로필 컴포넌트 작성
인터페이스 작성

Author: MINJE-98

src/components/atom/images/UserImage.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+import NoUserImage from "@Components/atom/images/no-image/NoUserImage";
+
+import { UserImageProps } from "@Components/atom/images/interface/userImageProps";
+
+const UserImage = ({ avatar, cursor = false }: UserImageProps) => {
+  if (!avatar) return <NoUserImage cursor={cursor} />;
+  return (
+    <Image
+      className={`rounded-full ${cursor ? "cursor-pointer" : ""} `}
+      layout="fill"
+      alt="avatar"
+      src={avatar}
+    />
+  );
+};
+export default UserImage;

src/components/atom/images/interface/index.ts

@@ -0,0 +1,6 @@
+import {
+  UserImageProps,
+  NoUserImageProps,
+} from "@Components/atom/images/interface/userImageProps";
+
+export type { UserImageProps, NoUserImageProps };

src/components/atom/images/interface/userImageProps.ts

@@ -0,0 +1,8 @@
+export interface UserImageProps {
+  avatar: string | null;
+  cursor?: boolean;
+}
+
+export interface NoUserImageProps {
+  cursor?: boolean;
+}

src/components/atom/images/no-image/NoUserImage.tsx

@@ -0,0 +1,13 @@
+import { NoUserImageProps } from "@Components/atom/images/interface/userImageProps";
+
+const NoUserImage = ({ cursor = false }: NoUserImageProps) => {
+  return (
+    <div
+      className={`${
+        cursor ? "cursor-pointer" : ""
+      } w-full h-full rounded-full  dark:bg-neutral-100 bg-neutral-700`}
+    />
+  );
+};
+
+export default NoUserImage;

src/components/atom/user/UserName.tsx

@@ -0,0 +1,11 @@
+import UserNameProp from "@Components/atom/user/interface/userNameProp";
+
+const UserName = ({ userNameStyle, children }: UserNameProp) => (
+  <span
+    className={`ml-3 text-xl font-semibold text-neutral-600 dark:text-neutral-50 font-eng-sub-font-1 ${userNameStyle}`}
+  >
+    {children}
+  </span>
+);
+
+export default UserName;

src/components/atom/user/interface/index.ts

@@ -0,0 +1,3 @@
+import UserNameProp from "@Components/atom/user/interface/userNameProp";
+
+export type { UserNameProp };

src/components/atom/user/interface/userNameProp.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export default interface UserNameProp {
+  userNameStyle?: string;
+  children: ReactNode;
+}

src/components/molecules/images/UserImage.tsx

@@ -0,0 +1,22 @@
+import UserImage from "@Components/atom/images/UserImage";
+import UserName from "@Components/atom/user/UserName";
+import { ProfileUserProps } from "@Components/molecules/user/interface";
+
+const UserProfile = ({
+  cursor,
+  userNameStyle,
+  UserImageStyle,
+  avatar,
+  children,
+}: ProfileUserProps) => {
+  return (
+    <div className="flex items-center">
+      <div className={`relative ${UserImageStyle}`}>
+        <UserImage cursor={cursor} avatar={avatar} />
+      </div>
+      <UserName userNameStyle={userNameStyle}>{children}</UserName>
+    </div>
+  );
+};
+
+export default UserProfile;

src/components/molecules/user/UserProfile.tsx

@@ -0,0 +1,3 @@
+import ProfileUserProps from "@Components/molecules/user/interface/profileUserProps";
+
+export type { ProfileUserProps };