[6편] MyPage분리 + 채팅 검색 기능 추가

📘 Aura_AI Day 6 — MyPage 분리 + 채팅 검색 기능 추가

안녕하세요.
오늘은 MyPage 구조 분리와 채팅 검색/세션 관리 UI 강화를 중심으로 정리합니다.
기능 구현보다는 UI 구조 설계와 사용성 개선에 초점을 맞춘 작업이었습니다.

---

1️⃣ 오늘의 핵심 요약

• MyPage를 컨테이너 + 섹션 구조로 분리
• 채팅 Sidebar에 세션 검색 / 핀 / 정렬 UI 추가
• 모달은 기능 단위 분리 구조 유지 (Location / Date / Style)

---

2️⃣ 변경 / 추가된 파일 전체

✅ MyPage 관련 (핵심 변경)

components/mypage/
├─ MyPageContainer.tsx     # Sidebar + Content 레이아웃
├─ MyPageSidebar.tsx       # 메뉴 선택
├─ MyPageContent.tsx       # 메뉴 분기
├─ ProfileSection.tsx      # 프로필 조회/수정 UI + 파일 선택
├─ PasswordSection.tsx     # 비밀번호 변경 UI
└─ AddressSection.tsx      # 주소 추가 / 수정 / 삭제 UI

---

✅ Chat 관련 (검색 / 세션 관리 중심)

components/chat/
├─ ChatContainer.tsx
├─ ChatSidebar.tsx         # 검색 / 핀 / 정렬 UI 추가
├─ ChatHeader.tsx
├─ MessageList.tsx
├─ MessageBubble.tsx
├─ MessageInput.tsx
├─ NewChatButton.tsx
└─ modals/
   ├─ LocationModal.tsx
   ├─ DateModal.tsx
   └─ StyleModal.tsx

---

✅ 페이지 반영

app/(auth)/mypage/page.tsx    # MyPageContainer 적용
app/(auth)/mypage/layout.tsx  # 단순 래퍼 역할로 변경

---

3️⃣ MyPage 구조 분리 이유

✅ 역할 분리 기준

• Sidebar → 메뉴 선택만 담당
• Content → 선택된 메뉴에 따라 화면 분기
• 각 Section → 자신의 기능만 책임

👉 한 컴포넌트가 하나의 역할만 가지도록 설계했습니다.

---

✅ 확장성 고려

• 프로필 / 비밀번호 / 주소는 서로 다른 도메인
• 섹션 단위 분리는 유지보수와 확장에 유리

---

4️⃣ MyPage에 추가된 UI 기능

🔹 프로필 섹션

• 조회 모드 / 편집 모드 분리
• 프로필 이미지 변경 버튼
• 파일 선택창 연결 UI

---

🔹 주소 섹션

• 주소 추가 (클릭 시 새 카드 생성)
• 주소 수정 / 삭제
• 삭제 버튼은 빨간색으로 강조해 UX 명확화

---

5️⃣ Chat UI 개선 포인트 (검색 기능 중심)

✅ 세션 검색 기능

• Sidebar 상단 검색 input
• 대화 제목 기준 필터링

---

✅ 정렬 기능

• 최근순 / 오래된순 / 이름순
• 핀된 세션은 항상 상단 고정

---

✅ 핀 기능

• 대화 카드 우측 별표(★ / ☆)로 고정 여부 표시
• 자주 사용하는 대화 세션을 빠르게 접근 가능

---

6️⃣ 면접 포인트

❓ Q. 왜 MyPage를 이렇게 나눴나요?

A.
프로필, 비밀번호, 주소는 서로 다른 도메인이기 때문에
섹션 단위로 분리하는 것이 실무에서 유지보수에 더 적합하다고 판단했습니다.

---

❓ Q. 채팅 검색 기능을 UI 단계에서 왜 넣었나요?

A.
채팅 서비스는 세션이 많아질수록 검색 기능이 필수이고,
미리 구조를 설계해두면 이후 DB 연동 시 바로 확장할 수 있기 때문입니다.

---

7️⃣ 마무리

오늘은 MyPage 구조 분리 + 채팅 검색 UI 강화가 핵심이었습니다.
기능 구현보다 설계와 구조 안정화를 우선했기 때문에
다음 단계에서 DB 연결이나 인증 로직을 붙이기 쉬운 상태가 되었습니다.

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