[#37] 마이페이지 디자인 수정

src/app/myprofile/_components/profile-sidebar/profile-sidebar.stories.tsx → src/app/myprofile/_components/account-item/account-item.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/nextjs";
-import ProfileSidebar from "./profile-sidebar";
+import AccountItem from "./account-item";
 
-const meta: Meta<typeof ProfileSidebar> = {
-  title: "My-profile/ProfileSidebar",
-  component: ProfileSidebar,
+const meta: Meta<typeof AccountItem> = {
+  title: "My-profile/AccountItem",
+  component: AccountItem,
   tags: ["autodocs"],
   parameters: {
     layout: "centered",

src/app/myprofile/_components/profile-sidebar/profile-sidebar.tsx → src/app/myprofile/_components/account-item/account-item.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 
-const ProfileSidebar = () => {
+const AccountItem = () => {
   return (
     <section
       className={cn(
-        "mb-[60px] flex w-[300px] flex-col items-center justify-start gap-5",
+        "mx-auto mb-[60px] flex w-[300px] flex-col items-center justify-start gap-5",
         "tablet:mb-[34px] tablet:w-[400px]",
-        "pc:sticky pc:top-32 pc:mb-0 pc:h-[calc(100vh-50px-128px)] pc:w-[291px] pc:gap-6 pc:border-r-[1px] pc:px-[25px] pc:pt-10"
+        "pc:sticky pc:top-32 pc:mb-0 pc:h-[calc(100vh-50px-128px)] pc:w-[291px] pc:justify-center pc:gap-6 pc:px-[25px] pc:pt-10"
       )}
     >
       <div className="flex-col-center gap-3 tablet:gap-4 pc:gap-5">
@@ -18,6 +18,7 @@ const ProfileSidebar = () => {
           alt="profile"
           width={164}
           height={164}
+          priority={true}
           className="h-[80px] w-[80px] cursor-pointer rounded-full tablet:h-[100px] tablet:w-[100px] pc:h-[164px] pc:w-[164px]"
         />
         <h1 className="font-bold tracking-[-0.02em] pc:text-heading-lg">
@@ -65,4 +66,4 @@ const ProfileSidebar = () => {
   );
 };
 
-export default ProfileSidebar;
+export default AccountItem;

src/app/myprofile/_components/my-profile/my-profile.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
-import ProfileSidebar from "../profile-sidebar/profile-sidebar";
+import AccountItem from "../account-item/account-item";
 import ReviewItem from "../review-item/review-item";
 import ProfileTabs from "../profile-tabs/profile-tabs";
 
@@ -11,14 +11,14 @@ const MyProfile = () => {
   const [tab, setTab] = useState(searchParams.get("tab") || "review");
 
   return (
-    <main className="mx-auto flex flex-col items-center justify-center pc:flex-row pc:items-start">
-      <ProfileSidebar />
-      <article className="w-full px-4 tablet:px-8 pc:w-[849px]">
+    <main className="mx-auto flex w-full flex-col items-center justify-center pc:flex-row pc:items-start">
+      <article className="w-full px-4 tablet:px-8 pc:mx-[300px]">
         <ProfileTabs tab={tab} setTab={setTab} />
         {tab === "review" &&
           Array.from({ length: 8 }).map((_, index) => (
             <ReviewItem key={index} />
           ))}
+        {tab === "account" && <AccountItem />}
       </article>
     </main>
   );

src/app/myprofile/_components/profile-tabs/profile-tabs.tsx

@@ -15,16 +15,20 @@ const tabs = [
     label: "내가 등록한 와인 4",
     href: "registered",
   },
+  {
+    label: "내 계정",
+    href: "account",
+  },
 ];
 
 const ProfileTabs = ({ tab, setTab }: ProfileTabsProps) => {
   return (
     <nav
       aria-label="프로필 탭 메뉴"
       className={cn(
-        "flex w-full items-center justify-start gap-5 pb-[14px] pl-1",
-        "tablet:gap-8 tablet:pb-[18px] tablet:pl-5",
-        "pc:h-[85px] pc:gap-8 pc:pb-[18px] pc:pl-10"
+        "sticky top-[50px] z-50 flex w-full items-center justify-start gap-5 bg-white pb-[14px] pl-1 pt-4",
+        "tablet:top-[110px] tablet:gap-8 tablet:pb-[18px] tablet:pl-5",
+        "pc:top-[110px] pc:h-[85px] pc:items-end pc:gap-8 pc:pb-[10px]"
       )}
     >
       {tabs.map((item) => (

src/app/myprofile/_components/review-item/review-item.tsx

@@ -28,7 +28,7 @@ const ReviewItem = () => {
       className={cn(
         "flex flex-col gap-[51px] border-t border-gray-300 py-[16px] pb-[28px] pt-[39px]",
         "tablet:gap-[54px]",
-        "pc:gap-[50px] pc:py-[40px] pc:pl-10 pc:pr-20"
+        "pc:gap-[50px] pc:py-[40px]"
       )}
     >
       <div className="flex w-full flex-col items-start justify-center gap-8 px-[14px]">

tsconfig.json

@@ -27,9 +27,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
-    "src/app/myprofile/_components/profile-sidebar",
-    "src/app/myprofile/_components/profile-tabs"
+    ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }