From 7ec247e4c8687f76e1533f4440a23d6f778ceff7 Mon Sep 17 00:00:00 2001
From: YI Na-yeon <2n.ayeon.yi@gmail.com>
Date: Fri, 5 Jul 2024 13:34:45 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20id=20not=20match=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/TopBannerSection.tsx | 113 +++++++++++------------
 src/common/Atoms/Form/Select.tsx         |  14 ++-
 2 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/src/app/_components/TopBannerSection.tsx b/src/app/_components/TopBannerSection.tsx
index 82a5536..9d937ba 100644
--- a/src/app/_components/TopBannerSection.tsx
+++ b/src/app/_components/TopBannerSection.tsx
@@ -5,63 +5,58 @@ import Button from "@/common/Atoms/Form/Button";
 import { Container } from "@/common/Layout";
 
 export default function TopBanner() {
-  return (
-    <section className="banner relative mb-8">
-      <div>
-        <BannerImage />
-        <Container>
-          <p className="text-H3 text-white absolute top-16 pl-[8.75rem]">
-            케밋에서 케미 터지는 스터디 장과 멤버들을 만나, <br />
-            놀라운 성장을 경험하세요!
-          </p>
-        </Container>
-      </div>
-      <div className="search-study mx-auto absolute z-10 bottom-0 left-[50vw] translate-y-1/2 -translate-x-1/2">
-        <form action="">
-          <div className="search-bar w-[866px] h-[68px] shadow-normal bg-white rounded-full border border-line-alt flex flex-row flex-nowrap gap-5 items-center justify-between px-6 py-3">
-            <Input.Select
-              id="select-category"
-              instaceId="select-category"
-              placeholder="직무 선택"
-              unstyled
-              options={CATEGORIES}
-              className="w-[160px]"
-            />
-            <div className="h-4 w-0 border-l border-l-line-input"></div>
-            <Input.Select
-              id="select-goal"
-              instaceId="select-goal"
-              placeholder="목표 선택"
-              unstyled
-              options={GOALS}
-              className="w-[140px]"
-            />
-            <div className="h-4 w-0 border-l border-l-line-input"></div>
-            <Input.Text
-              required
-              placeholder="검색어를 입력하세요"
-              className="border-none w-[400px] px-2 py-4 rounded-ten focus-visible:outline-1 focus-visible:outline-main-400"
-            />
-            <Button variation="icon" size={24}>
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z"
-                  stroke="#2A7FFE"
-                  strokeWidth="2.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </Button>
-          </div>
-        </form>
-      </div>
-    </section>
-  );
+	return (
+		<section className="banner relative mb-8">
+			<div>
+				<BannerImage />
+				<Container>
+					<p className="text-H3 text-white absolute top-16 pl-[8.75rem]">
+						케밋에서 케미 터지는 스터디 장과 멤버들을 만나, <br />
+						놀라운 성장을 경험하세요!
+					</p>
+				</Container>
+			</div>
+			<div className="search-study mx-auto absolute z-10 bottom-0 left-[50vw] translate-y-1/2 -translate-x-1/2">
+				<form action="">
+					<div className="search-bar w-[866px] h-[68px] shadow-normal bg-white rounded-full border border-line-alt flex flex-row flex-nowrap gap-5 items-center justify-between px-6 py-3">
+						<Input.Select
+							placeholder="직무 선택"
+							unstyled
+							options={CATEGORIES}
+							className="w-[160px]"
+						/>
+						<div className="h-4 w-0 border-l border-l-line-input"></div>
+						<Input.Select
+							placeholder="목표 선택"
+							unstyled
+							options={GOALS}
+							className="w-[140px]"
+						/>
+						<div className="h-4 w-0 border-l border-l-line-input"></div>
+						<Input.Text
+							placeholder="검색어를 입력하세요"
+							className="border-none w-[400px] px-2 py-4 rounded-ten focus-visible:outline-1 focus-visible:outline-main-400"
+						/>
+						<Button variation="icon" size={24}>
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z"
+									stroke="#2A7FFE"
+									strokeWidth="2.5"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								/>
+							</svg>
+						</Button>
+					</div>
+				</form>
+			</div>
+		</section>
+	);
 }
diff --git a/src/common/Atoms/Form/Select.tsx b/src/common/Atoms/Form/Select.tsx
index db04b73..6bf961b 100644
--- a/src/common/Atoms/Form/Select.tsx
+++ b/src/common/Atoms/Form/Select.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useId } from "react";
 import SelectInput, {
   IndicatorsContainerProps,
   MultiValueProps,
@@ -7,14 +8,18 @@ import CreatableSelect from "react-select/creatable";
 
 const IndicatorsContainer = (_: IndicatorsContainerProps) => <></>;
 
-export default ({
+export default function ({
+  id = "",
   styles = {},
   isCreatable = false,
   unstyled = false,
   ...restProps
-}) =>
-  isCreatable ? (
+}) {
+  const uniqueId = useId();
+  return isCreatable ? (
     <CreatableSelect
+      id={uniqueId}
+      instanceId={uniqueId}
       {...restProps}
       /**
        * multi select의 경우 indicator none, value label은 Keyword와 유사한 디자인
@@ -65,6 +70,8 @@ export default ({
     />
   ) : (
     <SelectInput
+      id={uniqueId}
+      instanceId={uniqueId}
       {...restProps}
       components={unstyled ? { IndicatorsContainer } : {}}
       styles={{
@@ -96,3 +103,4 @@ export default ({
       }}
     />
   );
+}