feat: before search/after search page, add router with params

package.json

@@ -25,6 +25,7 @@
     "vite-plugin-svgr": "^2.2.1"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",

src/App.jsx

@@ -35,6 +35,8 @@ import Notice from './pages/Notice'
 import Faq from './pages/Faq'
 import CategoryFashion from './components/Category'
 import MainCategory from './pages/Category/MainCategory'
+import AfterSearch from './pages/Search/AfterSearch'
+import BeforeSearch from './pages/Search/BeforeSearch'
 
 function App() {
   const location = useLocation()
@@ -78,7 +80,8 @@ function App() {
           </Route>
           <Route path="/cart" element={<Cart />} />
           <Route path="/search" element={<Search />}>
-            <Route path=":search" />
+            <Route path="" element={<BeforeSearch />} />
+            <Route path=":search" element={<AfterSearch />} />
           </Route>
           <Route path="/order" element={<Order />} />
         </Routes>

src/components/CardList/Card.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { cls } from '../../utils'
+import heart from '/public/assets/heart-on.svg'
+
+function Card({ data, purchase }) {
+  const { brand, productName, thumbnail, price, sale } = data
+  const saleCost = parseInt((price * (100 - sale)) / 100)
+
+  return (
+    <div>
+      <div className="relative">
+        <div className="w-full bg-cover overflow-hidden relative justify-center after:content('') after:block after:pb-[100%]">
+          <img src={thumbnail} alt={productName} className="absolute" />
+        </div>
+        {!purchase && (
+          <div className="absolute w-[13%] max-w-[35px] top-2.5 right-2.5">
+            <img src={heart} alt="heart" />
+          </div>
+        )}
+      </div>
+      <div className={purchase ? '' : 'px-5 py-2.5'}>
+        <div>
+          <div
+            className={cls(
+              'font-bold',
+              purchase ? 'text-xs pt-2 pb-1 truncate' : 'text-sm',
+            )}
+          >
+            {brand}
+          </div>
+          <div
+            className={cls(
+              'font-normal text-black-800',
+              purchase
+                ? 'text-[10px] overflow-hidden line-clamp-2 md:line-clamp-none'
+                : 'text-xs truncate',
+            )}
+          >
+            {productName}
+          </div>
+          {!purchase && (
+            <div className="test-xs font-medium text-black-600">{price} ¥</div>
+          )}
+        </div>
+        {!purchase && (
+          <div className="flex text-sm font-bold">
+            <div className="text-primary mr-3">{sale}%</div>
+            <div className="text-black-100">{saleCost} ¥</div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Card

src/components/Category/Container.jsx → src/components/CardList/Container.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import Card from './Card'
-import { likedList } from '~/dummy/liked'
+import product from '~/dummy/dummy/product.json'
 
-function Container() {
+function Container({ list }) {
   return (
     <div className="pt-56">
       <div className="w-full grid grid-cols-2 gap-1">
-        {likedList.map((item, idx) => (
+        {list.map((item, idx) => (
           <Card key={idx} data={item} />
         ))}
       </div>

src/components/Category/CategoryList.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useMemo } from 'react'
 import { useEffect } from 'react'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
@@ -13,10 +14,11 @@ function CategoryList({ topCG, subCG }) {
   const [subCategoryList, setSubCategoryList] = useState([])
   const [lastCategoryList, setLastSubCategoryList] = useState([])
   const userGender = useSelector((state) => state.user).gender
+  const setCategory = JSON.parse(JSON.stringify(CATEGORY))
 
   // 랜더링과 동시에 코트매틱 category에서 '브랜드' 리스트 삭제 (한번만 실행)
   useEffect(() => {
-    CATEGORY.map((top) => {
+    setCategory.map((top) => {
       if (top.TopCategory === '뷰티') {
         top.subCategory.map((sub) => {
           if (sub.name === '브랜드') {
@@ -30,13 +32,14 @@ function CategoryList({ topCG, subCG }) {
   // topCategory가 바뀌면 디폴트로 subCategory의 첫번째 요소 name이 active 상태가 되도록
   // sub카테고리가 바뀔때 last카테고리의 디폴트를 '전체'로
   useEffect(() => {
-    CATEGORY.map((top) => {
+    console.log(CATEGORY)
+    setCategory.map((top) => {
       if (selectTop === top.TopCategory) {
         setSubCategoryList(top.subCategory)
       }
     })
     setSelectLast('전체')
-  }, [selectSub])
+  }, [selectSub, userGender])
 
   // 패션 카테고리만 성별에 따라 바뀌므로
   useEffect(() => {

src/components/Category/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import CategoryList from './CategoryList'
-import Container from './Container'
+import Container from '../CardList/Container'
 import Capsule from './Capsule'
+import product from '~/dummy/dummy/product.json'
 import { useParams } from 'react-router-dom'
 import { useEffect } from 'react'
 
@@ -11,7 +12,7 @@ function CategoryFashion() {
   return (
     <div>
       <CategoryList topCG={topCG} subCG={subCG} />
-      <Container />
+      <Container list={product} />
       <Capsule />
     </div>
   )

src/components/Liked/Card.jsx

@@ -6,7 +6,7 @@ import check from '/public/assets/allCheck.svg'
 import notCheck from '/public/assets/allNotCheck.svg'
 
 function Card({ editMode, data, deleteList, setDeleteList }) {
-  const { brand, productName, image, price, sale } = data
+  const { brand, productName, thumbnail, price, sale } = data
   const saleCost = parseInt((price * (100 - sale)) / 100)
   const [selected, setSelected] = useState(false)
 
@@ -19,7 +19,7 @@ function Card({ editMode, data, deleteList, setDeleteList }) {
     <div>
       <div className="relative">
         <div className="w-full bg-cover overflow-hidden relative justify-center after:content('') after:block after:pb-[100%]">
-          <img src={image} alt="kirsh product" className="absolute" />
+          <img src={thumbnail} alt="kirsh product" className="absolute" />
         </div>
         <div>
           {editMode ? (