docs: IR 프레젠테이션 구현 트러블슈팅 문서 작성
- React 컴포넌트 전환 과정 - 디자인 시스템 적용 (울긋불긋 → 깔끔) - SPA 라우팅 문제 분석 - 빌드 에러 해결 - 교훈 및 남은 작업 정리
This commit is contained in:
happybell80
parent
0a183d91c3
commit
fa22ebe5a4
176
troubleshooting/250808_happybell80_IR프레젠테이션구현.md
Normal file
176
troubleshooting/250808_happybell80_IR프레젠테이션구현.md
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
# IR 프레젠테이션 페이지 구현 및 디자인 시스템 적용
|
||||||
|
|
||||||
|
작성일: 2025년 8월 8일
|
||||||
|
작업자: happybell80 & Claude
|
||||||
|
|
||||||
|
## 오후 3시 00분
|
||||||
|
|
||||||
|
### IR 프레젠테이션 초기 구현
|
||||||
|
|
||||||
|
**배경**:
|
||||||
|
- 서버팀이 `/home/admin/DOCS/IR/robeing_IR_presentation.html` 준비
|
||||||
|
- 20장 슬라이드, 16:9 비율, 세로 스크롤 방식
|
||||||
|
- frontend-customer에 `/ir` 경로로 배포 요청
|
||||||
|
|
||||||
|
**초기 작업**:
|
||||||
|
1. HTML 파일을 `public/ir/index.html`로 복사
|
||||||
|
2. git push로 배포
|
||||||
|
3. https://ro-being.com/ir 접속 가능
|
||||||
|
|
||||||
|
**문제 발견**:
|
||||||
|
- 디자인이 "너무 구림" - 사용자 피드백
|
||||||
|
- 울긋불긋한 색상 (보라, 주황, 초록 등)
|
||||||
|
- 모든 슬라이드마다 다른 그라디언트 배경
|
||||||
|
|
||||||
|
## 오후 3시 30분
|
||||||
|
|
||||||
|
### Magic UI 디자인 개선 시도
|
||||||
|
|
||||||
|
**MCP 도구 사용 시도**:
|
||||||
|
- Magic UI MCP, shadcn MCP 확인
|
||||||
|
- Task 도구로 general-purpose 에이전트 실행
|
||||||
|
- 결과: MCP 직접 사용하지 않고 일반 CSS 패턴 적용
|
||||||
|
|
||||||
|
**개선 내용**:
|
||||||
|
- 슬라이드별 차별화된 색상 테마
|
||||||
|
- 글래스모피즘 효과
|
||||||
|
- 키보드 네비게이션 추가
|
||||||
|
- 애니메이션 효과
|
||||||
|
|
||||||
|
**사용자 피드백**:
|
||||||
|
- "css 요소들 새 파일로 빼야겠다"
|
||||||
|
- "디자인 mcp 안썼지? 솔직히?"
|
||||||
|
- MCP 실제 사용하지 않았음을 인정
|
||||||
|
|
||||||
|
## 오후 4시 00분
|
||||||
|
|
||||||
|
### React 컴포넌트로 전환
|
||||||
|
|
||||||
|
**발견 사항**:
|
||||||
|
- frontend-customer는 React + TypeScript + Vite 프로젝트
|
||||||
|
- 이미 Magic UI, shadcn/ui 컴포넌트 보유
|
||||||
|
- wouter 라우터 사용 중
|
||||||
|
|
||||||
|
**React 페이지 구현**:
|
||||||
|
1. `src/pages/ir-presentation.tsx` 생성
|
||||||
|
2. 20개 슬라이드 React 컴포넌트로 변환
|
||||||
|
3. Magic UI 컴포넌트 사용:
|
||||||
|
- ShimmerButton
|
||||||
|
- RippleButton
|
||||||
|
- NumberTicker
|
||||||
|
- AnimatedCircularProgressBar
|
||||||
|
4. shadcn/ui 컴포넌트 사용:
|
||||||
|
- Card, Badge, Button, Progress, Tabs
|
||||||
|
|
||||||
|
**디자인 원칙 준수**:
|
||||||
|
1. PPT/PDF 형식
|
||||||
|
2. 카드 = 슬라이드
|
||||||
|
3. 20개 모두 16:9 비율 유지
|
||||||
|
4. 카드 내부만 디자인
|
||||||
|
5. 깔끔한 디자인
|
||||||
|
|
||||||
|
## 오후 4시 30분
|
||||||
|
|
||||||
|
### 색상 시스템 문제
|
||||||
|
|
||||||
|
**사용자 피드백**:
|
||||||
|
- "아오.. 색깔 구려..."
|
||||||
|
- "색깔을 줄이라고.. 뭐야 울긋불긋.."
|
||||||
|
|
||||||
|
**문제 분석**:
|
||||||
|
- 슬라이드마다 다른 색상 (보라, 주황, 초록, 파랑, 틸, 핑크)
|
||||||
|
- 20개 슬라이드가 무지개처럼 계속 색이 바뀜
|
||||||
|
- 프레젠테이션답지 않고 산만함
|
||||||
|
|
||||||
|
**shadcn/ui 디자인 시스템 적용**:
|
||||||
|
- 배경: `bg-slate-950` (일관된 다크)
|
||||||
|
- 카드: `bg-slate-900 border-slate-800`
|
||||||
|
- 주 액센트: `cyan-500`만 사용
|
||||||
|
- 보조: `slate-400/500`
|
||||||
|
- 모든 울긋불긋한 그라디언트 제거
|
||||||
|
|
||||||
|
## 오후 5시 00분
|
||||||
|
|
||||||
|
### SPA 라우팅 문제 발견
|
||||||
|
|
||||||
|
**문제 상황**:
|
||||||
|
- React 컴포넌트 수정했지만 여전히 울긋불긋
|
||||||
|
- `/ir` 접속 시 구버전 HTML 표시
|
||||||
|
- React 라우트가 작동하지 않음
|
||||||
|
|
||||||
|
**원인 분석**:
|
||||||
|
1. public/ir/index.html (정적 파일) 우선순위 높음
|
||||||
|
2. React SPA 라우팅이 작동 기회 없음
|
||||||
|
3. nginx가 /ir 폴더를 먼저 찾음
|
||||||
|
|
||||||
|
**해결 시도**:
|
||||||
|
1. public/ir/index.html 삭제 → 404 에러
|
||||||
|
2. 다시 생성하여 React 앱 로드하도록 수정
|
||||||
|
3. 빌드 에러 발견 및 수정
|
||||||
|
|
||||||
|
## 오후 5시 20분
|
||||||
|
|
||||||
|
### 빌드 에러 해결
|
||||||
|
|
||||||
|
**import 문제**:
|
||||||
|
- MagicUI 컴포넌트들이 named export
|
||||||
|
- 기존: `import ShimmerButton from ...`
|
||||||
|
- 수정: `import { ShimmerButton } from ...`
|
||||||
|
|
||||||
|
**수정한 컴포넌트**:
|
||||||
|
- NumberTicker
|
||||||
|
- ShimmerButton
|
||||||
|
- RippleButton
|
||||||
|
- AnimatedCircularProgressBar
|
||||||
|
|
||||||
|
**빌드 성공**:
|
||||||
|
- dist 폴더 생성 완료
|
||||||
|
- 하지만 dist/ir/index.html이 잘못된 경로 참조
|
||||||
|
|
||||||
|
## 오후 5시 22분
|
||||||
|
|
||||||
|
### 최종 문제
|
||||||
|
|
||||||
|
**현재 상황**:
|
||||||
|
- React 컴포넌트는 제대로 구현됨
|
||||||
|
- 색상 시스템도 깔끔하게 수정됨
|
||||||
|
- 하지만 프로덕션에서 React 라우팅 작동 안 함
|
||||||
|
|
||||||
|
**근본 원인**:
|
||||||
|
- frontend-customer는 정적 빌드 배포 (2025-07-17 전환)
|
||||||
|
- nginx가 dist 폴더 직접 서빙
|
||||||
|
- SPA 라우팅은 nginx fallback 설정 필요
|
||||||
|
- 현재는 /ir 요청 시 dist/ir/index.html만 찾음
|
||||||
|
|
||||||
|
**해결 방법 옵션**:
|
||||||
|
1. nginx 설정 수정 (모든 경로를 index.html로 fallback)
|
||||||
|
2. 정적 HTML 파일로 유지
|
||||||
|
3. 해시 라우터 사용
|
||||||
|
|
||||||
|
## 교훈
|
||||||
|
|
||||||
|
1. **SPA 배포의 이해 부족**
|
||||||
|
- React 라우팅 ≠ 서버 라우팅
|
||||||
|
- 정적 배포 시 fallback 설정 필수
|
||||||
|
- public 폴더 파일이 우선순위 높음
|
||||||
|
|
||||||
|
2. **디자인 시스템의 중요성**
|
||||||
|
- 일관된 색상 팔레트 유지
|
||||||
|
- 너무 많은 색상은 전문성 해침
|
||||||
|
- 기존 디자인 시스템 준수
|
||||||
|
|
||||||
|
3. **MCP 도구 활용**
|
||||||
|
- 컴포넌트는 있지만 제대로 활용 못함
|
||||||
|
- import 방식 확인 필수
|
||||||
|
- 빌드 테스트 후 배포
|
||||||
|
|
||||||
|
4. **문제 해결 과정**
|
||||||
|
- 증상: 울긋불긋한 디자인
|
||||||
|
- 원인: 여러 레이어의 문제 중첩
|
||||||
|
- 해결: 각 레이어별 문제 파악 필요
|
||||||
|
|
||||||
|
## 남은 작업
|
||||||
|
|
||||||
|
- nginx 설정 수정 또는
|
||||||
|
- 정적 HTML로 완전 재구현 또는
|
||||||
|
- 다른 라우팅 방식 채택
|
||||||
Loading…
x
Reference in New Issue
Block a user