feat: #276 차록 작성 별점 슬라이더 개선

[FLYLIKEB]

Summary

• Closes feat: 탐색 페이지(/sasaek) UI/UX 리디자인 - 미니멀 & 에디토리얼 방향 #276
• 평점/테이스팅 템플릿 섹션에 AxisStarRow(드래그 슬라이더, 0.25단위) 통합
• 테이스팅 템플릿 + 구체적 평가 섹션을 하나의 카드로 통합, "구체적 평가" 텍스트 제거
• 점수 표기 위치를 별 슬라이드 왼쪽으로 이동 ([축][숫자][별])
• 5점/10점 토글 버튼 상단 좌측에 추가 (10점 선택 시 점수 ×2 표시)
• overallRating 0.5단위 반올림 제약 제거 (0.25단위 그대로 저장)
• 슬라이더 끝 위치 오측 수정 (flex-1 제거, 별 영역 너비 기준 측정)

Test plan

• npm run build
• npm run test:run

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 5점/10점 스케일 선택 기능 추가
  • 드래그 기반 별점 평가 인터페이스로 변경
  • 날짜 선택 팝오버 추가

• 개선 사항

  • 템플릿 선택 후 드롭다운 자동 닫기

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
cha-log	Building	Preview, Comment	Mar 18, 2026 3:39pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6ec0df16-32c6-4c2e-9ae6-173fbc3c2c75

📥 Commits

Reviewing files that changed from the base of the PR and between d611d2c and cf9de6b.

📒 Files selected for processing (6)

• src/components/AxisRatingSection.tsx
• src/components/AxisStarRow.tsx
• src/components/TemplateSelect.tsx
• src/hooks/useNoteForm.ts
• src/pages/BlindNoteWrite.tsx
• src/pages/NewNote.tsx

---

Walkthrough

평점 입력 시스템을 재설계합니다. AxisStarRow를 슬라이더 기반에서 포인터 드래그 방식으로 전환하고, displayMultiplier prop을 도입하여 5점/10점 스케일 토글을 지원합니다. 여러 페이지에서 StarRating을 AxisStarRow로 대체합니다.

Changes

Cohort / File(s)	Summary
별점 입력 컴포넌트 src/components/AxisStarRow.tsx, src/components/AxisRatingSection.tsx	AxisStarRow를 슬라이더에서 포인터 드래그 상호작용으로 변경. 포인터 이벤트 핸들러, valueFromPointer 계산, 0.25 단위 스냅핑 추가. displayMultiplier prop 도입하여 표시값 확대/축소 지원. description prop 제거. AxisRatingSection에 displayMultiplier 전달 및 RatingGuideModal 제거.
평점 시스템 통합 src/pages/BlindNoteWrite.tsx, src/pages/NewNote.tsx, src/components/TemplateSelect.tsx	StarRating을 AxisStarRow로 대체. 5점/10점 스케일 토글 UI 및 상태 추가하여 displayMultiplier 제어. BlindNoteWrite에서 overallRating 필수 조건 제거. NewNote에 Calendar 기반 날짜 선택 UI 도입. TemplateSelect에서 다중 선택 시 드롭다운 자동 종료 로직 추가.
훅 업데이트 src/hooks/useNoteForm.ts	overallRating 초기화 조건을 isSampleMode에서 mode === 'new'로 변경. 새 노트 생성/업데이트 시 overallRating 반올림 제거.

Sequence Diagram

sequenceDiagram
    participant User
    participant Page as BlindNoteWrite/<br/>NewNote
    participant AxisRatingSection
    participant AxisStarRow
    
    User->>Page: 스케일 버튼 클릭 (5점/10점)
    activate Page
    Page->>Page: scale 상태 업데이트
    Page->>AxisRatingSection: displayMultiplier 재전달
    deactivate Page
    
    activate AxisRatingSection
    AxisRatingSection->>AxisStarRow: displayMultiplier 및 값 전달
    deactivate AxisRatingSection
    
    User->>AxisStarRow: 별점 영역 드래그
    activate AxisStarRow
    AxisStarRow->>AxisStarRow: onPointerMove: valueFromPointer 계산
    AxisStarRow->>AxisStarRow: snapToStep으로 0.25 단위 스냅
    AxisStarRow->>AxisStarRow: displayMultiplier로 표시값 계산
    AxisStarRow->>AxisStarRow: onChange 콜백 호출
    deactivate AxisStarRow
    
    AxisStarRow->>Page: 값 업데이트
    activate Page
    Page->>Page: 폼 상태 동기화
    deactivate Page

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

AxisStarRow의 포인터 드래그 상호작용 로직(이벤트 핸들러, 좌표 계산, 스냅핑)이 밀도 높고, displayMultiplier prop 도입으로 인한 계산 경로 변경이 있으며, 여러 페이지의 통합 로직 변경으로 이질적인 수정이 산재되어 있습니다.

Possibly related PRs

• PR #147: AxisStarRow 및 NewNote/TemplateSelect 컴포넌트의 동일 수정과 공개 props 변경이 겹침
• PR #214: AxisStarRow의 값 스냅핑 및 단계 로직 변경이 공통
• PR #89: AxisStarRow, AxisRatingSection, NewNote/BlindNoteWrite 페이지의 평점 표시 및 displayMultiplier prop 조정이 공통

✨ 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/issue-276-search-redesign

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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