♻️ refactor : modal컴포넌트 적용, 컴포넌트추가 등 요구사항 코드변경

Author: soyun-git121

src/App.tsx

@@ -1,48 +1,14 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
-import SplashPage from '@/pages/splash/SplashPage';
-import Signup from '@/pages/signup';
-import Home from '@/pages/home';
-import MyPage from '@/pages/my/MyPage';
-import MySettingPage from '@/pages/my/MySetting';
-import ProfileEdit from '@/pages/my/ProfileEdit';
-import SelectGenre from '@/pages/my/SelectGenre';
-import CinemaChoice from '@/pages/my/CinemaChoice';
-import MyReviewPage from '@/pages/my/MyReview';
-import MyBookmarkPage from '@/pages/my/MyBookmark';
-import OnboardingNicknamePage from '@/pages/onboarding/OnboardingNicknamePage';
-import OnboardingGenrePage from '@/pages/onboarding/OnboardingGenrePage';
-import OnboardingTheaterPage from '@/pages/onboarding/OnboardingTheaterPage';
-import ReviewSearchPage from '@/pages/search/ReviewSearch';
-import ReviewSearchResultPage from '@/pages/search/ReviewSearchResult';
-import MyFeedbackPage from '@/pages/my/MyFeedback';
-
-import { FilterProvider } from '@/contexts/FilterContext';
+import { RouterProvider } from 'react-router-dom';
+import router from '@/routes/route';
+import { Modal } from '@/components'; 
 
 function App() {
+  console.log('App 렌더됨');
   return (
-    <FilterProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<SplashPage />} />
-          <Route path="/login" element={<Signup />} />
-          <Route path="/home" element={<Home />} />
-          <Route path="/my" element={<MyPage />} />
-          <Route path="/my/reviews" element={<MyReviewPage />} />
-          <Route path="/my/bookmarks" element={<MyBookmarkPage />} />
-          <Route path="/my/feedback" element={<MyFeedbackPage />} />
-          <Route path="/my/settings" element={<MySettingPage />} />
-          <Route path="/my/profile-edit" element={<ProfileEdit />} />
-          <Route path="/my/select-genre" element={<SelectGenre />} />
-          <Route path="/my/cinema-choice" element={<CinemaChoice />} />
-          <Route path="/onboarding/nickname" element={<OnboardingNicknamePage />} />
-          <Route path="/onboarding/genre" element={<OnboardingGenrePage />} />
-          <Route path="/onboarding/theater" element={<OnboardingTheaterPage />} />
-          <Route path="/search" element={<ReviewSearchPage />} />
-          <Route path="/search/result" element={<ReviewSearchResultPage />} />
-        </Routes>
-      </BrowserRouter>
-    </FilterProvider>
+    <>
+      <RouterProvider router={router} />
+      <Modal />
+    </>
   );
 }
 

src/TestSearchApp.tsx

@@ -0,0 +1,29 @@
+// 리뷰 데이터의 타입을 정의해두면 자동 완성과 타입 체크에 유리합니다.
+export interface Review {
+  id: number;
+  imageUrl: string;
+  tags: string[];
+  title: string;
+  description: string;
+  likeCount: number;
+}
+
+// export 키워드를 사용해 mockMyReviews 배열을 다른 파일에서 가져다 쓸 수 있도록 합니다.
+export const mockMyReviews: Review[] = [
+  {
+    id: 1,
+    imageUrl: '/placeholder.png', // 나중에 mockImage.ts의 값으로 대체할 수도 있습니다.
+    tags: ['태그', '태그', '태그'],
+    title: '남양주현대아울렛 스페이스원',
+    description: '리뷰 내용 앞줄을 조금 보여주는걸로 어쩌구 저쩌구',
+    likeCount: 24,
+  },
+  {
+    id: 7,
+    imageUrl: '/placeholder.png',
+    tags: ['#태그', '#태그', '#태그'],
+    title: '남양주현대아울렛 스페이스원',
+    description: '리뷰 내용 앞줄을 조금 보여주는걸로 어쩌구 저쩌구',
+    likeCount: 24,
+  },
+];