feat(QYOG-162): 셀렉트박스 디자인 시스템 개발

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

@@ -0,0 +1,17 @@
+import { StoryObj } from "@storybook/react";
+import { SelectBox } from ".";
+
+const meta = {
+  title: "components/SelectBox",
+  component: SelectBox,
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    options: ["12340", "한글", "English", "Aa10테스트"],
+  },
+};
+
+export default meta;

src/components/Design/SelectBox/SelectBox.tsx

@@ -0,0 +1,36 @@
+/*
+ * Created on Sat May 18 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+import { InputHTMLAttributes } from "react";
+
+import { Theme } from "@emotion/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";
+}
+
+export default function SelectBox(props: ISelectBoxProps) {
+  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.CommonStyledSelectField>
+    </div>
+  );
+}

src/components/Design/SelectBox/emotion.ts

@@ -0,0 +1,43 @@
+/*
+ * Created on Fri Feb 16 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+import { Row } from "@/components/Layouts";
+import { Theme } from "@emotion/react";
+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]};
+
+  border-radius: ${({ shape }) => (shape === "round" ? "16px" : "3px")};
+  border: 1px solid #8f8f8f;
+
+  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";
+    }
+  }};
+`;
+
+export const CommonstyledOption = styled.option``;

src/components/Design/SelectBox/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Created on Fri Feb 16 2024
+ *
+ * Copyright (c) 2024 Your Company
+ */
+
+export { default as SelectBox } from "./SelectBox";