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 (
-
+