✨ 검색창 컴포넌트 제작

components/SearchInput.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+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 = '검색어를 입력해 주세요',
+}: SearchInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  // 크기별 스타일
+  const sizeStyles = {
+    large: {
+      container: 'w-[860px] h-[45px] ',
+      padding: 'p-[20px] pl-[15px]',
+    },
+    medium: {
+      container: 'w-[800px] h-[40px] ',
+      padding: 'p-[20px] pl-[15px]',
+    },
+  };
+
+  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>) {
+    onChange(e.target.value); // 부모 컴포넌트에 값 전달
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    onSubmit(value); // 부모 컴포넌트에서 관리하는 value 전달
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex items-center rounded-lg bg-gray-100 px-[20px]"
+    >
+      <label htmlFor="searchInput">
+        <img src="/icon/icon-search.svg" alt="검색" />
+      </label>
+      <input
+        id="searchInput"
+        className={inputStyles}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </form>
+  );
+}
+
+export default SearchInput;

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"]
 }