Merge pull request #89 from YAPP-Github/feature/PRODUCT-55

wkdtnqls0506 · web-flow · commit ee8d451649fb · 2025-07-20T23:53:54.000+09:00
feat: 마이페이지 UI 구현 (#43)
diff --git a/public/images/store.png b/public/images/store.png
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 
 import { redirectToKakaoOAuthLoginPage } from "@/app/(auth)/_api/auth/auth.api";
 import KakaoLogoIcon from "@/assets/kakao-logo.svg";
-import KoreanOrangeLogo from "@/assets/korean-orange-logo.svg";
+import LogoWordmarkIcon from "@/assets/logo-wordmark.svg";
 import { Button } from "@/components/ui/Button";
 import { GNB } from "@/components/ui/GNB";
 import { TextButton } from "@/components/ui/TextButton";
@@ -37,7 +37,7 @@ export default function LoginPage() {
           }
         />
         <div className={styles.logoWrapper}>
-          <KoreanOrangeLogo className={styles.logoIcon} />
+          <LogoWordmarkIcon className={styles.logoIcon} />
           <Image
             src='/images/login-house.png'
             alt='로그인 일러스트'
diff --git a/src/app/member/onboarding/_components/NicknameStep/NicknameStep.tsx b/src/app/member/onboarding/_components/NicknameStep/NicknameStep.tsx
@@ -6,7 +6,7 @@ import { useDebounce } from "react-simplikit";
 
 import { useNicknameCheckMutation } from "@/app/member/_api/member.queries";
 import { nicknameSchema } from "@/app/member/_schemas";
-import ClearIcon from "@/assets/circle-clear.svg";
+import CircleCloseIcon from "@/assets/circle-close.svg";
 import { Button } from "@/components/ui/Button";
 import { VStack } from "@/components/ui/Stack";
 import { TextField } from "@/components/ui/TextField";
@@ -108,7 +108,7 @@ export const NicknameStep = ({ nickname, onNext }: NicknameStepProps) => {
           helperText={errors.nickname?.message}
           rightAddon={
             nicknameValue && (
-              <ClearIcon
+              <CircleCloseIcon
                 width={22}
                 height={22}
                 className={styles.icon}
diff --git a/src/app/member/onboarding/_components/PhoneNumberStep/PhoneNumberStep.tsx b/src/app/member/onboarding/_components/PhoneNumberStep/PhoneNumberStep.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { usePhoneNumberCheckMutation } from "@/app/member/_api/member.queries";
 import { phoneNumberSchema } from "@/app/member/_schemas";
 import { type PhoneNumberFormValues } from "@/app/member/_types/member.types";
-import ClearIcon from "@/assets/circle-clear.svg";
+import CircleCloseIcon from "@/assets/circle-close.svg";
 import { Button } from "@/components/ui/Button";
 import { VStack } from "@/components/ui/Stack";
 import { TextField } from "@/components/ui/TextField";
@@ -89,7 +89,7 @@ export const PhoneNumberStep = ({
           helperText={errors.phoneNumber?.message}
           rightAddon={
             phoneNumberValue && (
-              <ClearIcon
+              <CircleCloseIcon
                 width={22}
                 height={22}
                 className={styles.icon}
diff --git a/src/app/member/onboarding/layout.tsx b/src/app/member/onboarding/layout.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { type ReactNode } from "react";
 
-import LeftArrowIcon from "@/assets/left-arrow.svg";
+import ChevronLeftIcon from "@/assets/chevron-left.svg";
 import { GNB } from "@/components/ui/GNB";
 
 import * as styles from "./layout.css";
@@ -28,7 +28,7 @@ export default function OnboardingLayout({ children }: OnboardingLayoutProps) {
             aria-label='뒤로가기'
             className={styles.button}
           >
-            <LeftArrowIcon width={20} height={20} />
+            <ChevronLeftIcon width={20} height={20} />
           </button>
         }
       />
diff --git a/src/app/member/profile/_components/Banner/Banner.css.ts b/src/app/member/profile/_components/Banner/Banner.css.ts
@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors, semantic } from "@/styles";
+
+export const wrapper = style({
+  backgroundColor: colors.redOrange[90],
+  padding: "1.4rem 2.4rem",
+});
+
+export const linkWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.4rem",
+});
+
+export const icon = style({
+  color: semantic.icon.black,
+});
diff --git a/src/app/member/profile/_components/Banner/Banner.tsx b/src/app/member/profile/_components/Banner/Banner.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import ChevronRightIcon from "@/assets/chevron-right.svg";
+import { Bleed } from "@/components/ui/Bleed";
+import { HStack, VStack } from "@/components/ui/Stack";
+import { Text } from "@/components/ui/Text";
+
+import * as styles from "./Banner.css";
+
+export const Banner = () => {
+  return (
+    <Bleed inline={20} className={styles.wrapper}>
+      <HStack align='center' gap={8}>
+        <Image
+          src='/images/store.png'
+          alt='가게 이미지'
+          width={55}
+          height={55}
+        />
+        <VStack gap={4} justify='center'>
+          <Text typo='body1Sb' color='neutral.10'>
+            당신의 소중한 가게를 소개해주세요
+          </Text>
+          {/* TODO: [가게 등록하기] url로 변경 */}
+          <Link href='/' className={styles.linkWrapper}>
+            <Text typo='label2' color='neutral.10'>
+              가게 등록하기
+            </Text>
+            <ChevronRightIcon width={16} height={16} className={styles.icon} />
+          </Link>
+        </VStack>
+      </HStack>
+    </Bleed>
+  );
+};
diff --git a/src/app/member/profile/_components/Banner/index.ts b/src/app/member/profile/_components/Banner/index.ts
@@ -0,0 +1 @@
+export { Banner } from "./Banner";
diff --git a/src/app/member/profile/_components/MenuList/MenuList.css.ts b/src/app/member/profile/_components/MenuList/MenuList.css.ts
@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic, typography } from "@/styles";
+
+export const wrapper = style({
+  padding: "1.6rem 0",
+});
+
+export const list = style({
+  padding: "1.4rem 0",
+});
+
+export const menuItem = style({
+  ...typography.body1Sb,
+  color: semantic.text.normal,
+});
diff --git a/src/app/member/profile/_components/MenuList/MenuList.tsx b/src/app/member/profile/_components/MenuList/MenuList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+
+import { VStack } from "@/components/ui/Stack";
+
+import { MENU_LIST } from "../../_constants";
+import * as styles from "./MenuList.css";
+
+export const MenuList = () => {
+  return (
+    <>
+      <VStack as='ul' gap={8} className={styles.wrapper}>
+        {MENU_LIST.map(menu => (
+          <li key={menu.id} className={styles.list}>
+            {menu.type === "link" ? (
+              <Link href={menu.link} className={styles.menuItem}>
+                {menu.label}
+              </Link>
+            ) : (
+              <button type='button' className={styles.menuItem}>
+                {menu.label}
+              </button>
+            )}
+          </li>
+        ))}
+      </VStack>
+      {/* TODO: 로그아웃시 나타날 모달 연결 */}
+    </>
+  );
+};
diff --git a/src/app/member/profile/_components/MenuList/index.ts b/src/app/member/profile/_components/MenuList/index.ts
@@ -0,0 +1 @@
+export { MenuList } from "./MenuList";
diff --git a/src/app/member/profile/_components/Profile/Profile.css.ts b/src/app/member/profile/_components/Profile/Profile.css.ts
@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+
+import { colors, radius } from "@/styles";
+
+export const wrapper = style({
+  paddingBottom: "2rem",
+});
+
+export const imageBackground = style({
+  display: "flex",
+  justifyContent: "center",
+  width: "7rem",
+  height: "7rem",
+  paddingTop: "1.6rem",
+  backgroundColor: colors.redOrange[80],
+  border: `1px solid ${colors.redOrange[70]}`,
+  borderRadius: radius.circle,
+  overflow: "hidden",
+});
diff --git a/src/app/member/profile/_components/Profile/Profile.tsx b/src/app/member/profile/_components/Profile/Profile.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { memberQueryOptions } from "@/app/member/_api";
+import { Text } from "@/components/ui/Text";
+
+import { ProfileLayout } from "./ProfileLayout";
+
+export const Profile = () => {
+  const { data: member } = useSuspenseQuery(memberQueryOptions);
+
+  return (
+    <ProfileLayout>
+      <Text typo='title2Sb' color='neutral.10'>
+        {member.nickname}
+      </Text>
+      <Text typo='caption1Md' color='neutral.50'>
+        {member.email}
+      </Text>
+    </ProfileLayout>
+  );
+};
diff --git a/src/app/member/profile/_components/Profile/ProfileLayout.tsx b/src/app/member/profile/_components/Profile/ProfileLayout.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import Bapurit from "@/assets/logo/front-bapurit.svg";
+import { HStack, VStack } from "@/components/ui/Stack";
+
+import * as styles from "./Profile.css";
+
+export type ProfileLayoutProps = {
+  children: ReactNode;
+};
+
+export const ProfileLayout = ({ children }: ProfileLayoutProps) => {
+  return (
+    <HStack gap={16} className={styles.wrapper}>
+      <div className={styles.imageBackground}>
+        <Bapurit width={61} height={61} />
+      </div>
+      <VStack justify='center' gap={8}>
+        {children}
+      </VStack>
+    </HStack>
+  );
+};
diff --git a/src/app/member/profile/_components/Profile/ProfileSkeleton.tsx b/src/app/member/profile/_components/Profile/ProfileSkeleton.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/Skeleton";
+import { radius } from "@/styles";
+
+import { ProfileLayout } from "./ProfileLayout";
+
+export const ProfileSkeleton = () => {
+  return (
+    <ProfileLayout>
+      <Skeleton width={80} height={20} radius={radius[40]} />
+      <Skeleton width={160} height={20} radius={radius[40]} />
+    </ProfileLayout>
+  );
+};
diff --git a/src/app/member/profile/_components/Profile/index.ts b/src/app/member/profile/_components/Profile/index.ts
@@ -0,0 +1 @@
+export { Profile } from "./Profile";
diff --git a/src/app/member/profile/_constants/index.ts b/src/app/member/profile/_constants/index.ts
@@ -0,0 +1 @@
+export * from "./menuList.constants";
diff --git a/src/app/member/profile/_constants/menuList.constants.ts b/src/app/member/profile/_constants/menuList.constants.ts
@@ -0,0 +1,9 @@
+import { type MenuListItem } from "../types";
+
+// TODO: 노션, 인스타 링크 전달받으면 수정
+export const MENU_LIST: readonly MenuListItem[] = [
+  { type: "link", id: "notice", label: "공지사항", link: "/" },
+  { type: "link", id: "customer_service", label: "고객센터", link: "/" },
+  { type: "link", id: "guide", label: "잇다 이용가이드", link: "/" },
+  { type: "action", id: "logout", label: "로그아웃" },
+] as const;
diff --git a/src/app/member/profile/layout.css.ts b/src/app/member/profile/layout.css.ts
@@ -0,0 +1,28 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic } from "@/styles";
+
+export const wrapper = style({
+  height: "100dvh",
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const button = style({
+  width: "2.4rem",
+  height: "2.4rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const icon = style({
+  color: semantic.icon.black,
+});
+
+export const mainWrapper = style({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  padding: "2rem",
+});
diff --git a/src/app/member/profile/layout.tsx b/src/app/member/profile/layout.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type ReactNode } from "react";
+
+import ChevronLeftIcon from "@/assets/chevron-left.svg";
+import { GNB } from "@/components/ui/GNB";
+
+import * as styles from "./layout.css";
+
+type MemberProfileLayoutProps = {
+  children: ReactNode;
+};
+
+export default function MemberProfileLayout({
+  children,
+}: MemberProfileLayoutProps) {
+  const router = useRouter();
+  const handleClick = () => {
+    router.push("/");
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <GNB
+        align='center'
+        title='마이페이지'
+        leftAddon={
+          <button
+            type='button'
+            onClick={handleClick}
+            aria-label='홈으로 이동하기'
+            className={styles.button}
+          >
+            <ChevronLeftIcon
+              width={24}
+              height={24}
+              onClick={handleClick}
+              className={styles.icon}
+            />
+          </button>
+        }
+      />
+      <main className={styles.mainWrapper}>{children}</main>
+    </div>
+  );
+}
diff --git a/src/app/member/profile/page.tsx b/src/app/member/profile/page.tsx
@@ -0,0 +1,20 @@
+import { Suspense } from "react";
+
+import { VStack } from "@/components/ui/Stack";
+
+import { Banner } from "./_components/Banner";
+import { MenuList } from "./_components/MenuList";
+import { Profile } from "./_components/Profile";
+import { ProfileSkeleton } from "./_components/Profile/ProfileSkeleton";
+
+export default function ProfilePage() {
+  return (
+    <VStack>
+      <Suspense fallback={<ProfileSkeleton />}>
+        <Profile />
+      </Suspense>
+      <Banner />
+      <MenuList />
+    </VStack>
+  );
+}
diff --git a/src/app/member/profile/types/index.ts b/src/app/member/profile/types/index.ts
@@ -0,0 +1 @@
+export * from "./menuList.types";
diff --git a/src/app/member/profile/types/menuList.types.ts b/src/app/member/profile/types/menuList.types.ts
@@ -0,0 +1,14 @@
+type LinkMenu = {
+  type: "link";
+  id: string;
+  label: string;
+  link: string;
+};
+
+type ActionMenu = {
+  type: "action";
+  id: string;
+  label: string;
+};
+
+export type MenuListItem = LinkMenu | ActionMenu;
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
diff --git a/src/assets/chevron-right.svg b/src/assets/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66659 3.33335L13.3333 10L6.66659 16.6667" stroke="#2A2A2A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/circle-close.svg b/src/assets/circle-close.svg
diff --git a/src/assets/logo-wordmark.svg b/src/assets/logo-wordmark.svg
diff --git a/src/assets/logo/front-bapurit.svg b/src/assets/logo/front-bapurit.svg
diff --git a/src/components/ui/GNB/GNB.stories.tsx b/src/components/ui/GNB/GNB.stories.tsx
diff --git a/src/components/ui/TextButton/TextButton.stories.tsx b/src/components/ui/TextButton/TextButton.stories.tsx
diff --git a/src/components/ui/TextField/TextField.stories.tsx b/src/components/ui/TextField/TextField.stories.tsx
