feat: 프론트엔드 아키텍처 셋업 (#2) #3

seonkyu.kim · 2026-02-26T04:03:03Z

seonkyu.kim commented

2026-02-26 04:03:03 +00:00

📋 작업 요약

React + Vite + TypeScript 기반 프론트엔드 아키텍처 초기 셋업. Feature-based 폴더 구조, 라우터, 레이아웃 컴포넌트, 상태관리, API 계층 등 기반 코드를 구성합니다.

Closes #2

🛠️ 작업 내용 (Changes)

Vite 기본 템플릿 정리 (App.css, react.svg 삭제)
index.html 수정 (lang="ko", Noto Sans KR + Material Symbols 폰트)
index.css 디자인 토큰 적용 (guideline.html 기반 HEX 색상)
타입 정의 (api.ts, user.ts, common.ts)
Zustand 스토어 (authStore, uiStore)
API 계층 (Axios client, auth.api)
Feature 모듈 8개 폴더 구조 + 18개 placeholder 페이지
레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout) - guideline.html 기준
ErrorBoundary 피드백 컴포넌트
라우터 설정 (lazy loading, ProtectedRoute, PublicRoute)
App.tsx (QueryClient + Router + Toaster + ErrorBoundary)
유틸리티 (format.ts, storage.ts)
환경변수 (.env.development, .env.example, vite-env.d.ts)

📢 리뷰어 참고 사항 (To Reviewers)

shadcn/ui 22개 컴포넌트는 기존 설치 상태 그대로 포함
페이지는 모두 placeholder (제목만 표시) 상태이며, 추후 HTML 시안 기반으로 구현 예정
다크모드 미사용 (ThemeProvider로 light 고정)

✅ 체크리스트 (Self Checklist)

npm run build 성공
TypeScript 컴파일 에러 없음
18개 페이지 lazy loading 정상
레이아웃 guideline.html 기준 구현

📸 스크린샷 / 테스트 로그 (Screenshots/Logs)

빌드 성공 확인 완료

## 📋 작업 요약 React + Vite + TypeScript 기반 프론트엔드 아키텍처 초기 셋업. Feature-based 폴더 구조, 라우터, 레이아웃 컴포넌트, 상태관리, API 계층 등 기반 코드를 구성합니다. ## 🔗 관련 이슈 (Related Issues) Closes #2 ## 🛠️ 작업 내용 (Changes) - Vite 기본 템플릿 정리 (App.css, react.svg 삭제) - index.html 수정 (lang="ko", Noto Sans KR + Material Symbols 폰트) - index.css 디자인 토큰 적용 (guideline.html 기반 HEX 색상) - 타입 정의 (api.ts, user.ts, common.ts) - Zustand 스토어 (authStore, uiStore) - API 계층 (Axios client, auth.api) - Feature 모듈 8개 폴더 구조 + 18개 placeholder 페이지 - 레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout) - guideline.html 기준 - ErrorBoundary 피드백 컴포넌트 - 라우터 설정 (lazy loading, ProtectedRoute, PublicRoute) - App.tsx (QueryClient + Router + Toaster + ErrorBoundary) - 유틸리티 (format.ts, storage.ts) - 환경변수 (.env.development, .env.example, vite-env.d.ts) ## 📢 리뷰어 참고 사항 (To Reviewers) - shadcn/ui 22개 컴포넌트는 기존 설치 상태 그대로 포함 - 페이지는 모두 placeholder (제목만 표시) 상태이며, 추후 HTML 시안 기반으로 구현 예정 - 다크모드 미사용 (ThemeProvider로 light 고정) ## ✅ 체크리스트 (Self Checklist) - [x] npm run build 성공 - [x] TypeScript 컴파일 에러 없음 - [x] 18개 페이지 lazy loading 정상 - [x] 레이아웃 guideline.html 기준 구현 ## 📸 스크린샷 / 테스트 로그 (Screenshots/Logs) 빌드 성공 확인 완료

seonkyu.kim added 1 commit 2026-02-26 04:03:04 +00:00

feat: 프론트엔드 아키텍처 셋업 (#2 ) fc9b0c0f75

- Vite 기본 템플릿 정리 및 index.html 수정
- guideline.html 기반 디자인 토큰 적용 (index.css)
- Feature-based 폴더 구조 (8개 feature 모듈)
- 18개 placeholder 페이지 + lazy loading 라우터
- 레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout)
- Zustand 스토어 (authStore, uiStore)
- API 계층 (Axios client, auth.api)
- 타입 정의, 유틸리티, 환경변수 설정
- ErrorBoundary, ProtectedRoute, PublicRoute

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

seonkyu.kim added the

labels 2026-02-26 04:03:14 +00:00

seonkyu.kim self-assigned this 2026-02-26 04:03:18 +00:00

seonkyu.kim added this to the Phase 1 - 프로젝트 초기 설정 milestone 2026-02-26 04:03:22 +00:00

seonkyu.kim merged commit db3a22bb57 into develop

2026-02-26 04:03:54 +00:00