Merge pull request #15 from MARU-EGG/feature-#9

[FEAT-9,14] Selector 컴포넌트 MenuList로 변경, Chip 컴포넌트 구현

src/assets/svg/index.ts

@@ -3,3 +3,5 @@ export { default as TreeIcon } from '@assets/svg/tree.svg?react';
 export { default as ReloadIcon } from '@assets/svg/reload.svg?react';
 export { default as MaruIcon } from '@assets/svg/maru.svg?react';
 export { default as SendIcon } from '@assets/svg/send.svg?react';
+export { default as CheckTrueIcon } from '@assets/svg/check-true.svg?react';
+export { default as CheckFalseIcon } from '@assets/svg/check-false.svg?react';

src/components/bottom-sheet/bottom-sheet.stories.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import BottomSheet from '@/components/bottom-sheet/bottom-sheet';
 import Header from '@/components/header/header';
 import Layout from '@/components/layout/layout';
-import Selector from '@/components/selector/selector';
+import DropdownMenu from '@/components/menu-items/dropdown-menu/dropdown-menu';
+import MenuList from '@/components/menu-list/menu-list';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const menu = [
@@ -44,12 +45,10 @@ export const Default: Story = {
       <Layout>
         <Header />
         <div className="flex justify-center">
-          <Selector>
-            <Selector.Header>학과(부)를 선택해주세요</Selector.Header>
-            <Selector.Option style="dropDown" onClick={() => setIsOpen(true)}>
-              여기를 눌러주세요
-            </Selector.Option>
-          </Selector>
+          <MenuList>
+            <MenuList.Title title="학과(부)를 선택해주세요"></MenuList.Title>
+            <DropdownMenu label="여기를 눌러주세요" onClick={() => setIsOpen(true)} />
+          </MenuList>
         </div>
 
         <BottomSheet open={isOpen} onClose={() => setIsOpen(false)}>

src/components/chip/chip.stories.tsx

@@ -0,0 +1,26 @@
+import Chip from '@/components/chip/chip';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      controle: 'text',
+      description: '칩 내부에 들어갈 텍스트',
+    },
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: '수시 질문중',
+  },
+};

src/components/chip/chip.tsx

@@ -0,0 +1,9 @@
+function Chip({ label }: { label: string }) {
+  return (
+    <div className="bg-primary-egg rounded-2xl px-2 py-1">
+      <span className="text-label font-semibold text-primary">{label}</span>
+    </div>
+  );
+}
+
+export default Chip;

src/components/menu-items/check-box/check-box.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { CheckFalseIcon, CheckTrueIcon } from '@/assets/svg';
+
+interface CheckboxProps {
+  label: string;
+  onClick?: (event?: React.MouseEvent<HTMLLabelElement>) => void;
+  disabled?: boolean;
+}
+
+function Checkbox({ label, onClick, disabled = false }: CheckboxProps) {
+  const [checked, setChecked] = useState<boolean>(false);
+
+  const handleClick = (event: React.MouseEvent<HTMLLabelElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    setChecked(!checked);
+    onClick?.(event);
+  };
+
+  return (
+    <label htmlFor={label} onClick={handleClick}>
+      <div className="relative px-4 py-3 hover:bg-gray-50">
+        <input id={label} type="checkbox" className="sr-only" disabled={disabled}></input>
+        <div className="flex items-center gap-2">
+          {checked ? <CheckTrueIcon /> : <CheckFalseIcon />}
+          <span className="text-sm">{label}</span>
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export default Checkbox;

src/components/menu-items/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,22 @@
+import { ArrowDownIcon } from '@/assets/svg';
+
+interface DropdownMenuProps {
+  label: string;
+  onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+function DropdownMenu({ label, onClick }: DropdownMenuProps) {
+  return (
+    <div className="cursor-pointer px-4 py-3 text-sm">
+      <div
+        onClick={onClick}
+        className="flex items-center justify-between rounded-md border p-2 text-gray-400 transition-colors hover:bg-gray-100"
+      >
+        <div>{label}</div>
+        <ArrowDownIcon />
+      </div>
+    </div>
+  );
+}
+
+export default DropdownMenu;

src/components/menu-items/text-menu/text-menu.tsx

@@ -0,0 +1,14 @@
+interface TextMenuProps {
+  label: string;
+  onClick?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+function TextMenu({ label, onClick }: TextMenuProps) {
+  return (
+    <div onClick={onClick} className="cursor-pointer px-4 py-3 text-sm transition-colors hover:bg-gray-100">
+      {label}
+    </div>
+  );
+}
+
+export default TextMenu;

src/components/menu-list/menu-list-title.tsx

@@ -0,0 +1,5 @@
+function MenuListTitle({ title }: { title: string }) {
+  return <div className="bg-image-tree-right rounded-t-lg bg-primary p-4 text-title text-white">{title}</div>;
+}
+
+export default MenuListTitle;

src/components/menu-list/menu-list.stories.tsx

@@ -0,0 +1,57 @@
+import Checkbox from '@/components/menu-items/check-box/check-box';
+import DropdownMenu from '@/components/menu-items/dropdown-menu/dropdown-menu';
+import TextMenu from '@/components/menu-items/text-menu/text-menu';
+import MenuList from '@/components/menu-list/menu-list';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/MenuList',
+  component: MenuList,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof MenuList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+  render: () => (
+    <MenuList>
+      <MenuList.Title title="모집요강으로 이동" />
+      <TextMenu label="출처보러 가기" />
+      <TextMenu label="출처보러 가기" />
+      <TextMenu label="출처보러 가기" />
+    </MenuList>
+  ),
+};
+
+export const CheckboxMenu: Story = {
+  args: {
+    children: null,
+  },
+  render: () => (
+    <MenuList>
+      <MenuList.Title title="캠퍼스를 선택해주세요" />
+      <Checkbox label="인문캠퍼스" />
+      <Checkbox label="자연캠퍼스" />
+    </MenuList>
+  ),
+};
+
+export const DropDown: Story = {
+  args: {
+    children: null,
+  },
+  render: () => (
+    <MenuList>
+      <MenuList.Title title="학과(부)를 선택해주세요" />
+      <DropdownMenu label="여기를 눌러주세요" />
+    </MenuList>
+  ),
+};

src/components/menu-list/menu-list.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import MenuListTitle from '@/components/menu-list/menu-list-title';
+
+function MenuList({ children }: { children: React.ReactNode }) {
+  return <div className="w-56 min-w-56 divide-y rounded-lg border border-category_border bg-white">{children}</div>;
+}
+
+MenuList.Title = MenuListTitle;
+
+export default MenuList;

src/page/components/chat-step/choose-admission-category/choose-admission-category.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import Selector from '@/components/selector/selector';
+import TextMenu from '@/components/menu-items/text-menu/text-menu';
+import MenuList from '@/components/menu-list/menu-list';
 import systemMessage from '@/constants/message';
 import useAdmissionDetail from '@/hooks/querys/useAdmissionDetail';
 import useAdmissionStore from '@/stores/store/admission-store';
@@ -41,14 +42,12 @@ function ChooseAdmissionCategory({ admissionType, changeStep }: Props) {
       <div className="mt-2">
         <div className="flex w-80 cursor-grab flex-nowrap items-start gap-5 overflow-x-auto">
           {data.map((option) => (
-            <Selector key={option.label}>
-              <Selector.Header>{`${option.label}전형`}</Selector.Header>
+            <MenuList key={option.label}>
+              <MenuList.Title title={`${option.label}전형`} />
               {option.children.map((menu) => (
-                <Selector.Option key={menu} onClick={() => selectCategory(menu)}>
-                  {menu}
-                </Selector.Option>
+                <TextMenu label={menu} key={menu} onClick={() => selectCategory(menu)} />
               ))}
-            </Selector>
+            </MenuList>
           ))}
         </div>
       </div>