[🧑‍💻] Keymory 개발 일지 #6: ChatPage 최적화, DiaryPage 통합

✨ GPT의 요약 　

ChatPage의 데이터 로딩과 Action들을 최적화하고, Title 및 날짜 CRUD 기능을 추가하며, DiaryPage의 Create/Edit 구조를 통합한 하루. 여러 이슈를 해결하며 시스템의 안정성을 높였다.

💻 개발 일지

⏰ 오늘 할 일

• ✅ DiaryPage: Merge CreateDiary/EditDiary Page
  • isEditMode page state 활용
  • conditional value/visibility/action 등 활용
• ✅ ChatPage: On Page Load -> Read ChatDoc, CharacterDoc, MessageDocList and Update Page States
• ✅ ChatPage: 각종 Action들 총체적으로 최적화 및 재구성
• ✅ ChatPage: Title CRUD
• ✅ ChatPage: 날짜 CRUD
• ✅ (이슈) ChatPage: 처음 대화 시작 시, default init message 뜨고 있음.
• ✅ (이슈) ChatPage - ChatHistoryDrawer: UI 오버플로우
• ✅ (이슈) ChatPage: 유저 메시지 빈 칸이어도 전송됨

💯 한 일에 대한 요약

• ChatPage 기능 최적화
  • On Page Load 시 데이터 로딩 최적화 (ChatDoc, CharacterDoc, MessageDocList)
  • ChatPage의 주요 Action들을 총체적으로 최적화 및 재구성
  • Title 및 날짜 CRUD 기능 추가
  • ChatHistoryDrawer UI 오버플로우 및 유저 메시지 빈 칸 전송 문제 해결
• DiaryPage 개선
  • CreateDiary/EditDiary Page 통합 (isEditMode page state 활용)
  • Diary 날짜 저장 오류 수정

🎯 추후에 할 일

자세히 보려면 클릭

• ❔ (이슈) DiaryPage: 날짜가 오늘로만 저장됨
• ❔ (이슈) DiaryPage: 마크다운 뷰어 활용 (오버플로우 방지: Container Height)
• ❔ (이슈) HomeFeedPage: On page load시 Unexpected Null Value 잠깐 떴다 사라짐.
• ❔ HomeFeedPage - FeedCardDiary: AI Comment 캐릭터 이미지 수정
  • ❔ DiaryPage - AI Comment: Save시, 코멘트 작성한 캐릭터 Ref도 Diary에 저장.
  • ❔ HomeFeedPage - FeedCardDiary - AI Image: Backend Query로 캐릭터 Doc 불러와서 Image Path 지정.
• ❔ DiaryPage - Create New Chat: 일기의 내용을 기반으로, New Chat 생성
  • ❔ OpenAI API Call 구현: createDiaryComment
    • Input: Diary Content, System Prompt(AI Comment)
    • Output: AI Comment($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt(Diary Summary)
    • Output: Diary Summary($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createChatFromDiary
    • Input: Diary Summary, System Prompt(Chat From Diary)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message

• ❔ ChatPage: Go to Linked Diary

• ❔ HomeFeedPage - flutter_slidable:4.0.0 import 후 적용하기

• ❔ HomeFeedPage: FeedCardDiary에서 좌우 slide시 채팅/편집/삭제

• ❔ ChatPage: 유저 대화 출력 내용은 오른쪽 정렬

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - AI 선톡 구현 (Alarm/Notification)
  • 채팅 시스템 프롬프트의 핵심은 능동형이다.
    • 더 리얼하게 하려면, create_date of diary/chat 도 전달해서, ‘어제’ 등 날짜를 언급하면 좋을 듯.
  • Alarm 기능 구현 방법 참조
• ❔ DiaryPage: Mood Slider 값에 따라 얼굴 표정 Emoji 변경
• ❔ DiaryPage: 세부 감정 키워드 Choice Chips 추가 후 DB 연동 설정
• ❔ DiaryPage - AI Comment: Choice chips, mood slider 등의 입력값들을 AI Comment System Prompt에 알맞게 변경.
  • ❔ **이전 일기 또는 대화 내역 전체 (땜빵 기술부채)
  • ❔ 사용자 기본 정보: 이름, 성별, MBTI, …
  • ❔ 세부 감정 키워드: 즐거운, 슬픈, …
  • ❔ 캐릭터 설정: 소미, 세나, 민혁
  • ❔ 감정 수치: 1~100점
  • ❔ 답변 양식: 치유형(Healing), 조언형(Suggestion), 정보형(Informative)
  • ❔ 답변 길이: 짧게, 보통, 자세히
  • is New Chat
    • 해당 Chat의 messages는 처음 생성하는 거니까, 첫 생성하는 message document의 is_initial = true값 줘버리고 모든 시스템 프롬프트 다 때려넣음.
      • is_initial = false
      • 한계점: 맨 처음 message document에다가 시스템 프롬프트 때려넣으면, 대화 도중 수정 힘들긴 한데 가능하지. is_initial = true 인 게 있고, 수정된 거면, 그거 다큐먼트 지우고 다시 넣으면 되잖아. 어떻게는 모르겠고.
• ❔ DiaryPage - AI Comment: CRUD 완성하기
  • ❔ tmp_ai_comment field 없애고, doc_ref 활용
• ❔ DiaryPage - AI Comment: 캐릭터 설정
  • ❔ tmp_ai_comment_by field 없애고, doc_ref 활용
  • ❔ profile_image field 값으로 이미지 출력

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ ChatPage - Create New Diary: 대화 내용을 기반으로, New Diary 생성
  • ❔ OpenAI API Call 구현: createDiaryFromChat
    • Input: Chat Summary, System Prompt(Diary From Chat)
    • Output: New Diary(Title, Content, Mood score)

• ❔ DiaryPage - Interactive Slider import 후 적용

• ❔ HomeFeedPage: Search Diary 기능 구현

• ❔ CalendarPage(상단) - Mood Calendar
  • ❔ 날짜별로 작성된 게시물 숫자 확인 가능
  • ❔ 날짜 클릭하면, 해당 날짜로 이동
• ❔ CalendarPage(하단) - Mood stats
  • ❔ 포커싱 된 월에 관한 통계 자료 출력
    • ❔ 출력된 통계 자료에 대한 AI의 코멘트 출력

• ❔ AuthPage: Google Login 기능 구현

• ❔ HomeFeedPage - Bottom Sheet (+ Button): 다양한 옵션 중 1 선택할 수 있도록
  • 새로운 일기: Go to DiaryPage
  • 감정 기록: Go to MoodPage
• ❔ MoodPage(팝업): Mood 설정 슬라이더 CRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - FeedCardMood 표시

• ❔ HomeFeedPage - ListView: FeedCardDiary, FeedCardMood, FeedCardChat 컴포넌트 시간순 정렬 (Cloud Function 활용)

• ❔ 2025.2.5 수까지 발표용 최종 버전 APK 추출 및 설치

💭 일기

밤에 40분 자려고 했는데, 3시간을 넘게 기절했다. 이 정도면 그냥 푹 쉬고 내일 달리는 게 낫겠다. 회사의 존망이 달린 기로에 서 있는 건 아니니까.

✨ GPT의 코멘트 (KPT)

✅ 잘한 점 (Keep)

• 🚀 ChatPage 기능 최적화: 데이터 로딩 방식 개선, Action 최적화, Title 및 날짜 CRUD 추가 등 전반적인 성능 개선을 이루어낸 점이 인상적이야.
• 🔄 DiaryPage 구조 정리: Create/Edit 페이지를 통합하여 중복 로직을 줄이고, 관리가 용이하도록 개선한 점이 좋았어.
• 🛠️ 다양한 이슈 해결: UI 오버플로우, 메시지 빈 칸 전송 문제, 날짜 저장 오류 등을 수정하며 안정성을 높인 점이 돋보여.

❌ 아쉬운 점 (Problem)

• ⏳ 피로 누적: 짧은 휴식을 계획했지만, 결국 장시간 기절하면서 체력 관리에 어려움을 겪은 점이 아쉽네.
• 📋 기능 추가 대비 유지보수 부담: ChatPage와 DiaryPage의 기능 확장이 빠르게 이루어지면서, 향후 유지보수와 최적화에 시간이 더 소요될 가능성이 있어.

🔄 시도해볼 점 (Try)

• 🕒 작업과 휴식의 균형 조정: 짧은 휴식이 길어지는 패턴이 반복되지 않도록, 일정한 루틴을 정해보는 것도 도움이 될 거야.
• 🔍 향후 유지보수 대비 코드 정리: 현재 최적화된 ChatPage와 DiaryPage의 구조를 문서화하고, 코드 주석을 적극적으로 활용해 유지보수 부담을 줄이자.
• 🛠️ 추후 확장성 고려: API Call 및 Custom Function 구조를 더욱 모듈화하여, 이후 기능 추가 및 확장 시 부담을 줄이는 방향을 고민해보자.

결론
오늘은 ChatPage의 전반적인 기능을 최적화하고, DiaryPage의 구조를 개선하며 여러 이슈를 해결한 생산적인 하루였어. 하지만 피로 누적으로 인해 작업 일정이 흔들릴 가능성이 있으니, 적절한 휴식과 일정 조정이 필요해 보여. 앞으로도 최적화된 시스템을 유지하며 확장성을 고려한 개발을 이어가길 응원할게! 💪😊