From 5d46933a93e88c0cd018cf748112b2fa33d01644 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Fri, 13 Sep 2024 13:27:19 +0900
Subject: [PATCH] Refactor: refactoring select box

---
 src/components/common/select/QSelectBox.jsx | 20 ++++++++++------
 src/components/header/Header.jsx            | 26 +++++++++++++++++----
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index 6e77a539..bcc0979d 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,16 +1,22 @@
 'use client'
 import { useState } from 'react'
 
-export default function QSelectBox({ title, option }) {
-  const [selectAct, setSelectAct] = useState(false)
+export default function QSelectBox({ title = '', options, onChange }) {
+  const [openSelect, setOpenSelect] = useState(false)
+  const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+
+  const handleClickSelectOption = (option) => {
+    setSelected(option.name)
+    onChange?.(option)
+  }
 
   return (
-    <div className={`sort-select ${selectAct ? 'active' : ''}`} onClick={() => setSelectAct(!selectAct)}>
-      <p>{title}</p>
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
+      <p>{selected}</p>
       <ul className="select-item-wrap">
-        {option.map((el, idx) => (
-          <li key={idx} className="select-item">
-            <button>{el.name}</button>
+        {options?.map((option) => (
+          <li key={option.id} className="select-item">
+            <button onClick={() => handleClickSelectOption(option)}>{option.name}</button>
           </li>
         ))}
       </ul>
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index b716cbdd..e8a4e872 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -1,5 +1,5 @@
 'use client'
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
@@ -29,7 +29,14 @@ export default function Header(props) {
   // if (pathName.includes('login') || pathName.includes('join')) {
   //   return null
   // }
-  const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
+  const [selected, setSelected] = useState('')
+
+  const SelectOptions = [
+    { id: 0, name: 'オンライン保証シ', link: '' },
+    { id: 1, name: 'ステム', link: '' },
+    { id: 2, name: 'TEST1', link: 'https://www.weather.go.kr/w/index.do' },
+    { id: 3, name: 'TEST2', link: 'https://www.google.com' },
+  ]
   const menus = [
     { id: 0, name: 'header.menus.home', url: '/', children: [] },
     {
@@ -53,6 +60,15 @@ export default function Header(props) {
     },
   ]
 
+  const onChangeSelect = (option) => {
+    setSelected(option)
+  }
+  const navPage = () => {
+    if (selected.link) {
+      location.href = selected.link
+    }
+  }
+
   const getMenuTemplate = (menus) => {
     return menus.map((menu) => {
       return (
@@ -112,10 +128,12 @@ export default function Header(props) {
               </button>
             </div>
             <div className="select-box">
-              <QSelectBox title={'Q.ORDER'} option={SelectOption} />
+              <QSelectBox title={'Q.ORDER'} options={SelectOptions} onChange={onChangeSelect} />
             </div>
             <div className="btn-wrap">
-              <button className="btn-frame small dark">{getMessage('header.go')}</button>
+              <button className="btn-frame small dark" onClick={() => navPage()}>
+                {getMessage('header.go')}
+              </button>
             </div>
           </div>
         </div>