Refactor: refactoring select box

src/components/common/select/QSelectBox.jsx

@@ -1,16 +1,22 @@
 'use client'
 import { useState } from 'react'
 
-export default function QSelectBox({ title, option }) {
+export default function QSelectBox({ title = '', options, onChange }) {
-  const [selectAct, setSelectAct] = useState(false)
+  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)}>
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
-      <p>{title}</p>
+      <p>{selected}</p>
       <ul className="select-item-wrap">
-        {option.map((el, idx) => (
+        {options?.map((option) => (
-          <li key={idx} className="select-item">
+          <li key={option.id} className="select-item">
-            <button>{el.name}</button>
+            <button onClick={() => handleClickSelectOption(option)}>{option.name}</button>
           </li>
         ))}
       </ul>

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>