From 6a4385701d3479531be3570798d233f0c2f29b92 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 30 Nov 2023 22:06:19 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Feat=20:=20HeartClick=20=EB=94=94=ED=85=8C?=
 =?UTF-8?q?=EC=9D=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Detail/index.tsx                |  2 +-
 src/pages/DetailList/DetailList.styles.ts |  7 +++++++
 src/pages/DetailList/index.tsx            | 19 ++++++++++++-------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/pages/Detail/index.tsx b/src/pages/Detail/index.tsx
index db27deb..05abe61 100644
--- a/src/pages/Detail/index.tsx
+++ b/src/pages/Detail/index.tsx
@@ -40,7 +40,7 @@ const Detail = () => {
   }
 
   console.log("roomId", roomId);
-  console.log("데이터:", data.data);
+  console.log("데이터:", data?.data);
 
   if (error || !roomDetails) {
     return <div>Error: {error ? error.message : "객실 정보가 없습니다."}</div>;
diff --git a/src/pages/DetailList/DetailList.styles.ts b/src/pages/DetailList/DetailList.styles.ts
index 2f0648f..514ddb8 100644
--- a/src/pages/DetailList/DetailList.styles.ts
+++ b/src/pages/DetailList/DetailList.styles.ts
@@ -24,3 +24,10 @@ export const DetailsContainer = styled.div`
   justify-content: flex-start;
   height: auto;
 `;
+
+export const HorizontalContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
diff --git a/src/pages/DetailList/index.tsx b/src/pages/DetailList/index.tsx
index 631627b..9488068 100644
--- a/src/pages/DetailList/index.tsx
+++ b/src/pages/DetailList/index.tsx
@@ -8,6 +8,7 @@ import { useGetAccommodationDetail } from "../../hooks/useDetailFetch.ts";
 // import { accommodationDetail } from "../../mock/detailListPageData.ts";
 import { useLocation } from "react-router-dom";
 import * as Styled from "./DetailList.styles.ts";
+import HeartClick from "../../components/Category/HeartClick/index.tsx";
 
 const DetailList = () => {
   const location = useLocation();
@@ -27,13 +28,17 @@ const DetailList = () => {
       <Styled.Layout>
         <ProductImage image={accommodationDetail.data.data.thumbnailUrl} />
         <Styled.DetailsContainer>
-          {/* <Styled.HorizontalContainer> */}
-          <ProductTitle
-            type={accommodationDetail.data.data.type}
-            name={accommodationDetail.data.data.name}
-          />
-          {/* <StockStatusBanner />  이부분 좋아요 하트자리 */}
-          {/* </Styled.HorizontalContainer> */}
+          <Styled.HorizontalContainer>
+            <ProductTitle
+              type={accommodationDetail.data.data.type}
+              name={accommodationDetail.data.data.name}
+            />
+            <HeartClick
+              likes={accommodationDetail.data.data.wishCount}
+              likes_clicked={accommodationDetail.data.data.isWish}
+              accommodationId={accommodationDetail.data.data.id}
+            />
+          </Styled.HorizontalContainer>
           <ProductInfo
             address={accommodationDetail.data.data.address}
             infoDetail={accommodationDetail.data.data.infoDetail}

From b2ff4d53a0063ff1685e982026fb6959dd2449c5 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 30 Nov 2023 22:35:54 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Feat=20:=20url=20queryParameter=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryBanner/CategoryBanner.types.ts     |  1 -
 .../Category/SearchButton/index.test.tsx       | 18 ++++++++++++++++--
 src/components/Category/SearchButton/index.tsx |  9 ++++++++-
 src/utils/filterDecoder.ts                     |  6 +++---
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/Category/CategoryBanner/CategoryBanner.types.ts b/src/components/Category/CategoryBanner/CategoryBanner.types.ts
index 25fb667..cb463d8 100644
--- a/src/components/Category/CategoryBanner/CategoryBanner.types.ts
+++ b/src/components/Category/CategoryBanner/CategoryBanner.types.ts
@@ -1,5 +1,4 @@
 export type CategoryBannerProps = {
   firstText: string;
   secondText: string;
-  searchFn: () => void;
 };
diff --git a/src/components/Category/SearchButton/index.test.tsx b/src/components/Category/SearchButton/index.test.tsx
index b9f4acf..e6079cb 100644
--- a/src/components/Category/SearchButton/index.test.tsx
+++ b/src/components/Category/SearchButton/index.test.tsx
@@ -1,12 +1,26 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import SearchButton from ".";
+import { createWrapper } from "../../../test/test.utils";
+
+const mockNavigate = jest.fn();
 
 describe("SearchButton", () => {
   it("버튼이 잘 렌더링 되는지 테스트", () => {
-    render(<SearchButton />);
+    const wrapper = createWrapper();
+    render(<SearchButton />, { wrapper });
 
     expect(
       screen.getByText("원하는 검색지를 찾아보세요 🕵️‍♀️"),
     ).toBeInTheDocument();
   });
+
+  it("버튼 클릭 시 /search 로 이동하는지 테스트", () => {
+    const wrapper = createWrapper();
+    render(<SearchButton />, { wrapper });
+
+    const button = screen.getByText("원하는 검색지를 찾아보세요 🕵️‍♀️");
+    button.click();
+
+    waitFor(() => expect(mockNavigate).toHaveBeenCalledWith("/search"));
+  });
 });
diff --git a/src/components/Category/SearchButton/index.tsx b/src/components/Category/SearchButton/index.tsx
index 13081b1..4cb5d1f 100644
--- a/src/components/Category/SearchButton/index.tsx
+++ b/src/components/Category/SearchButton/index.tsx
@@ -1,9 +1,16 @@
+import { useNavigate } from "react-router-dom";
 import * as Styled from "./SearchButton.styles";
 
 const SearchButton = () => {
+  const router = useNavigate();
+  const handleClick = () => {
+    router("/search");
+  };
   return (
     <>
-      <Styled.SearchButton>원하는 검색지를 찾아보세요 🕵️‍♀️</Styled.SearchButton>
+      <Styled.SearchButton onClick={handleClick}>
+        원하는 검색지를 찾아보세요 🕵️‍♀️
+      </Styled.SearchButton>
     </>
   );
 };
diff --git a/src/utils/filterDecoder.ts b/src/utils/filterDecoder.ts
index 85386e8..62adec4 100644
--- a/src/utils/filterDecoder.ts
+++ b/src/utils/filterDecoder.ts
@@ -18,15 +18,15 @@ export const checkCategoryQueryUrl = ({
     typeUrl: type !== 99 && type !== null ? `&type=${type}` : "",
     categoryParkingUrl:
       categoryParking !== 2 && categoryParking !== null
-        ? `&categoryParking=${categoryParking}`
+        ? `&category-parking=${categoryParking}`
         : "",
     categoryCookingUrl:
       categoryCooking !== 2 && categoryCooking !== null
-        ? `&categoryCooking=${categoryCooking}`
+        ? `&category-cooking=${categoryCooking}`
         : "",
     categoryPickupUrl:
       categoryPickup !== 2 && categoryPickup !== null
-        ? `&categoryPickup=${categoryPickup}`
+        ? `&category-pickup=${categoryPickup}`
         : "",
   };
 

From 5e43dc57bc2417d0e0d2fa9f4246d998426b8122 Mon Sep 17 00:00:00 2001
From: MinSeobKim <icdmiracle927@gmail.com>
Date: Thu, 30 Nov 2023 22:53:23 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Feat=20:=20=EA=B2=80=EC=83=89=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryItemWrapper/CategoryItemWrapper.styles.ts |  7 +++++++
 src/components/Category/CategoryItemWrapper/index.tsx |  4 +++-
 .../Category/CatgoryItem/CategoryItem.styles.ts       |  4 ++++
 src/components/Category/CatgoryItem/index.tsx         |  2 +-
 src/pages/SearchList/index.tsx                        | 11 +----------
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Category/CategoryItemWrapper/CategoryItemWrapper.styles.ts b/src/components/Category/CategoryItemWrapper/CategoryItemWrapper.styles.ts
index c5dcb8e..9d32133 100644
--- a/src/components/Category/CategoryItemWrapper/CategoryItemWrapper.styles.ts
+++ b/src/components/Category/CategoryItemWrapper/CategoryItemWrapper.styles.ts
@@ -11,3 +11,10 @@ export const CategoryItemWrapper = styled.div<CategoryItemWrapperProps>`
   justify-content: center;
   gap: 1rem;
 `;
+
+export const CategoryItemNoContentMessage = styled.h1`
+  font-size: 1.5rem;
+  font-weight: 800;
+  text-align: center;
+  color: #ff5100;
+`;
diff --git a/src/components/Category/CategoryItemWrapper/index.tsx b/src/components/Category/CategoryItemWrapper/index.tsx
index ac503e2..3fe7957 100644
--- a/src/components/Category/CategoryItemWrapper/index.tsx
+++ b/src/components/Category/CategoryItemWrapper/index.tsx
@@ -17,7 +17,9 @@ const CategoryItemWrapper = ({ data }: CategoryItemWrapperProps) => {
           });
         })
       ) : (
-        <h1>검색 결과가 없습니다.</h1>
+        <Styled.CategoryItemNoContentMessage>
+          검색 결과가 없습니다.
+        </Styled.CategoryItemNoContentMessage>
       )}
     </Styled.CategoryItemWrapper>
   );
diff --git a/src/components/Category/CatgoryItem/CategoryItem.styles.ts b/src/components/Category/CatgoryItem/CategoryItem.styles.ts
index e635899..37c882f 100644
--- a/src/components/Category/CatgoryItem/CategoryItem.styles.ts
+++ b/src/components/Category/CatgoryItem/CategoryItem.styles.ts
@@ -62,6 +62,8 @@ export const CategoryTextWrapper = styled.div<CategoryItemContainerProps>`
   flex-direction: column;
   align-items: start;
 
+  position: relative;
+
   width: ${(props) => (props.view ? "195px" : "90%")};
 
   gap: 1rem;
@@ -71,6 +73,8 @@ export const CategoryName = styled.strong<CategoryItemContainerProps>`
   font-size: 1.1rem;
   font-weight: 700;
 
+  line-height: 1.5rem;
+
   color: #222222;
 `;
 
diff --git a/src/components/Category/CatgoryItem/index.tsx b/src/components/Category/CatgoryItem/index.tsx
index e2d10bd..283ccbc 100644
--- a/src/components/Category/CatgoryItem/index.tsx
+++ b/src/components/Category/CatgoryItem/index.tsx
@@ -53,7 +53,7 @@ const CategoryItem = ({ data }: CategoryItemProps) => {
         </div>
         <Styled.CategoryTextWrapper view={categoryViewState}>
           <Styled.CategoryName view={categoryViewState}>
-            {data.name}
+            {_.truncate(data.name, { length: categoryViewAtom ? 50 : 20 })}
           </Styled.CategoryName>
           <Styled.CategoryTopWrapper>
             {!categoryViewState && (
diff --git a/src/pages/SearchList/index.tsx b/src/pages/SearchList/index.tsx
index 39059d1..c60e4e5 100644
--- a/src/pages/SearchList/index.tsx
+++ b/src/pages/SearchList/index.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import CategoryBanner from "../../components/Category/CategoryBanner";
 import CategoryQuery from "../../components/Category/CategoryQuery";
 import * as Styled from "./SearchList.styles";
@@ -10,18 +9,10 @@ const SearchList = () => {
 
   const firstText = "숙소를";
   const secondText = "찾으셨나요?";
-  const router = useNavigate();
 
-  const handleClickSearch = () => {
-    router("/search");
-  };
   return (
     <Styled.SearchResultContainer>
-      <CategoryBanner
-        firstText={firstText}
-        secondText={secondText}
-        searchFn={handleClickSearch}
-      />
+      <CategoryBanner firstText={firstText} secondText={secondText} />
       <Styled.ItemWrapper>
         <Styled.Main>
           <CategoryQuery