From 2e064583e67149062277c879bdd730c3a4e11dd4 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Thu, 15 Aug 2024 19:47:58 +0900 Subject: [PATCH 01/36] =?UTF-8?q?feat:=20=EC=97=AC=ED=96=89=EA=B8=B0=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20query=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/endpoint.ts | 1 + frontend/src/constants/queryKey.ts | 1 + .../queries/useInfiniteSearchTravelogues.ts | 56 +++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 frontend/src/queries/useInfiniteSearchTravelogues.ts diff --git a/frontend/src/constants/endpoint.ts b/frontend/src/constants/endpoint.ts index dada518d..acc457ae 100644 --- a/frontend/src/constants/endpoint.ts +++ b/frontend/src/constants/endpoint.ts @@ -10,4 +10,5 @@ export const API_ENDPOINT_MAP = { profile: "/member/me/profile", myTravelogues: "/member/me/travelogues", myTravelPlans: "/member/me/travel-plans", + searchTravelogues: "/travelogues/search", } as const; diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts index 6b082ace..7e89bfca 100644 --- a/frontend/src/constants/queryKey.ts +++ b/frontend/src/constants/queryKey.ts @@ -8,6 +8,7 @@ export const QUERY_KEYS_MAP = { userIdentifier, ], me: () => [...QUERY_KEYS_MAP.travelogue.member("me")], + search: (keyword: string) => [...QUERY_KEYS_MAP.travelogue.all, keyword], }, travelPlan: { all: ["travel-plans"], diff --git a/frontend/src/queries/useInfiniteSearchTravelogues.ts b/frontend/src/queries/useInfiniteSearchTravelogues.ts new file mode 100644 index 00000000..43d4115e --- /dev/null +++ b/frontend/src/queries/useInfiniteSearchTravelogues.ts @@ -0,0 +1,56 @@ +import { useInfiniteQuery } from "@tanstack/react-query"; + +import { authClient } from "@apis/client"; + +import { API_ENDPOINT_MAP } from "@constants/endpoint"; +import { QUERY_KEYS_MAP } from "@constants/queryKey"; + +export const getSearchTravelogues = async ({ + page, + size, + keyword, +}: { + page: number; + size: number; + keyword: string; +}) => { + const response = await authClient.get(API_ENDPOINT_MAP.searchTravelogues, { + params: { page, size, keyword }, + }); + + return response.data.content; +}; + +const useInfiniteSearchTravelogues = (keyword: string) => { + const INITIAL_PAGE = 0; + const DATA_LOAD_COUNT = 5; + + const { data, status, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({ + queryKey: QUERY_KEYS_MAP.travelogue.search(keyword), + queryFn: ({ pageParam = INITIAL_PAGE }) => { + const page = pageParam; + const size = DATA_LOAD_COUNT; + return getSearchTravelogues({ page, size, keyword }); + }, + initialPageParam: 0, + getNextPageParam: (lastPage, allPages) => { + const nextPage = lastPage.length ? allPages.length : undefined; + return nextPage; + }, + select: (data) => ({ + pages: data.pages.flatMap((page) => page), + pageParams: data.pageParams, + }), + }); + + return { + travelogues: data?.pages || [], + status, + error, + fetchNextPage, + isFetchingNextPage, + hasNextPage, + }; +}; + +export default useInfiniteSearchTravelogues; From 78e38991529d3f973dfcac4e2668427c336aaead Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:03:40 +0900 Subject: [PATCH 02/36] =?UTF-8?q?chore:=20=EA=B2=80=EC=83=89=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/svg/search-icon.svg | 3 +++ frontend/src/components/common/Icon/svg-icons.json | 9 +++++++++ 2 files changed, 12 insertions(+) create mode 100644 frontend/src/assets/svg/search-icon.svg diff --git a/frontend/src/assets/svg/search-icon.svg b/frontend/src/assets/svg/search-icon.svg new file mode 100644 index 00000000..8ad6e851 --- /dev/null +++ b/frontend/src/assets/svg/search-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/common/Icon/svg-icons.json b/frontend/src/components/common/Icon/svg-icons.json index c1253a30..35781f39 100644 --- a/frontend/src/components/common/Icon/svg-icons.json +++ b/frontend/src/components/common/Icon/svg-icons.json @@ -241,5 +241,14 @@ "strokeWidth": "0", "strokeLinecap": "", "strokeLinejoin": "" + }, + "search-icon": { + "width": 18, + "height": 18, + "path": "M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.146 12.3707 1.888 11.112C0.63 9.85333 0.000667196 8.316 5.29101e-07 6.5C-0.000666138 4.684 0.628667 3.14667 1.888 1.888C3.14733 0.629333 4.68467 0 6.5 0C8.31533 0 9.853 0.629333 11.113 1.888C12.373 3.14667 13.002 4.684 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.81267 10.5627 9.688 9.688C10.5633 8.81333 11.0007 7.75067 11 6.5C10.9993 5.24933 10.562 4.187 9.688 3.313C8.814 2.439 7.75133 2.00133 6.5 2C5.24867 1.99867 4.18633 2.43633 3.313 3.313C2.43967 4.18967 2.002 5.252 2 6.5C1.998 7.748 2.43567 8.81067 3.313 9.688C4.19033 10.5653 5.25267 11.0027 6.5 11Z", + "stroke": "", + "strokeWidth": "0", + "strokeLinecap": "", + "strokeLinejoin": "" } } From 747774046556b2ad1ed69e0f439e2ecb2ff7871d Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:04:54 +0900 Subject: [PATCH 03/36] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=EC=97=90=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/Header.styled.ts | 33 +++++++- .../src/components/common/Header/Header.tsx | 79 +++++++++++++++++-- 2 files changed, 104 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts index 025ff8c6..ccfce71d 100644 --- a/frontend/src/components/common/Header/Header.styled.ts +++ b/frontend/src/components/common/Header/Header.styled.ts @@ -11,7 +11,7 @@ export const HeaderLayout = styled.header` z-index: ${({ theme }) => theme.zIndex.header}; width: 100%; - height: fit-content; + height: 6rem; max-width: 48rem; padding: 1.6rem; border-bottom: 0.1rem solid ${({ theme }) => theme.colors.border}; @@ -50,3 +50,34 @@ export const HiddenDiv = styled.div` width: 2.4rem; height: 2.4rem; `; + +export const HeaderRightContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + gap: ${({ theme }) => theme.spacing.m}; +`; + +export const FormWrapper = styled.form` + flex: 1; + position: relative; + padding-left: 1.6rem; +`; + +export const DeleteButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + padding: 0.8rem; + border-radius: 50%; + background: rgb(0 0 0/ 10%); +`; + +export const ButtonContainer = styled.div` + display: flex; + gap: 1.2rem; + position: absolute; + top: 50%; + right: 1.6rem; + transform: translateY(-50%); +`; diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx index ba6ffa3a..f63f771b 100644 --- a/frontend/src/components/common/Header/Header.tsx +++ b/frontend/src/components/common/Header/Header.tsx @@ -1,5 +1,8 @@ +import { useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; +import { css } from "@emotion/react"; + import IconButton from "@components/common/IconButton/IconButton"; import useUser from "@hooks/useUser"; @@ -12,14 +15,23 @@ import { PRIMITIVE_COLORS } from "@styles/tokens"; import { DoubleRightArrow } from "@assets/svg"; import Drawer from "../Drawer/Drawer"; +import Icon from "../Icon/Icon"; +import { Input } from "../Input/Input.styled"; import * as S from "./Header.styled"; const Header = () => { const { user, saveUser } = useUser(); + const navigate = useNavigate(); const location = useLocation(); const pathName = location.pathname; - const navigate = useNavigate(); + const encodedKeyword = + location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; + + const [keyword, setKeyword] = useState(() => { + return receivedKeyword === ":id" ? "" : receivedKeyword; + }); const handleClickButton = pathName === ROUTE_PATHS_MAP.root || pathName === ROUTE_PATHS_MAP.login @@ -37,10 +49,30 @@ const Header = () => { saveUser({ accessToken: "", memberId: 0 }); }; + const handleClickSearchIcon = () => { + navigate(ROUTE_PATHS_MAP.searchMain); + }; + const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my); const handleClickHome = () => navigate(ROUTE_PATHS_MAP.root); + const handleClickSearchButton = (e: React.FormEvent) => { + e.preventDefault(); + if (keyword.length < 2) { + alert("2글자 이상 검색해주세요."); + } else { + navigate(ROUTE_PATHS_MAP.search(keyword)); + } + }; + + const handleClickDeleteButton = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setKeyword(""); + document.querySelector("input")?.focus(); + }; + return ( @@ -49,15 +81,48 @@ const Header = () => { onClick={handleClickButton} iconType={pathName === ROUTE_PATHS_MAP.root ? "korean-logo" : "back-icon"} /> - {pathName === ROUTE_PATHS_MAP.login ? ( + {!pathName.includes(ROUTE_PATHS_MAP.search().split("/")[1]) ? ( <> - 로그인 - + {pathName === ROUTE_PATHS_MAP.login ? ( + <> + 로그인 + + + ) : ( + + {pathName === ROUTE_PATHS_MAP.root ? ( + + ) : null} + + + + + )} ) : ( - - - + + setKeyword(e.target.value)} + autoFocus + placeholder="검색해주세요" + css={css` + height: 4rem; + `} + /> + + + + + + + )} From d1f89a23b83f3f0f3a58f4e81a38058f1f993be6 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:05:52 +0900 Subject: [PATCH 04/36] =?UTF-8?q?feat:=20SearchFallback=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search/fallback/SearchFallback.styled.ts | 17 +++++++++++++ .../pages/search/fallback/SearchFallback.tsx | 24 +++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 frontend/src/components/pages/search/fallback/SearchFallback.styled.ts create mode 100644 frontend/src/components/pages/search/fallback/SearchFallback.tsx diff --git a/frontend/src/components/pages/search/fallback/SearchFallback.styled.ts b/frontend/src/components/pages/search/fallback/SearchFallback.styled.ts new file mode 100644 index 00000000..dcab7227 --- /dev/null +++ b/frontend/src/components/pages/search/fallback/SearchFallback.styled.ts @@ -0,0 +1,17 @@ +import styled from "@emotion/styled"; + +export const Layout = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: calc(100vh - 6rem); + gap: ${({ theme }) => theme.spacing.l}; +`; + +export const TextContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: ${({ theme }) => theme.spacing.m}; +`; diff --git a/frontend/src/components/pages/search/fallback/SearchFallback.tsx b/frontend/src/components/pages/search/fallback/SearchFallback.tsx new file mode 100644 index 00000000..4b839e42 --- /dev/null +++ b/frontend/src/components/pages/search/fallback/SearchFallback.tsx @@ -0,0 +1,24 @@ +import { Text } from "@components/common"; + +import { Tturi } from "@assets/svg"; + +import * as S from "./SearchFallback.styled"; + +interface SearchFallbackProps { + title: string; + text?: string; +} + +const SearchFallback = ({ title, text }: SearchFallbackProps) => { + return ( + + + + {title} + {text} + + + ); +}; + +export default SearchFallback; From cdc384699e1749fb044a2c98dc8d64b36d10f046 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:06:06 +0900 Subject: [PATCH 05/36] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/search/SearchPage.styled.ts | 29 +++++++++ .../components/pages/search/SearchPage.tsx | 65 +++++++++++++++++++ 2 files changed, 94 insertions(+) create mode 100644 frontend/src/components/pages/search/SearchPage.styled.ts create mode 100644 frontend/src/components/pages/search/SearchPage.tsx diff --git a/frontend/src/components/pages/search/SearchPage.styled.ts b/frontend/src/components/pages/search/SearchPage.styled.ts new file mode 100644 index 00000000..8fb5e271 --- /dev/null +++ b/frontend/src/components/pages/search/SearchPage.styled.ts @@ -0,0 +1,29 @@ +import styled from "@emotion/styled"; + +export const Layout = styled.div` + display: flex; + flex-direction: column; + padding: 1.6rem; + + gap: 8px; + + h1 { + ${({ theme }) => theme.typography.mobile.title}; + } + + p { + color: ${(props) => props.theme.colors.text.secondary}; + font-size: 1.2rem; + } +`; + +export const MainPageTraveloguesList = styled.ul` + display: flex; + flex-direction: column; + + gap: 4rem; +`; + +export const MainPageContentContainer = styled.div` + padding-top: 1.6rem; +`; diff --git a/frontend/src/components/pages/search/SearchPage.tsx b/frontend/src/components/pages/search/SearchPage.tsx new file mode 100644 index 00000000..2038b0da --- /dev/null +++ b/frontend/src/components/pages/search/SearchPage.tsx @@ -0,0 +1,65 @@ +import { useLocation } from "react-router-dom"; + +import { css } from "@emotion/react"; + +import useInfiniteSearchTravelogues from "@queries/useInfiniteSearchTravelogues"; + +import FloatingButton from "@components/common/FloatingButton/FloatingButton"; +import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard"; + +import useIntersectionObserver from "@hooks/useIntersectionObserver"; + +import TravelogueCardSkeleton from "../main/TravelogueCard/skeleton/TravelogueCardSkeleton"; +import * as S from "./SearchPage.styled"; +import SearchFallback from "./fallback/SearchFallback"; + +const SearchPage = () => { + const SKELETON_COUNT = 5; + + const location = useLocation(); + const encodedKeyword = + location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + const keyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; + const { travelogues, status, fetchNextPage } = useInfiniteSearchTravelogues(keyword); + const { lastElementRef } = useIntersectionObserver(fetchNextPage); + + if (!keyword) { + return ( + + ); + } + + if (travelogues.length === 0 && status === "success") { + return ; + } + + return ( + + + {keyword &&

{`"${keyword}" 검색 결과`}

} + {status === "pending" && ( + + {Array.from({ length: SKELETON_COUNT }, (_, index) => ( + + ))} + + )} + + {travelogues.map(({ id, title, thumbnail, authorProfileUrl, likes }) => ( + + ))} + +
+ + ); +}; + +export default SearchPage; From c5be9e81a990644f400a97a0e5d6641c78ee093a Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:06:19 +0900 Subject: [PATCH 06/36] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=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 --- frontend/src/constants/route.ts | 2 ++ frontend/src/router.tsx | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/frontend/src/constants/route.ts b/frontend/src/constants/route.ts index 5a98340d..b1181dc7 100644 --- a/frontend/src/constants/route.ts +++ b/frontend/src/constants/route.ts @@ -9,4 +9,6 @@ export const ROUTE_PATHS_MAP = { loginCallback: "/oauth", loginOauth: "/login/oauth/kakao", my: "/my", + searchMain: "/search", + search: (keyword?: string) => (keyword ? `/search/${keyword}` : "/search/:id"), } as const; diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 7f1d1ac0..5b92ba18 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -5,6 +5,7 @@ import KakaoCallbackPage from "@components/pages/login/KakaoCallbackPage"; import LoginPage from "@components/pages/login/LoginPage"; import MainPage from "@components/pages/main/MainPage"; import MyPage from "@components/pages/my/MyPage"; +import SearchPage from "@components/pages/search/SearchPage"; import TravelPlanDetailPage from "@components/pages/travelPlanDetail/TravelPlanDetailPage"; import TravelPlanRegisterPage from "@components/pages/travelPlanRegister/TravelPlanRegisterPage"; import TravelogueDetailPage from "@components/pages/travelogueDetail/TravelogueDetailPage"; @@ -50,6 +51,14 @@ export const router = createBrowserRouter([ path: ROUTE_PATHS_MAP.my, element: , }, + { + path: ROUTE_PATHS_MAP.searchMain, + element: , + }, + { + path: ROUTE_PATHS_MAP.search(), + element: , + }, ], }, ]); From 82b6d134ef3f57600a0a61beed25d9b43b782794 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:44:32 +0900 Subject: [PATCH 07/36] =?UTF-8?q?feat:=20home=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/svg/home-icon.svg | 3 +++ frontend/src/assets/svg/index.ts | 1 + frontend/src/components/common/Icon/svg-icons.json | 9 +++++++++ 3 files changed, 13 insertions(+) create mode 100644 frontend/src/assets/svg/home-icon.svg diff --git a/frontend/src/assets/svg/home-icon.svg b/frontend/src/assets/svg/home-icon.svg new file mode 100644 index 00000000..68e3995e --- /dev/null +++ b/frontend/src/assets/svg/home-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/svg/index.ts b/frontend/src/assets/svg/index.ts index 5863139e..7456eec7 100644 --- a/frontend/src/assets/svg/index.ts +++ b/frontend/src/assets/svg/index.ts @@ -20,3 +20,4 @@ export { default as KaKao } from "./kakao.svg"; export { default as KoreanLogo } from "./korean-logo.svg"; export { default as Plus } from "./plus.svg"; export { default as tturiUrl } from "./tturi.svg?url"; +export { default as HomeIcon } from "./home-icon.svg"; diff --git a/frontend/src/components/common/Icon/svg-icons.json b/frontend/src/components/common/Icon/svg-icons.json index 35781f39..f72d4b31 100644 --- a/frontend/src/components/common/Icon/svg-icons.json +++ b/frontend/src/components/common/Icon/svg-icons.json @@ -250,5 +250,14 @@ "strokeWidth": "0", "strokeLinecap": "", "strokeLinejoin": "" + }, + "home-icon": { + "width": 16, + "height": 18, + "path": "M2 16H5V10H11V16H14V7L8 2.5L2 7V16ZM0 18V6L8 0L16 6V18H9V12H7V18H0Z", + "stroke": "", + "strokeWidth": "0", + "strokeLinecap": "", + "strokeLinejoin": "" } } From 73c46dd8580fdaa55b957a59ed96d2afc7eaab9e Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:47:58 +0900 Subject: [PATCH 08/36] =?UTF-8?q?refactor:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EA=B8=B0=EB=B3=B8=20Header?= =?UTF-8?q?=EC=9D=98=20basic=EC=9C=BC=EB=A1=9C=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/Header.styled.ts | 35 +---- .../src/components/common/Header/Header.tsx | 128 +++++------------- 2 files changed, 37 insertions(+), 126 deletions(-) diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts index ccfce71d..8725bd64 100644 --- a/frontend/src/components/common/Header/Header.styled.ts +++ b/frontend/src/components/common/Header/Header.styled.ts @@ -41,43 +41,16 @@ export const MenuList = styled.ul` background-color: ${PRIMITIVE_COLORS.white}; `; -export const HeaderTitle = styled.span` - ${({ theme }) => theme.typography.mobile.bodyBold} - color: ${({ theme }) => theme.colors.text.primary}; -`; - -export const HiddenDiv = styled.div` - width: 2.4rem; - height: 2.4rem; -`; - -export const HeaderRightContainer = styled.div` +export const LeftWrapper = styled.div` display: flex; justify-content: center; align-items: center; - gap: ${({ theme }) => theme.spacing.m}; `; -export const FormWrapper = styled.form` - flex: 1; - position: relative; - padding-left: 1.6rem; -`; - -export const DeleteButton = styled.button` +export const RightWrapper = styled.div<{ $isRightContentFull?: boolean }>` display: flex; + gap: ${({ theme }) => theme.spacing.m}; justify-content: center; align-items: center; - padding: 0.8rem; - border-radius: 50%; - background: rgb(0 0 0/ 10%); -`; - -export const ButtonContainer = styled.div` - display: flex; - gap: 1.2rem; - position: absolute; - top: 50%; - right: 1.6rem; - transform: translateY(-50%); + ${({ $isRightContentFull = false }) => $isRightContentFull && "flex: 1;"} `; diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx index f63f771b..b9d1c09d 100644 --- a/frontend/src/components/common/Header/Header.tsx +++ b/frontend/src/components/common/Header/Header.tsx @@ -1,10 +1,5 @@ -import { useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import { css } from "@emotion/react"; - -import IconButton from "@components/common/IconButton/IconButton"; - import useUser from "@hooks/useUser"; import { ROUTE_PATHS_MAP } from "@constants/route"; @@ -15,28 +10,27 @@ import { PRIMITIVE_COLORS } from "@styles/tokens"; import { DoubleRightArrow } from "@assets/svg"; import Drawer from "../Drawer/Drawer"; -import Icon from "../Icon/Icon"; -import { Input } from "../Input/Input.styled"; +import IconButton from "../IconButton/IconButton"; import * as S from "./Header.styled"; -const Header = () => { +interface HeaderProps { + useLogo?: boolean; + rightContent: React.ReactNode; + $isRightContentFull?: boolean; + useHamburger?: boolean; +} + +const Header = ({ + useLogo = false, + rightContent, + $isRightContentFull = false, + useHamburger = false, +}: HeaderProps) => { const { user, saveUser } = useUser(); - const navigate = useNavigate(); const location = useLocation(); const pathName = location.pathname; - const encodedKeyword = - location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; - const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; - - const [keyword, setKeyword] = useState(() => { - return receivedKeyword === ":id" ? "" : receivedKeyword; - }); - - const handleClickButton = - pathName === ROUTE_PATHS_MAP.root || pathName === ROUTE_PATHS_MAP.login - ? () => navigate(ROUTE_PATHS_MAP.root) - : () => navigate(ROUTE_PATHS_MAP.back); + const navigate = useNavigate(); const handleClickLogout = () => { if ( @@ -45,85 +39,32 @@ const Header = () => { ) { navigate(ROUTE_PATHS_MAP.login); } - saveUser({ accessToken: "", memberId: 0 }); }; - const handleClickSearchIcon = () => { - navigate(ROUTE_PATHS_MAP.searchMain); - }; - const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my); - const handleClickHome = () => navigate(ROUTE_PATHS_MAP.root); - - const handleClickSearchButton = (e: React.FormEvent) => { - e.preventDefault(); - if (keyword.length < 2) { - alert("2글자 이상 검색해주세요."); - } else { - navigate(ROUTE_PATHS_MAP.search(keyword)); - } - }; - - const handleClickDeleteButton = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - setKeyword(""); - document.querySelector("input")?.focus(); - }; - return ( - - {!pathName.includes(ROUTE_PATHS_MAP.search().split("/")[1]) ? ( - <> - {pathName === ROUTE_PATHS_MAP.login ? ( - <> - 로그인 - - - ) : ( - - {pathName === ROUTE_PATHS_MAP.root ? ( - - ) : null} - - - - - )} - - ) : ( - - setKeyword(e.target.value)} - autoFocus - placeholder="검색해주세요" - css={css` - height: 4rem; - `} - /> - - - - - - - - )} + + navigate(ROUTE_PATHS_MAP.root) : () => navigate(ROUTE_PATHS_MAP.back) + } + /> + + + + {rightContent} + {useHamburger && ( + + + + )} + @@ -135,9 +76,6 @@ const Header = () => { - - 홈 - 마이페이지 From 325d2fe00bbc1fd954181859940f44a5a06ac4ac Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:48:14 +0900 Subject: [PATCH 09/36] =?UTF-8?q?feat:=20HomeHeader=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/HomeHeader/HomeHeader.styled.ts | 0 .../common/Header/HomeHeader/HomeHeader.tsx | 25 +++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts create mode 100644 frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx diff --git a/frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts b/frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx b/frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx new file mode 100644 index 00000000..173dc9e6 --- /dev/null +++ b/frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx @@ -0,0 +1,25 @@ +import { useNavigate } from "react-router-dom"; + +import IconButton from "@components/common/IconButton/IconButton"; + +import { ROUTE_PATHS_MAP } from "@constants/route"; + +import Header from "../Header"; + +const HomeHeader = () => { + const navigation = useNavigate(); + return ( +
navigation(ROUTE_PATHS_MAP.root)} + /> + } + useHamburger + /> + ); +}; + +export default HomeHeader; From db1c2bb6dabe181da21c8ea656c2dee1259257c2 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:48:23 +0900 Subject: [PATCH 10/36] =?UTF-8?q?feat:=20LogoHeader=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/LogoHeader/LogoHeader.styled.ts | 0 .../common/Header/LogoHeader/LogoHeader.tsx | 27 +++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts create mode 100644 frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx diff --git a/frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts b/frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx b/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx new file mode 100644 index 00000000..c8be09ca --- /dev/null +++ b/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx @@ -0,0 +1,27 @@ +import { useNavigate } from "react-router-dom"; + +import IconButton from "@components/common/IconButton/IconButton"; + +import { ROUTE_PATHS_MAP } from "@constants/route"; + +import Header from "../Header"; + +const LogoHeader = () => { + const navigation = useNavigate(); + + return ( +
navigation(ROUTE_PATHS_MAP.searchMain)} + /> + } + useHamburger + /> + ); +}; + +export default LogoHeader; From 08acd6d42ce70e97f166df736c606ee9606466f0 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:48:35 +0900 Subject: [PATCH 11/36] =?UTF-8?q?feat:=20NavigationHeader=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NavigationHeader.styled.ts | 0 .../NavigationHeader/NavigationHeader.tsx | 26 +++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts create mode 100644 frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx new file mode 100644 index 00000000..d520752f --- /dev/null +++ b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx @@ -0,0 +1,26 @@ +import { useNavigate } from "react-router-dom"; + +import IconButton from "@components/common/IconButton/IconButton"; + +import { ROUTE_PATHS_MAP } from "@constants/route"; + +import Header from "../Header"; + +const NavigationHeader = () => { + const navigation = useNavigate(); + + return ( +
navigation(ROUTE_PATHS_MAP.searchMain)} + /> + } + useHamburger + /> + ); +}; + +export default NavigationHeader; From 9ac1612e81c82ba60c7ba579d202dae334056a69 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:48:50 +0900 Subject: [PATCH 12/36] =?UTF-8?q?feat:=20SearchHeader=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchHeader/SearchHeader.styled.ts | 25 ++++++ .../Header/SearchHeader/SearchHeader.tsx | 76 +++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 frontend/src/components/common/Header/SearchHeader/SearchHeader.styled.ts create mode 100644 frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.styled.ts b/frontend/src/components/common/Header/SearchHeader/SearchHeader.styled.ts new file mode 100644 index 00000000..5f423181 --- /dev/null +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.styled.ts @@ -0,0 +1,25 @@ +import styled from "@emotion/styled"; + +export const FormWrapper = styled.form` + flex: 1; + position: relative; + padding-left: 1.6rem; +`; + +export const ButtonContainer = styled.div` + display: flex; + gap: 1.2rem; + position: absolute; + top: 50%; + right: 1.6rem; + transform: translateY(-50%); +`; + +export const DeleteButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + padding: 0.8rem; + border-radius: 50%; + background: rgb(0 0 0/ 10%); +`; diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx new file mode 100644 index 00000000..e1befc13 --- /dev/null +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -0,0 +1,76 @@ +import { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; + +import { css } from "@emotion/react"; + +import Icon from "@components/common/Icon/Icon"; +import { Input } from "@components/common/Input/Input.styled"; + +import { ROUTE_PATHS_MAP } from "@constants/route"; + +import Header from "../Header"; +import * as S from "./SearchHeader.styled"; + +const SearchHeader = () => { + const navigate = useNavigate(); + + const location = useLocation(); + + const encodedKeyword = + location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + + const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; + + const [keyword, setKeyword] = useState(() => { + return receivedKeyword === ":id" ? "" : receivedKeyword; + }); + + const handleClickSearchButton = (e: React.FormEvent) => { + e.preventDefault(); + if (keyword.length < 2) { + alert("2글자 이상 검색해주세요."); + } else { + navigate(ROUTE_PATHS_MAP.search(keyword)); + } + }; + + const handleClickDeleteButton = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setKeyword(""); + document.querySelector("input")?.focus(); + }; + + return ( +
+ setKeyword(e.target.value)} + autoFocus + placeholder="검색해주세요" + css={css` + height: 4rem; + `} + /> + + + + + + + + } + $isRightContentFull + /> + ); +}; + +export default SearchHeader; From f65f958799fec9021dd0c6f9760c67dd294ef37b Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:51:04 +0900 Subject: [PATCH 13/36] =?UTF-8?q?fix:=20storybook=20preview=20rootStyle?= =?UTF-8?q?=EC=9D=B4=20common/Header=EC=97=90=EB=8A=94=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B4=EA=B2=8C=20=EC=A0=81=EC=9A=A9=EB=90=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - rootStyle에 들어가있는 padding 때문에 Header storybook에서 컴포넌트가 padding만큼 밀리는 이슈가있어서 common/Header일때는 padding이 0이 되도록 수정함 --- frontend/.storybook/preview.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index 565307ce..a61fa19f 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -21,13 +21,13 @@ initialize( handlers, ); -const rootStyle = { +const getRootStyle = (storyId: string) => ({ width: "48rem", - padding: "1.6rem", + padding: storyId.startsWith("common-header--") ? 0 : "1.6rem", display: "flex", alignItems: "center", justifyContent: "center", -}; +}); const preview: Preview = { parameters: { @@ -39,14 +39,14 @@ const preview: Preview = { }, }, decorators: [ - (Story) => { + (Story, context) => { const queryClient = new QueryClient(); return (
-
+
From 3d315413b4254cae100b7f10d29bc31e9b2041a7 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:54:17 +0900 Subject: [PATCH 14/36] =?UTF-8?q?test:=20Header=20storybook=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 --- .../common/Header/Header.stories.tsx | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 frontend/src/components/common/Header/Header.stories.tsx diff --git a/frontend/src/components/common/Header/Header.stories.tsx b/frontend/src/components/common/Header/Header.stories.tsx new file mode 100644 index 00000000..c50fa4dc --- /dev/null +++ b/frontend/src/components/common/Header/Header.stories.tsx @@ -0,0 +1,94 @@ +import { css } from "@emotion/react"; + +import type { Meta, StoryObj } from "@storybook/react"; + +import Icon from "../Icon/Icon"; +import IconButton from "../IconButton/IconButton"; +import { Input } from "../Input/Input.styled"; +import Header from "./Header"; +import * as S from "./SearchHeader/SearchHeader.styled"; + +const rightContentOptions = { + None: null, + HomeIcon: , + SearchIcon: , + SearchForm: ( + + + + + + + + + + ), +}; + +const meta = { + title: "common/Header", + component: Header, + argTypes: { + useHamburger: { control: "boolean" }, + useLogo: { control: "boolean" }, + rightContent: { + options: Object.keys(rightContentOptions), + mapping: rightContentOptions, + control: { + type: "select", + }, + }, + $isRightContentFull: { control: "boolean" }, + }, + decorators: [ + (Story, context) => { + return ( +
+ +
+ ); + }, + ], + tags: ["autodocs"], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const HomeHeader: Story = { + args: { + useHamburger: true, + rightContent: "HomeIcon", + }, +}; + +export const LogoHeader: Story = { + args: { + useLogo: true, + useHamburger: true, + rightContent: "SearchIcon", + }, +}; + +export const NavigationHeader: Story = { + args: { + useHamburger: true, + rightContent: "SearchIcon", + }, +}; + +export const SearchHeader: Story = { + args: { + rightContent: "SearchForm", + $isRightContentFull: true, + }, +}; From 396d2c88a706f8887a8c96d27e2f63f0c8608c93 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Fri, 16 Aug 2024 15:55:01 +0900 Subject: [PATCH 15/36] =?UTF-8?q?feat:=20AppLayout=EC=97=90=EC=84=9C=20Hea?= =?UTF-8?q?der=EB=A5=BC=20=EB=8F=99=EC=A0=81=EC=9C=BC=EB=A1=9C=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 --- .../components/layout/AppLayout/AppLayout.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx index e63c80fa..35e51532 100644 --- a/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -1,13 +1,32 @@ -import { Outlet } from "react-router-dom"; +import { Outlet, useLocation } from "react-router-dom"; -import { Header } from "@components/common"; +import HomeHeader from "@components/common/Header/HomeHeader/HomeHeader"; +import LogoHeader from "@components/common/Header/LogoHeader/LogoHeader"; +import SearchHeader from "@components/common/Header/SearchHeader/SearchHeader"; + +import { ROUTE_PATHS_MAP } from "@constants/route"; import * as S from "./AppLayout.styled"; const AppLayout = () => { + const location = useLocation(); + const pathName = location.pathname; + + const encodedKeyword = + location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; + + const getHeader = (pathName: string) => { + if (pathName === ROUTE_PATHS_MAP.root) return ; + if (pathName === ROUTE_PATHS_MAP.searchMain) return ; + if (receivedKeyword && pathName.includes(ROUTE_PATHS_MAP.search().split("/")[1])) + return ; + return ; + }; + return ( <> -
+ {getHeader(pathName)} From 4b0f84089788867d6cf88fcee69162591ec51dc2 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 16:57:58 +0900 Subject: [PATCH 16/36] =?UTF-8?q?refactor:=20HomeHeader=20->=20HomePageHea?= =?UTF-8?q?der=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/HomeHeader/HomeHeader.styled.ts | 0 .../HomeHeader.tsx => HomePageHeader/HomePageHeader.tsx} | 0 frontend/src/components/layout/AppLayout/AppLayout.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts rename frontend/src/components/common/Header/{HomeHeader/HomeHeader.tsx => HomePageHeader/HomePageHeader.tsx} (100%) diff --git a/frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts b/frontend/src/components/common/Header/HomeHeader/HomeHeader.styled.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx b/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx similarity index 100% rename from frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx rename to frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx index 35e51532..e4934ab7 100644 --- a/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -1,6 +1,6 @@ import { Outlet, useLocation } from "react-router-dom"; -import HomeHeader from "@components/common/Header/HomeHeader/HomeHeader"; +import HomeHeader from "@components/common/Header/HomePageHeader/HomePageHeader"; import LogoHeader from "@components/common/Header/LogoHeader/LogoHeader"; import SearchHeader from "@components/common/Header/SearchHeader/SearchHeader"; From fe7154fb6cdc9a36efe39b6321a7fb0c16d00966 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:01:31 +0900 Subject: [PATCH 17/36] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95=20(wrapper=20->=20container)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Header/Header.styled.ts | 2 +- frontend/src/components/common/Header/Header.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts index 8725bd64..2b1f72f7 100644 --- a/frontend/src/components/common/Header/Header.styled.ts +++ b/frontend/src/components/common/Header/Header.styled.ts @@ -47,7 +47,7 @@ export const LeftWrapper = styled.div` align-items: center; `; -export const RightWrapper = styled.div<{ $isRightContentFull?: boolean }>` +export const RightContainer = styled.div<{ $isRightContentFull?: boolean }>` display: flex; gap: ${({ theme }) => theme.spacing.m}; justify-content: center; diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx index b9d1c09d..a42c8f7e 100644 --- a/frontend/src/components/common/Header/Header.tsx +++ b/frontend/src/components/common/Header/Header.tsx @@ -57,14 +57,14 @@ const Header = ({ /> - + {rightContent} {useHamburger && ( )} - + From a541d8219ce40a6dc4fa7663005a8369e9d54828 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:09:10 +0900 Subject: [PATCH 18/36] =?UTF-8?q?refactor:=20Header=20Props=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Header/Header.stories.tsx | 12 ++++++------ .../src/components/common/Header/Header.tsx | 18 ++++++++++-------- .../Header/HomePageHeader/HomePageHeader.tsx | 2 +- .../common/Header/LogoHeader/LogoHeader.tsx | 4 ++-- .../NavigationHeader/NavigationHeader.tsx | 2 +- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/common/Header/Header.stories.tsx b/frontend/src/components/common/Header/Header.stories.tsx index c50fa4dc..3a13fe27 100644 --- a/frontend/src/components/common/Header/Header.stories.tsx +++ b/frontend/src/components/common/Header/Header.stories.tsx @@ -37,8 +37,8 @@ const meta = { title: "common/Header", component: Header, argTypes: { - useHamburger: { control: "boolean" }, - useLogo: { control: "boolean" }, + isHamburgerUsed: { control: "boolean" }, + isLogoUsed: { control: "boolean" }, rightContent: { options: Object.keys(rightContentOptions), mapping: rightContentOptions, @@ -66,22 +66,22 @@ type Story = StoryObj; export const HomeHeader: Story = { args: { - useHamburger: true, + isHamburgerUsed: true, rightContent: "HomeIcon", }, }; export const LogoHeader: Story = { args: { - useLogo: true, - useHamburger: true, + isLogoUsed: true, + isHamburgerUsed: true, rightContent: "SearchIcon", }, }; export const NavigationHeader: Story = { args: { - useHamburger: true, + isHamburgerUsed: true, rightContent: "SearchIcon", }, }; diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx index a42c8f7e..fc1de695 100644 --- a/frontend/src/components/common/Header/Header.tsx +++ b/frontend/src/components/common/Header/Header.tsx @@ -14,17 +14,17 @@ import IconButton from "../IconButton/IconButton"; import * as S from "./Header.styled"; interface HeaderProps { - useLogo?: boolean; + isLogoUsed?: boolean; rightContent: React.ReactNode; $isRightContentFull?: boolean; - useHamburger?: boolean; + isHamburgerUsed?: boolean; } const Header = ({ - useLogo = false, + isLogoUsed = false, rightContent, $isRightContentFull = false, - useHamburger = false, + isHamburgerUsed = false, }: HeaderProps) => { const { user, saveUser } = useUser(); const location = useLocation(); @@ -49,17 +49,19 @@ const Header = ({ navigate(ROUTE_PATHS_MAP.root) : () => navigate(ROUTE_PATHS_MAP.back) + isLogoUsed + ? () => navigate(ROUTE_PATHS_MAP.root) + : () => navigate(ROUTE_PATHS_MAP.back) } /> {rightContent} - {useHamburger && ( + {isHamburgerUsed && ( diff --git a/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx b/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx index 173dc9e6..a03e152e 100644 --- a/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx +++ b/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx @@ -17,7 +17,7 @@ const HomeHeader = () => { onClick={() => navigation(ROUTE_PATHS_MAP.root)} /> } - useHamburger + isHamburgerUsed /> ); }; diff --git a/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx b/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx index c8be09ca..f7117242 100644 --- a/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx +++ b/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx @@ -11,7 +11,7 @@ const LogoHeader = () => { return (
{ onClick={() => navigation(ROUTE_PATHS_MAP.searchMain)} /> } - useHamburger + isHamburgerUsed /> ); }; diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx index d520752f..4c8ee46d 100644 --- a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx +++ b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx @@ -18,7 +18,7 @@ const NavigationHeader = () => { onClick={() => navigation(ROUTE_PATHS_MAP.searchMain)} /> } - useHamburger + isHamburgerUsed /> ); }; From f7fc33aa00d2c7f1237bfa95b79018e5435e23fa Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:12:27 +0900 Subject: [PATCH 19/36] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=EC=96=B4?= =?UTF-8?q?=20=EC=B5=9C=EC=86=8C=20=EA=B8=80=EC=9E=90=EC=88=98=20=EC=83=81?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Header/SearchHeader/SearchHeader.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index e1befc13..d5b9a3a9 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -11,13 +11,17 @@ import { ROUTE_PATHS_MAP } from "@constants/route"; import Header from "../Header"; import * as S from "./SearchHeader.styled"; +const MIN_KEYWORD_LENGTH = 2; + const SearchHeader = () => { const navigate = useNavigate(); const location = useLocation(); const encodedKeyword = - location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + location.pathname.split("/").length > MIN_KEYWORD_LENGTH + ? location.pathname.split("/").pop() + : ""; const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; @@ -27,8 +31,8 @@ const SearchHeader = () => { const handleClickSearchButton = (e: React.FormEvent) => { e.preventDefault(); - if (keyword.length < 2) { - alert("2글자 이상 검색해주세요."); + if (keyword.length < MIN_KEYWORD_LENGTH) { + alert(`${MIN_KEYWORD_LENGTH}글자 이상 검색해주세요.`); } else { navigate(ROUTE_PATHS_MAP.search(keyword)); } From e01a9088e8e34a6b5f521d751a307f602abff76a Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:25:38 +0900 Subject: [PATCH 20/36] =?UTF-8?q?refactor:=20AppLayout=EC=97=90=EC=84=9C?= =?UTF-8?q?=20pathname=20=ED=99=95=EC=9D=B8=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/layout/AppLayout/AppLayout.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx index e4934ab7..b7b3c2e0 100644 --- a/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -19,8 +19,7 @@ const AppLayout = () => { const getHeader = (pathName: string) => { if (pathName === ROUTE_PATHS_MAP.root) return ; if (pathName === ROUTE_PATHS_MAP.searchMain) return ; - if (receivedKeyword && pathName.includes(ROUTE_PATHS_MAP.search().split("/")[1])) - return ; + if (receivedKeyword && pathName.includes(ROUTE_PATHS_MAP.searchMain)) return ; return ; }; From 0dde08b460f1a3ce0335ee2df6b87798f3dd6325 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:28:51 +0900 Subject: [PATCH 21/36] =?UTF-8?q?refactor:=20h1=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=20Text=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/search/SearchPage.styled.ts | 5 ----- frontend/src/components/pages/search/SearchPage.tsx | 3 ++- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/pages/search/SearchPage.styled.ts b/frontend/src/components/pages/search/SearchPage.styled.ts index 8fb5e271..7d18ea14 100644 --- a/frontend/src/components/pages/search/SearchPage.styled.ts +++ b/frontend/src/components/pages/search/SearchPage.styled.ts @@ -10,11 +10,6 @@ export const Layout = styled.div` h1 { ${({ theme }) => theme.typography.mobile.title}; } - - p { - color: ${(props) => props.theme.colors.text.secondary}; - font-size: 1.2rem; - } `; export const MainPageTraveloguesList = styled.ul` diff --git a/frontend/src/components/pages/search/SearchPage.tsx b/frontend/src/components/pages/search/SearchPage.tsx index 2038b0da..252949a6 100644 --- a/frontend/src/components/pages/search/SearchPage.tsx +++ b/frontend/src/components/pages/search/SearchPage.tsx @@ -4,6 +4,7 @@ import { css } from "@emotion/react"; import useInfiniteSearchTravelogues from "@queries/useInfiniteSearchTravelogues"; +import { Text } from "@components/common"; import FloatingButton from "@components/common/FloatingButton/FloatingButton"; import TravelogueCard from "@components/pages/main/TravelogueCard/TravelogueCard"; @@ -36,7 +37,7 @@ const SearchPage = () => { return ( - {keyword &&

{`"${keyword}" 검색 결과`}

} + {keyword && {`"${keyword}" 검색 결과`}} {status === "pending" && ( {Array.from({ length: SKELETON_COUNT }, (_, index) => ( From 3b09549262fcae8914f0ba0ff98dfdcfee8539fc Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:34:47 +0900 Subject: [PATCH 22/36] =?UTF-8?q?refactor:=20gap=20=EA=B0=92=EC=97=90=20th?= =?UTF-8?q?eme=20spacing=EC=9D=84=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/search/SearchPage.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/pages/search/SearchPage.styled.ts b/frontend/src/components/pages/search/SearchPage.styled.ts index 7d18ea14..340c8e1b 100644 --- a/frontend/src/components/pages/search/SearchPage.styled.ts +++ b/frontend/src/components/pages/search/SearchPage.styled.ts @@ -16,7 +16,7 @@ export const MainPageTraveloguesList = styled.ul` display: flex; flex-direction: column; - gap: 4rem; + gap: ${({ theme }) => theme.spacing.m}; `; export const MainPageContentContainer = styled.div` From f0eced9597c6030cda155c88cee07f5d96d33a25 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:38:33 +0900 Subject: [PATCH 23/36] =?UTF-8?q?refactor:=20gap=20=EA=B0=92=EC=97=90=20th?= =?UTF-8?q?eme=20spacing=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/search/SearchPage.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/pages/search/SearchPage.styled.ts b/frontend/src/components/pages/search/SearchPage.styled.ts index 340c8e1b..8fdc7555 100644 --- a/frontend/src/components/pages/search/SearchPage.styled.ts +++ b/frontend/src/components/pages/search/SearchPage.styled.ts @@ -5,7 +5,7 @@ export const Layout = styled.div` flex-direction: column; padding: 1.6rem; - gap: 8px; + gap: ${({ theme }) => theme.spacing.s}; h1 { ${({ theme }) => theme.typography.mobile.title}; From 4fbf8bf38d59102b69ffe502ab840176bc7fca90 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:38:44 +0900 Subject: [PATCH 24/36] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=97=90=20=EA=B0=9C=ED=96=89=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/search/SearchPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/pages/search/SearchPage.tsx b/frontend/src/components/pages/search/SearchPage.tsx index 252949a6..61c57d0a 100644 --- a/frontend/src/components/pages/search/SearchPage.tsx +++ b/frontend/src/components/pages/search/SearchPage.tsx @@ -21,6 +21,7 @@ const SearchPage = () => { const encodedKeyword = location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; const keyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; + const { travelogues, status, fetchNextPage } = useInfiniteSearchTravelogues(keyword); const { lastElementRef } = useIntersectionObserver(fetchNextPage); From 103a485f1ae2103866505b9e518ac27728e98c14 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:41:25 +0900 Subject: [PATCH 25/36] =?UTF-8?q?chore:=20=EA=B0=9C=ED=96=89=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/search/SearchPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/pages/search/SearchPage.tsx b/frontend/src/components/pages/search/SearchPage.tsx index 61c57d0a..a075fd06 100644 --- a/frontend/src/components/pages/search/SearchPage.tsx +++ b/frontend/src/components/pages/search/SearchPage.tsx @@ -23,6 +23,7 @@ const SearchPage = () => { const keyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; const { travelogues, status, fetchNextPage } = useInfiniteSearchTravelogues(keyword); + const { lastElementRef } = useIntersectionObserver(fetchNextPage); if (!keyword) { From b73b0a2293eff3e21cb68c19166a31113070a049 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:48:07 +0900 Subject: [PATCH 26/36] =?UTF-8?q?refactor:=20Icon=20=EB=8C=80=EC=8B=A0=20I?= =?UTF-8?q?conButton=EC=9D=84=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/SearchHeader/SearchHeader.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index d5b9a3a9..86dfd696 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -4,6 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import { css } from "@emotion/react"; import Icon from "@components/common/Icon/Icon"; +import IconButton from "@components/common/IconButton/IconButton"; import { Input } from "@components/common/Input/Input.styled"; import { ROUTE_PATHS_MAP } from "@constants/route"; @@ -66,9 +67,7 @@ const SearchHeader = () => { > - + } From 303f563cf32d19bbc7c7616a711506a85e0aefd1 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:50:28 +0900 Subject: [PATCH 27/36] =?UTF-8?q?refactor:=20#fff=20=EB=8C=80=EC=8B=A0=20p?= =?UTF-8?q?rimitive=20white=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Header/Header.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts index 2b1f72f7..5868ff73 100644 --- a/frontend/src/components/common/Header/Header.styled.ts +++ b/frontend/src/components/common/Header/Header.styled.ts @@ -16,7 +16,7 @@ export const HeaderLayout = styled.header` padding: 1.6rem; border-bottom: 0.1rem solid ${({ theme }) => theme.colors.border}; - background-color: #fff; + background-color: ${PRIMITIVE_COLORS.white}; `; export const DrawHeaderContainer = styled.div` From 202bd15e0e3ca97eee5245df6740b671b9e77146 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:50:39 +0900 Subject: [PATCH 28/36] =?UTF-8?q?chore:=20=EB=B9=88=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Header/LogoHeader/LogoHeader.styled.ts | 0 .../common/Header/NavigationHeader/NavigationHeader.styled.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts delete mode 100644 frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts diff --git a/frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts b/frontend/src/components/common/Header/LogoHeader/LogoHeader.styled.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.styled.ts deleted file mode 100644 index e69de29b..00000000 From 2228a7a67cc84da53f231776be7b58736b484db2 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:59:45 +0900 Subject: [PATCH 29/36] =?UTF-8?q?refactor:=20dom=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=A7=81=EC=A0=91=20=EC=A0=91=EA=B7=BC=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=20ref=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/SearchHeader/SearchHeader.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index 86dfd696..07f601c2 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useRef, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { css } from "@emotion/react"; @@ -16,8 +16,8 @@ const MIN_KEYWORD_LENGTH = 2; const SearchHeader = () => { const navigate = useNavigate(); - const location = useLocation(); + const inputRef = useRef(null); const encodedKeyword = location.pathname.split("/").length > MIN_KEYWORD_LENGTH @@ -43,7 +43,7 @@ const SearchHeader = () => { e.preventDefault(); e.stopPropagation(); setKeyword(""); - document.querySelector("input")?.focus(); + inputRef.current?.focus(); }; return ( @@ -51,6 +51,7 @@ const SearchHeader = () => { rightContent={ setKeyword(e.target.value)} autoFocus From 31715b6cacc0814d3c5c77852758055ca8cb8337 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 18:07:28 +0900 Subject: [PATCH 30/36] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=EC=96=B4?= =?UTF-8?q?=EC=97=90=20trim=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=20useInfin?= =?UTF-8?q?iteSearchTravelogues=20=EA=B0=80=20keyword=EA=B0=80=20=EB=B9=88?= =?UTF-8?q?=EA=B0=92=EC=9D=B4=20=EC=95=84=EB=8B=90=EB=95=8C=EB=A7=8C=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=EB=90=98=EB=8F=84=EB=A1=9D=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 --- .../src/components/common/Header/SearchHeader/SearchHeader.tsx | 3 ++- frontend/src/queries/useInfiniteSearchTravelogues.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index 07f601c2..ed151009 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -32,8 +32,9 @@ const SearchHeader = () => { const handleClickSearchButton = (e: React.FormEvent) => { e.preventDefault(); - if (keyword.length < MIN_KEYWORD_LENGTH) { + if (keyword.trim().length < MIN_KEYWORD_LENGTH) { alert(`${MIN_KEYWORD_LENGTH}글자 이상 검색해주세요.`); + setKeyword(keyword.trim()); } else { navigate(ROUTE_PATHS_MAP.search(keyword)); } diff --git a/frontend/src/queries/useInfiniteSearchTravelogues.ts b/frontend/src/queries/useInfiniteSearchTravelogues.ts index 43d4115e..029b6f3d 100644 --- a/frontend/src/queries/useInfiniteSearchTravelogues.ts +++ b/frontend/src/queries/useInfiniteSearchTravelogues.ts @@ -41,6 +41,7 @@ const useInfiniteSearchTravelogues = (keyword: string) => { pages: data.pages.flatMap((page) => page), pageParams: data.pageParams, }), + enabled: keyword.trim() !== "", }); return { From db4a5ace8991b81a47c99b4de2156faebfdf0d2c Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 18:25:37 +0900 Subject: [PATCH 31/36] =?UTF-8?q?refactor:=20NavigationHeader=20->=20Searc?= =?UTF-8?q?hResultPageHeader=EB=A1=9C=20=EC=9D=B4=EB=A6=84=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 --- frontend/src/components/common/Header/Header.stories.tsx | 2 +- .../common/Header/NavigationHeader/NavigationHeader.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Header/Header.stories.tsx b/frontend/src/components/common/Header/Header.stories.tsx index 3a13fe27..1c14c224 100644 --- a/frontend/src/components/common/Header/Header.stories.tsx +++ b/frontend/src/components/common/Header/Header.stories.tsx @@ -79,7 +79,7 @@ export const LogoHeader: Story = { }, }; -export const NavigationHeader: Story = { +export const SearchResultPageHeader: Story = { args: { isHamburgerUsed: true, rightContent: "SearchIcon", diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx index 4c8ee46d..d9c5f28c 100644 --- a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx +++ b/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx @@ -6,7 +6,7 @@ import { ROUTE_PATHS_MAP } from "@constants/route"; import Header from "../Header"; -const NavigationHeader = () => { +const SearchResultPageHeader = () => { const navigation = useNavigate(); return ( @@ -23,4 +23,4 @@ const NavigationHeader = () => { ); }; -export default NavigationHeader; +export default SearchResultPageHeader; From 003c4e06356660493936d2b07c008dc615c9a78b Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 18:47:19 +0900 Subject: [PATCH 32/36] =?UTF-8?q?fix:=20Header=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EA=BC=AC=EC=9D=B8=EA=B2=83=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 --- .../DefaultHeader.tsx} | 12 +++++------- .../components/common/Header/Header.stories.tsx | 4 ++-- .../Header/HomePageHeader/HomePageHeader.tsx | 12 +++++++----- .../SearchResultPageHeader.tsx} | 0 .../src/components/layout/AppLayout/AppLayout.tsx | 14 +++++++++----- 5 files changed, 23 insertions(+), 19 deletions(-) rename frontend/src/components/common/Header/{LogoHeader/LogoHeader.tsx => DefaultHeader/DefaultHeader.tsx} (65%) rename frontend/src/components/common/Header/{NavigationHeader/NavigationHeader.tsx => SearchResultPageHeaderHeader/SearchResultPageHeader.tsx} (100%) diff --git a/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx b/frontend/src/components/common/Header/DefaultHeader/DefaultHeader.tsx similarity index 65% rename from frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx rename to frontend/src/components/common/Header/DefaultHeader/DefaultHeader.tsx index f7117242..a1f389ad 100644 --- a/frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx +++ b/frontend/src/components/common/Header/DefaultHeader/DefaultHeader.tsx @@ -6,17 +6,15 @@ import { ROUTE_PATHS_MAP } from "@constants/route"; import Header from "../Header"; -const LogoHeader = () => { +const DefaultHeader = () => { const navigation = useNavigate(); - return (
navigation(ROUTE_PATHS_MAP.searchMain)} + iconType="home-icon" + size="20" + onClick={() => navigation(ROUTE_PATHS_MAP.root)} /> } isHamburgerUsed @@ -24,4 +22,4 @@ const LogoHeader = () => { ); }; -export default LogoHeader; +export default DefaultHeader; diff --git a/frontend/src/components/common/Header/Header.stories.tsx b/frontend/src/components/common/Header/Header.stories.tsx index 1c14c224..5bc16f27 100644 --- a/frontend/src/components/common/Header/Header.stories.tsx +++ b/frontend/src/components/common/Header/Header.stories.tsx @@ -64,14 +64,14 @@ export default meta; type Story = StoryObj; -export const HomeHeader: Story = { +export const DefaultHeader: Story = { args: { isHamburgerUsed: true, rightContent: "HomeIcon", }, }; -export const LogoHeader: Story = { +export const HomePageHeader: Story = { args: { isLogoUsed: true, isHamburgerUsed: true, diff --git a/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx b/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx index a03e152e..a9aa846b 100644 --- a/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx +++ b/frontend/src/components/common/Header/HomePageHeader/HomePageHeader.tsx @@ -6,15 +6,17 @@ import { ROUTE_PATHS_MAP } from "@constants/route"; import Header from "../Header"; -const HomeHeader = () => { +const HomePageHeader = () => { const navigation = useNavigate(); + return (
navigation(ROUTE_PATHS_MAP.root)} + iconType="search-icon" + size="18" + onClick={() => navigation(ROUTE_PATHS_MAP.searchMain)} /> } isHamburgerUsed @@ -22,4 +24,4 @@ const HomeHeader = () => { ); }; -export default HomeHeader; +export default HomePageHeader; diff --git a/frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx b/frontend/src/components/common/Header/SearchResultPageHeaderHeader/SearchResultPageHeader.tsx similarity index 100% rename from frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx rename to frontend/src/components/common/Header/SearchResultPageHeaderHeader/SearchResultPageHeader.tsx diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx index b7b3c2e0..dbaf89af 100644 --- a/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -1,26 +1,30 @@ import { Outlet, useLocation } from "react-router-dom"; -import HomeHeader from "@components/common/Header/HomePageHeader/HomePageHeader"; -import LogoHeader from "@components/common/Header/LogoHeader/LogoHeader"; +import DefaultHeader from "@components/common/Header/DefaultHeader/DefaultHeader"; +import HomePageHeader from "@components/common/Header/HomePageHeader/HomePageHeader"; import SearchHeader from "@components/common/Header/SearchHeader/SearchHeader"; import { ROUTE_PATHS_MAP } from "@constants/route"; import * as S from "./AppLayout.styled"; +const MIN_KEYWORD_LENGTH = 2; + const AppLayout = () => { const location = useLocation(); const pathName = location.pathname; const encodedKeyword = - location.pathname.split("/").length > 2 ? location.pathname.split("/").pop() : ""; + location.pathname.split("/").length > MIN_KEYWORD_LENGTH + ? location.pathname.split("/").pop() + : ""; const receivedKeyword = encodedKeyword ? decodeURIComponent(encodedKeyword) : ""; const getHeader = (pathName: string) => { - if (pathName === ROUTE_PATHS_MAP.root) return ; + if (pathName === ROUTE_PATHS_MAP.root) return ; if (pathName === ROUTE_PATHS_MAP.searchMain) return ; if (receivedKeyword && pathName.includes(ROUTE_PATHS_MAP.searchMain)) return ; - return ; + return ; }; return ( From 2e980c911e92168b0e6dab1735cc3394cffd892a Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 18:50:32 +0900 Subject: [PATCH 33/36] =?UTF-8?q?refactor:=20Header=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B8=EB=8D=B1?= =?UTF-8?q?=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Header/index.ts | 4 ++++ frontend/src/components/common/index.ts | 1 + frontend/src/components/layout/AppLayout/AppLayout.tsx | 4 +--- 3 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/common/Header/index.ts diff --git a/frontend/src/components/common/Header/index.ts b/frontend/src/components/common/Header/index.ts new file mode 100644 index 00000000..08cc5db0 --- /dev/null +++ b/frontend/src/components/common/Header/index.ts @@ -0,0 +1,4 @@ +export { default as DefaultHeader } from "./DefaultHeader/DefaultHeader"; +export { default as HomePageHeader } from "./HomePageHeader/HomePageHeader"; +export { default as SearchHeader } from "./SearchHeader/SearchHeader"; +export { default as SearchResultPageHeader } from "./SearchResultPageHeaderHeader/SearchResultPageHeader"; diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts index 418d52a1..16d9a051 100644 --- a/frontend/src/components/common/index.ts +++ b/frontend/src/components/common/index.ts @@ -22,3 +22,4 @@ export { default as FallbackImage } from "./FallbackImage/FallbackImage"; export { default as AvatarCircle } from "./AvatarCircle/AvatarCircle"; export { default as Dropdown } from "./Dropdown/Dropdown"; export { default as Modal } from "./Modal/Modal"; +export * from "./Header/index"; diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx index dbaf89af..23d27484 100644 --- a/frontend/src/components/layout/AppLayout/AppLayout.tsx +++ b/frontend/src/components/layout/AppLayout/AppLayout.tsx @@ -1,8 +1,6 @@ import { Outlet, useLocation } from "react-router-dom"; -import DefaultHeader from "@components/common/Header/DefaultHeader/DefaultHeader"; -import HomePageHeader from "@components/common/Header/HomePageHeader/HomePageHeader"; -import SearchHeader from "@components/common/Header/SearchHeader/SearchHeader"; +import { DefaultHeader, HomePageHeader, SearchHeader } from "@components/common"; import { ROUTE_PATHS_MAP } from "@constants/route"; From c3788631c26e9e4cc79f9f28075c84637aa3c3ab Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 18:57:02 +0900 Subject: [PATCH 34/36] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EB=92=A4=EB=A1=9C?= =?UTF-8?q?=EA=B0=80=EA=B8=B0=20=EB=88=84=EB=A5=BC=20=EB=95=8C,=20query?= =?UTF-8?q?=EB=8A=94=20=EA=B7=B8=EC=A0=84=20=EA=B2=80=EC=83=89=EC=96=B4?= =?UTF-8?q?=EC=A7=80=EB=A7=8C=20Input=20value=EB=8A=94=20=EA=B7=B8?= =?UTF-8?q?=EC=A0=84=20=EA=B2=80=EC=83=89=EC=96=B4=EA=B0=80=20=EC=95=84?= =?UTF-8?q?=EB=8B=88=EB=8D=98=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Header/SearchHeader/SearchHeader.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index ed151009..6cc3712c 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { css } from "@emotion/react"; @@ -30,6 +30,10 @@ const SearchHeader = () => { return receivedKeyword === ":id" ? "" : receivedKeyword; }); + useEffect(() => { + setKeyword(receivedKeyword); + }, [receivedKeyword]); + const handleClickSearchButton = (e: React.FormEvent) => { e.preventDefault(); if (keyword.trim().length < MIN_KEYWORD_LENGTH) { From 1088e6a99775ea674171070e8ae59f6349c9dc92 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sat, 17 Aug 2024 19:39:01 +0900 Subject: [PATCH 35/36] =?UTF-8?q?storybook:=20styled=EC=9D=98=20Input?= =?UTF-8?q?=EC=9D=B4=20=EC=95=84=EB=8B=8C=20=EC=A7=84=EC=A7=9C=20Input.tsx?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=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 - 로컬 환경에서는 문제없이 잘 렌더링되나, storybook에서는 값을 넣지 않은 label,maxcount,count div까지 만드는 이슈가있습니다. - 일단 style로 marginbottom에 음수를 줘서 가운데정렬된거처럼 보이게 수정은해놨습니다 --- frontend/src/components/common/Header/Header.stories.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/common/Header/Header.stories.tsx b/frontend/src/components/common/Header/Header.stories.tsx index 5bc16f27..010b68ce 100644 --- a/frontend/src/components/common/Header/Header.stories.tsx +++ b/frontend/src/components/common/Header/Header.stories.tsx @@ -1,10 +1,8 @@ -import { css } from "@emotion/react"; - import type { Meta, StoryObj } from "@storybook/react"; import Icon from "../Icon/Icon"; import IconButton from "../IconButton/IconButton"; -import { Input } from "../Input/Input.styled"; +import Input from "../Input/Input"; import Header from "./Header"; import * as S from "./SearchHeader/SearchHeader.styled"; @@ -17,9 +15,7 @@ const rightContentOptions = { From 0af07b578b450b7d984adb8e1defcfceacac8833 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:26:13 +0900 Subject: [PATCH 36/36] =?UTF-8?q?fix:=20build=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=9E=A1=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/SearchHeader/SearchHeader.tsx | 1 + .../components/pages/search/SearchPage.tsx | 22 ++++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx index 6cc3712c..b42ccbc0 100644 --- a/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx +++ b/frontend/src/components/common/Header/SearchHeader/SearchHeader.tsx @@ -64,6 +64,7 @@ const SearchHeader = () => { css={css` height: 4rem; `} + variant="round" /> { )} - {travelogues.map(({ id, title, thumbnail, authorProfileUrl, likes }) => ( - - ))} + {travelogues.map( + ({ id, title, thumbnail, authorProfileUrl, likeCount, tags, authorNickname }) => ( + + ), + )}