[Mori] 8일차

📘 Mori 개발일지 보고서 - 2025-07-07

작업개요

금일 작업은 ResultDaily.jsx 를 중심으로, OpenAI GPT 응답을 구조화하여 정확히 UI에 전달/표시되도록 개선하는 데 집중되었음.
감정 분석 결과, 피드백 메시지, 행동 추천 항목이 명확히 구분되어 시각적으로 전달되도록 컴포넌트 리팩토링 및 파싱 로직 개선이 진행됨.

---

🛠 주요 수정 및 구현 사항 (파일별 분석)

1. src/lib/prompts.js

• ✅ 📝 행동 추천: 섹션 추가: GPT가 구조적으로 응답할 수 있도록 명시
• ✅ 피드백 문구를 "한마디"로 명확히 지정하여 응답 혼동 방지
• ✅ 형식이 일관되도록 ⚠️ 출력 형식을 지켜주세요 명시하여 모델 출력 안정성 향상

📌 의도: GPT가 불안정한 문장 출력을 하는 경우가 있어, 구조 고정을 통해 파싱 오류를 줄이기 위함

---

2. src/lib/openai.js

• DAILY_SUMMARY_PROMPT를 시스템 메시지로 전달
• 다음 항목을 정규표현식으로 파싱:
  • 📘 요약 → summary
  • 💬 한마디 → feedback
  • ❤️ 감정 → emotion (텍스트 형태)
  • 📝 행동 추천 → actions[] 리스트로 분리

// 행동 추천 리스트 분리
actions: actionMatch
  ? actionMatch[1]
      .split(/[.,ㆍ•·]/)
      .map((s) => s.trim())
      .filter((s) => s.length > 1)
  : [],

📌 의도: 마침표나 구분 기호가 혼용될 수 있으므로 여러 패턴을 허용함.

---

3. src/pages/DiaryWrite.jsx

• gptResponse.actions를 누락 없이 navigate()에 전달하도록 수정
• navigate("/result-daily", {{ emotions: parsedEmotions, feedback, actions: gptResponse.actions, summary, }});
• 불필요해진 extractRecommendations() 함수 제거

📌 extractRecommendations()는 이전 구조(피드백에서 행동 추출)에선 필요했으나
GPT 응답에 📝 행동 추천:이 명시되면서 구조적으로 불필요해짐

---

4. src/pages/ResultDaily.jsx

• 한마디(💬) 영역에 앱 아이콘 삽입 (logo512.png)
• 행동 추천 타이틀에 🌿 이모지 삽입
• ✅ 아이콘을 리스트로 표현

<ul className="text-sm space-y-1">
  {{actions.map((a, idx) => (
    <li key={{idx}} className="flex items-start gap-2">
      <span className="text-green-500">✅</span>
      <span>{{a}}</span>
    </li>
  ))}}
</ul>

📌 ✅ 아이콘은 사용자의 실행 가능성(체크, 완료)을 시각적으로 암시하기 위함

---

5. src/lib/emotionColors.js

• "스트레스", "만족", "기대감" 등 감정 키워드 추가
• 색상 분류 로직 보강 (fallback category 분류)

📌 의도: GPT가 생성하는 감정 단어의 변형을 흡수하고 시각화 일관성을 확보

---

🐞 트러블슈팅 및 문제 해결

✅ 증상 : 행동 추천이 UI에 표시되지 않음

• 원인: navigate() 시 전달된 actions가 undefined
• 조치: DiaryWrite.jsx에서 actions: gptResponse.actions 명시하여 상태 전달

---

❌ 증상 : 감정 그래프가 뜨지 않음

• 원인: recharts 패키지 설치 누락 → 컴포넌트 로딩 실패
• 조치: npm install recharts 후 문제 해결

---

📌 오늘 사용한 테스트용 일기 예시 -> 결과화면

오늘은 아침부터 기분이 가라앉았다. 회사에서 실수가 있었고, 동료와도 약간의 다툼이 있었다.
그래도 퇴근길에 들른 공원에서 조금은 마음이 안정되었다. 
혼자만의 시간이 참 소중하다는 걸 느낀 하루였다.

앱을 실행시 나타난 화면으로 개발자 로그에서는 내 user_id를 알 수 있음

내용 입력 후 나타나는 이미지 개발자 모드로 데이터 확인 시 제대로 들어가는 것을 확인할 수 있음.

모바일 모드로 본 앱 이미지 추후 조정은 필요할 것으로 보임

---

📊 진행률 및 향후 작업

항목	상태	비고
일간 요약 및 감정 분석	✅	전체 파이프라인 연결 완료
피드백/행동 추천 파싱 및 시각화	✅	구조화 및 스타일링 완료
감정별 색상 반영	✅	fallback 분류 추가 적용
월간 요약 구조 생성	⏳	화면 구조만 완료
기록 저장 및 Supabase 연동	⏳	추후 테스트 필요
전체 QA 및 배포	❌	미실시

→ 총 진행률: 약 80%

---

📅 향후 일정

날짜	작업 항목
7/08	ResultMonthly.jsx 감정 통계 UI
7/09	월간 데이터 연결 및 전환
7/10	요약 및 감정 기록 Supabase 저장
7/11	전체 QA 및 PWA 배포 테스트
7/12	기술 블로그 작성 및 마무리

---