[Feat] 마이페이지 UI 구현

src/app/routes.ts

@@ -7,6 +7,9 @@ export default [
     index('routes/(main)/_index.tsx'),
     route('sell', 'routes/(main)/sell.tsx'),
     route('sell/confirm', 'routes/(main)/sell.confirm.tsx'),
+    route('mypage', 'routes/mypage.tsx'),
+    route('mypage/settings', 'routes/mypage-settings.tsx'),
+    route('mypage/profile', 'routes/mypage-profile.tsx'),
   ]),
   route('playground', 'routes/playground.tsx'),
 ] satisfies RouteConfig;

src/app/routes/mypage-profile.tsx

@@ -0,0 +1,3 @@
+import { ProfileInfoPage } from '@pages/mypage';
+
+export default ProfileInfoPage;

src/app/routes/mypage-settings.tsx

@@ -0,0 +1,3 @@
+import { AccountSettingsPage } from '@pages/mypage';
+
+export default AccountSettingsPage;

src/app/routes/mypage.tsx

@@ -0,0 +1,3 @@
+import { MyPage } from '@pages/mypage';
+
+export default MyPage;

src/pages/main/ui/MainPage.tsx

@@ -1,38 +1,14 @@
-import { ChatCircleCloseIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
-import { useToast } from '@shared/hooks';
 import { BannerCard } from '@shared/ui/BannerCard';
 import { Carousel3D } from '@shared/ui/Carousel3D';
 import { ChatbotFloatingButton } from '@shared/ui/ChatbotFloatingButton';
 import { ClientOnly } from '@shared/ui/ClientOnly';
-import { useEffect, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
 import { BANNER_CARDS } from './BannerCards';
 import { CAROUSEL_SLIDES } from './CarouselSlides';
 
-type MainLocationState = {
-  deleted?: boolean;
-};
-
 export default function MainPage() {
-  const location = useLocation();
   const navigate = useNavigate();
-  const { showToast } = useToast();
-  const didShowDeleteToast = useRef(false);
-
-  useEffect(() => {
-    const state = location.state as MainLocationState | null;
-    if (state?.deleted && !didShowDeleteToast.current) {
-      didShowDeleteToast.current = true;
-      showToast('삭제되었습니다!', {
-        tone: 'info',
-        icon: (
-          <ChatCircleCloseIcon className="h-6 w-6 text-[var(--color-gray-900)] [&_*]:stroke-[var(--color-gray-900)] [&_*]:stroke-[2]" />
-        ),
-      });
-      navigate(location.pathname, { replace: true, state: null });
-    }
-  }, [location.pathname, location.state, navigate, showToast]);
 
   return (
     <main className="flex w-full flex-col items-center gap-14 px-4 pt-8 pb-24">

src/pages/main/ui/bannerCards.tsx

@@ -0,0 +1,44 @@
+import { GearIcon, SellIcon, ShoppingIcon } from '@shared/assets/icons';
+import { ROUTES } from '@shared/constants';
+
+export const BANNER_CARDS = [
+  {
+    id: 'buy',
+    title: (
+      <>
+        중고 전자기기
+        <br />
+        구매하기
+      </>
+    ),
+    description: '합리적인 매물을 찾아보세요.',
+    imageSrc: ShoppingIcon,
+    route: ROUTES.BUY,
+  },
+  {
+    id: 'sell',
+    title: (
+      <>
+        중고 전자기기
+        <br />
+        판매하기
+      </>
+    ),
+    description: '사용하지 않는 기기를 판매해보세요.',
+    imageSrc: SellIcon,
+    route: ROUTES.SELL,
+  },
+  {
+    id: 'repair',
+    title: (
+      <>
+        근처
+        <br />
+        수리점 찾기
+      </>
+    ),
+    description: '가까운 수리점을 찾아드려요.',
+    imageSrc: GearIcon,
+    route: ROUTES.REPAIR,
+  },
+];

src/pages/main/ui/carouselSlides.tsx

@@ -0,0 +1,39 @@
+import {
+  PhoneRecycleImage,
+  PhoneRepairImage,
+  PhoneSellImage,
+  SloganImage,
+  SmartphoneImage,
+} from '@shared/assets/images';
+import { CarouselImageSlide } from '@shared/ui/Carousel3D';
+
+export const CAROUSEL_SLIDES = [
+  {
+    id: 1,
+    content: (
+      <CarouselImageSlide imageSrc={SloganImage} title="버리기 전, 루핏" subtitle="Before you throw out, LOOPIT" />
+    ),
+  },
+  {
+    id: 2,
+    content: (
+      <CarouselImageSlide imageSrc={SmartphoneImage} title="중고폰 구매" subtitle="검증된 중고폰을 합리적인 가격에" />
+    ),
+  },
+  {
+    id: 3,
+    content: (
+      <CarouselImageSlide imageSrc={PhoneSellImage} title="내 폰 판매" subtitle="안 쓰는 폰, 현금으로 바꾸세요" />
+    ),
+  },
+  {
+    id: 4,
+    content: (
+      <CarouselImageSlide imageSrc={PhoneRepairImage} title="수리점 찾기" subtitle="가까운 수리점을 찾아드려요" />
+    ),
+  },
+  {
+    id: 5,
+    content: <CarouselImageSlide imageSrc={PhoneRecycleImage} title="친환경 순환" subtitle="버려지는 폰에 새 생명을" />,
+  },
+];

src/pages/mypage/index.ts

@@ -0,0 +1,3 @@
+export { default as MyPage } from './ui/MyPage';
+export { default as AccountSettingsPage } from './ui/AccountSettingsPage';
+export { default as ProfileInfoPage } from './ui/ProfileInfoPage';

src/pages/mypage/mocks/index.ts

@@ -0,0 +1,76 @@
+import type { TradeListItem } from '../ui/components/TradeItemList';
+import type { RepairListItem } from '@shared/ui/RepairList';
+
+export const MY_PAGE_PROFILE = {
+  nickname: '폰박살',
+  email: 'loveloopit@email.com',
+  profileImage: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=320&auto=format&fit=crop',
+};
+
+export const PERSONAL_INFO_DEFAULTS = {
+  nickname: '폰박살',
+  name: '김민아',
+  birthDate: '2001-11-11',
+  email: 'loveloopit@email.com',
+};
+
+export const BUY_ITEMS: TradeListItem[] = [
+  {
+    id: 'buy-1',
+    modelName: '아이폰 17 256GB 실버',
+    price: '1,450,000원',
+    date: '2026.02.09',
+    status: 'buying',
+    imageUrl: 'https://images.unsplash.com/photo-1512499617640-c2f999018b72?q=80&w=200&auto=format&fit=crop',
+  },
+];
+
+export const SELL_ITEMS: TradeListItem[] = [
+  {
+    id: 'sell-1',
+    modelName: '아이폰 16 프로 512GB',
+    price: '1,320,000원',
+    date: '2026.02.07',
+    status: 'reserved',
+    imageUrl: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=200&auto=format&fit=crop',
+  },
+  {
+    id: 'sell-2',
+    modelName: '갤럭시 S26 울트라',
+    price: '1,550,000원',
+    date: '2026.01.30',
+    status: 'completed',
+    statusLabel: '판매완료',
+    imageUrl: 'https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?q=80&w=200&auto=format&fit=crop',
+  },
+];
+
+export const FAVORITE_PRODUCT_ITEMS: TradeListItem[] = [
+  {
+    id: 'fav-product-1',
+    modelName: '새제품 아이폰 17 256GB',
+    price: '1,500,000원',
+    date: '2026.02.08',
+    status: 'favorite',
+    favoriteActive: true,
+    imageUrl: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=200&auto=format&fit=crop',
+  },
+  {
+    id: 'fav-product-2',
+    modelName: '아이폰 17 (새제품, 케이스 증정)',
+    price: '1,550,000원',
+    date: '2026.02.07',
+    status: 'favorite',
+    favoriteActive: true,
+    imageUrl: 'https://images.unsplash.com/photo-1512499617640-c2f999018b72?q=80&w=200&auto=format&fit=crop',
+  },
+];
+
+export const FAVORITE_REPAIR_ITEMS: RepairListItem[] = [
+  {
+    id: 'fav-repair-1',
+    name: '뚝딱 핸드폰수리점',
+    address: '서울시 강남구',
+    favoriteActive: true,
+  },
+];

src/pages/mypage/ui/AccountSettingsPage.tsx

@@ -0,0 +1,78 @@
+import { ChevronRightIcon, PictureIcon } from '@shared/assets/icons';
+import { Profile } from '@shared/ui/Profile';
+import { useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { MY_PAGE_PROFILE } from '../mocks';
+import { getProfileSummary, saveProfile } from '../utils/profileStorage';
+import { PageContainer } from './components/PageContainer';
+
+export default function AccountSettingsPage() {
+  const navigate = useNavigate();
+  const profileSummary = getProfileSummary();
+  const [profileImage, setProfileImage] = useState(profileSummary.profileImage ?? MY_PAGE_PROFILE.profileImage);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleProfileClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleProfileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== 'string') {
+        return;
+      }
+      setProfileImage(reader.result);
+      saveProfile({ profileImage: reader.result });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <main className="min-h-screen bg-white">
+      <PageContainer>
+        <h1 className="typo-title-2 text-gray-900">계정 설정</h1>
+
+        <div className="mt-[40px] flex flex-col items-center">
+          <div className="relative inline-flex h-45 w-45">
+            <Profile size="lg" image={profileImage} alt={`${profileSummary.nickname} 프로필`} />
+            <button
+              type="button"
+              onClick={handleProfileClick}
+              className="absolute right-[8px] bottom-[8px] flex h-[40px] w-[40px] items-center justify-center rounded-full border border-[#C7C7CC] bg-white p-[8px]"
+              aria-label="프로필 사진 변경"
+            >
+              <PictureIcon className="h-4.5 w-4.5 text-gray-500" />
+            </button>
+            <input ref={fileInputRef} type="file" accept="image/*" className="sr-only" onChange={handleProfileChange} />
+          </div>
+        </div>
+
+        <section className="mt-12.25">
+          <h2 className="typo-title-2 text-gray-900">내 정보</h2>
+          <div className="mt-[40px] flex flex-col gap-12.25">
+            <button
+              type="button"
+              onClick={() => navigate('/mypage/profile', { viewTransition: true })}
+              className="flex h-11 w-full items-center justify-between px-[10px] py-[10px] text-left"
+            >
+              <span className="typo-body-1 text-gray-900">개인정보 관리</span>
+              <ChevronRightIcon className="h-6 w-5.75 text-gray-900" />
+            </button>
+            <button
+              type="button"
+              className="flex h-11 w-full items-center justify-between px-[10px] py-[10px] text-left"
+            >
+              <span className="typo-body-1 text-gray-900">로그아웃</span>
+              <ChevronRightIcon className="h-6 w-5.75 text-gray-900" />
+            </button>
+          </div>
+        </section>
+      </PageContainer>
+    </main>
+  );
+}