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

apps/client/src/App.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react';
 import './App.css';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
+
 function App() {
   const [count, setCount] = useState(0);
-
   return (
     <>
       <div>
@@ -15,7 +15,7 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>\
+      <h1>Vite + React</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}

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

@@ -6,3 +6,5 @@ export { default as Chip } from './chip/Chip';
 export { default as Level } from './level/Level';
 export { Textarea } from './textarea/Textarea';
 export { Progress } from './progress/Progress';
+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,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Popup from './Popup';
+
+const meta: Meta<typeof Popup> = {
+  title: 'Components/Popup',
+  component: Popup,
+  tags: ['autodocs'],
+  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,52 @@
+import Input from '../input/Input';
+import { BasePopupProps } from './types';
+
+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,34 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import Popup from './Popup';
+import { PopupContainerProps } from './types';
+
+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;

packages/design-system/src/components/popup/types.ts

@@ -0,0 +1,19 @@
+export type PopupType = 'input' | 'subtext' | 'default';
+
+export interface BasePopupProps {
+  type: PopupType;
+  title: string;
+  left: string;
+  right: string;
+  subtext?: string;
+  placeholder?: string;
+  isError?: boolean;
+  helperText?: string;
+  onLeftClick?: () => void;
+  onRightClick?: () => void;
+}
+
+export interface PopupContainerProps extends BasePopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+}