Complete search

iasandcb · Oct 23, 2024 · 0d2788f · 0d2788f
1 parent 8bc2ef9
commit 0d2788f
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 0 deletions.
diff --git a/app/page.js b/app/page.js
@@ -1,13 +1,15 @@
 import styles from "./page.module.css";
 import ProductList from "@/components/ProductList";
 import axios from '@/lib/axios';
+import SearchForm from "@/components/SearchForm";
 
 export default async function Home() {
   const res = await axios.get('/products');
   const products = res.data.results;
 
   return (
     <>
+    <SearchForm />
     <ProductList className={styles.productList} products={products}/>
     </>
   );

diff --git a/app/search/page.js b/app/search/page.js
@@ -0,0 +1,24 @@
+import Head from 'next/head';
+import ProductList from '@/components/ProductList';
+import SearchForm from '@/components/SearchForm';
+import axios from '@/lib/axios';
+import styles from "./page.module.css";
+
+export default async function Search({ searchParams }) {
+  const { q } = await searchParams;
+
+  const res = await axios.get(`/products/?q=${q}`);
+  const products = res.data.results ?? [];
+  return (
+    <>
+      <Head>
+        <title>{q} 검색 결과 - Codeitmall</title>
+      </Head>
+      <SearchForm initialValue={q} />
+      <h2 className={styles.title}>
+        <span className={styles.keyword}>{q}</span> 검색 결과
+      </h2>
+      <ProductList className={styles.productList} products={products} />
+    </>
+  );
+}
diff --git a/app/search/page.module.css b/app/search/page.module.css
@@ -0,0 +1,24 @@
+.title {
+  padding: 0 10px;
+  color: #b5b5b5;
+  font-weight: 500;
+  font-size: 26px;
+  line-height: 38px;
+}
+
+.title > .keyword {
+  color: #f9f9f9;
+  font-weight: 700;
+}
+
+:global(.light) .title {
+  color: #747474;
+}
+
+:global(.light) .keyword {
+  color: #1f1f1f;
+}
+
+.productList {
+  margin: 30px 0 60px;
+}
diff --git a/components/SearchForm.js b/components/SearchForm.js
@@ -0,0 +1,22 @@
+import styles from './SearchForm.module.css';
+import { redirect } from 'next/navigation'
+
+
+export default function SearchForm({ initialValue = '' }) {
+  const handleSubmit = async (formData) => {
+    'use server'
+    redirect(`/search?q=${encodeURI(formData.get('q'))}`);
+  };
+
+  return (
+    <form className={styles.searchForm} action={handleSubmit}>
+      <input
+        className={styles.searchInput}
+        name="q"
+        defaultValue={initialValue}
+        placeholder="찾고 싶은 옷을 검색해보세요."
+      />
+      <button type="submit" className={styles.searchButton}>검색</button>
+    </form>
+  );
+}
diff --git a/components/SearchForm.module.css b/components/SearchForm.module.css
@@ -0,0 +1,35 @@
+.searchForm {
+  display: flex;
+  gap: 15px;
+}
+
+.searchInput {
+  width: 400px;
+  padding: 0px 30px;
+  color: #f9f9f9;
+  font-size: 18px;
+  background-color: #252525;
+  border: 1px solid #505050;
+  border-radius: 10px;
+  outline: none;
+}
+
+:global(.light) .searchInput {
+  color: #1f1f1f;
+  background-color: #f9f9f9;
+  border: 1px solid #cfcfcf;
+}
+
+.searchButton {
+  padding: 16px 40px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+  border: none;
+  border-radius: 10px;
+}
+
+:global(.light) .searchButton {
+  color: #f9f9f9;
+  background-color: #505050;
+}