feat(QYOG-162): 오프라인 리뷰 반영(select 태그 삭제), 선택된 값 상태관리 추가

Author: pho9902

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

@@ -10,7 +10,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    options: ["12340", "한글", "English", "Aa10테스트"],
+    options: [
+      { name: "1학년", value: "1" },
+      { name: "2학년", value: "2" },
+    ],
+
+    defaultName: "학년",
+    isRequired: true,
   },
 };
 

src/components/Design/SelectBox/SelectBox.tsx

@@ -4,33 +4,57 @@
  * Copyright (c) 2024 Your Company
  */
 
-import { InputHTMLAttributes } from "react";
-
-import { Theme } from "@emotion/react";
+import { useState, useRef } from "react";
 
 import * as S from "./emotion";
 
-interface ISelectBoxProps extends InputHTMLAttributes<HTMLInputElement> {
-  backgroundColor?: keyof Theme["color"];
-  typoColor?: keyof Theme["color"];
-  typoSize?: keyof Theme["typography"];
-  shape?: "square" | "round";
-  options: string[];
-  boxSize?: "xs" | "s" | "m" | "l" | "xl";
+interface OptionInterface {
+  name: string;
+  value: string;
+}
+interface SelectboxProps {
+  options: OptionInterface[];
+  defaultName: string;
+  isRequired: boolean;
 }
 
-export default function SelectBox(props: ISelectBoxProps) {
+export default function SelectBox({
+  options,
+  defaultName = "값을 선택하세요.",
+  isRequired = false,
+}: SelectboxProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedName, setSelectedName] = useState(defaultName);
+  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+  const [isChanged, setIsChanged] = useState<boolean>(false);
+
+  //마지막에 밖에다 빼줘야되는 정보
+  // const returnOption:OptionInterface  = options[selectedIndex]
+
+  function handleOnChangeOption(e: any) {
+    setSelectedName(e.target.innerHTML);
+    setSelectedIndex(e.target.id);
+    setIsChanged(true);
+  }
+
   return (
-    <div>
-      <S.CommonStyledSelectField
-        backgroundColor={props.backgroundColor}
-        shape={props.shape}
-        boxSize={props.boxSize}
-      >
-        {props.options.map((el, idx) => {
-          return <S.CommonstyledOption key={idx}>{el}</S.CommonstyledOption>;
+    <S.SelectBoxWrap
+      onClick={() => setIsOpen(!isOpen)}
+      verticalAlign="center"
+      horizonAlign="center"
+    >
+      <label>{selectedName}</label>
+      <S.OptionUl isShow={isOpen}>
+        {options.map((option, idx) => {
+          return (
+            <li key={idx} id={String(idx)} onClick={handleOnChangeOption}>
+              {option.name}
+            </li>
+          );
         })}
-      </S.CommonStyledSelectField>
-    </div>
+      </S.OptionUl>
+
+      {!isChanged && isRequired ? <div>필수값입니다.</div> : <></>}
+    </S.SelectBoxWrap>
   );
 }

src/components/Design/SelectBox/emotion.ts

@@ -1,43 +1,37 @@
 /*
- * Created on Fri Feb 16 2024
+ * Created on Sat June 15 2024
  *
- * Copyright (c) 2024 Your Company
+ * Copyright (c) 2023 Your Company
  */
 
-import { Row } from "@/components/Layouts";
-import { Theme } from "@emotion/react";
+import { Column } from "@/components/Layouts";
 import styled from "@emotion/styled";
 
-export const CommonStyledSelectField = styled(Row.select)<{
-  backgroundColor?: keyof Theme["color"];
-  typoColor?: keyof Theme["color"];
-  typoSize?: keyof Theme["typography"];
-  shape?: "round" | "square";
-  boxSize?: "xs" | "s" | "m" | "l" | "xl";
-}>`
-  background-color: ${({ theme, backgroundColor }) =>
-    theme.color[!backgroundColor ? "white" : backgroundColor]};
+export const SelectBoxWrap = styled(Column.div)`
+  border: 1px solid red;
+  position: relative;
+  cursor: pointer;
 
-  border-radius: ${({ shape }) => (shape === "round" ? "16px" : "3px")};
-  border: 1px solid #8f8f8f;
+  &::before {
+    content: "⌵";
+    position: absolute;
+    top: 1px;
+    right: 8px;
+    font-size: 20px;
+  }
 
-  padding: ${({ boxSize }) => {
-    switch (boxSize) {
-      case "xl":
-        return "8px 14px";
-      case "l":
-        return "6px 12px";
-      case "m":
-        return "4px 8px";
-      case "s":
-        return "2px 6px";
-      case "xs":
-        return "2px 4px";
-
-      default:
-        return "4px 8px";
-    }
-  }};
+  padding: 10px;
+  /* 의논필요 */
+  /* width: 200px;
+  border-radius: 10px; */
 `;
 
-export const CommonstyledOption = styled.option``;
+export const OptionUl = styled.ul<{ isShow: boolean }>`
+  max-height: ${(props) => (props.isShow ? "none" : "0")};
+  position: absolute;
+  list-style: none;
+  top: 18px;
+  left: 0;
+  overflow: hidden;
+  padding: 0;
+`;