Skip to content

feat(diary): 감정일기 작성 페이지 및 CategoryFilter emotion 모드 추가 - #81

Merged
evenif99 merged 1 commit into
devfrom
feature/diary-create-ui
Jun 20, 2026
Merged

feat(diary): 감정일기 작성 페이지 및 CategoryFilter emotion 모드 추가#81
evenif99 merged 1 commit into
devfrom
feature/diary-create-ui

Conversation

@SG-Develope

@SG-Develope SG-Develope commented Jun 19, 2026

Copy link
Copy Markdown
Contributor
  • diary/create 페이지 UI 구현 (감정 선택, 제목, 내용 입력)
  • CategoryFilter에 emotion mode 추가
  • emotionButton 아이콘 SVG 추가
  • 감정 아이콘 SVG 전면 교체 및 emotion-irritated 삭제

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 일기 작성 페이지 추가: 제목과 내용(최대 1000자) 입력 가능
    • 감정 선택 기능 추가: 일기 작성 시 감정을 카테고리로 선택 가능
  • 스타일

    • 일기 작성 페이지 레이아웃 및 간격 스타일 적용
    • 감정 선택 UI 개선: 이미지 아이콘 지원 추가
  • 기타

    • 내부 타입 정의 정리

@SG-Develope SG-Develope self-assigned this Jun 19, 2026
@vercel

vercel Bot commented Jun 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
talky-owl Ignored Ignored Jun 19, 2026 8:43am

@coderabbitai

coderabbitai Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

CategoryFilter 컴포넌트에 mode: 'emotion' 분기를 추가하고, 감정 아이콘을 next/image로 렌더링하도록 구현합니다. CategoryFilter.module.scssimg 선택자와 선택 상태 밝기 처리를 추가하고, 이를 활용하는 신규 DiaryCreate 페이지와 SCSS 레이아웃 모듈이 추가됩니다.

Changes

일기 작성 페이지 및 CategoryFilter 감정 모드 확장

Layer / File(s) Summary
타입 정리 및 CategoryFilter emotion 계약 추가
src/types/diary.ts, src/components/ui/CategoryFilter.tsx (L3–26)
diary.ts에서 섹션 구분 주석을 제거하고, CategoryFilterProps 유니온에 mode: 'emotion' 케이스를 추가해 valueonChangeEmotionType으로 동작하도록 타입 계약을 확장합니다.
CategoryFilter emotion 렌더링 및 스타일 확장
src/components/ui/CategoryFilter.tsx (L37–78), src/components/ui/CategoryFilter.module.scss
mode === 'emotion'일 때 EMOTIONS 목록을 next/image로 렌더링하는 분기를 구현하고, iconBoximg 선택자 확장 및 선택 상태 brightness(0.25) 필터를 추가합니다. 카테고리 렌더링 변수명도 visibleCategories에서 visibleItems로 변경됩니다.
DiaryCreate 페이지 신규 구현
src/app/(page)/diary/create/page.tsx, src/app/(page)/diary/create/page.module.scss
EMOTIONS 배열 정의 및 emotion/title/content 상태를 관리하는 DiaryCreate 컴포넌트를 추가합니다. CategoryFilter로 감정을 선택하고 Input/Textarea로 제목·내용을 입력받으며 "작성하기" 버튼을 렌더링합니다. BEM 구조 기반의 flex 레이아웃 SCSS도 함께 추가됩니다.

추정 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10 minutes

연관 가능성이 있는 PR

  • I5-Project/TALKY-OWL#38: 이 PR이 확장하는 CategoryFilter 컴포넌트와 카테고리 아이콘 인프라를 구축한 PR입니다.

제안된 리뷰어

  • lyla-bae

시 🐰

🌟 토끼가 일기를 펼쳤어요,
감정 아이콘 하나씩 골라보며,
emotion, title, content 세 가지 마음,
CategoryFilter가 반짝반짝 빛나고,
오늘의 기분을 기록할 준비 완료! ✍️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning PR 설명이 실제 변경사항(diary/create 페이지 UI, CategoryFilter emotion mode, 감정 아이콘 SVG)을 포함하지만, 템플릿의 대부분의 필수 섹션(작업 영역, 관련 Issue, 테스트 결과, 작업 범위 확인 등)이 누락되어 있습니다. 템플릿에 정의된 모든 필수 섹션(특히 담당 작업 영역, 관련 Issue, 테스트 결과, 보안 확인)을 작성하여 PR 설명을 완성하시기 바랍니다.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 주요 변경사항(감정일기 작성 페이지 및 CategoryFilter emotion 모드 추가)을 정확하고 명확하게 요약하고 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/diary-create-ui

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/app/(page)/diary/create/page.tsx (1)

11-20: ⚡ Quick win

감정 메타데이터를 단일 소스로 통합해 주세요.

EMOTIONS가 이 파일과 CategoryFilter에 중복 정의되어 있어, 감정 키/라벨 변경 시 쉽게 불일치가 발생합니다. 공용 상수(예: src/types/diary.ts 또는 별도 constants 파일)로 추출해 두 컴포넌트가 동일한 데이터를 참조하도록 맞추는 편이 안전합니다.

♻️ 예시 리팩터링
-const EMOTIONS: { type: EmotionType; label: string }[] = [
-  { type: 'happy', label: '기쁨' },
-  { type: 'sad', label: '슬픔' },
-  { type: 'neutral', label: '보통' },
-  { type: 'annoyed', label: '짜증' },
-  { type: 'angry', label: '화남' },
-];
+import { EMOTIONS } from '`@/types/diary`';
...
-const [emotion, setEmotion] = useState<EmotionType>(EMOTIONS[1].type);
+const [emotion, setEmotion] = useState<EmotionType>(EMOTIONS[1].key);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(page)/diary/create/page.tsx around lines 11 - 20, Extract the
EMOTIONS constant array from the DiaryCreate function to a shared, centralized
location such as a constants file or types file that can be imported by both
this component and the CategoryFilter component. Remove the duplicate EMOTIONS
definition from the DiaryCreate function and update the useState initialization
to reference the extracted constant from the new shared location. Ensure that
CategoryFilter is also updated to import and use the same centralized EMOTIONS
constant instead of its own duplicate definition.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/app/`(page)/diary/create/page.tsx:
- Around line 11-20: Extract the EMOTIONS constant array from the DiaryCreate
function to a shared, centralized location such as a constants file or types
file that can be imported by both this component and the CategoryFilter
component. Remove the duplicate EMOTIONS definition from the DiaryCreate
function and update the useState initialization to reference the extracted
constant from the new shared location. Ensure that CategoryFilter is also
updated to import and use the same centralized EMOTIONS constant instead of its
own duplicate definition.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 2393f02a-fbff-4db6-a27a-caee91167988

📥 Commits

Reviewing files that changed from the base of the PR and between f644ee5 and 98c775b.

⛔ Files ignored due to path filters (11)
  • public/images/icons/emotionButton/emotion-angry.svg is excluded by !**/*.svg
  • public/images/icons/emotionButton/emotion-annoyed.svg is excluded by !**/*.svg
  • public/images/icons/emotionButton/emotion-happy.svg is excluded by !**/*.svg
  • public/images/icons/emotionButton/emotion-neutral.svg is excluded by !**/*.svg
  • public/images/icons/emotionButton/emotion-sad.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-angry.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-annoyed.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-happy.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-irritated.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-neutral.svg is excluded by !**/*.svg
  • public/images/icons/emotions/emotion-sad.svg is excluded by !**/*.svg
📒 Files selected for processing (5)
  • src/app/(page)/diary/create/page.module.scss
  • src/app/(page)/diary/create/page.tsx
  • src/components/ui/CategoryFilter.module.scss
  • src/components/ui/CategoryFilter.tsx
  • src/types/diary.ts

@evenif99
evenif99 merged commit e412502 into dev Jun 20, 2026
2 of 3 checks passed
@evenif99
evenif99 deleted the feature/diary-create-ui branch June 20, 2026 05:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants