Skip to content

Refactor: Context API로 BottomSheet onClose props drilling 제거 #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssilver01 merged 3 commits into from
Apr 23, 2026
Merged

Refactor: Context API로 BottomSheet onClose props drilling 제거 #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3560803
feat: BottomSheet onClose Context API 도입으로 props drilling 개선
ssilver01 Apr 21, 2026
cfabfb3
refactor: BottomSheet Context 적용으로 onClose props 제거
ssilver01 Apr 21, 2026
a925bfd
fix: use client 추가
ssilver01 Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions apps/web/src/features/datePickerModal/ui/DatePickerBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ export interface DatePickerBottomSheetTemplateProps {
initialMonth: number;
/** 선택 버튼 클릭 시 콜백 */
onConfirm?: (year: number, month: number) => void;
/** X 버튼 클릭 시 콜백 */
onClose?: () => void;
/** 미래 날짜 선택 허용 여부 (기본값: false) */
allowFuture?: boolean;
}
Expand All @@ -26,7 +24,6 @@ export const DatePickerBottomSheetTemplate = ({
initialYear,
initialMonth,
onConfirm,
onClose,
allowFuture = false,
}: DatePickerBottomSheetTemplateProps) => {
const [tempValue, setTempValue] = useState({ year: initialYear, month: initialMonth });
Expand Down Expand Up @@ -65,7 +62,7 @@ export const DatePickerBottomSheetTemplate = ({

return (
<BaseBottomSheetTemplate>
<BaseBottomSheetTemplate.Header type='close' text='월 선택' onClose={onClose} />
<BaseBottomSheetTemplate.Header type='close' text='월 선택' />
<div className={styles.pickerWrapper}>
<DatePicker
value={tempValue}
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/features/datePickerModal/ui/DatePickerFeature.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export const DatePickerFeature = ({
initialYear={currentDate.getFullYear()}
initialMonth={currentDate.getMonth() + 1}
onConfirm={handleConfirm}
onClose={closeModal}
allowFuture={false}
/>
</BottomSheet>
Expand Down
2 changes: 0 additions & 2 deletions apps/web/src/features/expense/ui/ExpenseEditBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,6 @@ export const ExpenseEditBottomSheet = ({
onCategorySelect={(cat) => setSelectedCategoryId(cat.id)}
onConfirm={handleConfirm}
onDelete={handleDelete}
onClose={onClose}
selectedDate={date}
onDateClick={() => setIsCalendarOpen(true)}
onMoreCategoryClick={() => setIsCategorySheetOpen(true)}
Expand Down Expand Up @@ -251,7 +250,6 @@ export const ExpenseEditBottomSheet = ({
if (newDate) setDate(newDate);
}}
onConfirm={() => setIsCalendarOpen(false)}
onClose={() => setIsCalendarOpen(false)}
/>
</BottomSheet>
<BottomSheet isOpen={isCategorySheetOpen} onClose={() => setIsCategorySheetOpen(false)}>
Expand Down
8 changes: 0 additions & 8 deletions apps/web/src/features/expense/ui/expenseBottomSheet/DatePickerBottomSheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ const meta = {
' selectedDate={selectedDate}',
' onSelectDate={setSelectedDate}',
' onConfirm={() => {}}',
' onClose={() => {}}',
'/>',
'```',
].join('\n'),
Expand Down Expand Up @@ -63,12 +62,6 @@ const meta = {
type: { summary: '(year: number, month: number) => void' },
},
},
onClose: {
description: '닫기 버튼 클릭 시 콜백',
table: {
type: { summary: '() => void' },
},
},
allowFuture: {
control: 'boolean',
description: '미래 날짜 선택 허용 여부',
Expand Down Expand Up @@ -110,7 +103,6 @@ export const Default: Story = {
<BottomSheet isOpen={isOpen} onClose={closeModal}>
<DatePickerBottomSheetTemplate
{...args}
onClose={closeModal}
onConfirm={(year, month) => {
alert(`선택된 월: ${year}년 ${month}월`);
closeModal();
Expand Down
5 changes: 1 addition & 4 deletions apps/web/src/features/expense/ui/expenseBottomSheet/DatePickerBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ export interface DatePickerBottomSheetTemplateProps {
initialMonth: number;
/** 선택 버튼 클릭 시 콜백 */
onConfirm?: (year: number, month: number) => void;
/** X 버튼 클릭 시 콜백 */
onClose?: () => void;
/** 미래 날짜 선택 허용 여부 (기본값: false) */
allowFuture?: boolean;
}
Expand All @@ -20,7 +18,6 @@ export const DatePickerBottomSheetTemplate = ({
initialYear,
initialMonth,
onConfirm,
onClose,
allowFuture = false,
}: DatePickerBottomSheetTemplateProps) => {
const [tempValue, setTempValue] = useState({ year: initialYear, month: initialMonth });
Expand Down Expand Up @@ -59,7 +56,7 @@ export const DatePickerBottomSheetTemplate = ({

return (
<BaseBottomSheetTemplate>
<BaseBottomSheetTemplate.Header type='close' text='월 선택' onClose={onClose} />
<BaseBottomSheetTemplate.Header type='close' text='월 선택' />
<div className={styles.pickerWrapper}>
<DatePicker
value={tempValue}
Expand Down
9 changes: 0 additions & 9 deletions apps/web/src/features/expense/ui/expenseBottomSheet/ExpenseFormBottomSheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const meta = {
' selectedCategoryId={selectedCategoryId}',
' onCategorySelect={(category) => setSelectedCategoryId(category.id)}',
' onConfirm={() => {}}',
' onClose={() => {}}',
'/>',
'```',
].join('\n'),
Expand Down Expand Up @@ -119,12 +118,6 @@ const meta = {
type: { summary: '() => void' },
},
},
onClose: {
description: '닫기 버튼 클릭 시 콜백',
table: {
type: { summary: '() => void' },
},
},
},
} satisfies Meta<typeof ExpenseFormBottomSheet>;

Expand Down Expand Up @@ -169,7 +162,6 @@ export const Default: Story = {
satisfactionLabel='만족도 낮음'
satisfactionEmoji='😒'
onDelete={() => alert('삭제')}
onClose={closeModal}
onConfirm={() => {
alert('소비 입력 완료');
closeModal();
Expand Down Expand Up @@ -232,7 +224,6 @@ export const EmptyForm: Story = {
onCategorySelect={(category) => setSelectedCategoryId(category.id)}
onMoreCategoryClick={() => alert('더보기 클릭')}
onDelete={() => alert('삭제')}
onClose={closeModal}
onConfirm={() => {
alert('소비 입력 완료');
closeModal();
Expand Down
5 changes: 1 addition & 4 deletions apps/web/src/features/expense/ui/expenseBottomSheet/ExpenseFormBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ export interface ExpenseFormBottomSheetProps {
onDelete?: () => void;
/** 선택 버튼 클릭 시 콜백 */
onConfirm?: () => void;
/** X 버튼 클릭 시 콜백 */
onClose?: () => void;
/** 확인 버튼 비활성화 여부 */
confirmDisabled?: boolean;
/** 소비 금액 에러 메세지 */
Expand All @@ -79,7 +77,6 @@ export const ExpenseFormBottomSheet = ({
satisfactionEvaluationType,
onDelete,
onConfirm,
onClose,
confirmDisabled,
amountErrorMessage,
isAmountError,
Expand All @@ -98,7 +95,7 @@ export const ExpenseFormBottomSheet = ({

return (
<BaseBottomSheetTemplate>
<BaseBottomSheetTemplate.Header type='close' onClose={onClose} />
<BaseBottomSheetTemplate.Header type='close' />

{/* 소비금액 */}
<InputField label='소비금액'>
Expand Down
8 changes: 0 additions & 8 deletions apps/web/src/features/expense/ui/expenseBottomSheet/IconPickerBottomSheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ const meta = {
' selectedId={selectedId}',
' onSelect={(category) => setSelectedId(category.id)}',
' onConfirm={() => {}}',
' onClose={() => {}}',
'/>',
'```',
].join('\n'),
Expand Down Expand Up @@ -72,12 +71,6 @@ const meta = {
type: { summary: '() => void' },
},
},
onClose: {
description: '닫기 버튼 클릭 시 콜백',
table: {
type: { summary: '() => void' },
},
},
},
} satisfies Meta<typeof IconPickerBottomSheetTemplate>;

Expand Down Expand Up @@ -134,7 +127,6 @@ export const Default: Story = {
categories={mockCategories}
selectedId={selectedId}
onSelect={(category) => setSelectedId(category.id)}
onClose={closeModal}
onConfirm={() => {
alert(`선택된 아이콘: ${selectedId}`);
closeModal();
Expand Down
5 changes: 1 addition & 4 deletions apps/web/src/features/expense/ui/expenseBottomSheet/IconPickerBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,17 @@ export interface IconPickerBottomSheetTemplateProps {
onSelect?: (category: CategoryItem) => void;
/** 선택 버튼 클릭 시 콜백 */
onConfirm?: () => void;
/** X 버튼 클릭 시 콜백 */
onClose?: () => void;
}

export const IconPickerBottomSheetTemplate = ({
categories,
selectedId,
onSelect,
onConfirm,
onClose,
}: IconPickerBottomSheetTemplateProps) => {
return (
<BaseBottomSheetTemplate>
<BaseBottomSheetTemplate.Header type='close' text='아이콘' onClose={onClose} />
<BaseBottomSheetTemplate.Header type='close' text='아이콘' />
<BaseBottomSheetTemplate.Content>
<div className={styles.categoryGrid}>
{categories.map((category) => (
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/features/expense/ui/steps/AddCategoryStep/AddCategoryStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,6 @@ export const AddCategoryStep = ({ onBack }: AddCategoryStepProps) => {
selectedId={tempIcon?.id}
onSelect={setTempIcon}
onConfirm={handleConfirm}
onClose={closeBottomSheet}
/>
</BottomSheet>
<BottomFixedArea zIndex={1}>
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/features/expense/ui/steps/AmountDateStep/AmountDateStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export const AmountDateStep = ({ onNext, defaultAmount, defaultDate }: AmountDat
onSelectDate={(date) => {
if (date) setSelectedDate(date);
}}
onClose={closeModal}
onConfirm={closeModal}
/>
</BottomSheet>
Expand Down
4 changes: 1 addition & 3 deletions apps/web/src/features/expense/ui/steps/AmountDateStep/CalendarBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@ interface CalendarBottomSheetTemplateProps {
selectedDate?: Date;
onSelectDate?: (date: Date | null) => void;
onConfirm?: () => void;
onClose?: () => void;
}

export const CalendarBottomSheetTemplate = ({
selectedDate: initialDate,
onSelectDate,
onConfirm,
onClose,
}: CalendarBottomSheetTemplateProps) => {
const [selectedDate, setSelectedDate] = useState<Date | null | undefined>(initialDate);
const [currentDate, setCurrentDate] = useState<Date>(initialDate || new Date());
Expand All @@ -43,7 +41,7 @@ export const CalendarBottomSheetTemplate = ({

return (
<BaseBottomSheetTemplate>
<BaseBottomSheetTemplate.Header type='close' text='소비일 수정' onClose={onClose} />
<BaseBottomSheetTemplate.Header type='close' text='소비일 수정' />
<div>
<MonthlyCalendar
currentDate={currentDate}
Expand Down
3 changes: 2 additions & 1 deletion apps/web/src/shared/ui/bottomSheet/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import { BottomSheetContext } from './BottomSheetContext';
import * as styles from './BottomSheet.css';

export interface BottomSheetProps {
Expand Down Expand Up @@ -67,7 +68,7 @@ export const BottomSheet = ({
<div
className={styles.sheet({ animating: isAnimating })}
onClick={(e) => e.stopPropagation()}>
{children}
<BottomSheetContext.Provider value={{ onClose }}>{children}</BottomSheetContext.Provider>
</div>
</div>,
document.body
Expand Down
15 changes: 15 additions & 0 deletions apps/web/src/shared/ui/bottomSheet/BottomSheetContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client';

import { createContext, useContext } from 'react';
Comment thread
coderabbitai[bot] marked this conversation as resolved.

interface BottomSheetContextValue {
onClose: () => void;
}

export const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);

export const useBottomSheetContext = (): BottomSheetContextValue => {
const ctx = useContext(BottomSheetContext);
if (!ctx) throw new Error('useBottomSheetContext must be used within BottomSheet');
return ctx;
};
1 change: 1 addition & 0 deletions apps/web/src/shared/ui/bottomSheet/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { BottomSheet } from './BottomSheet';
export type { BottomSheetProps } from './BottomSheet';
export { BaseBottomSheetTemplate } from './templates';
export { useBottomSheetContext } from './BottomSheetContext';
10 changes: 3 additions & 7 deletions apps/web/src/shared/ui/bottomSheet/templates/BaseBottomSheetTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Text } from '../../text';
import { vars } from '../../theme.css';
import { IcClear, IcPlusSimple } from 'public/icons';
import { Button } from '../../button';
import { useBottomSheetContext } from '../BottomSheetContext';

@coderabbitai coderabbitai Bot Apr 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: BaseBottomSheetTemplate.Header의 add 타입 사용처를 확인합니다.
rg -nP -C3 "<BaseBottomSheetTemplate\\.Header[^>]*type=['\"]add['\"]" --glob '*.tsx'

Repository: Central-MakeUs/Monit_Front

Length of output: 929

🏁 Script executed:

#!/bin/bash
# 1. BaseBottomSheetTemplate.tsx 파일 크기 확인
wc -l apps/web/src/shared/ui/bottomSheet/templates/BaseBottomSheetTemplate.tsx

# 2. 파일 내용 읽기
cat -n apps/web/src/shared/ui/bottomSheet/templates/BaseBottomSheetTemplate.tsx

Repository: Central-MakeUs/Monit_Front

Length of output: 3438

🏁 Script executed:

#!/bin/bash
# 3. Header 컴포넌트의 직접 import 사용 여부 검색
rg -n "import.*Header.*from.*BottomSheetTemplate|from.*BaseBottomSheetTemplate.*Header" --glob '*.tsx'

Repository: Central-MakeUs/Monit_Front

Length of output: 52

🏁 Script executed:

#!/bin/bash
# 4. 전체 type='add' 사용처 재검색 (더 광범위)
rg -n "type=['\"]add['\"]" apps/web/src/features --glob '*.tsx' | grep -i "header\|template"

Repository: Central-MakeUs/Monit_Front

Length of output: 239

type='add' 헤더에서 불필요한 컨텍스트 의존성 제거 필요

Line 43-44에서 useBottomSheetContext()를 항상 호출하므로, onClose가 필요 없는 type='add' 헤더도 컨텍스트가 존재하지 않으면 에러가 발생합니다. 현재 사용처는 모두 BaseBottomSheetTemplate 내부에서 렌더링되어 안전하지만, 훅 호출을 onClose가 필요한 close 버튼 전용 컴포넌트로 이동하면 더 안전한 구조가 됩니다.

🐛 제안 수정 
 import { Button } from '../../button';
 import { useBottomSheetContext } from '../BottomSheetContext';
@@
-const BottomSheetHeader = ({ text, type = 'close', onClickAddBtn }: BottomSheetHeaderProps) => {
+const BottomSheetCloseButton = () => {
   const { onClose } = useBottomSheetContext();
+
+  return <IcClear className={headerIcon} color={vars.color.icon.subtle} onClick={onClose} />;
+};
+
+const BottomSheetHeader = ({ text, type = 'close', onClickAddBtn }: BottomSheetHeaderProps) => {
   return (
     <div className={bottomSheetHeaderWrapper}>
@@
       {type === 'close' ? (
-        <IcClear className={headerIcon} color={vars.color.icon.subtle} onClick={onClose} />
+        <BottomSheetCloseButton />
       ) : (
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/shared/ui/bottomSheet/templates/BaseBottomSheetTemplate.tsx` at
line 15, BaseBottomSheetTemplate currently always calls useBottomSheetContext(),
causing errors when rendering the header with type='add' where onClose isn't
needed; move the hook call out of the top-level render and into the
close-button-specific component (e.g., the CloseButton or headerCloseHandler) so
useBottomSheetContext() is only invoked when a closable header is rendered and
onClose is required; update BaseBottomSheetTemplate to render the close-button
component conditionally for non-'add' types and remove any unconditional
useBottomSheetContext() usage, ensuring onClose is passed down from the hook
into that close-button component only when present.


interface BottomSheetButtonProps {
label: string;
Expand All @@ -23,7 +24,6 @@ interface BottomSheetHeaderProps {
text?: string;
type?: headerType;
onClickAddBtn?: () => void;
onClose?: () => void;
}

const BaseBottomSheetTemplate = ({ children }: { children: React.ReactNode }) => {
Expand All @@ -40,12 +40,8 @@ const BottomSheetContent = ({
return <div className={className}>{children}</div>;
};

const BottomSheetHeader = ({
text,
type = 'close',
onClickAddBtn,
onClose,
}: BottomSheetHeaderProps) => {
const BottomSheetHeader = ({ text, type = 'close', onClickAddBtn }: BottomSheetHeaderProps) => {
const { onClose } = useBottomSheetContext();
return (
<div className={bottomSheetHeaderWrapper}>
<Text variant='t1' color={vars.color.text.primary}>
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/widgets/addCategory/ui/AddCategory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ export const AddCategory = () => {
selectedId={tempIcon?.id}
onSelect={setTempIcon}
onConfirm={handleConfirm}
onClose={closeBottomSheet}
/>
</BottomSheet>
<BottomFixedArea zIndex={1}>
Expand Down
Loading