[FIX] 후기 카드 표시·상호작용 오류 및 후기 수정 사진 추가 불가 수정 - #299
Conversation
폭 계산만 countFittingItems로 떼어 Node 테스트 러너에서 검증한다. ContentCard에 남아 있던 같은 로직 사본을 공용 훅으로 교체했다. 폭을 못 잰 항목이 있으면 계산을 통째로 포기하던 동작도 함께 바뀐다. 이제 그 항목에서 멈추되 앞의 항목은 그대로 세므로, 태그 칩 하나가 안 재져도 나머지가 전부 사라지지 않는다.
길게 누르기를 없애고 탭에 후기 상세를 붙였다. 코스 상세로는 모달의 '코스 보러가기'로 간다. 내 게시물에는 그 버튼이 연결돼 있지 않아 함께 연결했다. 탭 판정은 click에서 한다. pointerup에서 열면 뒤이어 오는 click이 그 자리에 새로 뜬 모달의 버튼에 꽂힌다. 취소는 이동량과 pointercancel로만 보는데, pointerleave는 터치에서 click보다 먼저 날아와 멀쩡한 탭까지 지우기 때문이다.
수정 모달에 없던 안내 문구(placeholder)를 작성 화면과 같게 맞추고, 문구와 300자 제한을 reviewForm 상수로 모았다. 카운터는 상자 안 아래 줄에 둔다. textarea 위에 겹쳐 놓으면 글이 스크롤될 때 그 아래로 지나가 겹쳐 보인다. 테두리를 바깥 상자로 옮겨 글 영역과 카운터 줄을 분리했고, 바깥 높이는 그대로라 화면 간격은 변하지 않는다.
카드는 role=button으로 노출되는데 useCardTap이 pointerdown을 본 클릭만 받아, 스크린리더나 스크립트가 만든 click으로는 열리지 않았다. 포인터 없이 온 detail 0 클릭을 활성화로 처리한다. 입력 상자를 label로 바꿔 여백과 카운터 줄을 눌러도 포커스가 가게 했다. 글자 수 카운터의 aria-live는 뺀다 - 글자마다 다시 읽혀 스크린리더에서는 소음이 된다.
…n-errors # Conflicts: # src/hooks/useVisibleItemCount.ts
develop이 utils/companionIcon.ts를 추가하면서 같은 함수가 저장소에 셋이 됐다. CourseCard와 ContentCard의 사본을 지우고 공용 유틸을 쓰게 한다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (22)
💤 Files with no reviewable changes (4)
📜 Recent review details🧰 Additional context used🧠 Learnings (7)📚 Learning: 2026-07-26T17:09:23.387ZApplied to files:
📚 Learning: 2026-08-03T09:41:11.931ZApplied to files:
📚 Learning: 2026-07-26T17:09:27.685ZApplied to files:
📚 Learning: 2026-07-26T17:09:32.991ZApplied to files:
📚 Learning: 2026-07-26T17:09:40.303ZApplied to files:
📚 Learning: 2026-07-09T14:49:12.548ZApplied to files:
📚 Learning: 2026-07-12T08:12:34.426ZApplied to files:
🔇 Additional comments (20)
📝 WalkthroughWalkthrough후기 카드의 표시 항목 계산을 공통화했다. 롱프레스와 카드 좋아요를 제거하고 클릭 기반 탭 처리를 도입했다. 후기 상세 모달 이동 흐름과 리뷰 입력·수정 UI를 변경했다. Changes후기 카드 표시 계산
카드 탭 및 후기 상세 흐름
리뷰 입력 및 수정 화면
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ReviewCard
participant useCardTap
participant ReviewSection
participant ReviewDetailModal
User->>ReviewCard: 포인터 탭 또는 키보드 활성화
ReviewCard->>useCardTap: 이벤트 전달
useCardTap->>ReviewCard: 유효한 탭 실행
ReviewCard->>ReviewSection: 리뷰 ID 전달
ReviewSection->>ReviewDetailModal: 후기 상세 모달 열기
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |

작업 내용
CourseReviewCard가 메타(당일치기·자동차·친구와)와 태그 칩을 폭 계산 없이 그려 카드 밖으로 잘려 보였습니다. 코스 카드들과 같은 "재서 들어가는 만큼만 그린다" 기준을 적용했습니다.CourseCard·ContentCard·develop의 새 훅까지 세 벌이라useVisibleItemCount하나로 합치고, 폭 계산은 순수 함수로 떼어 테스트를 붙였습니다.getCompanionIcon사본 3개도utils/companionIcon.ts로 정리했습니다.input.value를 비우면 liveFileList가 함께 비워지는데 그 목록을 상태 갱신 함수 안에서 읽고 있었습니다.0/300)를 넣고 스크롤바를 감췄습니다.변경 화면
/홈 후기 ·/recent-review-courses·/my-posts/{yeogido|local}-course/detail/:courseId및 그 하위/reviews확인 방법
체크리스트
스크린샷
참고 사항
tsc -b/eslint ./build/test(210 pass)는 통과했지만, 이 PR의 핵심인 폭 측정과 포인터 이벤트는 자동 검증이 닿지 않습니다. 실기기 확인 후 채우겠습니다.useVisibleItemCount.ts가 충돌했습니다(양쪽에서 같은 경로로 신규 추가). 시그니처·반환이 동일해 이쪽 버전(순수 함수 분리 + 테스트)을 남겼고,EditableCourseCard/EditableContentCard는 수정 없이 동작합니다. 다만 폭을 못 잰 항목이 있을 때 develop 버전은 계산을 포기했는데 이쪽은 그 항목에서 멈추고 앞의 것들은 보여줍니다 — 관리자 화면에서 태그 칩이 로드 순서대로 나타납니다.getCompanionIcon정리는 머지 후 발견한 중복이라 원래 범위 밖입니다. 분리를 원하시면 빼겠습니다./my-posts의 수정 진입은 여전히 깨져 있습니다./users/me/posts응답에 리뷰 이미지가 없어 모달이 0장으로 열리고, 사진을 추가해 저장하면 기존 사진이 지워집니다. 백엔드 대응이 필요해 이 PR에서 다루지 않았습니다.관련 이슈
Closes #298