DOCS/journey/troubleshooting/250717_happybell80_프론트엔드분리및admin페이지수정.md

프론트엔드 분리 및 Admin 페이지 수정

날짜: 2025-07-17
작업자: happybell80 & Claude
저장소: frontend-base, frontend-customer

오후 8시 30분

프론트엔드 분리 작업

배경:

• 고객용 프론트엔드와 관리자 대시보드가 하나의 저장소에 혼재
• 독립적인 배포와 관리의 필요성
• 성능 최적화 (번들 크기 감소)

주요 작업:

1. 새 저장소 생성

   • frontend-customer 저장소 생성 (고객용 React 앱)
   • Git URL: https://git.ro-being.com/ivada_Ro-being/frontend-customer.git

2. 파일 이동

   • frontend/client/* → frontend-customer/
   • node_modules 및 대용량 이미지 제외
   • .gitignore, README.md, CLAUDE.md 작성

3. 구조 재편성

   • frontend/backend/admin_static → frontend/admin-ui 이름 변경
   • docker-compose.yml에서 frontend 서비스 제거
   • 관리자 전용 백엔드로 변경

4. Docker 설정

   • frontend-customer: 포트 5173, container_name 추가
   • frontend-base: 포트 8000, container_name 추가
   • 양쪽 모두 appnet 네트워크 사용

결과:

• frontend-customer: 고객용 React 앱 (별도 저장소)
• frontend-base: 관리자 대시보드 백엔드 (기존 저장소)
• 각각 독립적인 배포 가능

오후 9시 00분

Admin 페이지 배포 문제 해결

문제 상황:

• https://ro-being.com/admin 에서 구식 디자인 표시
• 다크모드 토글 없음, 보라색 그라데이션 배경
• 로컬에는 현대적 디자인이 적용되어 있음

원인 분석:

1. main.py에서 여전히 admin_static/index.html 경로 참조
2. 실제 파일은 admin-ui/index.html로 이동됨
3. FileResponse가 파일을 찾지 못해 오류 발생

해결 과정:

1. main.py 수정

   # 변경 전
   return FileResponse("admin_static/index.html")
   
   # 변경 후
   return FileResponse("admin-ui/index.html")
   

2. Git 커밋 및 푸시

   • 커밋: 3a8d62b fix: admin 페이지 경로 수정

오후 10시 00분

폴더명 변경 및 Actions 워크플로우 수정

추가 작업:

1. 폴더명 통일

   • 로컬과 서버 모두 frontend → frontend-base로 변경
   • 프로젝트 일관성 확보

2. Actions 워크플로우 경로 수정

   # 변경 전
   /home/admin/frontend/
   
   # 변경 후
   /home/admin/frontend-base/
   

3. 백업 경로 수정

   • frontend.backup.* → frontend-base.backup.*
   • 롤백 스크립트도 동일하게 수정

기술적 성과:

• 프론트엔드 완전 분리로 관심사 분리
• 번들 크기 최적화 (고객용 앱 경량화)
• 독립적인 배포 파이프라인 구축
• 보안 강화 (관리자 기능 격리)

문제점 및 개선사항:

• Actions 실행 중 경로 오류 발생
• rsync 실패: /home/admin/frontend 디렉토리 없음
• 워크플로우 파일 수정으로 해결

다음 단계:

• 서버에서 변경사항 pull 및 재배포
• admin 페이지 다크모드 적용 확인
• 양쪽 저장소 독립적 운영 시작