From a9e35bd23f220cfc4666ca07ddde3ad5960cd8a9 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 25 Feb 2026 01:59:32 +0900 Subject: [PATCH 01/11] =?UTF-8?q?Feat(client):=20Popup=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=B2=B4=ED=81=AC?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20PopupPortal=EC=97=90=EC=84=9C=20=EA=B3=B5=EC=9C=A0?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/components/sidebar/PopupPortal.tsx | 37 +++++++++++++++++-- .../src/components/popup/Popup.tsx | 27 +++++++++++++- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/apps/client/src/shared/components/sidebar/PopupPortal.tsx b/apps/client/src/shared/components/sidebar/PopupPortal.tsx index 0ea36715..f547e8e5 100644 --- a/apps/client/src/shared/components/sidebar/PopupPortal.tsx +++ b/apps/client/src/shared/components/sidebar/PopupPortal.tsx @@ -8,8 +8,14 @@ interface Props { popup: PopupState | null; onClose: () => void; onChange?: (value: string) => void; - onCreateConfirm?: () => void; - onEditConfirm?: (id: number, draft?: string) => void; + + onCreateConfirm?: (shareToJobUsers: boolean) => void; + onEditConfirm?: ( + id: number, + draft?: string, + shareToJobUsers?: boolean + ) => void; + onDeleteConfirm?: (id: number) => void; categoryList?: { id: number; name: string }[]; isToastOpen?: boolean; @@ -35,9 +41,12 @@ export default function PopupPortal({ }: Props) { const [draft, setDraft] = useState(''); + const [shareToJobUsers, setShareToJobUsers] = useState(false); + useEffect(() => { if (!popup) return; setDraft(popup.kind === 'edit' ? (popup.name ?? '') : ''); + setShareToJobUsers(false); }, [popup]); if (!popup) return null; @@ -78,12 +87,12 @@ export default function PopupPortal({ const handleCreate = () => { if (blocked) return; - onCreateConfirm?.(); + onCreateConfirm?.(shareToJobUsers); }; const handleEdit = () => { if (blocked || popup.kind !== 'edit') return; - onEditConfirm?.(popup.id, value); + onEditConfirm?.(popup.id, value, shareToJobUsers); }; const handleDelete = () => { @@ -95,6 +104,8 @@ export default function PopupPortal({ const actionLabel = action === 'create' ? '추가' : action === 'edit' ? '수정' : '삭제'; + const showCheckbox = popup.kind === 'create' || popup.kind === 'edit'; + return createPortal(
@@ -112,6 +123,15 @@ export default function PopupPortal({ placeholder="카테고리 제목을 입력해주세요" onLeftClick={onClose} onRightClick={handleCreate} + checkboxOption={ + showCheckbox + ? { + label: '같은 관심 직무 사용자들에게 공유하기', + isSelected: shareToJobUsers, + onSelectedChange: setShareToJobUsers, + } + : undefined + } /> )} @@ -127,6 +147,15 @@ export default function PopupPortal({ onInputChange={handleInputChange} onLeftClick={onClose} onRightClick={handleEdit} + checkboxOption={ + showCheckbox + ? { + label: '같은 관심 직무 사용자들에게 공유하기', + isSelected: shareToJobUsers, + onSelectedChange: setShareToJobUsers, + } + : undefined + } /> )} diff --git a/packages/design-system/src/components/popup/Popup.tsx b/packages/design-system/src/components/popup/Popup.tsx index ce2266dc..53c26a17 100644 --- a/packages/design-system/src/components/popup/Popup.tsx +++ b/packages/design-system/src/components/popup/Popup.tsx @@ -1,6 +1,14 @@ import Input from '../input/Input'; +import Checkbox from '../checkbox/Checkbox'; type PopupType = 'input' | 'subtext' | 'default'; +interface PopupCheckboxOption { + label: string; + defaultSelected?: boolean; + isSelected?: boolean; + onSelectedChange?: (checked: boolean) => void; + disabled?: boolean; +} interface BasePopupProps { type: PopupType; @@ -17,7 +25,9 @@ interface BasePopupProps { onInputChange?: (value: string) => void; onLeftClick?: () => void; onRightClick?: () => void; + checkboxOption?: PopupCheckboxOption; } + const Popup = ({ type, subtext, @@ -33,6 +43,7 @@ const Popup = ({ onInputChange, onLeftClick, onRightClick, + checkboxOption, }: BasePopupProps) => { return (
@@ -53,6 +64,21 @@ const Popup = ({ {isError && errortext && (

{errortext}

)} + + {checkboxOption && ( + + )}
)} {type === 'subtext' && ( @@ -60,7 +86,6 @@ const Popup = ({ {subtext}
)} - {/* type===default일 떄는 아무것도 없음 */}