fix: 충돌 해결을 위한 파일 및 컴포넌트 이름 변경

src/components/common/selectOption/SelectBtn.tsx

@@ -1,5 +1,5 @@
-import { SelectBtnProps } from "@type/selectOption";
-import * as S from "./SelectOption.styled";
+import { SelectBtnProps } from "@type/selectList";
+import * as S from "./SelectOptionList.styled";
 import { colorSets } from "@utils/defaultData";
 
 const SelectBtn = (props: SelectBtnProps) => {

src/components/common/selectOption/SelectOption.styled.ts → src/components/common/selectOption/SelectOptionList.styled.ts

@@ -1,4 +1,4 @@
-import { ColorSet } from "@type/selectOption";
+import { ColorSet } from "@type/selectList";
 import styled from "styled-components";
 
 export const SelectOptionContainer = styled.div<{ width?: string }>`

src/components/common/selectOption/SelectOption.tsx → src/components/common/selectOption/SelectOptionList.tsx

@@ -1,9 +1,9 @@
-import { SelectOptionProps } from "@type/selectOption";
+import { SelectListProps } from "@type/selectList";
 import SelectBtn from "./SelectBtn";
-import * as S from "./SelectOption.styled";
+import * as S from "./SelectOptionList.styled";
 import { useState } from "react";
 
-const SelectOption = (props: SelectOptionProps) => {
+const SelectOptionList = (props: SelectListProps) => {
   const [selectedValue, setSelectedValue] = useState<string | number | null>(
     null
   );
@@ -54,4 +54,4 @@ const SelectOption = (props: SelectOptionProps) => {
   );
 };
 
-export default SelectOption;
+export default SelectOptionList;

src/components/onboarding/SelectLevel.tsx

@@ -1,7 +1,7 @@
-import SelectOption from "@components/common/selectOption/SelectOption";
 import * as S from "./onboarding.styled";
 import useSelectLevel from "@hooks/useSelectLevel";
 import { nationElements } from "@utils/defaultData";
+import SelectOptionList from "@common/selectOption/SelectOptionList";
 
 interface SelectLevelProps {
   languageId: number | string;
@@ -23,7 +23,7 @@ const SelectLevel = ({ languageId, setter }: SelectLevelProps) => {
     <S.Container>
       <S.Title>{language?.text}를 얼마나 알고 계신가요?</S.Title>
       <S.SubContainer>
-        <SelectOption
+        <SelectOptionList
           selectList={levelOptions.map((option) => ({
             text: option.text,
             value: option.value,

src/type/selectList.d.ts

@@ -0,0 +1,24 @@
+export interface ColorSet {
+  background: string;
+  border: string;
+  color: string;
+}
+
+export interface SelectListProps {
+  selectList: SelectOptionElement[];
+  setter: (value: string | number | null) => void;
+  width?: string;
+}
+
+export interface SelectListElement {
+  text: string;
+  state: "correct" | "wrong" | "selected" | "default";
+  value: string | number;
+}
+
+export interface SelectBtnProps {
+  text: string;
+  colorName: string;
+  imgURL?: string;
+  onClick: () => void;
+}

src/type/selectOption.d.ts

@@ -1,24 +1,8 @@
-export interface ColorSet {
-  background: string;
-  border: string;
-  color: string;
-}
-
-export interface SelectOptionProps {
-  selectList: SelectOptionElement[];
-  setter: (value: string | number | null) => void;
-  width?: string;
-}
-
-export interface SelectOptionElement {
+export interface SelectOptionProps extends InputImgProps {
+  imgURL: string;
   text: string;
-  state: "correct" | "wrong" | "selected" | "default";
-  value: string | number;
 }
 
-export interface SelectBtnProps {
-  text: string;
-  colorName: string;
-  imgURL?: string;
-  onClick: () => void;
+export interface InputImgProps {
+  setIsLoading?: React.Dispatch<React.SetStateAction<boolean>>;
 }