Merge pull request #68 from Leets-Official/67-refactor/컴포넌트-리팩토링

[Refactor] 컴포넌트 리팩토링

Author: KyeongJooni

src/app/routes.ts

@@ -7,9 +7,8 @@ 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('mypage', 'routes/(main)/mypage.tsx'),
+    route('mypage/settings', 'routes/(main)/mypage.settings.tsx'),
+    route('mypage/profile', 'routes/(main)/mypage.profile.tsx'),
   ]),
-  route('playground', 'routes/playground.tsx'),
 ] satisfies RouteConfig;

src/app/routes/mypage-profile.tsx src/app/routes/(main)/mypage.profile.tsxsrc/app/routes/mypage-profile.tsx renamed to src/app/routes/(main)/mypage.profile.tsx

@@ -1,9 +1,9 @@
 export const loginStyles = {
   wrapper: `
-    w-screen h-screen
+    min-w-[111.2vw] min-h-[111.2vh]
     flex items-center justify-center
-    bg-cover bg-no-repeat
-    overflow-x-hidden
+    bg-cover bg-no-repeat bg-center
+    overflow-hidden
   `,
 
   greeting: `

src/app/routes/mypage-settings.tsx src/app/routes/(main)/mypage.settings.tsxsrc/app/routes/mypage-settings.tsx renamed to src/app/routes/(main)/mypage.settings.tsx

@@ -11,7 +11,7 @@ export default function MainPage() {
   const navigate = useNavigate();
 
   return (
-    <main className="flex w-full flex-col items-center gap-14 px-4 pb-24">
+    <main className="flex w-full flex-col items-center gap-[68px] px-4 pb-24">
       <section className="h-79.25 w-full max-w-300" aria-label="메인 슬로건 영역">
         <ClientOnly>
           <Carousel3D slides={CAROUSEL_SLIDES} />

src/app/routes/mypage.tsx src/app/routes/(main)/mypage.tsxsrc/app/routes/mypage.tsx renamed to src/app/routes/(main)/mypage.tsx

@@ -0,0 +1,9 @@
+import { getStatusCount } from './filterTradeItems';
+import type { StatusTabLabels, StatusTabs } from './types';
+import type { TradeListItem } from '@pages/mypage/ui/TradeItemList';
+
+export const createStatusTabs = (items: TradeListItem[], labels: StatusTabLabels): StatusTabs => [
+  { id: 'all', label: '전체', count: getStatusCount(items, 'all') },
+  { id: 'buying', label: labels.buying, count: getStatusCount(items, 'buying') },
+  { id: 'completed', label: labels.completed, count: getStatusCount(items, 'completed') },
+];

src/app/routes/playground.tsx

@@ -0,0 +1,16 @@
+import type { StatusFilter } from './types';
+import type { TradeListItem } from '@pages/mypage/ui/TradeItemList';
+
+export const filterTradeItems = (items: TradeListItem[], status: StatusFilter): TradeListItem[] => {
+  if (status === 'all') {
+    return items;
+  }
+  if (status === 'buying') {
+    return items.filter((item) => item.status === 'buying' || item.status === 'reserved');
+  }
+  return items.filter((item) => item.status === status);
+};
+
+export const getStatusCount = (items: TradeListItem[], status: StatusFilter): number => {
+  return filterTradeItems(items, status).length;
+};

src/pages/login/ui/LoginPage.styles.ts

@@ -0,0 +1,22 @@
+import type { CommonTabItem } from '@pages/mypage/ui/CommonTabs';
+import type { TradeListItem } from '@pages/mypage/ui/TradeItemList';
+
+export type MainTabId = 'buy' | 'sell' | 'favorite';
+
+export type StatusFilter = 'all' | 'buying' | 'completed';
+
+export type FavoriteCategory = 'product' | 'repair';
+
+export type StatusTabLabels = {
+  buying: string;
+  completed: string;
+};
+
+export type CreateStatusTabsParams = {
+  items: TradeListItem[];
+  labels: StatusTabLabels;
+};
+
+export type StatusTabs = Array<CommonTabItem<StatusFilter>>;
+
+export type FavoriteTabs = Array<CommonTabItem<FavoriteCategory>>;