💄[Design] 프로필 페이지 레이아웃 구현 #119

src/app/profile/[userId]/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Profile() {
+  return (
+    <div>
+      <div className="bg-black">profile page</div>
+    </div>
+  );
+}
+
+export default Profile;

src/app/profile/page.tsx

@@ -1,7 +1,12 @@
+import ProfilePage from '@/features/profile/components/ProfilePage';
 import React from 'react';
 
 const Profile = () => {
-  return <div>Profile</div>;
+  return (
+    <>
+      <ProfilePage />
+    </>
+  );
 };
 
 export default Profile;

src/components/sorting-button/SortingButton.tsx

@@ -1,13 +1,17 @@
 'use client';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { IcSorting } from '../../../public/icons/index';
 
-interface SortingButtonProps {
+interface SortingButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   variant: 'byDeadline' | 'byDate';
   onClickSorting: (sortBy: string) => void;
 }
 
-function SortingButton({ variant, onClickSorting }: SortingButtonProps) {
+function SortingButton({
+  variant,
+  onClickSorting,
+  ...buttonProps
+}: SortingButtonProps) {
   const [isActive, setIsActive] = useState(false);
 
   const onClick = (): void => {
@@ -37,6 +41,7 @@ function SortingButton({ variant, onClickSorting }: SortingButtonProps) {
 
   return (
     <button
+      {...buttonProps}
       className={`flex h-[40px] items-center rounded-xl border px-[12px] py-[8px] text-sm font-medium ${
         variant === 'byDeadline' && isActive
           ? 'border-green-normal-01 text-green-normal-01'

src/components/tab/Tab.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Tab from './Tab';
-import { BOOK_TABS, CONTENT_TABS, MY_PAGE_TABS } from '@/constants/tabs';
+import {
+  BOOK_TABS,
+  CONTENT_TABS,
+  CLUB_TABS,
+  EXCHANGE_TABS,
+} from '@/constants/tabs';
 
 const meta = {
   title: 'Components/Tab',
@@ -17,17 +22,17 @@ const meta = {
     },
     items: {
       control: 'select',
-      options: [BOOK_TABS, CONTENT_TABS, MY_PAGE_TABS],
+      options: [BOOK_TABS, CONTENT_TABS, CLUB_TABS, EXCHANGE_TABS],
       mapping: {
         BOOK_TABS: BOOK_TABS,
         CONTENT_TABS: CONTENT_TABS,
-        MY_PAGE_TABS: MY_PAGE_TABS,
+        CLUB_TABS: CLUB_TABS,
       },
       description: '탭 아이템 목록',
     },
     activeTab: {
       control: 'select',
-      options: [...BOOK_TABS, ...CONTENT_TABS, ...MY_PAGE_TABS],
+      options: [...BOOK_TABS, ...CONTENT_TABS, ...CLUB_TABS, ...EXCHANGE_TABS],
       description: '현재 선택된 탭',
     },
   },

src/constants/tabs.ts

@@ -1,12 +1,17 @@
 export const BOOK_TABS = ['전체', '자유책', '지정책'] as const;
+
 export const CONTENT_TABS = ['모임', '교환'] as const;
-export const MY_PAGE_TABS = [
-  '나의 모임',
-  '내가 만든 모임',
-  '나의 리뷰',
+
+export const CLUB_TABS = ['나의 모임', '내가 만든 모임', '나의 리뷰'] as const;
+
+export const EXCHANGE_TABS = [
+  '나의 교환',
+  '내가 등록한 책',
+  '교환 리뷰',
 ] as const;
 
 export type TabType = 'MAIN_TAB' | 'SUB_TAB';
 export type BookTab = (typeof BOOK_TABS)[number];
 export type ContentTab = (typeof CONTENT_TABS)[number];
-export type MyPageTab = (typeof MY_PAGE_TABS)[number];
+export type ClubTab = (typeof CLUB_TABS)[number];
+export type ExchangeTab = (typeof EXCHANGE_TABS)[number];

src/features/profile/components/Header.tsx

@@ -0,0 +1,17 @@
+import Profile from './profile/Profile';
+
+function Header() {
+  return (
+    <div
+      className="flex w-full min-w-[336px] flex-col items-center pb-[20px] pt-[24px] sm:pl-[20px] sm:pr-[19px] md:px-[24px] lg:px-[102px]"
+      role="upper"
+    >
+      <h1 className="w-full min-w-[336px] text-xl font-bold text-gray-black">
+        마이 페이지
+      </h1>
+      <Profile />
+    </div>
+  );
+}
+
+export default Header;

src/features/profile/components/MainContent.tsx

@@ -0,0 +1,30 @@
+'use client';
+import Tab from '@/components/tab/Tab';
+import { CONTENT_TABS, ContentTab } from '@/constants';
+import { useState } from 'react';
+import ClubContents from './clubs/ClubContents';
+import ExchangeContents from './exchange/ExchangeContents';
+
+function MainContent() {
+  const [selectedTab, setSelectedTab] = useState<ContentTab>(CONTENT_TABS[0]);
+
+  return (
+    <div>
+      <div className="w-full border-b-2 sm:px-5 md:px-6 lg:px-[102px]">
+        <Tab
+          items={CONTENT_TABS}
+          activeTab={selectedTab}
+          onTabChange={(item) => setSelectedTab(item)}
+          tabType="MAIN_TAB"
+        />
+      </div>
+      {selectedTab === CONTENT_TABS[0] ? (
+        <ClubContents />
+      ) : (
+        <ExchangeContents />
+      )}
+    </div>
+  );
+}
+
+export default MainContent;

src/features/profile/components/ProfilePage.tsx

@@ -0,0 +1,13 @@
+import Header from './Header';
+import MainContent from './MainContent';
+
+function ProfilePage() {
+  return (
+    <div className="flex w-full min-w-[375px] flex-col">
+      <Header />
+      <MainContent />
+    </div>
+  );
+}
+
+export default ProfilePage;

src/features/profile/components/clubs/ClubContents.tsx

@@ -0,0 +1,48 @@
+import SortingButton from '@/components/sorting-button/SortingButton';
+import { CLUB_TABS, ClubTab } from '@/constants';
+import { useState } from 'react';
+import JoinedClubList from './JoinedClubList';
+import MyReviewList from './MyReviewList';
+import HostedClubList from './HostedClubsList';
+import Tab from '@/components/tab/Tab';
+
+export default function ClubContents() {
+  const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
+  const [selectedList, setSelectedList] = useState<ClubTab>(CLUB_TABS[0]);
+
+  const renderList = (selectedList: ClubTab) => {
+    switch (selectedList) {
+      case CLUB_TABS[0]:
+        return <JoinedClubList />;
+      case CLUB_TABS[1]:
+        return <HostedClubList />;
+      case CLUB_TABS[2]:
+        return <MyReviewList />;
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen w-full flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
+      role="main"
+    >
+      <div className="flex items-center justify-between gap-x-2 sm:overflow-auto sm:whitespace-nowrap sm:[&::-webkit-scrollbar]:hidden">
+        <Tab
+          items={CLUB_TABS}
+          activeTab={selectedList}
+          onTabChange={(item) => setSelectedList(item)}
+          tabType="SUB_TAB"
+        />
+
+        <SortingButton
+          variant="byDate"
+          onClickSorting={(order) => {
+            setSortBy(order);
+            console.log(sortBy);
+          }}
+        />
+      </div>
+      <div className="pt-[18px]">{renderList(selectedList)}</div>
+    </div>
+  );
+}

src/features/profile/components/clubs/HostedClubsList.tsx

@@ -0,0 +1,3 @@
+export default function HostedClubList() {
+  return <div>내가 만든 모임 뷰</div>;
+}

src/features/profile/components/clubs/JoinedClubList.tsx

@@ -0,0 +1,3 @@
+export default function JoinedClubList() {
+  return <div>나의 모임 뷰</div>;
+}

src/features/profile/components/clubs/MyReviewList.tsx

@@ -0,0 +1,3 @@
+export default function MyReviewList() {
+  return <div>나의 리뷰 뷰</div>;
+}

src/features/profile/components/exchange/ExchangeContents.tsx

@@ -0,0 +1,50 @@
+import SortingButton from '@/components/sorting-button/SortingButton';
+import { EXCHANGE_TABS, ExchangeTab } from '@/constants';
+import { useState } from 'react';
+import TradeRecords from './TradeRecords';
+import MyRegisteredBooks from './MyRegisteredBooks';
+import TradeReviews from './TradeReviews';
+import Tab from '@/components/tab/Tab';
+
+export default function ClubContents() {
+  const [sortBy, setSortBy] = useState<string | undefined>('NEWEST');
+  const [selectedList, setSelectedList] = useState<ExchangeTab>(
+    EXCHANGE_TABS[0],
+  );
+
+  const renderList = (selectedList: ExchangeTab) => {
+    switch (selectedList) {
+      case EXCHANGE_TABS[0]:
+        return <TradeRecords />;
+      case EXCHANGE_TABS[1]:
+        return <MyRegisteredBooks />;
+      case EXCHANGE_TABS[2]:
+        return <TradeReviews />;
+    }
+  };
+
+  return (
+    <div
+      className="min-h-screen w-full flex-grow bg-gray-light-02 pt-3 sm:px-[20px] sm:pb-[44px] md:px-[24px] md:pb-[45px] lg:px-[102px] lg:pb-[41px]"
+      role="main"
+    >
+      <div className="flex items-center justify-between gap-x-2 sm:overflow-auto sm:whitespace-nowrap sm:[&::-webkit-scrollbar]:hidden">
+        <Tab
+          items={EXCHANGE_TABS}
+          activeTab={selectedList}
+          onTabChange={(item) => setSelectedList(item)}
+          tabType="SUB_TAB"
+        />
+
+        <SortingButton
+          variant="byDate"
+          onClickSorting={(order) => {
+            setSortBy(order);
+            console.log(sortBy);
+          }}
+        />
+      </div>
+      <div className="pt-[18px]">{renderList(selectedList)}</div>
+    </div>
+  );
+}

src/features/profile/components/exchange/MyRegisteredBooks.tsx

@@ -0,0 +1,3 @@
+export default function MyRegisteredBooks() {
+  return <div>내가 등록한 책</div>;
+}

src/features/profile/components/exchange/TradeRecords.tsx

@@ -0,0 +1,3 @@
+export default function TradeRecords() {
+  return <div>나의 교환 기록</div>;
+}

src/features/profile/components/exchange/TradeReviews.tsx

@@ -0,0 +1,3 @@
+export default function TradeReviews() {
+  return <div>교환 리뷰</div>;
+}

src/features/profile/components/profile/Profile.tsx

@@ -0,0 +1,4 @@
+function Profile() {
+  return <div className="mt-5 flex h-[200px] w-full min-w-[336px]">프로필</div>;
+}
+export default Profile;