[회의] 프론트엔드 리팩토링 작업

[rachel490]

@MiJungle 여기다가 써주세용!

[MiJungle]

1. API 구조 정리
   src/client/lib/api 폴더의 API 메서드를 구조화

     src/client/lib/api/
     ├── auth/
     │   ├── auth.api.ts
     │   └── types.ts
     ├── ai/
     │   ├── ai.api.ts
     │   └── types.ts
     └── common/
         ├── httpClient.ts
         └── interceptors.ts

API 메서드 네이밍 컨벤션 통일 (예: get, post, put, delete 접두어 사용)

2. 이미지/에셋 관리
   src/client/assets 폴더 구조화

    src/client/assets/
     ├── images/
     │   ├── icons/
     │   ├── logos/
     │   └── backgrounds/
     ├── fonts/
     └── styles/

3. 공통 UI 컴포넌트 폴더 통일
   현재 컴포넌트 폴더: src/app/common, src/app/components, client/components

src/
├── client/
│   ├── components/
│   │   ├── common/          # 공통 컴포넌트
│   │   │   ├── Button/
│   │   │   ├── Input/
│   │   │   └── ...
│   │   └── layout/          # 레이아웃 컴포넌트
│   ├── theme/               # 테마 설정
│   │   ├── theme.ts
│   │   ├── colors.ts
│   │   └── textStyle.ts
│   └── styles/              # 전역 스타일
└── app/  

4. utils 파일 정리

• formatter
• parser

5. lib/api/apiHandler.ts
   헤더에 Authorization 넣어주는 헬퍼 함수 -> axios 사용 여부 논의 필요
   다른 API는 JWT 헤더에 입력X, 서버사이드에서 호출 중(getAppExperts ...)

[rachel490]

디렉토리 구조

---

• app : route만 관리 (page,layout,error,loading)
• modules :
  • 각 페이지와 1:1 대응되는 폴더 생성
  • 폴더안에 각각의 hook, util, api, component 넣기
• 나머지는 공통되는 폴더들 :
  • assets :
    • public에는 동적인 사이즈 제어가 없는 것들
    • src안에는 동적인 사이즈 제어가 필요한 svg icon 같은 것들 → width / height 제거, color은 선택
  • components
  • utils
  • lib
  • styles

/src
  /app
    /(routes)
      /home
        page.tsx
        layout.tsx
      /dashboard
        page.tsx
        layout.tsx

  /modules
    /auth        //각 페이지에 1:1 대응되는 모듈 시스템 
      hooks.ts
      utils.ts
      api.ts
      LoginForm.tsx
    /user
      hooks.ts
      utils.ts
      api.ts
      UserProfile.tsx
    /product
      hooks.ts
      utils.ts
      api.ts
      ProductCard.tsx

  /components            // 아래는 공통되는 것들을 각각의 폴더로 정의
    Button.tsx
    Input.tsx
    Modal.tsx
    
  /assets               // svg icon들 중 동적인 크기제어가 필요한 경우 

  /hooks
    useMediaQuery.ts
    useToast.ts

  /utils
    formatDate.ts
    getInitials.ts

  /lib
    axios.ts
    auth.ts

  /types
    index.ts

  /styles
    globals.css
    tailwind.config.ts

Type Safe System

---

• zod 활용한 타입 세이프 시스템 정의하고 에러 핸들링
• 적용가능한 지점 : server-data, webstorage (local / session), env, cookie, url

로그인 로직 개선 → 페이지별 권한 설정

---

• 현재 시간이 지나면 토큰 유효기간이 지남 → 401 발생
• refresh 로직이 없어서 401 발생시 localStorage에서 auth 제거 후 로그인 페이지로 리다이렉트 필요
• /ai 아닌 다른 페이지에서도 로그인 로직 돌아가도록 수정 필요

Data Fetching Logic 통일

---

• fetch를 활용할 곳 / tanstack 활용할 곳 구분
• 캐싱 관리 어떻게 할지
• tanstack 활용시 고려할 점 :
  • useSuspenseQuery vs useQuery
  • query key 관리방식

[MiJungle]

논의 결과

1. 이미지 및 에셋 관리 규칙

• 저장 경로: SVG 파일: src/client/assets 경로에 저장, 그 외 이미지 파일: public/assets 경로에 저장
• 동적 사용 이미지: width, height, color 속성 제거 후 추가
• 파일 네이밍 컨벤션 : 소문자 + 스네이크 케이스 사용 (예시) ai_profile.svg

2. 폴더 구조 가이드라인

• 라우트 구조는 깊이를 최소화하여 간결하게 구성하며,
  **기능 단위(phase)**를 기준으로 유지보수가 용이하도록 설계
• 공통 API 관련 코드는 lib/api 폴더에 위치
• React Query 등 재사용 가능한 훅은 hooks 폴더에 정리 (예시) /hooks/useMediaQuery.ts

/src
  /app
    /(routes)
      /home
        page.tsx
        layout.tsx
      /dashboard
        page.tsx
        layout.tsx

  /modules
    /auth        //각 페이지에 1:1 대응되는 모듈 시스템 
      hooks.ts
      utils.ts
      api.ts
      types.ts
      LoginForm.tsx
    /user
      hooks.ts
      utils.ts
      api.ts
      types.ts
      UserProfile.tsx
    /product
      hooks.ts
      utils.ts
      api.ts
      types.ts
      ProductCard.tsx

  /components            // 아래는 공통되는 것들을 각각의 폴더로 정의
    Button.tsx
    Input.tsx
    Modal.tsx
    
  /assets               // svg icon들 중 동적인 크기제어가 필요한 경우 

  /hooks
    useMediaQuery.ts
    useToast.ts

  /utils
    formatDate.ts
    getInitials.ts

  /lib/api
    axios.ts
    

  /types
    index.ts

  /styles
    globals.css
    tailwind.config.ts

3. 로그인쪽 토큰 인증 문제 (미정)

토큰 만료될때 401 뜨는데, 401 대응 로직이 없다
auth 초기화하고 로그인 리다이렉트
믹스패널 데이터 집계 안된다

4. utils

• module 단위로 작업
• 공통되게 사용되는 메서드 위주로 작성, 파일명 더 직관적이게 (예시) date.ts
• 인증 필요한 페이지, API 구분 안되어있음

5. 캐싱 관리 어떻게 할지
   fetch를 활용할 곳 / tanstack 활용할 곳 구분
   tanstack 활용시 고려할 점 :
   useSuspenseQuery vs useQuery
   query key 관리방식

6. Type Safe System
   zod > schema 활용한 타입 세이프 시스템 정의하고 에러 핸들링
   적용가능한 지점 : server-data, webstorage (local / session), env, cookie, url