[Enhancement] function 선언 vs arrow function, export default vs named export 스타일 통일

[seorinn]

배경

프로젝트 전반에 함수 선언 방식과 export 방식이 일관성 없이 혼재하여 코드 스타일 가이드 수립이 필요합니다.

문제 1: function 선언 vs arrow function 혼재

// function 선언 방식
export default function EventHome() { ... }
export default function FilterBar({ ... }) { ... }

// arrow function 방식 (내부 핸들러)
const getPromotionListFunc = async () => { ... }
const handleFilterChange = (key: string, value: any) => { ... }

// 둘이 섞임 (일관성 없음)

문제 2: export default vs named export 혼재

// 컴포넌트: default export
export default function FilterBar() { ... }

// 유틸: named export
export const GET = (url, auth) => { ... }
export const POST = (url, body, auth) => { ... }

// API: named export
export const getPhotographerList = async (body: any) => { ... }

// atoms: named export
export const userState = atom<User>({ ... })

개선 방향

프로젝트 컨벤션 정의 (ESLint로 강제 권장)

컴포넌트: export default function ComponentName() { ... }
훅: export function useHookName() { ... }  // named
유틸/상수: export function/const utilName() { ... }  // named

ESLint 설정 추가

// .eslintrc
{
  "rules": {
    "react/function-component-definition": [
      "error",
      { "namedComponents": "function-declaration" }
    ]
  }
}

명확한 컨벤션이 먼저 팀 내에서 합의되어야 하며, 합의 후 일괄 적용

관련 파일

• src/utils/axios.js
• src/api/ 전체
• src/pages/ 전체
• .eslintrc (신규 또는 수정)