Claude-51124 22557e7132 docs: 오래된 트러블슈팅 아카이브 및 구조 정리

- 7-8월 초기 구축 문서 12개를 _archive/troubleshooting/2025_07-08_initial_setup/로 이동
- book/300_architecture/390_human_in_the_loop_intent_learning.md를 journey/research/intent_classification/로 이동 (개발 여정 문서)
- 빈 폴더 제거 (journey/assets/*)

2025-11-17 14:06:05 +09:00

4.7 KiB

Raw Permalink Blame History

IR 프레젠테이션 페이지 구현 및 디자인 시스템 적용

작성일: 2025년 8월 8일
작업자: happybell80 & Claude

오후 3시 00분

IR 프레젠테이션 초기 구현

배경:

서버팀이 /home/admin/DOCS/IR/robeing_IR_presentation.html 준비
20장 슬라이드, 16:9 비율, 세로 스크롤 방식
frontend-customer에 /ir 경로로 배포 요청

초기 작업:

HTML 파일을 public/ir/index.html로 복사
git push로 배포
https://ro-being.com/ir 접속 가능

문제 발견:

울긋불긋한 색상 (보라, 주황, 초록 등)
모든 슬라이드마다 다른 그라디언트 배경
디자인 개선 필요

오후 3시 30분

Magic UI 디자인 개선 시도

MCP 도구 사용 시도:

Magic UI MCP, shadcn MCP 확인
Task 도구로 general-purpose 에이전트 실행
결과: MCP 직접 사용하지 않고 일반 CSS 패턴 적용

개선 내용:

슬라이드별 차별화된 색상 테마
글래스모피즘 효과
키보드 네비게이션 추가
애니메이션 효과

결과:

CSS 요소 분리 필요성 확인
MCP 도구 실제 사용하지 않음

오후 4시 00분

React 컴포넌트로 전환

발견 사항:

frontend-customer는 React + TypeScript + Vite 프로젝트
이미 Magic UI, shadcn/ui 컴포넌트 보유
wouter 라우터 사용 중

React 페이지 구현:

src/pages/ir-presentation.tsx 생성
20개 슬라이드 React 컴포넌트로 변환
Magic UI 컴포넌트 사용:
- ShimmerButton
- RippleButton
- NumberTicker
- AnimatedCircularProgressBar
shadcn/ui 컴포넌트 사용:
- Card, Badge, Button, Progress, Tabs

디자인 원칙 준수:

PPT/PDF 형식
카드 = 슬라이드
20개 모두 16:9 비율 유지
카드 내부만 디자인
깔끔한 디자인

오후 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 라우트가 작동하지 않음

원인 분석:

public/ir/index.html (정적 파일) 우선순위 높음
React SPA 라우팅이 작동 기회 없음
nginx가 /ir 폴더를 먼저 찾음

해결 시도:

public/ir/index.html 삭제 → 404 에러
다시 생성하여 React 앱 로드하도록 수정
빌드 에러 발견 및 수정

오후 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만 찾음

해결 방법 옵션:

nginx 설정 수정 (모든 경로를 index.html로 fallback)
정적 HTML 파일로 유지
해시 라우터 사용

교훈

SPA 배포의 이해 부족
- React 라우팅 ≠ 서버 라우팅
- 정적 배포 시 fallback 설정 필수
- public 폴더 파일이 우선순위 높음
디자인 시스템의 중요성
- 일관된 색상 팔레트 유지
- 너무 많은 색상은 전문성 해침
- 기존 디자인 시스템 준수
MCP 도구 활용
- 컴포넌트는 있지만 제대로 활용 못함
- import 방식 확인 필수
- 빌드 테스트 후 배포
문제 해결 과정
- 증상: 울긋불긋한 디자인
- 원인: 여러 레이어의 문제 중첩
- 해결: 각 레이어별 문제 파악 필요

남은 작업

nginx 설정 수정 또는
정적 HTML로 완전 재구현 또는
다른 라우팅 방식 채택

4.7 KiB Raw Permalink Blame History