프론트 페이지 리팩토링

GPT 5 에게 프롬프트 생성 요청

 " CURSOR에게 요청할 프롬프트를 만들거야 REACT 로 만들어져있는 프로그램인데 한 페이지의 .TSX 코드길이가 너무 길어져서 이걸 나누려고 해 코드를 삭제하기 전에 이유를 설명하고 내 동의 후에 진행시켜줘 "

이 파일은 React + TypeScript (.tsx)로 작성된 페이지입니다.
현재 한 파일의 코드 길이가 너무 길어져서 유지보수가 어렵습니다.

1. 코드를 역할별로 적절히 분리해 주세요.
   - UI 컴포넌트, 훅, 유틸, 상수, 스타일 등을 별도 파일로 나누세요.
   - 파일 분리 시 import/export 구조를 자동으로 맞춰주세요.

2. 불필요한 코드(사용되지 않는 변수, import, console.log 등)는
   제거하기 전에 "이 코드를 삭제해도 되는 이유"를 반드시 설명하고
   내 허락을 받은 뒤 삭제 제안을 해주세요.

3. 리팩터링 후 구조를 명확히 설명해 주세요.
   - 어떤 컴포넌트로 분리했는지
   - 각 컴포넌트가 어떤 역할을 하는지
   - 삭제하거나 변경한 이유를 함께 적어주세요.

4. 코드 스타일은 현재 프로젝트 규칙(ESLint/Prettier)에 맞게 유지해주세요.

 

CURSOR 

 

 

src/
├── types/
│   └── weeklyReports.ts          # 타입 정의들
├── constants/
│   └── weeklyReports.ts          # 상수 및 Mock 데이터
├── utils/
│   └── weeklyReports.ts          # 유틸리티 함수들
├── hooks/
│   ├── useWeeklyReports.ts       # 주간보고서 관련 훅들
│   └── useMeetingMinutes.ts     # 회의록 관련 훅
├── components/
│   ├── weeklyReports/
│   │   ├── MyTasksSummary.tsx           # 내 업무 요약 테이블
│   │   ├── MyPlanTable.tsx              # 내 업무 계획 테이블
│   │   ├── WeeklyReportsTable.tsx       # 주간 보고서 테이블
│   │   ├── MeetingMinutesSection.tsx    # 회의록 섹션
│   │   ├── AddMeetingDialog.tsx         # 회의록 추가 다이얼로그
│   │   ├── AddTaskDialog.tsx            # 업무 추가 다이얼로그
│   │   └── TaskDetailDialog.tsx        # 업무 상세보기 다이얼로그
│   └── WeeklyReportsPage.tsx            # 메인 컴포넌트 (300줄로 축소!)

 

*** 리팩토링 후 서버 돌려봤더니 
import 경로 문제 발생 

 

해결