SSCC 공식 웹사이트 프론트엔드 레포지토리입니다.
모바일 퍼스트 기반의 PWA 웹앱으로, React + TypeScript + Tailwind CSS를 사용합니다.
• Framework: React 19
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router
• Data Fetching: React Query, Axios
• Lint / Format: ESLint, Prettier
• PWA: vite-plugin-pwa
• Package Manager: npm
• Node.js: 20 LTS
src/
• app/
앱 전역 설정 (router, queryClient 등)
• pages/
페이지 단위 컴포넌트 (URL 기준)
• features/
기능 단위 비즈니스 로직 (API, hooks 등)
• shared/
공통 레이아웃, UI 컴포넌트, 유틸
• assets/
이미지, 아이콘 등 정적 리소스
• styles/
글로벌 스타일 (Tailwind entry)
본 프로젝트는 Tailwind CSS theme 기반의 역할(Role) 중심 컬러 토큰을 사용합니다.
색상 값 자체가 아닌, UI에서의 의미와 용도를 기준으로 정의하여 유지보수성과 확장성을 높입니다.
⚠️ 모든 색상을 토큰으로 만들지 않습니다.
여러 화면에서 반복 사용되며 역할이 명확한 색상만 theme에 정의합니다.
컬러 테마 및 디자인 토큰은 아래 파일에서 관리됩니다.
tailwind.config.tstheme.extend.colors: text, bg, border, point 등 컬러 토큰
실제 컴포넌트에서는 직접 색상 값을 사용하지 않고,
반드시 위 theme에 정의된 토큰을 Tailwind 클래스 형태로 사용합니다.
1. Node 버전 맞추기 $ nvm use
2. 환경 변수 파일 생성 $ cp .env.example .env
3. 패키지 설치 $ npm install
4. 개발 서버 실행 $ npm run dev
5. 브라우저 접속 $ http://localhost:5173
• pages/*/index.tsx 파일은 반드시 export default
• shared/layout 컴포넌트는 named export 사용
• 라우팅은 src/app/router.tsx에서만 관리
• 공통 설정(app/, shared/) 수정 시 팀원 공유 필수
• .env, node_modules는 커밋 금지
• 본 레포지토리를 fork 후 작업
• base branch: v1
• 작업 브랜치 생성 후 개발
• feat/* : 기능 개발
• chore/* : 설정, 환경 작업
• fix/* : 버그 수정
• 작업 완료 후 PR 생성
• 리뷰 후 merge
npm run dev # 개발 서버 실행
npm run build # 프로덕션 빌드
npm run preview # 빌드 결과 미리보기
npm run lint # ESLint 검사
npm run format # Prettier 포맷
• 모바일 화면 기준으로 개발합니다.
• 공통 UI 컴포넌트는 shared/ui에만 추가합니다.
• 프로젝트 초기 세팅은 chore/project-setup 브랜치에서 진행되었습니다.
nvm use
cp .env.example .env
npm install
npm run dev