From b088915b54def9aeae0164968a2defed0939a110 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Sat, 29 Nov 2025 17:22:43 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20IR=20Deck=20=ED=94=84=EB=A1=A0=ED=8A=B8?= =?UTF-8?q?=EC=97=94=EB=93=9C=20React=20=EA=B5=AC=EC=A1=B0=20=EC=9B=90?= =?UTF-8?q?=EC=B9=99=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../251128_ir_valuation_frontend_setup.md | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/journey/troubleshooting/251128_ir_valuation_frontend_setup.md b/journey/troubleshooting/251128_ir_valuation_frontend_setup.md index 12204e5..d927b41 100644 --- a/journey/troubleshooting/251128_ir_valuation_frontend_setup.md +++ b/journey/troubleshooting/251128_ir_valuation_frontend_setup.md @@ -68,11 +68,36 @@ curl -X POST http://localhost/rb8001/api/ir-deck/evaluate \ - 백엔드 피드백 API 연동 (`/rb8001/api/ir-deck/feedback`). - Sequoia 10가지 기준 실제 평가 로직 구현. +## ChatGPT 스타일 디자인 개선 항목 (2025-11-29) + +### Critical 수정 필요 +1. **헤더 제거** - `ir-valuation.tsx:380-405`: ChatGPT는 헤더 없음 +2. **본문 텍스트 크기** - `index.css:52`: 14px → 16px +3. **입력 박스** - `ir-valuation.tsx:571-584`: 높이 52px → 56-60px, border-radius 증가 +4. **메시지 버블** - `ir-valuation.tsx:459-465`: `rounded-lg` → `rounded-xl/2xl`, 패딩 증가 +5. **사용자 메시지 색상** - `ir-valuation.tsx:463`: `bg-blue-500` → `bg-gray-700/800` + +### High 개선 +6. **행간 설정** - `index.css`: `line-height: 1.6-1.8` +7. **컨텐츠 최대 너비** - `ir-valuation.tsx:410`: `max-w-2xl` (672px) → `max-w-3xl` (768px) +8. **색상 팔레트** - 배경색: `bg-gray-50` → `#F7F7F8` 유사 색상 + --- -## 체크리스트 -- [ ] 핵심만 간결하게 정리 -- [ ] 100줄 이하 확인 (현재 78줄) -- [ ] 교훈 섹션 포함 -- [ ] 관련 파일 링크 포함 -- [ ] Nginx 설정 및 SPA 라우팅 검증 +## React 구조 원칙 리팩토링 (2025-11-29) + +### 변경 사항 +- **API 통신 분리**: `services/irDeckService.ts` - 모든 API 호출 중앙화 +- **비즈니스 로직 분리**: `hooks/useFileUpload.ts`, `hooks/useEvaluation.ts` - 커스텀 훅으로 로직 추출 +- **UI 컴포넌트 분리**: `components/features/FileMessage.tsx` - 파일 메시지 전용 컴포넌트 +- **타입 정의**: `types/message.ts` - Message 인터페이스 확장 (파일 정보 포함) + +### UX 개선 +- 파일 업로드를 채팅 메시지 버블로 표시 (진행률 포함) +- 파일 업로드 후 자동 평가 시작 제거, 사용자 입력 대기 +- 사용자 메시지 전송 시 파일과 함께 평가 시작 + +### 교훈 +- React 구조 원칙 준수: 계층 분리 (UI → Hooks → Services) +- 컴포넌트 단일 책임: 897줄 파일을 기능별로 분리 +- 사용자 제어권: 파일 업로드 후 즉시 평가가 아닌 사용자 확인 후 진행