Merge pull request #39 from codeit9-temporary/features/SearchInput-ui컴포넌트-구현

Feat: SearchInput 컴포넌트 구현, global.css input outline:none 추가, tailwind.config 반응형 값 수정

Author: junjeeong

components/Search/SearchInput.tsx

@@ -0,0 +1,42 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+export const SearchInput = () => {
+  const router = useRouter();
+  const [value, setValue] = useState("");
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, search: value },
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex gap-[8px] w-[1024px] h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:w-[704px] md:h-[54px] sm:w-[325px] sm:h-[43px] transition-all"
+    >
+      <Image
+        src="/icons/search.svg"
+        width={16}
+        height={16}
+        alt="search button"
+      />
+      <input
+        value={value}
+        onChange={handleChange}
+        placeholder="링크를 검색해 보세요."
+        className="flex-grow bg-transparent placeholder:text-gray-500"
+      />
+    </form>
+  );
+};
+
+export default SearchInput;

public/icons/search.svg

@@ -4,8 +4,7 @@
 
 @font-face {
   font-family: "Pretendard-Regular";
-  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
-    format("woff");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
 }
@@ -36,3 +35,7 @@ button {
   cursor: pointer;
   font-family: inherit;
 }
+
+input {
+  outline: none;
+}

styles/globals.css

@@ -23,9 +23,9 @@ const config: Config = {
         purple100: "#6d6afe",
       },
       screens: {
-        sm: "343px",
-        md: "768px",
-        lg: "1200px",
+        sm: { min: "343px", max: "767px" },
+        md: { min: "768px", max: "1199px" },
+        lg: { min: "1200px" },
       },
     },
   },