feat: 마이페이지 전체 구현

src/components/Mypage/MenuButton.tsx

@@ -0,0 +1,50 @@
+import { colors, typography } from '@/styles/global/global';
+import styled from '@emotion/styled';
+import rightArrow from '../../assets/common/right-Chevron.svg';
+
+export interface MenuButtonProps {
+  src: string;
+  name: string;
+  textColor?: string;
+  isButton?: boolean;
+  onClick?: () => void;
+}
+
+const MenuButton = ({ src, name, isButton, onClick }: MenuButtonProps) => {
+  return (
+    <Wrapper onClick={onClick}>
+      <div className="main">
+        <img src={src} />
+        <div>{name}</div>
+      </div>
+      {isButton && <img src={rightArrow} />}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  min-width: 280px;
+  width: 100%;
+  height: 56px;
+  padding: 16px 12px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  border-radius: 12px;
+  background-color: ${colors.darkgrey.dark};
+  cursor: pointer;
+
+  color: ${colors.white};
+  font-size: ${typography.fontSize.base};
+  font-weight: ${typography.fontWeight.semibold};
+  line-height: 24px;
+
+  .main {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+`;
+
+export default MenuButton;

src/components/common/NavBar.tsx

@@ -69,7 +69,7 @@ const items: RouteItem[] = [
   { path: '/feed', label: '피드', icon: FeedIcon, activeIcon: FeedIconActive },
   { path: '/group', label: '모임', icon: GroupIcon, activeIcon: GroupIconActive },
   { path: '/search', label: '검색', icon: SearchIcon, activeIcon: SearchIconActive },
-  { path: '/my', label: '내 정보', icon: MyIcon, activeIcon: MyIconActive },
+  { path: '/mypage', label: '내 정보', icon: MyIcon, activeIcon: MyIconActive },
 ];
 
 const NavBar = ({ src, path }: FabProps) => {

src/components/feed/TabBar.tsx

@@ -22,6 +22,7 @@ const TabButton = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
+  width: 60px;
   padding: 8px 4px;
   font-size: var(--font-size-lg);
   cursor: pointer;

src/data/bookData.ts

@@ -0,0 +1,25 @@
+import type { Book } from '@/types/book';
+
+export const mockBooks: Book[] = [
+  {
+    isbn: 11234131,
+    title: '채식주의자',
+    author: '한강',
+    publisher: '창비',
+    coverUrl: 'https://image.yes24.com/goods/17122707/XL',
+  },
+  {
+    isbn: 21234123,
+    title: '채소 마스터 클래스',
+    author: '백지혜',
+    publisher: '세미콜론',
+    coverUrl: 'https://image.yes24.com/goods/109378551/XL',
+  },
+  {
+    isbn: 31324122,
+    title: '채소 식탁',
+    author: '김경민',
+    publisher: '래디시',
+    coverUrl: 'https://image.yes24.com/goods/117194041/XL',
+  },
+];

src/data/postData.ts

@@ -37,6 +37,23 @@ export const mockPosts: PostData[] = [
     commentCount: 125,
     isPublic: false,
   },
+  {
+    profileImgUrl: 'https://placehold.co/24x24',
+    userName: 'userName',
+    userId: 177,
+    userTitle: 'userTitle',
+    titleColor: '#FF8BAC',
+    createdAt: '12시간 전',
+    bookTitle: '제목입니다제목입니다제목입니다',
+    bookAuthor: '작가입니다',
+    isbn: 111152544,
+    postContent:
+      '내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다',
+    feedId: 58,
+    initialLikeCount: 125,
+    commentCount: 125,
+    isPublic: false,
+  },
   // …다른 포스트들…
 ];
 

src/pages/index.tsx

@@ -25,6 +25,12 @@ import GroupDetail from './groupDetail/GroupDetail';
 import FeedDetailPage from './feed/FeedDetailPage';
 import ScrollToTop from '@/components/common/ScrollToTop';
 import UserSearch from './feed/UserSearch';
+import Mypage from './mypage/Mypage';
+import SavePage from './mypage/SavePage';
+import AlertPage from './mypage/AlertPage';
+import WithdrawPage from './mypage/WithdrawPage';
+import WithdrawDonePage from './mypage/WithdrawDonePage';
+import EditPage from './mypage/EditPage';
 import Notice from './notice/Notice';
 
 const Router = () => {
@@ -52,6 +58,12 @@ const Router = () => {
         <Route path="otherfeed/:userId" element={<OtherFeedPage />} />
         <Route path="follow/:type" element={<FollowerListPage />} />
         <Route path="today-words" element={<TodayWords />} />
+        <Route path="mypage" element={<Mypage />} />
+        <Route path="mypage/save" element={<SavePage />} />
+        <Route path="mypage/alert" element={<AlertPage />} />
+        <Route path="mypage/withdraw" element={<WithdrawPage />} />
+        <Route path="mypage/withdraw/done" element={<WithdrawDonePage />} />
+        <Route path="mypage/edit" element={<EditPage />} />
         <Route path="notice" element={<Notice />} />
       </>,
     ),