frontend‐guide

🛠️ 프론트엔드 가이드 & 배포

✍️ 코딩 컨벤션

• Prettier

  • 세미콜론: 사용
  • 따옴표: '
  • 탭 너비: 2
  • 줄바꿈: LF

• ESLint

  • eslint, eslint-plugin-react-hooks, eslint-plugin-react-refresh
  • typescript-eslint 포함

• 네이밍 규칙

  • 컴포넌트/페이지: PascalCase
  • 변수/함수: camelCase
  • 폴더: kebab-case

🌐 라우팅 구조

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/login" element={<LoginPage />} />
  <Route path="/chat" element={<ChatPage />} />
</Routes>

🎨 스타일 가이드

• styled-components 사용
• 예시 테마:

  export const theme = {
    colors: {
      primary: '#3B82F6',
      background: '#F9FAFB',
      text: '#111827',
    },
    fontSize: {
      sm: '14px',
      base: '16px',
      lg: '20px',
    },
  };

• 폰트: Pretendard, Noto Sans

⚙️ 개발 환경 세팅법

• Node.js v18 이상 권장
• Vite + SWC 사용
• 실행 방법:

  git clone https://github.com/OpenKetchupSource/Web.git
  cd Web
  npm install
  npm run dev

🚀 배포 방법

• Netlify + _redirects SPA 라우팅 대응
• GitHub Actions로 린트/빌드 자동화