Skip to content

feat: 약속상세 모바일 반응형 UI 개편 (#210) - #216

Merged
haruyam15 merged 7 commits into
developfrom
feat/meeting-detail-mobile-210
Aug 9, 2026
Merged

haruyam15 merged 7 commits into
developfrom
feat/meeting-detail-mobile-210

Conversation

@haruyam15

@haruyam15 haruyam15 commented Aug 8, 2026 •

Copy link
Copy Markdown
Contributor

작업 내용

  • 약속상세 페이지 PC/모바일 컴포넌트 분리 및 액션 로직(useMeetingAction 훅) 통합
  • 약속상세 정보 패널 UI 개편 및 스크롤 시 약속명 상단 고정 기능 추가
  • 약속상세 모바일 반응형 스타일 적용 (탭, 주제 헤더, 빈 주제 리스트, 회고 카드 버튼)
  • 약속 회고 카드에 약속장(host) 여부에 따른 비활성 상태 및 '약속장' 배지 UI 추가
  • useMeetingAction 훅 중복 및 날짜 포맷 중복 로직 제거

Summary by CodeRabbit

  • 새로운 기능

    • 모임 상세 화면을 모바일·PC 환경에 맞게 새롭게 구성했습니다.
    • 도서 정보, 일정, 장소, 참가자, 진행 상태를 한눈에 확인할 수 있습니다.
    • 제안·확정 주제를 탭으로 탐색하고, 주제 목록을 추가로 불러올 수 있습니다.
    • 수정, 참가 신청, 참가 취소 등의 모임 액션을 상황에 따라 이용할 수 있습니다.
    • 모바일 전용 모임 정보 화면과 반응형 요약 카드가 추가되었습니다.
  • 개선

    • 진행 상태 배지, 날짜·시간 표시, 탭과 안내 문구의 일관성을 높였습니다.
    • 모바일 레이아웃과 접근성, 키보드 상호작용을 개선했습니다.

기존 MeetingDetailInfo를 도서 요약 카드(MeetingBookInfo)와
상세 정보 패널(MeetingInfoPanel)로 분리.
헤더 클릭 시 상세 패널 닫기, "더보기" 클릭 시 상세 패널 열기 토글 UI 추가.
약속 수정/참가취소 액션을 MeetingDetailButton에서
MeetingInfoPanel로 이동하여 상세 정보와 함께 노출되도록 개선.
- MeetingDetailButton/MeetingInfoPanel을 PC 전용(MeetingPCActionButton,
  MeetingPCInfoPanel)으로 명확히 분리하고, 모바일 전용 컴포넌트
  (MeetingMobileSummaryCard, MobileMeetingInfoPage)를 추가해 반응형 UI 구성
- 참가/참가취소/수정 이동 등 액션 처리를 useMeetingAction 훅으로 통합해
  PC/모바일 양쪽에서 재사용
- 주제 탭 영역을 MeetingTopicSection으로 분리해 MeetingDetailPage 슬림화
- 약속 진행 상태 뱃지 매핑을 meetingProgressBadge로 분리
- MeetingPCInfoPanel이 자체적으로 useMeetingAction을 호출하던 것을 제거하고,
  상위 MeetingDetailPage의 handleAction/isPending을 props로 전달받아 사용하도록
  변경. showMeetingInfo가 열렸을 때 동일 meeting에 대한 mutation 훅이 두 번
  인스턴스화되던 문제를 해소
- 4개 파일 6곳에 중복되던 'yyyy.MM.dd(eee) HH:mm' 날짜 포맷 로직을
  formatMeetingDateTime 유틸로 추출 (기존 formatDateTime은 연도 2자리라
  현재 UI와 표기가 달라 별도 헬퍼로 분리)
약속 상세 페이지 모바일(lg 미만) 레이아웃에 반응형 스타일 적용
(탭, 주제 헤더, 빈 주제 리스트, 회고 카드 버튼).

약속 회고 카드에 약속장(host) 여부에 따른 비활성 상태와
'약속장' 배지 UI 추가. 약속장이 아닌 멤버는 회고가 작성되기
전까지 약속 회고 카드를 비활성화하여 혼선 방지.
@haruyam15 haruyam15 linked an issue Aug 8, 2026 that may be closed by this pull request
@coderabbitai

coderabbitai Bot commented Aug 8, 2026 •

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@haruyam15, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 45 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 66c48a87-3c22-427a-84cf-8f201991e17d

📥 Commits

Reviewing files that changed from the base of the PR and between 063a8b2 and 325ce21.

📒 Files selected for processing (1)
  • src/pages/Meetings/MeetingCreatePage.tsx

Walkthrough

모임 상세 화면을 모바일·PC 레이아웃으로 재구성했다. 모임 정보, 참가자, 액션, 주제 섹션을 컴포넌트로 분리했다. 모바일 정보 페이지와 라우트를 추가하고, 모임 액션 및 회고 권한 처리를 변경했다.

Changes

모임 상세 화면 개편

Layer / File(s) Summary
모임 상세 UI 구성 요소
src/features/meetings/components/*, src/features/meetings/lib/*
모임 상태 배지와 날짜 포맷 유틸리티를 추가했다. 도서, 참가자, 모바일 요약 카드, PC 정보 패널, 액션 버튼을 추가했다. MeetingDetailHeader는 방향, 정렬, truncate, chevron, 키보드 상호작용을 지원한다.
모임 액션과 상세 라우팅
src/features/meetings/hooks/*, src/pages/Meetings/MeetingDetailPage.tsx, src/pages/Meetings/MobileMeetingInfoPage.tsx, src/routes/index.tsx
useMeetingAction이 수정, 참가, 참가 취소 액션을 처리한다. 상세 페이지는 모바일·PC 정보 UI와 액션 상태를 연결한다. 모바일 정보 경로는 MobileMeetingInfoPage를 렌더링한다.
주제 섹션 조회와 반응형 표시
src/features/meetings/components/MeetingTopicSection.tsx, src/features/topics/components/*, src/shared/ui/Tabs.tsx
제안·확정 주제의 무한 조회, 탭 상태, 오류 재시도, 로딩, 확정 모달을 MeetingTopicSection으로 통합했다. 주제 헤더와 탭의 모바일 레이아웃을 변경했다.
회고 권한과 공통 반응형 지원
src/features/retrospectives/meeting/components/RetrospectiveCardButtons.tsx, src/shared/layout/mobile/*, src/pages/Meetings/MeetingCreatePage.tsx
비호스트의 미생성 회고 액션을 비활성화하고 안내 상태를 표시한다. 모바일 헤더 액션의 사용자 정의 클래스를 지원한다. 모임 생성 오류 메시지의 타이포그래피 클래스를 변경한다.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Member
  participant MeetingDetailPage
  participant MobileMeetingInfoPage
  participant MeetingAPI
  participant MeetingTopicSection
  Member->>MeetingDetailPage: 모임 상세 열기
  MeetingDetailPage->>MeetingTopicSection: 주제 섹션 렌더링
  MeetingTopicSection->>MeetingAPI: 제안·확정 주제 조회
  MeetingAPI-->>MeetingTopicSection: 주제 페이지 반환
  Member->>MeetingDetailPage: 모임 정보 선택
  MeetingDetailPage->>MobileMeetingInfoPage: 모바일 정보 경로 이동
  MobileMeetingInfoPage->>MeetingAPI: 모임 상세와 액션 상태 조회
  MeetingAPI-->>MobileMeetingInfoPage: 모임 정보 반환
Loading

Possibly related issues

Possibly related PRs

Suggested labels: feat, design

Suggested reviewers: choiyoungae, mgyang53

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 약속 상세 페이지의 모바일 반응형 UI 개편이라는 주요 변경 사항을 명확하게 요약합니다.
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.
✨ Finishing Touches 💡 2
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
⚔️ Resolve merge conflicts 💡
  • Resolve merge conflict in branch feat/meeting-detail-mobile-210
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/meeting-detail-mobile-210

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

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

@haruyam15 haruyam15 self-assigned this Aug 8, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/features/topics/components/TopicHeader.tsx (1)

116-119: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

모바일에서 안내 문구가 중복 노출될 수 있습니다.

문제: 이 블록의 문구는 max-lg:hidden이 없습니다. 같은 PR에서 src/features/topics/components/EmptyTopicList.tsx Line 9-11이 모바일 전용으로 "약속장이 주제를 선정하고 있어요"를 추가했습니다.
영향: 확정 탭에서 주제가 없고 미확정이면 모바일 화면에 동일 문구가 두 번 표시됩니다. 또한 이 블록만 다른 설명 문구와 달리 모바일에서 숨겨지지 않습니다.
대안: 두 문구 중 하나만 모바일에 노출하세요.

🎨 제안 diff
-                <p className="text-black typo-subtitle3">약속장이 주제를 선정하고 있어요</p>
-                <p className="typo-body4 text-grey-600">
+                <p className="text-black typo-subtitle3 max-lg:hidden">약속장이 주제를 선정하고 있어요</p>
+                <p className="typo-body4 text-grey-600 max-lg:hidden">
                   주제가 확정되면 사전 의견을 남길 수 있는 창이 열려요
                 </p>
🤖 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/features/topics/components/TopicHeader.tsx` around lines 116 - 119,
Update the 안내 문구 block in TopicHeader so it is hidden on mobile using the
existing responsive class pattern, preventing duplication with the mobile-only
message in EmptyTopicList. Keep it visible on larger screens and preserve the
current desktop text.
🧹 Nitpick comments (9)
src/features/meetings/components/MeetingTopicSection.tsx (1)

82-90: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

탭 전환 시의 강제 refetchProposed()를 재검토해 주세요.

문제: useProposedTopics는 staleTime: 0이므로 마운트·포커스 시점에 이미 재요청합니다. 여기서 추가로 refetch를 호출합니다.
영향: 탭을 오갈 때마다 제안 목록 요청이 중복 발생할 수 있습니다. 확정 탭에는 같은 처리가 없어 동작도 비대칭입니다.
대안: 좋아요 등 변경 반영이 목적이라면 해당 mutation의 invalidateQueries로 옮기세요.

경로 지침의 "invalidate/refetch 타이밍을 중점적으로 봐줘" 항목을 근거로 남깁니다.

🤖 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/features/meetings/components/MeetingTopicSection.tsx` around lines 82 -
90, Remove the tab-change refetch from the Tabs onValueChange handler in
MeetingTopicSection, including the refetchProposed call when selecting PROPOSED.
Rely on the existing useProposedTopics query behavior, and move invalidation to
the relevant like or update mutation if immediate refresh after changes is
required.

Source: Path instructions

src/features/meetings/components/MeetingPCActionButton.tsx (1)

25-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

비활성 안내 문구의 렌더 조건을 좁혀 주세요.

문제: !isEnabled만 검사하므로 type이 EDIT_TIME_EXPIRED/JOIN_TIME_EXPIRED가 아닌 비활성 상태에서는 내용이 없는 <p>가 렌더됩니다.
영향: pt-tiny 만큼 불필요한 여백이 버튼 아래에 생깁니다. 또한 두 문구의 * 접두사 사용이 서로 다릅니다.
대안: 문구를 맵으로 뽑고 값이 있을 때만 렌더하세요.

♻️ 제안 diff
+const EXPIRED_MESSAGE: Partial<Record<MeetingDetailActionStateType, string>> = {
+  EDIT_TIME_EXPIRED: '* 약속 24시간 전까지만 약속 정보를 수정할 수 있어요',
+  JOIN_TIME_EXPIRED: '* 약속 24시간 전까지만 참가 신청 및 취소가 가능해요',
+}
+
 export default function MeetingPCActionButton({
-      {!isEnabled && (
-        <p className="text-grey-700 typo-body6 pt-tiny">
-          {type === 'EDIT_TIME_EXPIRED' && '약속 24시간 전까지만 약속 정보를 수정할 수 있어요'}
-          {type === 'JOIN_TIME_EXPIRED' && '* 약속 24시간 전까지만 참가 신청 및 취소가 가능해요'}
-        </p>
-      )}
+      {!isEnabled && EXPIRED_MESSAGE[type] && (
+        <p className="text-grey-700 typo-body6 pt-tiny">{EXPIRED_MESSAGE[type]}</p>
+      )}
🤖 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/features/meetings/components/MeetingPCActionButton.tsx` around lines 25 -
30, Update MeetingPCActionButton’s disabled-message rendering so the paragraph
is shown only when type maps to a non-empty EDIT_TIME_EXPIRED or
JOIN_TIME_EXPIRED message, rather than for every !isEnabled state. Reuse a
message map or equivalent lookup and keep the two existing Korean messages,
including their current asterisk usage.
src/features/meetings/components/MeetingDetailHeader.tsx (2)

71-84: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

direction="row"에서 chevron prop이 무시됩니다.

문제: chevron은 col 분기에서만 렌더링됩니다. row에서는 값이 조용히 무시됩니다.
영향: 호출부가 direction="row" chevron을 전달하면 아무 표시도 나오지 않습니다. 원인 파악이 어렵습니다.
대안: row 분기에서도 chevron을 렌더링하거나, prop 주석에 "direction="col"에서만 적용" 조건을 명시해주세요.

🤖 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/features/meetings/components/MeetingDetailHeader.tsx` around lines 71 -
84, Update the row branch of the MeetingDetailHeader rendering to honor the
chevron prop and display the same ChevronRight indicator used by the col branch,
while preserving the existing title and badge ordering.

50-69: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

클릭 가능한 헤더를 button 요소로 바꾸는 방안을 검토해주세요.

문제: div에 role="button", tabIndex, onKeyDown을 수동으로 부여했습니다. 내부에는 h3이 있습니다.
영향: 키보드 동작은 직접 구현한 코드에 의존합니다. 스크린리더에서 heading 정보가 버튼 라벨로 병합될 수 있습니다.
대안: onClick이 있을 때만 래퍼를 <button type="button">으로 렌더링하면 onKeyDown 구현을 제거할 수 있습니다. 단, MeetingMobileSummaryCard처럼 이미 <button> 내부에서 사용하는 경우가 있으므로, 그 경로에서는 onClick을 전달하지 않는 현재 방식을 유지해야 중첩 버튼이 생기지 않습니다.

접근성 관련 사항이므로 필수는 아닙니다. 참고용으로만 봐주세요.

🤖 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/features/meetings/components/MeetingDetailHeader.tsx` around lines 50 -
69, Update the clickable wrapper in MeetingDetailHeader to render a button
type="button" when onClick is provided, removing the manual role, tabIndex, and
onKeyDown handling while preserving the existing non-clickable div path. Ensure
consumers such as MeetingMobileSummaryCard continue omitting onClick so nested
buttons are not introduced.

Source: Path instructions

src/features/meetings/components/MeetingBookInfo.tsx (1)

17-23: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

표지 이미지의 object-fill과 중복 그림자를 확인해주세요.

문제 1: object-fill은 원본 종횡비를 무시합니다. 표지 비율이 100x171과 다르면 이미지가 찌그러집니다.
문제 2: 부모에 overflow-hidden이 있습니다. 자식 img의 drop-shadow-xl은 부모 경계에서 잘립니다. 부모의 drop-shadow와도 중복됩니다.
영향: 표지가 왜곡되어 보이고, 의도한 그림자 효과가 나타나지 않습니다.
대안: object-cover로 변경하고, 그림자는 부모에만 적용해주세요.

♻️ 제안 수정
-        <div className="w-[100px] h-[171px] overflow-hidden shrink-0 drop-shadow">
+        <div className="w-[100px] h-[171px] shrink-0 drop-shadow-xl">
           <img
             src={book.thumbnail}
             alt={book.bookName}
-            className="object-fill w-full h-full drop-shadow-xl"
+            className="object-cover w-full h-full rounded-xtiny"
           />
         </div>
🤖 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/features/meetings/components/MeetingBookInfo.tsx` around lines 17 - 23,
Update the book thumbnail markup in MeetingBookInfo to use object-cover instead
of object-fill, preserving the cover’s aspect ratio; remove the redundant
drop-shadow-xl from the img and keep the shadow only on the overflow-hidden
parent container.
src/features/meetings/components/MeetingPCInfoPanel.tsx (2)

47-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

truncate와 shrink-0이 서로 상충합니다.

문제: authors p에 truncate min-w-0 shrink-0을 함께 지정했습니다. shrink-0은 요소 축소를 막습니다.
영향: authors가 길면 잘리지 않고 컨테이너를 넘칩니다. 형제인 bookName이 대신 밀려 잘립니다.
대안: shrink-0을 제거해주세요.

♻️ 제안 수정
               <p
-                className="typo-body6 text-grey-700 truncate min-w-0 shrink-0"
+                className="typo-body6 text-grey-700 truncate min-w-0"
                 title={meeting.book.authors}
               >
🤖 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/features/meetings/components/MeetingPCInfoPanel.tsx` around lines 47 -
52, Remove the shrink-0 class from the authors paragraph in MeetingPCInfoPanel
while preserving truncate and min-w-0, so long author text can shrink and
truncate without forcing sibling bookName content to overflow.

24-37: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

단일 handleAction이 두 가지 액션에 연결된 점을 확인해주세요.

문제: "수정하기"와 "취소하기"가 같은 handleAction을 호출합니다. 실제 동작은 상위에서 만든 useMeetingAction(actionType)의 type이 결정합니다.
영향: 현재는 CAN_EDIT와 CAN_CANCEL이 상호배타적이라 정상 동작합니다. 향후 actionState.type이 확장되면 잘못된 액션이 실행될 수 있습니다.
대안: handleAction 대신 onEdit, onCancel 두 개의 prop으로 분리하면 의도가 코드에 드러납니다. 지금 당장 고칠 필요는 없습니다.

🤖 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/features/meetings/components/MeetingPCInfoPanel.tsx` around lines 24 -
37, Keep the current handleAction wiring unchanged; no immediate code change is
required. If separating the actions, update the component API and its callers to
pass distinct onEdit and onCancel handlers, then connect each button to the
corresponding handler while preserving the existing actionType visibility
conditions.
src/features/meetings/components/MeetingParticipants.tsx (1)

19-19: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

2열 그리드에 가로 간격이 없습니다.

문제: gap-y-small만 지정했습니다. 가로 간격은 0입니다.
영향: 왼쪽 열의 닉네임이 truncate로 잘린 뒤 오른쪽 열 아바타와 맞닿습니다.
대안: gap-x-*를 추가하거나 gap-small로 통일해주세요.

♻️ 제안 수정
-      <div className="grid grid-cols-2 gap-y-small">
+      <div className="grid grid-cols-2 gap-x-small gap-y-small">
🤖 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/features/meetings/components/MeetingParticipants.tsx` at line 19, Update
the grid container’s className in MeetingParticipants to add horizontal spacing
between the two columns, using the existing small gap convention or replacing
the vertical-only gap with the unified small gap utility while preserving the
current two-column layout.
src/pages/Meetings/MobileMeetingInfoPage.tsx (1)

65-77: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

title=" " 사용 의도를 주석으로 남겨주세요.

문제: 공백 문자열을 title로 전달합니다. 의도가 코드에 드러나지 않습니다.
영향: 이후 유지보수자가 실수로 제거하면 상단바 레이아웃이 무너질 수 있습니다.
대안: MeetingDetailPage처럼 "상단바 유지용" 주석을 추가해주세요.

🤖 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/pages/Meetings/MobileMeetingInfoPage.tsx` around lines 65 - 77, In
MobileMeetingInfoPage’s MobileLayoutFrame, add a concise comment explaining that
title=" " is intentionally preserved to maintain the top-bar layout, following
the existing MeetingDetailPage convention.
🤖 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.

Inline comments:
In `@src/features/meetings/components/MeetingPCMoreInfoCard.tsx`:
- Line 20: Update the ul element in MeetingPCMoreInfoCard to use the existing
typo-body3 utility instead of text-body3, and add flex flex-col so gap-tiny
applies between child items.

In `@src/pages/Meetings/MeetingDetailPage.tsx`:
- Around line 38-42: MeetingDetailPage의 shouldOpenInfoPanel 초기화 직후 location
history state에서 openInfoPanel을 제거하거나 교체해 소비 처리하세요. 초기 진입 시 패널을 여는 동작은 유지하되, 이후
뒤로 가기로 돌아와도 동일 플래그가 재사용되지 않도록 합니다.

In `@src/shared/ui/Tabs.tsx`:
- Line 75: Update the TabsTrigger class list to add an explicit
max-lg:data-[state=active]:typo-m-subtitle2 variant alongside the existing
active typography class, ensuring mobile active tabs retain the mobile
typography while preserving desktop behavior.

---

Outside diff comments:
In `@src/features/topics/components/TopicHeader.tsx`:
- Around line 116-119: Update the 안내 문구 block in TopicHeader so it is hidden on
mobile using the existing responsive class pattern, preventing duplication with
the mobile-only message in EmptyTopicList. Keep it visible on larger screens and
preserve the current desktop text.

---

Nitpick comments:
In `@src/features/meetings/components/MeetingBookInfo.tsx`:
- Around line 17-23: Update the book thumbnail markup in MeetingBookInfo to use
object-cover instead of object-fill, preserving the cover’s aspect ratio; remove
the redundant drop-shadow-xl from the img and keep the shadow only on the
overflow-hidden parent container.

In `@src/features/meetings/components/MeetingDetailHeader.tsx`:
- Around line 71-84: Update the row branch of the MeetingDetailHeader rendering
to honor the chevron prop and display the same ChevronRight indicator used by
the col branch, while preserving the existing title and badge ordering.
- Around line 50-69: Update the clickable wrapper in MeetingDetailHeader to
render a button type="button" when onClick is provided, removing the manual
role, tabIndex, and onKeyDown handling while preserving the existing
non-clickable div path. Ensure consumers such as MeetingMobileSummaryCard
continue omitting onClick so nested buttons are not introduced.

In `@src/features/meetings/components/MeetingParticipants.tsx`:
- Line 19: Update the grid container’s className in MeetingParticipants to add
horizontal spacing between the two columns, using the existing small gap
convention or replacing the vertical-only gap with the unified small gap utility
while preserving the current two-column layout.

In `@src/features/meetings/components/MeetingPCActionButton.tsx`:
- Around line 25-30: Update MeetingPCActionButton’s disabled-message rendering
so the paragraph is shown only when type maps to a non-empty EDIT_TIME_EXPIRED
or JOIN_TIME_EXPIRED message, rather than for every !isEnabled state. Reuse a
message map or equivalent lookup and keep the two existing Korean messages,
including their current asterisk usage.

In `@src/features/meetings/components/MeetingPCInfoPanel.tsx`:
- Around line 47-52: Remove the shrink-0 class from the authors paragraph in
MeetingPCInfoPanel while preserving truncate and min-w-0, so long author text
can shrink and truncate without forcing sibling bookName content to overflow.
- Around line 24-37: Keep the current handleAction wiring unchanged; no
immediate code change is required. If separating the actions, update the
component API and its callers to pass distinct onEdit and onCancel handlers,
then connect each button to the corresponding handler while preserving the
existing actionType visibility conditions.

In `@src/features/meetings/components/MeetingTopicSection.tsx`:
- Around line 82-90: Remove the tab-change refetch from the Tabs onValueChange
handler in MeetingTopicSection, including the refetchProposed call when
selecting PROPOSED. Rely on the existing useProposedTopics query behavior, and
move invalidation to the relevant like or update mutation if immediate refresh
after changes is required.

In `@src/pages/Meetings/MobileMeetingInfoPage.tsx`:
- Around line 65-77: In MobileMeetingInfoPage’s MobileLayoutFrame, add a concise
comment explaining that title=" " is intentionally preserved to maintain the
top-bar layout, following the existing MeetingDetailPage convention.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: db85c91c-4ef9-4563-b2a2-2d3d14556756

📥 Commits

Reviewing files that changed from the base of the PR and between 45993af and 3c19669.

⛔ Files ignored due to path filters (1)
  • src/shared/assets/icon/meeting-retro-disabled.svg is excluded by !**/*.svg, !**/*.svg
📒 Files selected for processing (28)
  • src/features/meetings/components/MeetingBookInfo.tsx
  • src/features/meetings/components/MeetingDetailButton.tsx
  • src/features/meetings/components/MeetingDetailHeader.tsx
  • src/features/meetings/components/MeetingDetailInfo.tsx
  • src/features/meetings/components/MeetingInfoIcon.tsx
  • src/features/meetings/components/MeetingMobileSummaryCard.tsx
  • src/features/meetings/components/MeetingPCActionButton.tsx
  • src/features/meetings/components/MeetingPCInfoPanel.tsx
  • src/features/meetings/components/MeetingPCMoreInfoCard.tsx
  • src/features/meetings/components/MeetingParticipants.tsx
  • src/features/meetings/components/MeetingTopicSection.tsx
  • src/features/meetings/components/index.ts
  • src/features/meetings/hooks/index.ts
  • src/features/meetings/hooks/useMeetingAction.ts
  • src/features/meetings/lib/formatMeetingDateTime.ts
  • src/features/meetings/lib/index.ts
  • src/features/meetings/lib/meetingProgressBadge.ts
  • src/features/retrospectives/meeting/components/RetrospectiveCardButtons.tsx
  • src/features/topics/components/EmptyTopicList.tsx
  • src/features/topics/components/TopicHeader.tsx
  • src/pages/Meetings/MeetingDetailInfoPage.tsx
  • src/pages/Meetings/MeetingDetailPage.tsx
  • src/pages/Meetings/MobileMeetingInfoPage.tsx
  • src/pages/Meetings/index.ts
  • src/routes/index.tsx
  • src/shared/layout/mobile/MobileScreenHeader.tsx
  • src/shared/layout/mobile/types.ts
  • src/shared/ui/Tabs.tsx
💤 Files with no reviewable changes (3)
  • src/pages/Meetings/MeetingDetailInfoPage.tsx
  • src/features/meetings/components/MeetingDetailInfo.tsx
  • src/features/meetings/components/MeetingDetailButton.tsx

Comment thread src/features/meetings/components/MeetingPCMoreInfoCard.tsx Outdated
Comment thread src/pages/Meetings/MeetingDetailPage.tsx
Comment thread src/shared/ui/Tabs.tsx Outdated
@haruyam15
haruyam15 merged commit 117573c into develop Aug 9, 2026
2 checks passed
@haruyam15
haruyam15 deleted the feat/meeting-detail-mobile-210 branch August 9, 2026 14:10
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.

[feat] 약속 상세 및 주제조회 모바일 반응형 구현

2 participants