프로젝트 소개

경매 프론트엔드 앱

이 프로젝트는 React+Typescript를 사용하여 개발된 프론트엔드 애플리케이션입니다.

실행방법

1. git clone으로 프로젝트를 로컬에 설치
2. npm install로 의존성 설치(본 프로젝트는 npm으로 의존성을 관리합니다)
3. npm run dev로 개발자모드로 실행

추가사항

1. stylelint, eslint 익스텐션 설치 권장(이미 기본적인 린터 규칙이 포함 되어있으며 저장시 자동으로 수정됩니다)
2. 린터 규칙 변경시 "npx eslint . --fix" 또는 "npx stylelint "*/.css" --fix" 로 일괄 수정 권장

개발전략 소개

깃 브랜치 전략

Github-Flow

1. 하나의 main 브랜치와 필요에 따라 새 브랜치를 생성한다

   • main 브랜치는 항상 배포 가능한 상태를 유지한다.
   • 새로운 기능이나 버그 수정을 위해 브랜치를 생성한다.

2. 새로운 브랜치는 항상 main 브랜치에서 만든다

   • main 브랜치에서 새 브랜치를 생성하여 작업을 시작한다.
   • 예: git checkout -b feature/유저로그인 main

3. 브랜치 명명 규칙

   • 브랜치 이름은 작업의 목적을 명확히 나타내도록 한다.
   • 예: feature/유저로그인, bugfix/로그인에러

4. Pull Request (PR)

   • 작업이 완료되면 main 브랜치로 Pull Request를 생성한다.
   • PR 생성 시 팀원들에게 리뷰를 요청한다.
   • 코드 리뷰가 완료되고 승인이 되면 main 브랜치에 병합한다.
   • 병합 후에는 해당 브랜치를 삭제한다.

5. 커밋 메시지 규칙

   • 커밋 메시지는 작업 내용을 명확히 설명한다.
   • 예: feat: 사용자 로그인 기능 추가, fix: 로그인 오류 수정

styled-components 전략

1. 공용으로 사용하는 스타일의 경우 styles/commonStyle.ts에 정의한다.

   • 여러 컴포넌트에서 재사용되는 스타일은 commonStyle.ts에 정의하여 관리한다.
   • 예: 버튼, 컨테이너 등 공용 컴포넌트의 스타일

2. 해당 컴포넌트에서만 사용되는 스타일의 경우 해당 tsx, jsx 파일에서 정의한다.

   • 특정 컴포넌트에서만 사용되는 스타일은 해당 컴포넌트 파일 내에 정의하여 관리한다.
   • 예: ItemBids.tsx 파일 내에서만 사용되는 스타일

3. 전역 스타일은 styles/globalStyle.ts에 정의한다.

   • 전역적으로 적용되는 스타일은 globalStyle.ts에 정의하여 관리한다.
   • 예: 기본적인 HTML 요소의 스타일, 폰트 설정 등

4. CSS 변수 명명 규칙

   • 전역 변수는 styles/globalStyle.ts의 :root 지시어에 정의한다.
     • 전역적으로 사용되는 CSS 변수는 :root 지시어 내에 정의하여 관리한다.
     • 예: 색상, 폰트 크기 등
   • 특정 컴포넌트에 종속되는 변수는 해당 컴포넌트에 정의하며 컴포넌트 이름을 병기한다.
     • 특정 컴포넌트에서만 사용되는 CSS 변수는 해당 컴포넌트 파일 내에 정의하고, 변수명에 컴포넌트 이름을 포함시켜 명확히 한다.
     • 예: --paddingless-page-container-gap, --header-bar-height