Merge pull request #153 from Yanolza-Miniproject/feature/#144

Feat : detail Page 하트 추가
Yanolza-Miniproject · Nov 30, 2023 · c57d8e6 · c57d8e6
2 parents c198b42 + 91f1794
commit c57d8e6
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 69 deletions.
diff --git a/src/components/Category/CategoryBanner/CategoryBanner.styles.ts b/src/components/Category/CategoryBanner/CategoryBanner.styles.ts
@@ -14,40 +14,37 @@ export const Banner = styled.div`
   border-radius: 10px;
 `;
 
-export const AbsoluteBackground = styled.div`
-  position: absolute;
-  width: 200%;
+export const CategoryBannerWrapper = styled.div`
+  width: 90%;
   height: 100%;
 
-  background-color: #191554;
-  opacity: 0.5;
+  margin-left: 10%;
 `;
 
 export const CategoryBannerTextMotion = styled(motion.div)`
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  text-align: start;
 
-  gap: 0.5rem;
-
-  margin-top: 2%;
-  margin-left: 20%;
+  width: 100%;
+  height: 100%;
 
-  text-align: start;
+  gap: 0.5rem;
 
   font-size: 3em;
-  color: white;
   font-weight: 800;
+  color: white;
+`;
 
-  @media (max-width: 800px) {
-    margin-top: 2rem;
-    margin-left: 2rem;
+export const CategoryBannerTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
 
-    font-size: 2rem;
-  }
+  gap: 0.6rem;
 `;
 
 export const CategoryBannerSearchMotion = styled(motion.div)`
-  width: object-fit;
   margin-top: 1.2rem;
 
   @media (max-width: 800px) {

diff --git 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/CategoryBanner/index.test.tsx b/src/components/Category/CategoryBanner/index.test.tsx
@@ -6,17 +6,12 @@ import CategoryBanner from "./";
 describe("CategoryBanner", () => {
   it("텍스트가 잘 렌더링 되는지 테스트", () => {
     const wrapper = createRecoilWrapper();
-    const onChange = jest.fn();
 
     const firstText = "Hey 놀자!";
     const secondText = "지금 둘러보세요.";
 
     render(
-      <CategoryBanner
-        firstText={firstText}
-        secondText={secondText}
-        searchFn={onChange}
-      />,
+      <CategoryBanner firstText={firstText} secondText={secondText} />,
 
       { wrapper },
     );
@@ -34,11 +29,7 @@ describe("CategoryBanner", () => {
     const secondText = "지금 둘러보세요.";
 
     render(
-      <CategoryBanner
-        firstText={firstText}
-        secondText={secondText}
-        searchFn={onChange}
-      />,
+      <CategoryBanner firstText={firstText} secondText={secondText} />,
 
       { wrapper },
     );

diff --git a/src/components/Category/CategoryBanner/index.tsx b/src/components/Category/CategoryBanner/index.tsx
@@ -4,27 +4,32 @@ import * as Styled from "./CategoryBanner.styles";
 import { CategoryBannerProps } from "./CategoryBanner.types";
 
 const CategoryBanner = memo(
-  ({ searchFn, firstText, secondText }: CategoryBannerProps) => {
+  ({ firstText, secondText }: CategoryBannerProps) => {
     return (
       <>
         <Styled.Banner>
-          <Styled.CategoryBannerTextMotion
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 0.5 }}
-          >
-            <p>{firstText}</p>
-            <p>{secondText}</p>
-            <Styled.CategoryBannerSearchMotion
-              data-testid="search-button"
+          <Styled.CategoryBannerWrapper>
+            <Styled.CategoryBannerTextMotion
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              transition={{ duration: 1.5, delay: 1.3 }}
-              onClick={searchFn}
+              transition={{ duration: 1, delay: 0.5 }}
             >
-              <SearchButton />
-            </Styled.CategoryBannerSearchMotion>
-          </Styled.CategoryBannerTextMotion>
+              <div>
+                <Styled.CategoryBannerTextWrapper>
+                  <p>{firstText}</p>
+                  <p>{secondText}</p>
+                </Styled.CategoryBannerTextWrapper>
+                <Styled.CategoryBannerSearchMotion
+                  data-testid="search-button"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 1.5, delay: 1.3 }}
+                >
+                  <SearchButton />
+                </Styled.CategoryBannerSearchMotion>
+              </div>
+            </Styled.CategoryBannerTextMotion>
+          </Styled.CategoryBannerWrapper>
         </Styled.Banner>
       </>
     );

diff --git 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
@@ -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
@@ -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
@@ -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/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
@@ -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/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
@@ -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}

diff --git 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

diff --git 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}`
         : "",
   };