From e7b1d9885360adf00d29a5c5cee72506d2d0a0dc Mon Sep 17 00:00:00 2001
From: bbung <tjd123123@naver.com>
Date: Tue, 7 May 2024 00:29:23 +0900
Subject: [PATCH] =?UTF-8?q?TEST:=20=E2=9C=85=20=20Select=20OptionList=20?=
 =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Select/Select.stories.tsx          | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/common/Select/Select.stories.tsx b/src/components/common/Select/Select.stories.tsx
index 490b104..3722e9b 100644
--- a/src/components/common/Select/Select.stories.tsx
+++ b/src/components/common/Select/Select.stories.tsx
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ChangeEvent, useState } from 'react';
 import { Select } from '.';
+import Check from '../Check';
 import Icon from '../Icon';
+import { Option } from '../Option';
 import { Tag } from '../Tag';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -249,10 +251,6 @@ export const Tag_Select: Story = {
         id: 0,
         label: 'Tag',
       },
-      {
-        id: 1,
-        label: 'Tag',
-      },
     ]);
 
     const handleChangeText = (e: ChangeEvent<HTMLInputElement>) => {
@@ -273,7 +271,7 @@ export const Tag_Select: Story = {
 
     return (
       <div className='w-[500px] flex flex-col gap-32'>
-        <div className='relative'>
+        <div className='relative h-fit'>
           <Select {...args} value={text} onChange={handleChangeText}>
             <Select.Label>Label</Select.Label>
             <Select.InputWrapper>
@@ -299,8 +297,19 @@ export const Tag_Select: Story = {
             <Select.Text>HelpText</Select.Text>
           </Select>
           {text && (
-            <div className='absolute -bottom-24 w-full p-8 bg-white rounded-lg shadow-layer'>
-              <div onClick={handleAddTag}>추가 "{text}"</div>
+            <div className='absolute top-[84%] w-full flex flex-col gap-4 p-8 bg-surface rounded-lg shadow-layer'>
+              <Option onClick={handleAddTag}>
+                <Option.Label>
+                  <b className='body-md-bold'>추가</b>"{text}"
+                </Option.Label>
+                <Icon name='plus_s' className='w-20 h-20 stroke-text-minimal' />
+              </Option>
+              {tags.map((tag) => (
+                <Option key={tag.id}>
+                  <Check />
+                  <Option.Label>{tag.label}</Option.Label>
+                </Option>
+              ))}
             </div>
           )}
         </div>