# Fantasy-shop

Fantasy-shop 프로젝트의 컨벤션을 정리한 문서입니다.

## Stack

- FrontEnd
  - React, JS+SWC, Vite 를 사용하여 개발환경 세팅
  - Routing : React-router v6 이상
  - style : tailwind + clsx
- BackEnd

## 폴더 구조

본 프로젝트는 MVP 개발과 이후 확장성을 고려하여  Feature-Sliced Design (FSD) 개념을 조합하였습니다.

### 기본 폴더 설명
- `/app`
  - 프로젝트 초기 세팅 파일을 관리합니다.

- `/features`  
   기능 단위로  코드(컴포넌트 등)를 그룹핑합니다. 재사용하는  기본 컴포넌트 를 관리합니다.
  - 예) 유저정보변경 기능: `/features/EditProfile.jsx`
  - 예) 상품 기능: `/features/Product.jsx`
  - 예) 특정 도메인 또는 기능에 관련된 hook `/features/auth/useAuth.jsx

- `/pages`  
   - 라우팅 단위  화면을 구성합니다.  

- `/shared`
  전역적으로 재상용 되는 것들 (예: 범용 hook, API, 버튼, 테마, 헬퍼 함수 등)을 정의합니다.
  - 버튼 : `/ui/Button/

- `/store`  
   스토어 를 관리합니다.

```text
// 프론트 엔드 프로젝트 예시 FSD파일구조
src/
├── app/                       # 앱 초기화 및 전역 설정
│   ├── App.jsx
│   ├── index.jsx
│   ├── router/                # react-router-dom 설정
│   └── config/                # 전역 설정 (.env 등) dotenv
│
├── pages/                     # [전용] 라우팅 기준으로 각각의 페이지 단위 컴포넌트들 (pages 폴더는 라우팅 전용입니다. UI 로직은 features나 shared에서 관리합니다.)
│   ├── HomePage/              # [전용] 랜딩페이지
│   │   ├── ui/                # [전용] 이 페이지에서만 쓰이는 UI 컴포넌트들
│   │   └── model/             # [전용] 이 페이지 전용 상태, hooks 등
│   └── ProfilePage/           # [전용] 프로필 페이지
│
├── features/                  # 사용자 중심의 기능 단위
│   ├── editProfile/           # 프로필 수정 기능 (UI, 상태, API 포함 가능) - 각 기능은 내부적으로 model/, ui/, api/ 구조를 또 가질 수 있습니다.
│   └── likePost/              # 좋아요 기능
│
├── shared/                    # [범용] 컴포넌트, 유틸 등
│   ├── layout/                # [범용] 레이아웃 구성요소 컴포넌트(Header, Footer 등)
│   ├── hooks/                 # [범용] 훅 등
│   ├── api/                   # [범용] axios 인스턴스, 공통 API 설정
│   └── config/                # [범용] 글로벌 상수, 환경 설정
│
├── assets/                    # [범용] 이미지, 아이콘, 폰트, 테일윈드 스타일(CSS)
│
└── store/                     # [범용] 전역상태 관리 (Redux, Zustand, Jotai 등 사용하는 스토어 관련 코드가 들어가는 디렉토리)

// 백엔드 프로젝트 예시
src/main/java/backend
├── domain/
│   ├── user/          
│   │   ├── config/               
│   │   ├── controller/
│   │   ├── dto/
│   │   ├── entity/
│   │   ├── repository/
│   │   ├── security/
│   │   └── service/
│   │
│   ├── item/       
│   │   ├── controller/
│   │   ├── dto/
│   │   ├── entity/
│   │   ├── repository/
│   │   └── service/
│   │
└── global/
    ├── constant/
    └─── exception/

🔍 예제 흐름

예: “프로필 수정”을 HomePage에서 사용
	1.	HomePage에 라우팅되면 pages/HomePage/의 코드 실행
	2.	해당 페이지에서 features/editProfile의 기능을 import해서 사용
	3.	내부적으로 shared/api에 설정된 Axios 인스턴스를 활용해 API 요청
	4.	필요한 상태는 store/에서 가져오거나 자체적으로 model/에서 관리
	

설계 원칙

• 공통은 shared , 기능별은 features 에 위치합니다.
• 컴포넌트는 작은 단위로 만들고 필요한 경우 조합하여 사용합니다.
• API 통신 은 Shard 디렉토리 안에 함께 관리합니다.
• 상태관리 는 Store에 따로 관리합니다.
• Custom Hook 은 전역적 으로 사용되는 것인지, 특정, 기능 에 관련된 것인지 용도에 따라 shared와 features에 관리합니다.

브렌치 컨벤

main
└── dev
     ├── feature/login
     ├── pages/HomePage        # dev에 PR이 끝나면 지우기

커밋 컨벤션

• prefix [feat, fix, refactor, test 등]를 붙여 '한글'로 커밋합니다. feat : 새로운 기능 추가 perf : 성능 개선 fix : 버그 수정 hotfix : 급한 이슈에 대한 버그 수정 refactor : 리팩토링 (기능 변화 없음) chore : 빌드, 설정 등 잡일 (기능 변화 없음) test : 테스트 코드 추가, 수정

  ex) fix : 검색 후 인풋창 리셋 안되는 버그 수정 perf : 무한 휠 화면 화면 로딩 속도 개선 feat : 로그인 기능 추가 refactor : 리펙토링

코드 컨벤션

• 변수명, 함수명은 카멜케이스 사용
• 이름만 읽고 어떤 값을 가지는지, 어떻게 변경되는지, 무엇을 하는지 등을 알 수 있어야 함. ex) isOpen -> isOpenMainList, handleClickButton -> handleClickButtonToSwitchCurrentSensor
• prefix
  • bool: is-, has- // 불리언 변수 or 상태
  • event handler: handle{Event}- // 이벤트 핸들러
  • function() => bool: check- // 불리언 반환 함수

```jsx
- 본 프로젝트에서는 shared에 버튼과 인풋박스를 제외한 공용 컴포넌트를 만들지 않음. 
- 각 페이지마다 개별 컴포넌트를 작성함. 
- 추후 리펙토링 때 컴포넌트를 병합하여 shared에 구조화 할 예정

shared/
├── ui/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styled.ts
│   │   └── index.ts          # export 정리
│   ├── Modal/
│   │   ├── Modal.tsx
│   │   ├── ModalHeader.tsx   # 내부 서브 컴포넌트
│   │   ├── ModalBody.tsx
│   │   ├── ModalFooter.tsx
│   │   └── index.ts
│   └── ...