<aside>

도메인 중심 구조로 API, 페이지, 타입을 분리하고

UI, 로직, 라우팅 책임을 명확히 나눈 확장 가능한 프론트엔드 구조

</aside>

React 프로젝트 폴더 구조

📁 .github
📁 .vscode
📁 public
📁 src
 ┣ 📁 apis
 ┣ 📁 assets
 ┣ 📁 components
 ┃ ┣ 📁 Button
 ┃ ┣ 📁 Input       
 ┃ ┗ 📁 ~~~   # ~~~ 도메인 전용 컴포넌트
 ┣ 📁 hooks
 ┣ 📁 layouts
 ┣ 📁 pages
 ┣ 📁 routes
 ┣ 📁 schemas
 ┣ 📁 stores
 ┣ 📁 types
 ┗ 📁 utils
 📄 App.tsx
 📄 index.css
 📄 main.tsx

DeviceLife 폴더 구조

📦 src
 ┣ 📂 apis
 ┃ ┣ 📂 auth
 ┃ ┣ 📂 axios
 ┃ ┣ 📂 combo
 ┃ ┣ 📂 devices
 ┃ ┣ 📂 findCredential
 ┃ ┣ 📂 lifestyle
 ┃ ┣ 📂 mypage
 ┃ ┣ 📂 onboarding
 ┃ ┣ 📂 recentlyViewed
 ┃ ┗ 📂 tag
 ┃
 ┣ 📂 assets
 ┃ ┣ 📂 fonts
 ┃ ┣ 📂 icons
 ┃ ┣ 📂 images
 ┃ ┗ 📂 logos
 ┃
 ┣ 📂 components
 ┃ ┣ 📂 Auth
 ┃ ┣ 📂 Button
 ┃ ┣ 📂 Combination
 ┃ ┣ 📂 DeviceSearch
 ┃ ┣ 📂 Filter
 ┃ ┣ 📂 Home
 ┃ ┣ 📂 Input
 ┃ ┣ 📂 Lifestyle
 ┃ ┣ 📂 ProductCard
 ┃ ┣ 📂 RecentlyViewed
 ┃ ┣ 📂 Setting
 ┃ ┗ 📜 LoadingSpinner.tsx
 ┃
 ┣ 📂 constants
 ┣ 📂 hooks
 ┣ 📂 layouts
 ┃ ┗ 📜 RootLayout.tsx
 ┃
 ┣ 📂 pages
 ┃ ┣ 📂 auth
 ┃ ┣ 📂 combination
 ┃ ┣ 📂 devices
 ┃ ┣ 📂 lifestyle
 ┃ ┣ 📂 my
 ┃ ┣ 📂 onboarding
 ┃ ┣ 📂 support
 ┃ ┣ 📜 HomePage.tsx
 ┃ ┗ 📜 NotFoundPage.tsx
 ┃
 ┣ 📂 routes
 ┃ ┣ 📂 guards
 ┃ ┃ ┣ 📜 AuthGuard.tsx
 ┃ ┃ ┣ 📜 OnboardingCompletedGuard.tsx
 ┃ ┃ ┗ 📜 OnboardingOnlyGuard.tsx
 ┃ ┣ 📜 router.ts
 ┃ ┣ 📜 PublicRoutes.tsx
 ┃ ┣ 📜 PrivateRoutes.tsx
 ┃ ┗ 📜 AppRoutes.tsx
 ┃
 ┣ 📂 schemas
 ┣ 📂 stores
 ┣ 📂 types
 ┣ 📂 utils
 ┃
 ┣ 📜 App.tsx
 ┣ 📜 main.tsx
 ┗ 📜 index.css