수정 중

src/App.tsx

@@ -11,7 +11,7 @@ const App = () => {
     <div className="App">
       <BrowserRouter>
         <Header />
-
+        <Modal />
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route path="/" element={<Home />}></Route>

src/components/modal/DepositTag.tsx

@@ -0,0 +1,20 @@
+import Dropdown from './Dropdown';
+
+function DepositTag() {
+  const depositTags = [
+    '월급',
+    '용돈',
+    '기타',
+  ];
+
+  const handleTagSelect = (tag: string) => {
+
+    console.log(tag);
+  };
+
+  return (
+    <Dropdown options={depositTags} onSelect={handleTagSelect} />
+  );
+}
+
+export default DepositTag;

src/components/modal/Dropdown.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+interface DropdownProps {
+    options: string[];
+    onSelect: (selectedOption: string) => void;
+}
+
+function Dropdown({ options, onSelect }: DropdownProps) {
+  const [isClosed, setIsClosed] = useState(true);
+  const [selectedOption, setSelectedOption] = useState('태그를 선택하세요.');
+
+  const toggleDropdown = () => {
+    setIsClosed(!isClosed);
+  };
+
+  const handleOptionSelect = (option: string) => {
+    setSelectedOption(option);
+    setIsClosed(!isClosed);
+    onSelect(option);
+  };
+
+  return (
+    <DropdownWrapper onClick={toggleDropdown}>
+      <Title>{selectedOption}</Title>
+      <Menu closed={isClosed ? 'true' : undefined}>
+       <ItemBoard>
+       {options.map((option: string) => (
+          <MenuItem key={option} onClick={() => handleOptionSelect(option)}>
+            {option}
+          </MenuItem>
+        ))}
+       </ItemBoard>
+      </Menu>
+    </DropdownWrapper>
+  );
+}
+
+const DropdownWrapper = styled.div`
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  margin: 30px;
+  background: rgb(248, 248, 248);
+  border: solid 1px rgb(222, 222, 222);
+  width: 320px;
+  cursor: pointer;
+  text-align: center;
+`;
+
+const Title = styled.h2`
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Menu = styled.div<{ closed?: string | undefined }>`
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  height: ${(props) => (props.closed === 'true' ? '0px' : 'auto')};
+`;
+
+const ItemBoard = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+}
+`;
+
+const MenuItem = styled.span`
+  font-size: 16px;
+  text-align: center;
+  padding: 14px 10px;
+  flex: 1 0 24%;
+  margin: 0.5%;
+
+  &:hover {
+    color: red;
+  }
+`;
+
+export default Dropdown;

src/components/modal/ExpensesTag.tsx

@@ -0,0 +1,32 @@
+import Dropdown from './Dropdown';
+
+function ExpensesTag() {
+  const ExpensesTags = [
+    '식비',
+    '교통비',
+    '생필품',
+    '의류',
+    '미용',
+    '의료/건강',
+    '교육',
+    '통신비',
+    '회식/모임',
+    '경조사',
+    '저축',
+    '가전',
+    '공과금',
+    '카드결제',
+    '기타',
+  ];
+
+  const handleTagSelect = (tag: string) => {
+
+    console.log(tag);
+  };
+
+  return (
+    <Dropdown options={ExpensesTags} onSelect={handleTagSelect} />
+  );
+}
+
+export default ExpensesTag;

src/components/modal/ExpensesType.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react'
+import styled from 'styled-components';
+
+function ExpensesType() {
+    const [selectType, setSelectType] = useState('')
+  return (
+    <div>ExpensesType</div>
+  )
+}
+
+export default ExpensesType

src/components/modal/Modal.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import ExpensesTags from './ExpensesTags'
 import ExpensesAmount from './ExpensesAmount'
 import { styled } from 'styled-components'
+import ExpensesTag from './ExpensesTag'
+import DepositTag from './DepositTag'
 
 function Modal() {
   return (
     <Container>
       <ExpensesAmount />
-      <ExpensesTags />
+      <ExpensesTag />
+      <DepositTag />
     </Container>
   )
 }