프로젝트 코드 컨벤션

FE를 리딩하며, 여러사람들이 하나의 프로젝트를 진행할때에
비슷한 스타일로 개발되어지지 않으면,
1. 유지보수할때에 전체적인 코드흐름 파악
2. 사이드 이팩트 확인이 어려움.
등의 문제점이 있다는것을 확인할수있었다.

그래서 내가 생각하는 코드 컨벤션을 간단히 정리해보고자 한다.

디렉토리 구조 (FSD Slice 패턴)

• src/
  • components/: 공통 UI 컴포넌트
  • pages/: 도메인별 페이지
    • Main/
      • components, hooks, queries, constants, store, api, types
    • SubMain/ (신규·즐겨찾기·전체·회사·SmartA10·미지정 등)
      • components, hooks, queries, constants, store, api, types
  • common/: 전역 설정·유틸·목데이터·스토리북·테스트 헬퍼·서비스 등

👉 하나의 레포는 하나의 팀, 하나의 커뮤니케이션 구조와 매핑(Conway’s Law)

---

URL 기반 페이지 분기

• pages/SubMain/All → /accounts/all
• pages/SubMain/Favorite → /accounts/favorite
• …
• SubPage 폴더 내 각 서브페이지가 URL과 1:1 매핑

---

컴포넌트 & 타입 파일 명명

• Props 인터페이스: {컴포넌트명}Props

  interface TooltipProps {
    children: React.ReactNode;
    tooltipText: string;
  }
  

• API 파라미터 타입: {api명}ParamType

  interface getAuthIsManagerParamType { … }
  

• 컴포넌트별 타입:
  • 간단한 props → 컴포넌트 폴더 하위 ComponentName.d.ts
  • 복잡·장대 타입 → ComponentName.types.ts

---

API 호출 구조

• pages/Accounts/api/ 폴더:
  • get.ts, post.ts, put.ts
  • index.ts 에서 import * as get from './get'; 등으로 묶어 내보냄
• 호출 함수명: method + endpoint + 기능명

  getCommonPointRemaining()
  postEdocsCertificate()

---

상태 관리 네이밍

• Zustand 핸들러: setSnackbar, setLnbMenu 등 세분화
• 전역 변수: camelCase, 단 공통 키(예: company_no)는 일치시키기
• 변수/함수 분할:
  • 4개 이상 묶는 경우 설명 주석 달기
  • 로직마다 기능에 맞는 메소드로 분리

---

파일·코드 배치 규칙

1. zustand store 값
2. props & store 값 split
3. React Hook + custom Hook
4. useState + useRef
5. useEffect
6. 내부 함수
7. 변환된 JSX 데이터
8. return JSX

const MyComponent = () => {
  // 1. store
  const { foo, setFoo } = useStore();

  // 2. props & split
  const { bar } = props;

  // 3. hooks
  const data = useCustomHook();

  // 4. state & ref
  const [count, setCount] = useState(0);

  // 5. effect
  useEffect(() => { … }, []);

  // 6. function
  const handleClick = () => { … };

  // 7. derived data
  const isValid = useMemo(() => count > 0, [count]);

  // 8. return
  return <div>…</div>;
};

---

커밋 메시지 & CI 훅

• 타입(feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert)
• JIRA 이슈: [SVC2DEV5-4994](feat:)<테스트> package.json 개발
• 소문자 subject: 대문자로 시작 시 lint 에러 발생
• Husky + lint-staged + commitlint 적용