Skip to content

README.md

Latest commit

 

History

History
187 lines (123 loc) · 6.65 KB

README.md

File metadata and controls

187 lines (123 loc) · 6.65 KB
Raw

🍽️ URISIK

알레르기 가족 모두가 안전하게,

한 식탁에서 즐겁게 먹을 수 있도록 돕는 맞춤형 식단 관리 서비스

1

🥕 프로젝트 팀원
강민서 이상민 장문경

🥕 개발 환경 세팅 가이드

git clone https://github.com/URISIK/FRONTEND.git 
pnpm install
pnpm run dev

🥕 커밋 컨벤션

각 태그를 이용하여 어떤 내용이 변경되었는지를 나타내는 규칙입니다.

  • [FEAT] : 새로운 기능 추가
  • [DESIGN] : 디자인 수정
  • [REFACTOR] : 리팩토링
  • [BUGFIX] : 버그 에러 수정
  • [MODIFY] : 코드 수정
  • [STYLE] : 코드 포맷
  • [CHORE] : 빌드 수정, 패키지 매니저 설정
  • [RENAME] : 파일 혹은 폴더명 수정
  • [REMOVE] : 파일 혹은 폴더 삭제
  • [MERGE] : Pull 과정 중 현재 commit과 병합이 일어난 경우
  • [BUILD] : 새로운 라이브러리 혹은 패키지 추가
  • [DOCS] : 문서 작성

🥕 브랜치명 정의

브랜치 이름을 지정할 때의 규칙입니다.

  • 영어로 통일, 케밥 케이스로 작성
  • 작성 형식 : 브랜치 유형/브랜치명/#이슈번호
  • 작성 예시
    • feature/login-page/#12
    • docs/README.md/#25

🥕 코드 컨벤션

코드에서 이름을 지정할 때의 케이스 규칙입니다.

  • PascalCase : 컴포넌트 함수, 클래스, 타입, 인터페이스, 컴포넌트 파일
  • camelCase : 변수, 일반함수
  • UPPER_CASE : 상수
  • kebab-case : 파일,폴더 (컴포넌트 파일만 예외로 PascalCase로 설정)

🥕 api 관련 네이밍 규칙

  • api 폴더 내 interface:

    응답-타입명+Response / 매개변수: 타입명+Params

  • 함수: HTTP 메서드 종류+함수명

🥕 Import/order 규칙

  • react가 포함된 import가 가장 최상단에 위치하게 합니다.
  • 알파벳을 기준으로 오름차순으로 정렬됩니다.
  • 그룹사이에 최소 한 줄 이상의 줄 바꿈을 강제합니다.

🥕 Export 규칙

컴포넌트: 하단에 default export

const ProductList = () => {
  return <div>상품 리스트</div>;
};

export default ProductList;

유틸 함수: 각 함수를 named export

export const fetchItems = () => {
  /* ... */
};

export const updateUser = () => {
  /* ... */
};

🥕 기술 스택

Frontend

Styling

State & Data

Date & Utility

DevTools

Package Manager

🥕 기술 / 스택 선정 이유

React Router

  • SPA 환경에서 효율적인 클라이언트 사이드 라우팅 구현
  • Protected Route 등을 활용한 인증 기반 접근 제어 가능

Framer Motion

  • 선언형 애니메이션 라이브러리
  • 부드러운 인터랙션 및 페이지 전환 효과 구현
  • UX 향상을 위한 자연스러운 모션 처리

Swiper

  • 터치 기반 슬라이드 UI 구현에 최적화
  • 모바일 친화적인 인터랙션 지원
  • 온보딩 / 홈페이지 등에 사용

React Spinners

  • 로딩 상태를 직관적으로 표현하기 위한 경량 로딩 컴포넌트

React Hot Toast

  • 사용자 액션에 대한 즉각적인 피드백 제공
  • 전역 에러 처리 및 성공/실패 알림 구현에 적합

Zustand

  • 전역 상태 관리 라이브러리

TanStack Query

  • 서버 상태(Server State) 관리에 특화
  • 캐싱, 재요청, 무한 스크롤, 로딩/에러 상태 자동 관리
  • API 통신 로직과 UI 로직 분리 가능

Axios

  • HTTP 요청/응답 인터셉터를 통한 토큰 처리 및 전역 에러 핸들링 가능
  • REST API 통신에 적합

Immer

  • 불변성을 유지하면서 직관적인 상태 업데이트 가능
  • 복잡한 객체 상태 관리 시 가독성 향상

Zod

  • API 요청/응답 데이터의 런타임 유효성 검증
  • 타입 안정성과 실제 데이터 검증을 동시에 보장

Day.js

  • 가볍고 직관적인 날짜 라이브러리
  • 날짜 포맷팅 및 연산 처리에 사용

React Day Picker

  • 캘린더 UI 구현에 최적화
  • 범위 선택(range) 기능 지원

Intersection Observer

  • 무한 스크롤 구현
  • 성능을 고려한 Lazy Loading 처리 가능

Vite SVGR

  • SVG 파일을 React 컴포넌트처럼 사용 가능
  • 아이콘 재사용성 및 스타일링 편의성 향상