Merge pull request #247 from LikeLion-at-DGU/dev

🚀 Deploy

src/apis/search.js

@@ -0,0 +1,11 @@
+import { instance } from "./instance";
+
+export const getSearchContent = async (data) => {
+  try {
+    const res = await instance.get(`/api/search?data=${data}`);
+    return res;
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/components/MyStar/SearchResultStar.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import * as S from "./styled";
+import Arrow from "@/assets/Arrow.svg";
+export const SearchResultStar = (src, name, profession) => {
+  return (
+    <>
+      <S.Container>
+        <S.StarImg src={src} />
+        <S.info>
+          <div>{name}</div>
+          <div>{profession}</div>
+        </S.info>
+        <img src={Arrow} />
+      </S.Container>
+    </>
+  );
+};

src/components/SearchBox/SearchBox.jsx

@@ -1,10 +1,26 @@
 import * as S from "./styled";
+import React, { useState } from "react";
 
-const SearchBox = () => {
+const SearchBox = ({ onsearchResult }) => {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleSearchClick = () => {
+    onsearchResult(inputValue);
+  };
   return (
     <S.Container>
-      <input type="text" placeholder="Search" className="SearchInput" />
-      <button>
+      <input
+        type="text"
+        placeholder="Search"
+        className="SearchInput"
+        value={inputValue}
+        onChange={handleInputChange}
+      />
+      <button onClick={handleSearchClick}>
         <svg
           className="SearchIcon"
           xmlns="http://www.w3.org/2000/svg"

src/components/SubRoutineBox/SubRoutineBox.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import * as S from "./styled";
 import { useNavigate } from "react-router-dom";
 
-function RoutineBox({ id, title, star }) {
+function RoutineBox({ id, title, star, img }) {
   const navigate = useNavigate();
 
   const handleStarClick = () => {
@@ -12,7 +12,7 @@ function RoutineBox({ id, title, star }) {
 
   return (
     <S.RoutineBoxContainer>
-      <S.RoutineBoxImg></S.RoutineBoxImg>
+      <S.RoutineBoxImg src={img} />
       <S.RoutineBoxContent>
         <S.RoutineBoxTitle>{title}</S.RoutineBoxTitle>
         <S.RoutineBoxStar onClick={handleStarClick}>{star}</S.RoutineBoxStar>

src/components/ThemePage/RoutineBoxContainer/RoutineBoxContainer.jsx

@@ -16,3 +16,4 @@ export const RoutineBoxContainer = ({ routine, onPlusButtonClick }) => {
     ))}
   </S.RoutineBoxContainer>;
 };
+//어디서 쓰는거지...? 확인 후 안쓰면 버리자. 뭔가 정리하려다 실패한것 같음.

src/hooks/useSearchResult.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { getSearchContent } from "@/apis/search";
+import { useParams } from "react-router-dom";
+
+export const useSearchResult = () => {
+  const [search, setSearch] = useState(null);
+  const { data } = useParams();
+  const fetchSearchData = async () => {
+    try {
+      const res = await getSearchContent(data);
+      console.log("response:", res);
+      setSearch(res);
+    } catch (error) {
+      console.error("error:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchSearchData();
+  }, []);
+
+  return { search }; //객체로 담아서 전달해주기
+};

src/pages/Mainpage/Mainpage.jsx

@@ -35,6 +35,7 @@ function Mainpage() {
                 <RoutineBox
                   key={data.id}
                   id={data.id}
+                  img={data.image}
                   title={data.title}
                   star={data.celeb_name}
                 />

src/pages/SearchPage/SearchPage.jsx

@@ -2,13 +2,18 @@ import React, { useState } from "react";
 import * as S from "./styled";
 import { Header } from "../../components/common/Header/Header";
 import SearchBox from "../../components/SearchBox/SearchBox";
-import SearchCategoryBox from "../../components/SearchCategoryBox/SearchCategoryBox";
 import { DUMMY_DATA, data, Title } from "../../constants/Search/dummy";
 import { useNavigate } from "react-router-dom";
-
+import SearchCategoryBox from "@/components/SearchCategoryBox/SearchCategoryBox";
 const SearchPage = () => {
   const navigate = useNavigate();
 
+  //검색결과확인
+  const handlesearchClick = (data) => {
+    navigate(`/api/search?data=${data}`);
+  };
+
+  //모아보기
   const moveOnCategoryPage = (sectionId, subCategoryId) => {
     navigate(`/subcategory/${sectionId}/${subCategoryId}`);
   };
@@ -23,7 +28,7 @@ const SearchPage = () => {
         검색
       </Header>
       <S.Container>
-        <SearchBox />
+        <SearchBox onsearchResult={handlesearchClick} />
         {sections.map((section, index) => (
           <S.CategoryWrapper key={index}>
             <div className="Title">{section.title.category}</div>

src/pages/SearchPage/SearchResultP.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { useSearchResult } from "@/hooks/useSearchResult";
+import { SearchResultStar } from "@/components/MyStar/SearchResultStar";
+import { useNavigate } from "react-router-dom";
+import { SearchBox } from "@/components/SearchBox/SearchBox";
+
+export const SearchResultP = () => {
+  const navigate = useNavigate();
+  const { result } = useSearchResult();
+  const resultData = result.data;
+  console.log("resultData:", resultData);
+  const Category = Object.keys(resultData);
+
+  const moveonStarPage = (id) => {
+    navigate(`/api/celeb/${id}/`);
+  };
+
+  const handlesearchClick = (data) => {
+    navigate(`/api/search?data=${data}`);
+  };
+
+  return (
+    <S.Layout>
+      <Header $margin={"1rem 0 0 0"} $padding={"1rem 1rem 0 1rem"}>
+        검색
+      </Header>
+      <S.Container>
+        <SearchBox onsearchResult={handlesearchClick} />
+        {Category.map((key, index) => (
+          <S.CategoryWrapper key={index}>
+            <div className="Title">{Category[index]}</div>
+            {resultData[key].map((item) => (
+              <SearchResultStar
+                key={item.id}
+                id={item.id}
+                src={item.src}
+                name={item.title}
+                profession={item.profession}
+                onClick={() => moveonStarPage(item.url)}
+              />
+            ))}
+          </S.CategoryWrapper>
+        ))}
+      </S.Container>
+    </S.Layout>
+  );
+};

src/pages/SubCategoryPage/SubCategoryPage.jsx

@@ -3,7 +3,7 @@ import * as S from "./styled";
 import { Header } from "../../components/common/Header/Header";
 import { useParams } from "react-router-dom";
 import { DUMMY_DATA, data, Title } from "../../constants/Search/dummy";
-
+//
 const SubCategoryPage = () => {
   const sections = [
     { title: Title[0], data: DUMMY_DATA },