diff --git a/src/components/Category/CategoryBanner/CategoryBanner.styles.ts b/src/components/Category/CategoryBanner/CategoryBanner.styles.ts index e5bc9d6..a40293e 100644 --- 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 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/CategoryBanner/index.test.tsx b/src/components/Category/CategoryBanner/index.test.tsx index 18029e5..29d35b6 100644 --- 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( - , + , { wrapper }, ); @@ -34,11 +29,7 @@ describe("CategoryBanner", () => { const secondText = "지금 둘러보세요."; render( - , + , { wrapper }, ); diff --git a/src/components/Category/CategoryBanner/index.tsx b/src/components/Category/CategoryBanner/index.tsx index 8f71385..0bb3a43 100644 --- 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 ( <> - -

{firstText}

-

{secondText}

- + - - -
+
+ +

{firstText}

+

{secondText}

+
+ + + +
+ +
); 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` 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) => { }); }) ) : ( -

검색 결과가 없습니다.

+ + 검색 결과가 없습니다. + )} ); 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` 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` 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) => { - {data.name} + {_.truncate(data.name, { length: categoryViewAtom ? 50 : 20 })} {!categoryViewState && ( 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(); + const wrapper = createWrapper(); + render(, { wrapper }); expect( screen.getByText("원하는 검색지를 찾아보세요 🕵️‍♀️"), ).toBeInTheDocument(); }); + + it("버튼 클릭 시 /search 로 이동하는지 테스트", () => { + const wrapper = createWrapper(); + render(, { 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 ( <> - 원하는 검색지를 찾아보세요 🕵️‍♀️ + + 원하는 검색지를 찾아보세요 🕵️‍♀️ + ); }; 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 = () => { - {/* */} - - {/* 이부분 좋아요 하트자리 */} - {/* */} + + + + { const firstText = "숙소를"; const secondText = "찾으셨나요?"; - const router = useNavigate(); - const handleClickSearch = () => { - router("/search"); - }; return ( - +