Feat(design-system): 팝업 공통 컴포넌트

package.json

@@ -21,16 +21,16 @@
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "19",
     "@types/react-dom": "19",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "playwright": "^1.55.0",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "storybook": "^9.1.3",
     "turbo": "^2.5.6",
     "typescript": "5.9.2",
     "vite": "7.1.2",
-    "vitest": "^3.2.4",
-    "@vitest/browser": "^3.2.4",
-    "playwright": "^1.55.0",
-    "@vitest/coverage-v8": "^3.2.4"
+    "vitest": "^3.2.4"
   },
   "pnpm": {
     "overrides": {
@@ -40,5 +40,9 @@
   "packageManager": "pnpm@9.0.0",
   "engines": {
     "node": ">=18"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "react-router-dom": "^7.8.2"
   }
 }

packages/design-system/src/components/index.ts

@@ -11,3 +11,5 @@ export { default as AutoDismissToast } from './toast/hooks/uesFadeOut';
 export { default as Toast } from './toast/Toast';
 export { WheelPicker, WheelPickerWrapper } from './wheelPicker/WheelPicker';
 export type { WheelPickerOption } from './wheelPicker/WheelPicker';
+export { default as Popup } from './popup/Popup';
+export { default as PopupContainer } from './popup/PopupContainer';

packages/design-system/src/components/input/Input.tsx

@@ -3,7 +3,7 @@ import { InputHTMLAttributes, Ref } from 'react';
 import { cn } from '../../lib';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  ref: Ref<HTMLInputElement>;
+  ref?: Ref<HTMLInputElement>;
   isError?: boolean;
   helperText?: string;
 }

packages/design-system/src/components/popup/Popup.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Popup from './Popup';
+
+const meta: Meta<typeof Popup> = {
+  title: 'Components/Popup',
+  component: Popup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['input', 'subtext', 'default'],
+      description: '팝업의 내용 타입',
+    },
+    title: {
+      control: 'text',
+      description: '팝업 제목',
+    },
+    subtext: {
+      control: 'text',
+      description: 'subtext 타입일 때 보여줄 보조 문구',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'input 타입일 때 placeholder',
+    },
+    left: {
+      control: 'text',
+      description: '왼쪽 버튼 텍스트',
+    },
+    right: {
+      control: 'text',
+      description: '오른쪽 버튼 텍스트',
+    },
+    isError: {
+      control: 'boolean',
+      description: 'input 타입일 때 에러 상태 여부',
+    },
+    helperText: {
+      control: 'text',
+      description: '에러 상태일 때 표시할 도움말',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Popup>;
+
+export const Default: Story = {
+  args: {
+    type: 'default',
+    title: '기본 팝업',
+    left: '취소',
+    right: '확인',
+  },
+};
+
+export const WithInput: Story = {
+  args: {
+    type: 'input',
+    title: '카테고리 입력',
+    placeholder: '카테고리 제목을 입력해주세요',
+    left: '취소',
+    right: '저장',
+  },
+};
+
+export const WithErrorInput: Story = {
+  args: {
+    type: 'input',
+    title: '카테고리 입력',
+    placeholder: '카테고리 제목을 입력해주세요',
+    isError: true,
+    helperText: '10자 이내로 입력해주세요',
+    left: '취소',
+    right: '저장',
+  },
+};
+
+export const WithSubtext: Story = {
+  args: {
+    type: 'subtext',
+    title: '알림',
+    subtext: '카테고리가 정상적으로 저장되었습니다.',
+    left: '닫기',
+    right: '확인',
+  },
+};

packages/design-system/src/components/popup/Popup.tsx

@@ -0,0 +1,65 @@
+import Input from '../input/Input';
+
+type PopupType = 'input' | 'subtext' | 'default';
+
+interface BasePopupProps {
+  type: PopupType;
+  title: string;
+  left: string;
+  right: string;
+  subtext?: string;
+  placeholder?: string;
+  isError?: boolean;
+  helperText?: string;
+  onLeftClick?: () => void;
+  onRightClick?: () => void;
+}
+const Popup = ({
+  type,
+  subtext,
+  placeholder,
+  title,
+  left,
+  right,
+  helperText,
+  isError,
+  onLeftClick,
+  onRightClick,
+}: BasePopupProps) => {
+  return (
+    <div className="bg-white-bg flex w-[26rem] cursor-pointer flex-col items-center justify-center rounded-[1.2rem] bg-white px-[1.6rem] py-[2.4rem] shadow-[0_0_32px_0_rgba(0,0,0,0.10)]">
+      <div className="sub2-sb text-font-black-1 pb-[0.8rem]">{title}</div>
+      {type === 'input' && (
+        <div className="w-full py-[0.8rem]">
+          <Input
+            placeholder={placeholder}
+            helperText={helperText}
+            isError={isError}
+          />
+        </div>
+      )}
+      {type === 'subtext' && (
+        <div className="body3-r text-font-gray-2 w-full py-[0.8rem] text-center">
+          {subtext}
+        </div>
+      )}
+      {/* type===default일 떄는 아무것도 없음 */}
+      <div className="flex flex-row items-center justify-center gap-[1.2rem] pt-[0.8rem]">
+        <button
+          className="border-gray200 sub5-sb bg-white-bg text-font-black-1 w-[10.8rem] rounded-[0.4rem] border py-[0.85rem]"
+          onClick={onLeftClick}
+        >
+          {left}
+        </button>
+        <button
+          className="sub5-sb bg-gray900 text-white-bg w-[10.8rem] rounded-[0.4rem] py-[0.85rem]"
+          onClick={onRightClick}
+        >
+          {right}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

packages/design-system/src/components/popup/PopupContainer.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import PopupContainer from './PopupContainer';
+
+const PopupContainerWrapper = (
+  props: React.ComponentProps<typeof PopupContainer>
+) => <PopupContainer {...props} />;
+
+const meta: Meta<typeof PopupContainerWrapper> = {
+  title: 'Components/PopupContainer',
+  component: PopupContainerWrapper,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof PopupContainer>;
+
+// 인터랙션 가능한 예시
+const WithTriggerButtonComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <button
+        className="rounded bg-blue-500 px-4 py-2 text-white"
+        onClick={() => setOpen(true)}
+      >
+        팝업 열기
+      </button>
+
+      <PopupContainer
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        type="input"
+        title="카테고리 입력"
+        left="취소"
+        right="저장"
+        placeholder="카테고리 제목을 입력해주세요"
+      />
+    </div>
+  );
+};
+
+export const WithTriggerButton: Story = {
+  render: () => <WithTriggerButtonComponent />,
+};

packages/design-system/src/components/popup/PopupContainer.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import Popup from './Popup';
+type PopupType = 'input' | 'subtext' | 'default';
+
+interface BasePopupProps {
+  type: PopupType;
+  title: string;
+  left: string;
+  right: string;
+  subtext?: string;
+  placeholder?: string;
+  isError?: boolean;
+  helperText?: string;
+  onLeftClick?: () => void;
+  onRightClick?: () => void;
+}
+interface PopupContainerProps extends BasePopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+const PopupContainer = ({
+  isOpen,
+  onClose,
+  ...popupProps
+}: PopupContainerProps) => {
+  // ESC 키로 닫는 것 정도 (외부 클릭은 안되게! : 어차피 x박스나 취소버튼이 있음)
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-10 flex items-center justify-center">
+      <div className="absolute inset-0 bg-[#00000099]" />
+      <div className="relative">
+        <Popup {...popupProps} onLeftClick={onClose} />
+      </div>
+    </div>,
+    document.body // body 위에서 렌더링 되게 함!
+  );
+};
+
+export default PopupContainer;