⚙️ [기능추가][레이아웃][UI] 전체적인 기본 레이아웃 및 UI 틀 구현 필요

[Cassiiopeia]

📝 현재 문제점

• 모든 UI가 현재 없습니다

🛠️ 해결 방안 / 제안 기능

• flow에 따른 기본적인 UI를 구현해야합니다
• Daisy5 ui, 테일윈드, jinja2를 사용하여 구현합니다

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: 이름
• 디자인: 이름

[github-actions]

Chuseok22 Issue Helper

브랜치명

20260102_#9_전체적인_기본_레이아웃_및_UI_틀_구현_필요

커밋 메시지

전체적인_기본_레이아웃_및_UI_틀_구현_필요 : feat : {변경 사항에 대한 설명} https://github.com/Team-Romi/romi-chatbot/issues/9

[Cassiiopeia]

기본 레이아웃 및 UI 틀 구현

📌 작업 개요

ROMI 챗봇의 기본 UI 레이아웃 구현. DaisyUI 5 + Tailwind CSS + Jinja2 템플릿 기반으로 메인 페이지, 챗봇 페이지, 레포 설정 페이지 UI 틀 완성.

관련 이슈: #9 - [기능추가][레이아웃][UI] 전체적인 기본 레이아웃 및 UI 틀 구현 필요

---

🎯 구현 목표

• FastAPI에 Jinja2 템플릿 엔진 및 정적 파일 서빙 설정
• DaisyUI 5 + Tailwind CSS 기반 UI 구현
• 다크/라이트 테마 전환 기능
• 설계 문서 기반 3개 페이지 UI 틀 구현

---

✅ 구현 내용

1. FastAPI 설정 추가

main.py - 템플릿 및 정적 파일 설정

• 파일: app/main.py
• 변경 내용:
  • StaticFiles 마운트 추가 (/static 경로)
  • 페이지 라우터 (pages.router) include
• 이유: Jinja2 템플릿과 정적 파일(CSS, JS)을 서빙하기 위한 설정

2. 페이지 라우터 구현

pages.py - URL 라우팅 및 목업 데이터

• 파일: app/views/pages.py
• 변경 내용:
  • Jinja2Templates 설정
  • 3개 페이지 라우터 구현:
    • GET / → 메인 페이지 (레포 목록)
    • GET /{owner}/{repo} → 챗봇 페이지
    • GET /{owner}/{repo}/settings → 레포 설정 페이지
  • 목업 데이터 (MOCK_REPOS, MOCK_CHAT_MESSAGES) 하드코딩
• 이유: 백엔드 API 구현 전 UI 테스트를 위한 목업 데이터 제공

3. 템플릿 구현

base.html - 기본 레이아웃

• 파일: templates/base.html
• 변경 내용:
  • DaisyUI 5 + Tailwind CSS CDN 연결
  • 다크/라이트 테마 전환 버튼 (우측 상단 고정)
  • localStorage 기반 테마 저장/복원
  • 콘텐츠 블록 ({% block content %})
• 이유: 모든 페이지에서 공통으로 사용하는 레이아웃 및 테마 기능

index.html - 메인 페이지

• 파일: templates/index.html
• 변경 내용:
  • 타이틀 ("ROMI - GitHub 지식 베이스")
  • 연결된 레포지토리 카드 목록
  • 새 레포지토리 추가 폼 (disabled 상태)
• 이유: 설계 문서의 메인 페이지 와이어프레임 구현

chat.html - 챗봇 페이지 (신규)

• 파일: templates/chat.html
• 변경 내용:
  • 상단 네비게이션 (목록으로, 레포명, 설정 버튼)
  • DaisyUI chat 컴포넌트 기반 채팅 UI
  • 봇/사용자 메시지 구분 (chat-start, chat-end)
  • 입력창 + 전송 버튼 (disabled 상태)
• 이유: 설계 문서의 챗봇 페이지 와이어프레임 구현

repo_settings.html - 레포 설정 페이지 (신규)

• 파일: templates/repo_settings.html
• 변경 내용:
  • 상단 네비게이션 (챗봇으로 돌아가기)
  • 동기화 상태 카드 (상태, 이슈 수, 마지막 동기화)
  • 동기화 버튼들 (disabled 상태)
  • 위험 구역 (레포 연결 해제 버튼)
• 이유: 설계 문서의 레포 설정 페이지 와이어프레임 구현

---

🔧 주요 변경사항 상세

URL 구조

URL	페이지	설명
/	index.html	레포 목록 + 새 레포 추가
/{owner}/{repo}	chat.html	해당 레포 챗봇
/{owner}/{repo}/settings	repo_settings.html	레포 설정

목업 데이터

MOCK_REPOS = [
  {"owner": "Team-Romi", "name": "romi-chatbot", "issue_count": 150, ...},
  {"owner": "Team-Romi", "name": "frontend", "issue_count": 45, ...},
]

테마 전환 기능

• data-theme 속성으로 DaisyUI 테마 제어
• localStorage에 테마 저장하여 새로고침 시 유지
• 해/달 아이콘 swap 애니메이션

특이사항:

• 모든 입력 필드와 버튼은 disabled 상태 (백엔드 구현 후 활성화 예정)
• Header/Footer 없이 심플하게 구현

---

📦 의존성 변경

CDN으로 추가 (requirements.txt 변경 없음):

• DaisyUI 5: https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css
• Tailwind CSS: https://cdn.tailwindcss.com

---

🧪 테스트 및 검증

uvicorn app.main:app --reload

확인 URL:

• http://localhost:8000/ → 메인 페이지
• http://localhost:8000/Team-Romi/romi-chatbot → 챗봇 페이지
• http://localhost:8000/Team-Romi/romi-chatbot/settings → 설정 페이지

테마 전환:

• 우측 상단 해/달 아이콘 클릭하여 다크/라이트 모드 전환
• 새로고침 후에도 테마 유지 확인

---

📌 참고사항

• 백엔드 API 구현 후 disabled 상태의 버튼/입력창 활성화 필요
• /settings (전체 설정 페이지)는 이번 구현에서 제외 (추후 구현 예정)
• 반응형 레이아웃 지원 (모바일/데스크탑)

---

문서 버전: 1.0
작성일: 2026-01-02
작성자: Claude Code Assistant