feat(QYOG-162): 선택된값 받을 함수 props에 추가(추후 수정)

Author: pho9902

src/components/Design/SelectBox/SelectBox.stories.tsx

@@ -8,6 +8,16 @@ const meta = {
 
 type Story = StoryObj<typeof meta>;
 
+interface OptionInterface {
+  name: string;
+  value: string;
+}
+
+function setSelectOption(result: OptionInterface) {
+  console.log(result);
+  return result;
+}
+
 export const Primary: Story = {
   args: {
     options: [
@@ -17,6 +27,7 @@ export const Primary: Story = {
 
     defaultName: "학년",
     isRequired: true,
+    setSelectOption: setSelectOption,
   },
 };
 

src/components/Design/SelectBox/SelectBox.tsx

@@ -4,7 +4,7 @@
  * Copyright (c) 2024 Your Company
  */
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 
 import * as S from "./emotion";
 
@@ -16,12 +16,14 @@ interface SelectboxProps {
   options: OptionInterface[];
   defaultName: string;
   isRequired: boolean;
+  setSelectOption: (result: OptionInterface) => OptionInterface; // setState or object
 }
 
 export default function SelectBox({
   options,
   defaultName = "값을 선택하세요.",
   isRequired = false,
+  setSelectOption,
 }: SelectboxProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedName, setSelectedName] = useState(defaultName);
@@ -37,6 +39,10 @@ export default function SelectBox({
     setIsChanged(true);
   }
 
+  useEffect(() => {
+    if (selectedIndex >= 0) setSelectOption(options[selectedIndex]);
+  }, [selectedIndex]);
+
   return (
     <S.SelectBoxWrap
       onClick={() => setIsOpen(!isOpen)}