From 76c4c03c403d364f39a599376be13cfaf4aa10d0 Mon Sep 17 00:00:00 2001
From: jiminyee <jiminyee@crazyupinc.com>
Date: Sun, 15 Dec 2024 19:38:33 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20=EA=B2=80=EC=83=89=EC=B0=BD=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.tsx  | 84 +++++++++++++++++++++++++++++++++++++
 pages/test/index.tsx        |  7 ++++
 public/icon/icon-search.svg |  3 ++
 3 files changed, 94 insertions(+)
 create mode 100644 components/SearchInput.tsx
 create mode 100644 public/icon/icon-search.svg

diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
new file mode 100644
index 0000000..1f2a5bc
--- /dev/null
+++ b/components/SearchInput.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+
+interface SearchInputProps {
+  size: 'large' | 'medium';
+  value?: string;
+  onSubmit?: (value: string) => void;
+  placeholder?: string;
+}
+
+function SearchInput({
+  size = 'large',
+  value = '',
+  onSubmit = () => {},
+  placeholder,
+}: SearchInputProps) {
+  const [inputValue, setInputValue] = useState(value);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const defaultPlaceholder =
+    size === 'large' ? '이름으로 위키 검색' : '제목을 검색해 주세요.';
+
+  // 크기별 스타일
+  const sizeStyles = {
+    large: {
+      container: 'w-[860px] h-[45px] ',
+      padding: 'p-[8px] pl-[56px] pr-[128px]',
+    },
+    medium: {
+      container: 'w-[800px] h-[40px] ',
+      padding: 'p-[8px] pl-[56px] pr-[128px]',
+    },
+  };
+
+  const currentSize = sizeStyles[size];
+
+  const inputStyles = [
+    currentSize.container,
+    currentSize.padding,
+    'rounded-lg',
+    'border-none',
+    'bg-gray-100',
+    'text-gray-500',
+    'text-16',
+    'placeholder:text-gray-400',
+    isFocused
+      ? 'outline outline-2 outline-green-100'
+      : 'focus:outline-green-100',
+  ].join(' ');
+
+  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setInputValue(e.target.value);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    onSubmit(inputValue);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="relative">
+        <div className="absolute left-4 top-1/2 -translate-y-1/2 transform">
+          <img
+            src="/icon/icon-search.svg"
+            alt="검색 아이콘"
+            className="h-[22px] w-[22px]"
+          />
+        </div>
+
+        <input
+          className={inputStyles}
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          placeholder={placeholder || defaultPlaceholder}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+      </div>
+    </form>
+  );
+}
+
+export default SearchInput;
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
index 79585f4..fb76771 100644
--- a/pages/test/index.tsx
+++ b/pages/test/index.tsx
@@ -1,5 +1,6 @@
 import Button from '@/components/Button';
 import LinkBar from '@/components/LinkBar';
+import SearchInput from '@/components/SearchInput';
 
 export default function Test() {
   const commonCellClass = 'border-r border-gray-300';
@@ -39,6 +40,12 @@ export default function Test() {
               <LinkBar link="https://www.google.com" />
             </td>
           </tr>
+          <tr>
+            <td className={commonCellClass}>SearchInput</td>
+            <td className={commonRowClass}>
+              <SearchInput />
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
diff --git a/public/icon/icon-search.svg b/public/icon/icon-search.svg
new file mode 100644
index 0000000..343e3af
--- /dev/null
+++ b/public/icon/icon-search.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 18C12.9333 18 14.5833 17.3192 15.95 15.9577C17.3166 14.5961 18 12.9436 18 11C18 9.06664 17.3166 7.41664 15.95 6.04998C14.5833 4.68331 12.9333 3.99998 11 3.99998C9.05639 3.99998 7.40383 4.68331 6.04228 6.04998C4.68074 7.41664 3.99998 9.06664 3.99998 11C3.99998 12.9436 4.68074 14.5961 6.04228 15.9577C7.40383 17.3192 9.05639 18 11 18ZM11 19.5C9.82049 19.5 8.71537 19.2769 7.6846 18.8307C6.65383 18.3846 5.75512 17.7782 4.98845 17.0115C4.2218 16.2448 3.6154 15.3461 3.16925 14.3154C2.72308 13.2846 2.5 12.1795 2.5 11C2.5 9.83074 2.72308 8.73075 3.16925 7.7C3.6154 6.66923 4.2218 5.76795 4.98845 4.99615C5.75512 4.22437 6.65383 3.6154 7.6846 3.16925C8.71537 2.72308 9.82049 2.5 11 2.5C12.1692 2.5 13.2692 2.72308 14.3 3.16925C15.3307 3.6154 16.232 4.22437 17.0038 4.99615C17.7756 5.76795 18.3846 6.66923 18.8307 7.7C19.2769 8.73075 19.5 9.83074 19.5 11C19.5 12.041 19.3233 13.0237 18.9701 13.9481C18.6169 14.8724 18.1288 15.7102 17.5057 16.4615L20.9827 19.9385C21.1314 20.0872 21.2016 20.2596 21.1932 20.4557C21.1849 20.6519 21.1064 20.8243 20.9577 20.973C20.8089 21.1115 20.6349 21.1807 20.4356 21.1807C20.2362 21.1807 20.0622 21.1115 19.9135 20.973L16.4461 17.5211C15.6948 18.1442 14.857 18.6297 13.9327 18.9778C13.0083 19.3259 12.0307 19.5 11 19.5Z" fill="#8F95B2"/>
+</svg>

From 7ace855b6e80ea3e1b593a97e84929b10ca89f3c Mon Sep 17 00:00:00 2001
From: jiminyee <jiminyee@crazyupinc.com>
Date: Sun, 15 Dec 2024 23:39:11 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A7=EB=82=B4=EB=B6=80=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EC=A0=9C=EA=B1=B0,=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=A0=95=EB=A0=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.tsx | 54 ++++++++++++++++++--------------------
 pages/test/index.tsx       |  2 +-
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
index 1f2a5bc..f39ee98 100644
--- a/components/SearchInput.tsx
+++ b/components/SearchInput.tsx
@@ -4,30 +4,28 @@ interface SearchInputProps {
   size: 'large' | 'medium';
   value?: string;
   onSubmit?: (value: string) => void;
+  onChange: (value: string) => void;
   placeholder?: string;
 }
 
 function SearchInput({
   size = 'large',
+  onChange,
   value = '',
   onSubmit = () => {},
-  placeholder,
+  placeholder = '검색어를 입력해 주세요',
 }: SearchInputProps) {
-  const [inputValue, setInputValue] = useState(value);
   const [isFocused, setIsFocused] = useState(false);
 
-  const defaultPlaceholder =
-    size === 'large' ? '이름으로 위키 검색' : '제목을 검색해 주세요.';
-
   // 크기별 스타일
   const sizeStyles = {
     large: {
       container: 'w-[860px] h-[45px] ',
-      padding: 'p-[8px] pl-[56px] pr-[128px]',
+      padding: 'p-[20px] pl-[15px]',
     },
     medium: {
       container: 'w-[800px] h-[40px] ',
-      padding: 'p-[8px] pl-[56px] pr-[128px]',
+      padding: 'p-[20px] pl-[15px]',
     },
   };
 
@@ -48,35 +46,33 @@ function SearchInput({
   ].join(' ');
 
   function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
-    setInputValue(e.target.value);
+    onChange(e.target.value); // 부모 컴포넌트에 값 전달
   }
 
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    onSubmit(inputValue);
+    onSubmit(value); // 부모 컴포넌트에서 관리하는 value 전달
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div className="relative">
-        <div className="absolute left-4 top-1/2 -translate-y-1/2 transform">
-          <img
-            src="/icon/icon-search.svg"
-            alt="검색 아이콘"
-            className="h-[22px] w-[22px]"
-          />
-        </div>
-
-        <input
-          className={inputStyles}
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          placeholder={placeholder || defaultPlaceholder}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-        />
-      </div>
+    <form
+      onSubmit={handleSubmit}
+      className="flex items-center rounded-lg bg-gray-100 px-[20px]"
+    >
+      <img
+        src="/icon/icon-search.svg"
+        alt="검색 아이콘"
+        className="h-[22px] w-[22px]"
+      />
+      <input
+        className={inputStyles}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
     </form>
   );
 }
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
index fb76771..168cb59 100644
--- a/pages/test/index.tsx
+++ b/pages/test/index.tsx
@@ -43,7 +43,7 @@ export default function Test() {
           <tr>
             <td className={commonCellClass}>SearchInput</td>
             <td className={commonRowClass}>
-              <SearchInput />
+              <SearchInput size="large" value="" onChange={() => {}} />
             </td>
           </tr>
         </tbody>

From 8cc14d80a5cb1385db5d2f1db0b278db8a96a9f2 Mon Sep 17 00:00:00 2001
From: jy <105865068+crazyupinc-design@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:09:16 +0900
Subject: [PATCH 3/5] =?UTF-8?q?SearchInput.tsx=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

이미지를 라벨로 감싸고 처리함
---
 components/SearchInput.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
index f39ee98..be14a82 100644
--- a/components/SearchInput.tsx
+++ b/components/SearchInput.tsx
@@ -59,11 +59,13 @@ function SearchInput({
       onSubmit={handleSubmit}
       className="flex items-center rounded-lg bg-gray-100 px-[20px]"
     >
+     <label htmlFor="searchInput">
       <img
         src="/icon/icon-search.svg"
         alt="검색 아이콘"
         className="h-[22px] w-[22px]"
       />
+    </label>
       <input
         className={inputStyles}
         type="text"

From 91ac8fdc047c250a384ec38f9c17c0d686574b6b Mon Sep 17 00:00:00 2001
From: jy <105865068+crazyupinc-design@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:19:49 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
index be14a82..f9b6098 100644
--- a/components/SearchInput.tsx
+++ b/components/SearchInput.tsx
@@ -60,13 +60,10 @@ function SearchInput({
       className="flex items-center rounded-lg bg-gray-100 px-[20px]"
     >
      <label htmlFor="searchInput">
-      <img
-        src="/icon/icon-search.svg"
-        alt="검색 아이콘"
-        className="h-[22px] w-[22px]"
-      />
-    </label>
+       <img src="/icon/icon-search.svg" alt="검색" />
+     </label>
       <input
+        id="searchInput"
         className={inputStyles}
         type="text"
         value={value}

From cb7b123c1b79cf00b2f7016b7f4e39dd012cd17d Mon Sep 17 00:00:00 2001
From: jiminyee <jiminyee@crazyupinc.com>
Date: Mon, 16 Dec 2024 18:52:38 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=9A=A8Resolve=20lint=20and=20prettier?=
 =?UTF-8?q?=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.tsx |  6 +++---
 pages/test/index.tsx       |  1 -
 tsconfig.json              | 24 +++++-------------------
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
index f9b6098..71cbfe0 100644
--- a/components/SearchInput.tsx
+++ b/components/SearchInput.tsx
@@ -59,9 +59,9 @@ function SearchInput({
       onSubmit={handleSubmit}
       className="flex items-center rounded-lg bg-gray-100 px-[20px]"
     >
-     <label htmlFor="searchInput">
-       <img src="/icon/icon-search.svg" alt="검색" />
-     </label>
+      <label htmlFor="searchInput">
+        <img src="/icon/icon-search.svg" alt="검색" />
+      </label>
       <input
         id="searchInput"
         className={inputStyles}
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
index b3b5521..3d338fc 100644
--- a/pages/test/index.tsx
+++ b/pages/test/index.tsx
@@ -5,7 +5,6 @@ import Dropdown from '@/components/Dropdown';
 import LinkBar from '@/components/LinkBar';
 import SnackBar from '@/components/SnackBar';
 
-
 export default function Test() {
   const commonCellClass = 'border-r border-gray-300';
   const commonRowClass = 'flex flex-wrap items-end gap-2';
diff --git a/tsconfig.json b/tsconfig.json
index 03d1b81..c32ac62 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,15 +16,9 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/components/*": [
-        "components/*"
-      ],
-      "@/styles/*": [
-        "styles/*"
-      ],
-      "@/pages/*": [
-        "pages/*"
-      ]
+      "@/components/*": ["components/*"],
+      "@/styles/*": ["styles/*"],
+      "@/pages/*": ["pages/*"]
     }
   },
   "include": [
@@ -37,9 +27,5 @@
     "components/**/*.ts",
     "components/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    ".next"
-  ]
+  "exclude": ["node_modules", "dist", ".next"]
 }