코치 폴더 구조 리팩토링 (Feat. cursor ai)

코치코치가 드디어 완성되어 해커톤에서 상을 받게 되었습니다.

대회는 마무리가 되었지만 코드의 품질을 더 높여보고자 클로드 AI를 사용해 리팩토링을 진행하였습니다.

---

🧾 목차

1. 폴더 구조의 문제점

2. 해결 방법

3. 과정에서의 클로드 문제점

---

1. 폴더 구조의 문제점

이전 코치 폴더의 문제점은 다음과 같습니다.

1. 단일/다중 코치로 나눠지지 않았다.

2. 기능별로 나눠지지 않았다.

즉 코치 관련된 모든 파일이 하나의 coach 폴더에 있었습니다.

---

2. 해결 방법

클로드 AI를 이용하여 분리하였을 때 다음과 같이 추천을 받았습니다.

src/components/coach/
├── list/                        # 코치 목록 관련
│   ├── CoachList.tsx           # 코치 목록 컨테이너
│   ├── CoachCard.tsx           # 코치 카드 컴포넌트
│   └── CoachListFilter.tsx     # 필터링 컴포넌트
│
├── detail/                      # 코치 상세 관련
│   ├── CoachDetails.tsx        # 코치 상세 컨테이너
│   ├── Summary.tsx             # 코치 요약 정보
│   ├── MatchButtons.tsx        # 매칭 버튼
│   ├── Introduction.tsx        # 자기소개 섹션
│   └── ActiveCenterMap.tsx     # 활동 센터 지도
│
├── review/                      # 리뷰 관련
│   ├── Review.tsx              # 리뷰 컨테이너
│   ├── ReviewFilter.tsx        # 리뷰 필터
│   ├── ReviewCardList.tsx      # 리뷰 카드 목록
│   ├── ReviewCard.tsx          # 리뷰 카드 컴포넌트
│   └── AddReviewInner.tsx      # 리뷰 작성 폼

---

3. 과정에서의 클로드 문제점

문제 상황

codebase를 퐐용하여 프로젝트의 coach/ 디렉토리 구조를 자동으로 분석하고, 폴더를 세분화하여 정리하는 작업을 진행했다. 작업 도중 새로운 폴더 구조와 파일은 잘 생성되었지만, 기존 파일을 그대로 남겨둔 채 새로운 폴더에 동일한 이름의 파일이 복사되었다. 새로운 파일들은 기존 파일로부터 import하는 방식으로 남아있었으며, 결과적으로 코드 중복 및 관리 복잡도가 증가하는 문제가 발생했다.

 

해결

아쉽지만 자동으로 변경(compose) 해주는 것 대신 채팅을 통해 확인하여 수작업으로 옮기는 것을 선택했다.

비교적 시간은 더 걸릴 수 있으나 안전한 방법이였다.

 

느낀 점

폴더 구조를 자동으로 제안하고 생성하는 기능은 코드 정리와 가독성 측면에서 매우 유용하다. 그러나 아직 claud가 기존 코드의 참조 관계를 관리하는 부분에서 아직 부족하지 않나라는 생각이 들었다.