[5편] chat 관련 ui 페이지 추가

 

📘 Aura_AI Day 4 — Chat UI 구조 재설계 & 세션 기반 레이아웃 분리

안녕하세요.
이번 글에서는 Aura_AI 프로젝트에서 Chat UI 구조를 재설계한 이유와
컴포넌트 분리 기준, 그리고 면접에서 설명할 수 있는 핵심 포인트를 정리합니다.

단순히 “파일을 나눴다” 가 아니라
👉 왜 이런 구조를 선택했는지가 이번 글의 핵심입니다.

---

1️⃣ 오늘의 핵심 결론 (요약)

• 채팅 화면은 “세션 관리”와 “입·출력 영역”을 분리해야 확장성이 높아진다
• 모달은 기능 단위로 분리해야 유지보수와 재사용이 쉽다
• Chat 레이아웃은 Sidebar + Header + Body 구조가 가장 안정적이다

---

2️⃣ 최종 Chat UI 구성 파일 구조

components/chat/
├─ ChatContainer.tsx        # Chat 전체 레이아웃 조립
├─ ChatSidebar.tsx          # 대화 세션 리스트 + 새 대화 생성
├─ ChatHeader.tsx           # 현재 세션 메타 정보 표시
├─ MessageList.tsx          # 메시지 리스트
├─ MessageBubble.tsx        # 말풍선 UI
├─ MessageInput.tsx         # 입력창 + 태그 버튼 + 모달 호출
├─ NewChatButton.tsx        # 새 대화 생성 버튼
└─ modals/
   ├─ LocationModal.tsx     # 위치 선택 모달
   ├─ DateModal.tsx         # 날짜 선택 모달 (Calendar 포함)
   └─ StyleModal.tsx        # 스타일 선택 모달

💡 ChatContainer는 모든 UI를 “조립”만 하고,
실제 역할은 각 컴포넌트가 명확히 담당하도록 설계했습니다.

---

3️⃣ 이렇게 나눈 이유 (설계 기준)

✅ 기준 1. UI 역할 기준 분리

컴포넌트역할

ChatContainer	전체 레이아웃 구성
Sidebar	세션 목록 / 새 대화
Header	현재 대화 정보
MessageList / Bubble	메시지 출력
MessageInput	입력 + 버튼 + 모달 제어

👉 한 컴포넌트 = 한 역할 원칙을 지켰습니다.

---

✅ 기준 2. DB 연동 & 확장성 고려

향후 채팅 기록을 DB에 저장할 경우:

• Sidebar → 세션 목록 UI
• Header → 세션 메타 데이터
• MessageList → 세션별 메시지 출력

으로 자연스럽게 연결됩니다.

👉 즉, 지금은 UI지만 나중에는 데이터 흐름까지 고려한 구조입니다.

---

✅ 기준 3. 모달은 기능 단위로 독립

• 위치 / 날짜 / 스타일은 완전히 다른 도메인
• 하나의 모달 파일에 몰아넣으면 수정 시 영향 범위가 커짐
• 기능별 모달 분리 → 재사용 & 유지보수 용이

특히 DateModal은 react-calendar를 사용해
추후 일정 선택 기능으로 확장 가능하도록 설계했습니다.

---

4️⃣ 이번 UI 개선 포인트

• Sidebar에서 새 대화 생성 + 세션 목록 관리
• 세션 제목 수정 / 삭제 메뉴(⋯) UI 추가
• 기존 디자인을 유지하면서 CSS 클래스 기반으로 재현
• 캘린더 모달은 라이브러리 기반으로 분리 구현

---

5️⃣ 면접에서 바로 쓰는 답변 포인트

❓ Q. Chat UI를 이렇게 세분화한 이유는 무엇인가요?

A.
채팅 기록을 세션 단위로 저장할 것을 염두에 두고
UI를 세션(목록) / 메타 정보 / 메시지 영역으로 나눴습니다.
이 구조는 DB 연동 시에도 역할이 명확해 유지보수가 쉽습니다.

---

❓ Q. 모달을 하나로 만들지 않고 나눈 이유는요?

A.
위치, 날짜, 스타일은 각각 다른 기능이기 때문에
분리해야 수정 범위가 줄고 재사용성이 높아집니다.
특히 일정 선택은 추후 다른 기능에서도 활용할 수 있습니다.

---

6️⃣ 마무리

이번 작업은 기능 구현보다 구조 설계에 집중한 날이었습니다.
지금은 UI 단계지만, 이 구조는 DB 연동 · 세션 저장 · 개인화 기능까지
자연스럽게 확장될 수 있는 기반이 됩니다.

다음 단계에서는
👉 인증 & 전역 상태 관리(Zustand) 로 이어질 예정입니다.