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="/oauth/kakao/callback" element={<KakaoCallback />} />
    <Route path="/diary/:diaryId" element={<DiaryDetail />} />
    <Route path="/setChatting" element={<SettingPage />} />
    <Route path="/chat/:chatId/:character" element={<ChatPage />} />
    <Route path="/writing" element={<WritingPage />} />
    <Route path="/edit/:chatId" element={<EditPage />} />
    <Route path="/comments" element={<Comments />} />
    <Route path="/hashtags" element={<Hashtags />} />
    <Route path="/hashtag/:id" element={<HashtagDetail />} />
    <Route path="/test" element={<Testpage />} />
</Routes>

🎨 스타일 가이드

styled-components 사용

전반적인 구조 원칙

• 최대 너비 제한: 모바일 우선 전략에 따라 max-width: 600px 등의 제한을 주어 중앙 정렬
• 고정 요소 위치: position: fixed를 사용하여 하단 고정 입력창이나 버튼 UI 구성
• 레이아웃 정렬: display: flex와 flex-direction, gap 속성을 사용하여 유연한 배치 지원

타이포그래피

• font-size: 제목은 2rem 이상, 본문은 1rem 내외 사용
• font-family: "Gowun Dodum" 등 사용자 정의 폰트 사용 가능
• font-weight: 제목은 bold, 본문은 normal 또는 500 권장

색상 가이드

• 배경색: #FFF8F8, #FAFAFA, #FEF2F2
• 텍스트 색상: #364B76, #6A7282, #1E2A52
• 강조색 또는 포인트 색: #3B82F6, #9FACBA, #FCE4EC, #E0F7FA 등

컴포넌트 스타일링 예시

• 공통 Wrapper

const Wrapper = styled.div`
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
`;

• 버튼

const Button = styled.button`
  background-color: #fafafa;
  color: #6a7282;
  border: none;
  cursor: pointer;
`;

스크롤 & 마스킹

• 채팅창, 리스트에서 overflow-y: auto 및 스크롤 마스킹 사용
• 크로스브라우징 고려한 스크롤 제거 처리

&::-webkit-scrollbar { display: none; }
scrollbar-width: none;
-ms-overflow-style: none;

접근성 고려

• 버튼은 cursor: pointer 지정 필수
• img에는 alt 속성 추가
• 색상 대비 충분히 고려

폰트: Gowun Dodum

(시스템에 이 폰트가 없을 경우 sans-serif)

⚙️ 개발 환경 세팅법

• 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로 린트/빌드 자동화