[REFACTOR] 디자인 일부 변경 (#11)

Team-OYA · Feb 28, 2024 · de2625a · de2625a
1 parent 1ae600a
commit de2625a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/src/components/common/Dropdown/MultipleDropdown.js b/src/components/common/Dropdown/MultipleDropdown.js
@@ -6,54 +6,55 @@ import {useState} from "react";
  * @since 2024.02.25
  * @author 김유빈
  */
-function MultipleDropdown(props) {
-    // todo: title 이 data 위로 위치
-    const [selectedItem, setSelectedItem] = useState(null)
+function MultipleDropdown({title, data}) {
+    const [selectedFirstItem, setSelectedFirstItem] = useState(null)
+    const [selectedSecondItem, setSelectedSecondItem] = useState(null)
 
-    const clickItem = (item) => {
-        setSelectedItem(item);
+    const handleSelectedFirstItem = (item) => {
+        setSelectedFirstItem(item)
+    };
+    const handleSelectedSecondItem = (item) => {
+        setSelectedSecondItem(item)
     };
 
     return (
-        <>
+        <div className="flex flex-col items-start justify-center space-y-4 md:space-y-4 mb-4">
             <label htmlFor="default-input"
                    className="block mb-2 text-sm font-medium text-gray-900">
-                {props.title}
+                {title}
             </label>
-            <div id="default-input" className="flex shadow mr-auto">
-                <div className="z-10 bg-white divide-y divide-gray-100 rounded-lg w-44 h-44 overflow-y-scroll">
+            <div id="default-input" className="flex shadow mr-24">
+                <div className="z-10 bg-white divide-y divide-gray-100 rounded-lg w-52 h-44 overflow-y-scroll">
+                    <ul className="py-2 text-sm text-gray-700">
+                        {data.map((row, index) => (
+                            <li key={index}>
+                                <button
+                                    className="block px-4 py-2 w-full text-left"
+                                    style={{backgroundColor: selectedFirstItem === row.data ? "#F8F8F8" : "white"}}
+                                    onClick={() => handleSelectedFirstItem(row.data)}>
+                                    {row.description}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className="z-10 bg-white divide-y divide-gray-100 rounded-lg w-52 h-44 overflow-y-scroll">
                     <ul className="py-2 text-sm text-gray-700">
-                        {
-                            props.data.map((row, index) => (
+                        {selectedFirstItem &&
+                            selectedFirstItem.map((row, index) => (
                                 <li key={index}>
                                     <button
-                                        className="block px-4 py-2 hover:bg-gray-100 w-full text-left"
-                                        onClick={() => clickItem(row.data)}>
+                                        className="block px-4 py-2 w-full text-left"
+                                        style={{backgroundColor: selectedSecondItem === row.code ? "#F8F8F8" : "white"}}
+                                        onClick={() => handleSelectedSecondItem(row.code)}>
                                         {row.description}
                                     </button>
                                 </li>
-                            ))
-                        }
-                    </ul>
-                </div>
-                <div className="z-10 bg-white divide-y divide-gray-100 rounded-lg w-44 h-44 overflow-y-scroll">
-                    <ul className="py-2 text-sm text-gray-700">
-                        {
-                            selectedItem && (
-                                selectedItem.map((row, index) => (
-                                    <li key={index}>
-                                        <button
-                                            className="block px-4 py-2 hover:bg-gray-100 w-full text-left">
-                                            {row.description}
-                                        </button>
-                                    </li>
-                                ))
-                            )
-                        }
+                            ))}
                     </ul>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

diff --git a/src/pages/common/home.jsx b/src/pages/common/home.jsx
@@ -21,9 +21,10 @@ const Home = () => {
                             <p className="text-center text-main-color-600">
                                 현대에서 진행하는 팝업스토어를 관리해주는 플랫폼
                             </p>
-                            {/*todo: 가운데로 배치*/}
-                            <OutlineCircleDisabledButton text="사업체 페이지"/>
-                            <OutlineCircleDisabledButton text="관리자 페이지"/>
+                            <div className="flex flex-col items-center justify-center md-8">
+                                <OutlineCircleDisabledButton text="사업체 페이지"/>
+                                <OutlineCircleDisabledButton text="관리자 페이지"/>
+                            </div>
                         </div>
                     </div>
                 </div>