[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정 #82

claudia99503 · 2025-12-05T00:11:17Z

📝 변경 사항

TabNavigation 컴포넌트 추가

쿼리 파라미터 기반 탭 네비게이션 컴포넌트 구현
2개 또는 3개 탭 지원
basePath, paramName 커스터마이징 가능
테스트 및 Storybook 작성 완료

Button 컴포넌트 확장

xs 사이즈 추가 (h-10, 40px, radius: 12px)
leave variant 추가 (모임 탈퇴 버튼용)
chat variant 추가 (채팅 입장 버튼용)

Card 컴포넌트 확장

leaveAndChatActions prop 추가 (조건부 버튼 렌더링)
모임 탈퇴 및 채팅 입장 버튼 추가

스케줄러 페이지 구현

쿼리 파라미터 기반 탭 전환 (/schedule?tab=current)
Route Groups (components)로 탭별 컴포넌트 분리
- current.tsx - 현재 모임
- my.tsx - 나의 모임
- history.tsx - 모임 이력

🔗 관련 이슈

Closes #67

🧪 테스트 방법

수동 테스트 검증(로컬 환경)
- /schedule, /schedule?tab=current, /schedule?tab=my, /schedule?tab=history 접근 확인
- 탭 클릭 시 쿼리 파라미터 변경 및 컨텐츠 전환 확인
유닛 테스트 검증
- pnpm test tab-navigation --coverage
- TabNavigation 쿼리 파라미터 기반 테스트
통합 테스트 검증
- pnpm storybook → Shared/TabNavigation
- 2개/3개 탭, 각 활성화 상태 확인

📸 스크린샷 (선택)

📋 체크리스트

관련 문서를 업데이트했습니다 (필요한 경우)
테스트를 추가/수정했습니다 (필요한 경우)
Breaking change가 있다면 명시했습니다

💬 추가 코멘트

TabNavigation 사용법 (cc. @wooktori )

기본 사용:

import { TabNavigation } from '@/components/shared';

const tabs = [
  { label: '탭1', value: 'tab1' },
  { label: '탭2', value: 'tab2' },
];

<TabNavigation basePath='/your-page' tabs={tabs} />

페이지 구현:

'use client';

import { useSearchParams } from 'next/navigation';

export default function YourPage() {
  const searchParams = useSearchParams();
  const tab = searchParams.get('tab') || 'tab1';  // 디폴트

  return (
    <>
      <TabNavigation basePath='/your-page' tabs={tabs} />
      {tab === 'tab1' && <Tab1Component />}
      {tab === 'tab2' && <Tab2Component />}
    </>
  );
}

URL 예시:

/schedule → 현재 모임 (디폴트)
/schedule?tab=my → 나의 모임
/schedule?tab=history → 모임 이력

참고

쿼리 파라미터로 탭 상태 관리
2개 또는 3개 탭 지원
paramName 커스터마이징 가능 (기본: 'tab')

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

coderabbitai · 2025-12-05T00:11:23Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch minseo-feat/schedule-card

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

github-actions · 2025-12-05T00:11:27Z

🎨 Storybook Report

✨ Story가 변경되었습니다

Chromatic에서 비주얼 변경사항을 확인하세요.

Status	Storybook	Build Log	Updated (UTC)
✅ Ready	View Storybook	View Build	2025-12-05 07:32:41

github-actions · 2025-12-05T00:11:32Z

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-05 07:31:34

📈 #82을 main에 병합하면 coverage가 3.67% 증가합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main      #82       +/-   ##
===========================================
+ Coverage   33.18%   36.85%    +3.67%     
===========================================
  Files          80       80         0     
  Lines        2429     2491       +62     
  Branches      162      158        -4     
===========================================
+ Hits          806      918      +112     
- Misses       1623     1573       -50

영향받은 파일

파일	Coverage 변화
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/shared/card/index.tsx`	`95.97% (-4.03%)` ⬇️
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/index.ts`	`100.00% (+100.00%)` ⬆️
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/hint/index.tsx`	`41.17% (+41.17%)` ⬆️
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/input/index.tsx`	`58.00% (+58.00%)` ⬆️
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/label/index.tsx`	`36.84% (+36.84%)` ⬆️

github-actions · 2025-12-05T00:11:34Z

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-05 07:32:51

HopeFullee

굿또 자부 나이수 자부 스바라시 자부

HopeFullee · 2025-12-05T00:30:09Z

src/components/shared/card/card-participation-row/index.tsx

 }: CardParticipationRowProps) => {
  return (
-    <div className='mt-[14px] flex items-center'>
+    <div className='mt-3 flex h-[18px] items-center'>


위 훈수

Suggested change

<div className='mt-3 flex h-[18px] items-center'>

<div className='mt-3 flex h-4.5 items-center'>

아래 훈수

HopeFullee · 2025-12-05T00:34:50Z

src/components/shared/card/index.tsx

          <CardTags tags={cardTags} />

-          <div className='mt-3 flex flex-col gap-1'>
+          <div className='mt-[13px] flex flex-col gap-1'>


훈수

Suggested change

<div className='mt-[13px] flex flex-col gap-1'>

<div className='mt-3.25 flex flex-col gap-1'>

wooktori · 2025-12-05T01:30:00Z

src/components/shared/tab-navigation/index.tsx

탭이 스크롤을 내려도 화면 상단에 고정되도록 하면 어떨까요?
팔로워가 많아져서 스크롤을 내리다가 채팅 탭으로 전환하고 싶을 때 다시 스크롤을 올려야 하는 불편함이 있을 것 같아 말씀드립니다!

오 알려주셔서 감사합니다 ~~

claudia99503 added 3 commits December 5, 2025 00:06

fix: TabNavigation을 query param 방식으로 변경하고 basePath 옵션 추가

697540e

feat: Button 컴포넌트에 새로운 variant(leave, chat)와 size(xs) 추가

e89b454

fix: 페이지 구조를 쿼리 파라미터 기반으로 변경

fffaf69

claudia99503 self-assigned this Dec 5, 2025

claudia99503 added the Ready For Review! 리뷰 받을 준비가 되었습니다. label Dec 5, 2025

claudia99503 added this to FrontEnd_Sprint_Planning Dec 5, 2025

github-project-automation bot moved this to Todo in FrontEnd_Sprint_Planning Dec 5, 2025

github-actions bot requested a review from HopeFullee December 5, 2025 00:11

claudia99503 closed this Dec 5, 2025

github-project-automation bot moved this from Todo to Done in FrontEnd_Sprint_Planning Dec 5, 2025

claudia99503 reopened this Dec 5, 2025

HopeFullee approved these changes Dec 5, 2025

View reviewed changes

Merge branch 'main' into minseo-feat/schedule-card

c66b3cc

wooktori reviewed Dec 5, 2025

View reviewed changes

claudia99503 added 6 commits December 5, 2025 11:32

Merge branch 'main' into minseo-feat/schedule-card

4a784f4

Merge branch 'main' into minseo-feat/schedule-card

d6ce633

fix: 탭 네비게이션에 sticky 속성 추가

2bb5893

Merge branch 'main' into minseo-feat/schedule-card

b65cb29

Merge branch 'main' into minseo-feat/schedule-card

1cda394

fix: 카드 컴포넌트 onClick 테스트 수정

1afb256

claudia99503 merged commit a6993ac into main Dec 5, 2025
5 of 6 checks passed

claudia99503 deleted the minseo-feat/schedule-card branch December 5, 2025 07:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정 #82

[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정 #82

Uh oh!

claudia99503 commented Dec 5, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 5, 2025

Review skipped

Uh oh!

github-actions bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

HopeFullee left a comment

Uh oh!

HopeFullee Dec 5, 2025

Uh oh!

HopeFullee Dec 5, 2025

Uh oh!

wooktori Dec 5, 2025 •

edited

Loading

Uh oh!

claudia99503 Dec 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<div className='mt-3 flex h-[18px] items-center'>
	<div className='mt-3 flex h-4.5 items-center'>

	<div className='mt-[13px] flex flex-col gap-1'>
	<div className='mt-3.25 flex flex-col gap-1'>

[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정 #82

[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정 #82

Uh oh!

Conversation

claudia99503 commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 변경 사항

TabNavigation 컴포넌트 추가

Button 컴포넌트 확장

Card 컴포넌트 확장

스케줄러 페이지 구현

🔗 관련 이슈

🧪 테스트 방법

📸 스크린샷 (선택)

📋 체크리스트

💬 추가 코멘트

TabNavigation 사용법 (cc. @wooktori )

참고

Uh oh!

coderabbitai bot commented Dec 5, 2025

Review skipped

Uh oh!

github-actions bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Report

Uh oh!

github-actions bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage Report

Coverage 요약

영향받은 파일

Uh oh!

github-actions bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 PR Preview Report

Uh oh!

HopeFullee left a comment

Choose a reason for hiding this comment

Uh oh!

HopeFullee Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

HopeFullee Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

wooktori Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

claudia99503 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

claudia99503 commented Dec 5, 2025 •

edited

Loading

github-actions bot commented Dec 5, 2025 •

edited

Loading

github-actions bot commented Dec 5, 2025 •

edited

Loading

github-actions bot commented Dec 5, 2025 •

edited

Loading

wooktori Dec 5, 2025 •

edited

Loading