From ed5abc74016c3b6f49f6f6584b19e9ccc4f5d133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 19:23:19 +0900 Subject: [PATCH 01/12] =?UTF-8?q?fix:=20stemp=20=EC=98=A4=ED=83=80=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 --- .../src/app/map/components/MapContainer.tsx | 2 +- .../{stemp => stamp}/components/DrinkItem.tsx | 8 +++---- .../components/DrinkStampContainer.tsx} | 14 ++++++------ .../components/MyEnjoiedDrinkInfoSection.tsx | 6 ++--- .../components/StampedDrinkList.tsx} | 4 ++-- .../src/app/{stemp => stamp}/page.tsx | 8 +++---- .../service/useDrinkStampListService.ts} | 12 +++++----- .../service/useDrinkStampService.ts} | 22 +++++++++---------- apps/jurumarble/src/lib/queryKeys.ts | 4 ++-- 9 files changed, 40 insertions(+), 40 deletions(-) rename apps/jurumarble/src/app/{stemp => stamp}/components/DrinkItem.tsx (91%) rename apps/jurumarble/src/app/{stemp/components/DrinkStempContainer.tsx => stamp/components/DrinkStampContainer.tsx} (57%) rename apps/jurumarble/src/app/{stemp => stamp}/components/MyEnjoiedDrinkInfoSection.tsx (86%) rename apps/jurumarble/src/app/{stemp/components/StempedDrinkList.tsx => stamp/components/StampedDrinkList.tsx} (91%) rename apps/jurumarble/src/app/{stemp => stamp}/page.tsx (55%) rename apps/jurumarble/src/app/{stemp/service/useDrinkStempListService.ts => stamp/service/useDrinkStampListService.ts} (68%) rename apps/jurumarble/src/app/{stemp/service/useDrinkStempService.ts => stamp/service/useDrinkStampService.ts} (50%) diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx index 216b7cf6..5f837778 100644 --- a/apps/jurumarble/src/app/map/components/MapContainer.tsx +++ b/apps/jurumarble/src/app/map/components/MapContainer.tsx @@ -7,10 +7,10 @@ import useDrinksMapService from "../services/useDrinksMapService"; import { Map, MapMarker } from "react-kakao-maps-sdk"; import { useToggle } from "@react-hookz/web"; import RegionBottomSheet from "./RegionBottomsheet"; -import DrinkItem from "app/stemp/components/DrinkItem"; import { ExImg1 } from "public/images"; import RegionSmallSelect from "./RegionSmallSelect"; import { DRINK_INFO_SORT_LIST } from "lib/constants"; +import DrinkItem from "app/stamp/components/DrinkItem"; const MapContainer = () => { const [on, toggle] = useToggle(); diff --git a/apps/jurumarble/src/app/stemp/components/DrinkItem.tsx b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx similarity index 91% rename from apps/jurumarble/src/app/stemp/components/DrinkItem.tsx rename to apps/jurumarble/src/app/stamp/components/DrinkItem.tsx index df45ac1e..1695ec27 100644 --- a/apps/jurumarble/src/app/stemp/components/DrinkItem.tsx +++ b/apps/jurumarble/src/app/stamp/components/DrinkItem.tsx @@ -3,7 +3,7 @@ import Image from "next/image"; import SvgStamp from "src/assets/icons/components/IcStamp"; import { DrinkInfo } from "src/types/drink"; import styled, { css, useTheme } from "styled-components"; -import useDrinkStempService from "../service/useDrinkStempService"; +import useDrinkStampService from "../service/useDrinkStampService"; interface Props { drinkInfo: @@ -23,9 +23,9 @@ function DrinkItem({ drinkInfo, onClickReplaceDrinkInfo, selectedDrinkList }: Pr const { colors } = useTheme(); - const { isStempedDrink, postDrinkEnjoy } = useDrinkStempService(id); + const { isStampedDrink, postDrinkEnjoy } = useDrinkStampService(id); - const stempColor = isStempedDrink?.enjoyed ? colors.main_01 : colors.black_05; + const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05; return ( - + {productName} diff --git a/apps/jurumarble/src/app/stemp/components/DrinkStempContainer.tsx b/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx similarity index 57% rename from apps/jurumarble/src/app/stemp/components/DrinkStempContainer.tsx rename to apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx index 92b47bae..f7835a3e 100644 --- a/apps/jurumarble/src/app/stemp/components/DrinkStempContainer.tsx +++ b/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx @@ -1,15 +1,15 @@ import MyEnjoiedDrinkInfoSection from "./MyEnjoiedDrinkInfoSection"; -import StempedDrinkList from "./StempedDrinkList"; +import StampedDrinkList from "./StampedDrinkList"; import { useState } from "react"; -import useDrinkStempService from "../service/useDrinkStempListService"; +import useDrinkStampService from "../service/useDrinkStampListService"; -function DrinkStempContainer() { +function DrinkStampContainer() { const [regionOption, setRegionOption] = useState(""); const onChangeRegionOption = (value: string) => { setRegionOption(value); }; - const { drinkList, subscribe, numberOfStempedDrinks } = useDrinkStempService({ + const { drinkList, subscribe, numberOfStampedDrinks } = useDrinkStampService({ page: 0, size: 10, region: regionOption, @@ -17,8 +17,8 @@ function DrinkStempContainer() { return ( <> - - +

우리술 도장을
- {numberOfStempedDrinks}개 모았어요. + {numberOfStampedDrinks}개 모았어요.

- + ); } -export default StempPage; +export default StampPage; diff --git a/apps/jurumarble/src/app/stemp/service/useDrinkStempListService.ts b/apps/jurumarble/src/app/stamp/service/useDrinkStampListService.ts similarity index 68% rename from apps/jurumarble/src/app/stemp/service/useDrinkStempListService.ts rename to apps/jurumarble/src/app/stamp/service/useDrinkStampListService.ts index 52261ead..57ec740e 100644 --- a/apps/jurumarble/src/app/stemp/service/useDrinkStempListService.ts +++ b/apps/jurumarble/src/app/stamp/service/useDrinkStampListService.ts @@ -3,14 +3,14 @@ import { getEnjoyedDrinkList } from "lib/apis/drink"; import { queryKeys } from "lib/queryKeys"; import { useInfiniteScroll } from "@monorepo/hooks"; -type DrinkStempListProps = Exclude[0], undefined>; +type DrinkStampListProps = Exclude[0], undefined>; -const getDrinkListQueryKey = (params: DrinkStempListProps) => [ - queryKeys.DRINK_STEMP_LIST, +const getDrinkListQueryKey = (params: DrinkStampListProps) => [ + queryKeys.DRINK_STAMP_LIST, { ...params }, ]; -export default function useDrinkStempListService(params: DrinkStempListProps) { +export default function useDrinkStampListService(params: DrinkStampListProps) { const { data, fetchNextPage } = useInfiniteQuery( getDrinkListQueryKey(params), ({ pageParam }) => @@ -29,11 +29,11 @@ export default function useDrinkStempListService(params: DrinkStempListProps) { }, ); - const numberOfStempedDrinks = data?.pages[0].numberOfElements ?? 0; + const numberOfStampedDrinks = data?.pages[0].numberOfElements ?? 0; const drinkList = data?.pages.flatMap((page) => page.content) ?? []; const [subscribe] = useInfiniteScroll(fetchNextPage); - return { drinkList, fetchNextPage, subscribe, numberOfStempedDrinks }; + return { drinkList, fetchNextPage, subscribe, numberOfStampedDrinks }; } diff --git a/apps/jurumarble/src/app/stemp/service/useDrinkStempService.ts b/apps/jurumarble/src/app/stamp/service/useDrinkStampService.ts similarity index 50% rename from apps/jurumarble/src/app/stemp/service/useDrinkStempService.ts rename to apps/jurumarble/src/app/stamp/service/useDrinkStampService.ts index e5a9ec15..261fe7ec 100644 --- a/apps/jurumarble/src/app/stemp/service/useDrinkStempService.ts +++ b/apps/jurumarble/src/app/stamp/service/useDrinkStampService.ts @@ -2,33 +2,33 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { getIsEnjoyedDrinkAPI, postDrinkEnjoyAPI } from "lib/apis/drink"; import { queryKeys } from "lib/queryKeys"; -type PostDrinkStempProps = Exclude[0], undefined>; -const getDrinkStempQueryKey = (params: PostDrinkStempProps) => [queryKeys.DRINK_STEMP, params]; +type PostDrinkStampProps = Exclude[0], undefined>; +const getDrinkStampQueryKey = (params: PostDrinkStampProps) => [queryKeys.DRINK_STAMP, params]; -export default function useDrinkStempService(drinkId: PostDrinkStempProps) { - const { data: isStempedDrink } = useQuery(getDrinkStempQueryKey(drinkId), () => +export default function useDrinkStampService(drinkId: PostDrinkStampProps) { + const { data: isStampedDrink } = useQuery(getDrinkStampQueryKey(drinkId), () => getIsEnjoyedDrinkAPI(drinkId), ); const queryClient = useQueryClient(); const { mutate: postDrinkEnjoy } = useMutation( - (drinkId: PostDrinkStempProps) => postDrinkEnjoyAPI(drinkId), + (drinkId: PostDrinkStampProps) => postDrinkEnjoyAPI(drinkId), { async onMutate(drinkId) { - await queryClient.cancelQueries(getDrinkStempQueryKey(drinkId)); - const previousData = queryClient.getQueryData(getDrinkStempQueryKey(drinkId)); - queryClient.setQueryData(getDrinkStempQueryKey(drinkId), (old: any) => [old, drinkId]); + await queryClient.cancelQueries(getDrinkStampQueryKey(drinkId)); + const previousData = queryClient.getQueryData(getDrinkStampQueryKey(drinkId)); + queryClient.setQueryData(getDrinkStampQueryKey(drinkId), (old: any) => [old, drinkId]); return { previousData }; }, onError(err, drinkId, context) { - queryClient.setQueryData(getDrinkStempQueryKey(drinkId), context?.previousData); + queryClient.setQueryData(getDrinkStampQueryKey(drinkId), context?.previousData); }, onSettled(_, __, drinkId) { - queryClient.invalidateQueries({ queryKey: getDrinkStempQueryKey(drinkId) }); + queryClient.invalidateQueries({ queryKey: getDrinkStampQueryKey(drinkId) }); }, }, ); - return { isStempedDrink, postDrinkEnjoy }; + return { isStampedDrink, postDrinkEnjoy }; } diff --git a/apps/jurumarble/src/lib/queryKeys.ts b/apps/jurumarble/src/lib/queryKeys.ts index 8a2b118c..9b2f00b4 100644 --- a/apps/jurumarble/src/lib/queryKeys.ts +++ b/apps/jurumarble/src/lib/queryKeys.ts @@ -12,8 +12,8 @@ export const queryKeys = { VOTING_CHECK: "votingCheck" as const, DETAIL_COMMENT_LIST: "commentByVoteId" as const, DETAIL_VOTE_COUNT: "voteCountByVoteId" as const, - DRINK_STEMP_LIST: "drinkStempList" as const, - DRINK_STEMP: "drinkStemp" as const, + DRINK_STAMP_LIST: "drinkStampList" as const, + DRINK_STAMP: "drinkStamp" as const, DETAIL_FILTERED_ANALYSIS: "filteredAnalysisByVoteId" as const, MY_PARTICIPATED_VOTE: "myParticipatedVote" as const, MY_CREATED_VOTE: "myCreatedVote" as const, From a351cd489b3f62009fe146f39e0395e975e717d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 22:19:12 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/icons/components/IcHome.tsx | 40 ++++++++++++++----- .../src/assets/icons/components/IcUser.tsx | 40 ++++++++++++++----- 2 files changed, 62 insertions(+), 18 deletions(-) diff --git a/apps/jurumarble/src/assets/icons/components/IcHome.tsx b/apps/jurumarble/src/assets/icons/components/IcHome.tsx index 16fc1eb5..81069e0a 100644 --- a/apps/jurumarble/src/assets/icons/components/IcHome.tsx +++ b/apps/jurumarble/src/assets/icons/components/IcHome.tsx @@ -1,5 +1,5 @@ import type { SVGProps } from "react"; -const SvgIcHome = (props: SVGProps) => ( +const SvgHome = (props: SVGProps) => ( ) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + + + + + ); -export default SvgIcHome; +export default SvgHome; diff --git a/apps/jurumarble/src/assets/icons/components/IcUser.tsx b/apps/jurumarble/src/assets/icons/components/IcUser.tsx index 37e49980..fbf15cc3 100644 --- a/apps/jurumarble/src/assets/icons/components/IcUser.tsx +++ b/apps/jurumarble/src/assets/icons/components/IcUser.tsx @@ -1,5 +1,5 @@ import type { SVGProps } from "react"; -const SvgIcUser = (props: SVGProps) => ( +const SvgUser = (props: SVGProps) => ( ) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + + + + + ); -export default SvgIcUser; +export default SvgUser; From f8d691c11735b5d0c9426fa09c0bac2f67c568af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 22:19:42 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=EB=B0=94=20=EC=B5=9C=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/components/BottomBar.tsx | 20 +++++++++----------- apps/jurumarble/src/lib/Path.ts | 3 +++ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx index 26e3a1d3..056ec330 100644 --- a/apps/jurumarble/src/components/BottomBar.tsx +++ b/apps/jurumarble/src/components/BottomBar.tsx @@ -1,5 +1,6 @@ "use client"; +import Path from "lib/Path"; import { usePathname, useRouter } from "next/navigation"; import SvgIcCheck from "src/assets/icons/components/IcCheck"; import SvgIcHome from "src/assets/icons/components/IcHome"; @@ -11,27 +12,27 @@ import styled from "styled-components"; const NAVIGATION_LIST = [ { name: "홈", - path: "/", + path: Path.MAIN_PAGE, icon: , }, { name: "술도장", - path: "/stemp", + path: Path.STAMP_PAGE, icon: , }, { name: "투표", - path: "/vote", + path: Path.VOTE_HOME, icon: , }, { name: "술지도", - path: "/map", + path: Path.DRINK_MAP_PAGE, icon: , }, { name: "마이", - path: "/my", + path: Path.MY_PAGE, icon: , }, ]; @@ -45,10 +46,8 @@ function BottomBar() { {NAVIGATION_LIST.map(({ icon, name, path }) => { - // pathname이 "/" 일때 홈만 true이고, 그외일때 현재 url에 path가 포함되어 있으면 active - const isActive = pathName === "/" ? pathName === path : pathName.includes(path); return ( - router.push(path)}> + router.push(path)}> {icon} {name} @@ -66,6 +65,7 @@ const Container = styled.section` bottom: 0; left: 0; background-color: ${({ theme }) => theme.colors.white}; + padding: 0 20px; `; const Inner = styled.div` @@ -77,13 +77,11 @@ const Inner = styled.div` `; const BarItem = styled.div<{ isActive: boolean }>` - padding: 10px 21px; + padding: 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 4px; - white-space: nowrap; color: ${({ isActive, theme }) => (isActive ? theme.colors.black_01 : theme.colors.black_05)}; `; diff --git a/apps/jurumarble/src/lib/Path.ts b/apps/jurumarble/src/lib/Path.ts index bcdadb5e..2953bd1a 100644 --- a/apps/jurumarble/src/lib/Path.ts +++ b/apps/jurumarble/src/lib/Path.ts @@ -12,6 +12,8 @@ const Path = { POST_PAGE: "/vote/post", MY_PAGE: "/my", PROFILE_EDIT: "/my/edit", + NOTIFICATION_PAGE: "/notification", + STAMP_PAGE: "/stamp", // common MAIN_PAGE: "/", @@ -19,6 +21,7 @@ const Path = { VOTE_DETAIL_PAGE: "/vote", SEARCH_PAGE: "/search", DRINK_INFO_PAGE: "/drink-info", + DRINK_MAP_PAGE: "/map", } as const; export default Path; From 4a6853620fbe6ad2d950610967dc9685b8af4df5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 22:19:54 +0900 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=EC=97=90=20?= =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/components/Header.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/jurumarble/src/components/Header.tsx b/apps/jurumarble/src/components/Header.tsx index 93da006b..ae0adff7 100644 --- a/apps/jurumarble/src/components/Header.tsx +++ b/apps/jurumarble/src/components/Header.tsx @@ -1,15 +1,23 @@ "use client"; +import Path from "lib/Path"; +import Link from "next/link"; import { SvgHeaderSearch, SvgLogo, SvgNotification } from "src/assets/icons/components"; import styled from "styled-components"; function Header() { return ( - + + + - - + + + + + + ); From 9c057fa8c8b6f3291863a027d1b43fb446928e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 22:20:12 +0900 Subject: [PATCH 05/12] =?UTF-8?q?fix:=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=EC=97=90=20=EC=83=89=EC=83=81?= =?UTF-8?q?=EC=9D=B4=20=EC=95=88=EB=82=98=ED=83=80=EB=82=98=EB=8D=98=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/jurumarble/src/components/ImageUploadButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/jurumarble/src/components/ImageUploadButton.tsx b/apps/jurumarble/src/components/ImageUploadButton.tsx index f818ed99..f22c650e 100644 --- a/apps/jurumarble/src/components/ImageUploadButton.tsx +++ b/apps/jurumarble/src/components/ImageUploadButton.tsx @@ -1,5 +1,5 @@ import SvgIcCamera from "src/assets/icons/components/IcCamera"; -import styled, { css } from "styled-components"; +import styled, { css, useTheme } from "styled-components"; interface Props { width: `${number}px` | `${number}%` | "auto"; @@ -7,9 +7,10 @@ interface Props { } function ImageUploadButton({ width, height }: Props) { + const theme = useTheme(); return ( - + ); } From 55374f2f45bb2b25fa32bc2e67a69b31c15f08b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 23:11:54 +0900 Subject: [PATCH 06/12] =?UTF-8?q?fix:=20=EC=88=A0=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EB=A5=BC=20=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8A=94=20=EC=84=9C?= =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/search/components/DrinkList.tsx | 2 +- .../search/services}/useGetDrinkList.ts | 0 .../vote/post/components/DrinkSearchModal.tsx | 5 ++- .../app/vote/post/services/useGetDrinkList.ts | 35 +++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) rename apps/jurumarble/src/{hooks => app/search/services}/useGetDrinkList.ts (100%) create mode 100644 apps/jurumarble/src/app/vote/post/services/useGetDrinkList.ts diff --git a/apps/jurumarble/src/app/search/components/DrinkList.tsx b/apps/jurumarble/src/app/search/components/DrinkList.tsx index 4515bf76..a45924fb 100644 --- a/apps/jurumarble/src/app/search/components/DrinkList.tsx +++ b/apps/jurumarble/src/app/search/components/DrinkList.tsx @@ -4,7 +4,7 @@ import Path from "lib/Path"; import { useRouter } from "next/navigation"; import DrinkItem from "./DrinkItem"; import { DrinkInfoSortType } from "src/types/common"; -import useGetDrinkList from "hooks/useGetDrinkList"; +import useGetDrinkList from "../services/useGetDrinkList"; interface Props { searchText: string; diff --git a/apps/jurumarble/src/hooks/useGetDrinkList.ts b/apps/jurumarble/src/app/search/services/useGetDrinkList.ts similarity index 100% rename from apps/jurumarble/src/hooks/useGetDrinkList.ts rename to apps/jurumarble/src/app/search/services/useGetDrinkList.ts diff --git a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx index 2405f883..57607c44 100644 --- a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx +++ b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx @@ -8,11 +8,11 @@ import styled, { css } from "styled-components"; import useUpdateSelectedDrinkList from "../hooks/useUpdateSelectedDrinkList"; import SelectedDrinkChip from "./SelectedDrinkChip"; import DrinkItem from "app/vote/post/components/DrinkItem"; -import useGetDrinkList from "hooks/useGetDrinkList"; import SearchInput from "components/SearchInput"; import useInput from "hooks/useInput"; import { DrinkInfoType } from "src/types/vote"; import RegionSelect from "components/RegionSelect"; +import useGetDrinkList from "../services/useGetDrinkList"; interface Props { onToggleDrinkSearchModal: () => void; @@ -66,7 +66,6 @@ function DrinkSearchModal({ onToggleDrinkSearchModal, onClickSearchDrinkComplete ))} - {drinkList.map((drinkInfo) => ( @@ -114,7 +113,7 @@ const DrinkList = styled.ul` flex-direction: column; gap: 8px; overflow: auto; - height: 400px; + height: 50vh; -ms-overflow-style: none /* IE and Edge 스크롤바 없애는 css*/; scrollbar-width: none; /* Firefox 스크롤바 없애는 css */ &::-webkit-scrollbar { diff --git a/apps/jurumarble/src/app/vote/post/services/useGetDrinkList.ts b/apps/jurumarble/src/app/vote/post/services/useGetDrinkList.ts new file mode 100644 index 00000000..19a7efc4 --- /dev/null +++ b/apps/jurumarble/src/app/vote/post/services/useGetDrinkList.ts @@ -0,0 +1,35 @@ +import { useInfiniteQuery } from "@tanstack/react-query"; +import { getDrinkList } from "lib/apis/drink"; +import { queryKeys } from "lib/queryKeys"; + +type SearchDrinkServiceProps = Exclude[0], undefined>; + +const getQueryKey = (params: SearchDrinkServiceProps) => [ + queryKeys.SEARCH_DRINK_LIST, + { ...params }, +]; + +export default function useGetDrinkList(params: SearchDrinkServiceProps) { + const { data, fetchNextPage, hasNextPage } = useInfiniteQuery( + getQueryKey(params), + ({ pageParam }) => + getDrinkList({ + ...params, + page: pageParam?.page || params.page, + }), + { + getNextPageParam: ({ last, number }) => { + if (last) return undefined; + return { + page: number + 1, + }; + }, + keepPreviousData: true, + enabled: !!params.region, + }, + ); + + const drinkList = data?.pages.flatMap((page) => page.content) ?? []; + + return { drinkList, fetchNextPage, hasNextPage }; +} From ec02869fcfeba12a218e214929e24175010bc3c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?= Date: Wed, 4 Oct 2023 23:12:41 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EA=B3=A0=EB=8F=84=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/vote/post/components/PostVoteContainer.tsx | 9 +++++++-- .../post/components/TitleAndDescriptionSection.tsx | 10 +++------- apps/jurumarble/src/components/RegionSelect.tsx | 9 ++++++--- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx b/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx index 5260e761..76f1d22c 100644 --- a/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx +++ b/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx @@ -113,6 +113,7 @@ function PostVoteContainer() { maxLength={22} value={titleA} onChange={onChangeVoteText} + AorB="A" /> @@ -123,6 +124,7 @@ function PostVoteContainer() { maxLength={22} value={titleB} onChange={onChangeVoteText} + AorB="B" /> @@ -219,12 +221,15 @@ const VoteOptionText = styled.div` gap: 16px; `; -const ABInput = styled(Input)` - ${({ theme }) => +const ABInput = styled(Input)<{ AorB: "A" | "B" }>` + ${({ theme, AorB }) => css` ${theme.typography.body_long03} color: ${theme.colors.black_04}; border-bottom: 1px solid ${theme.colors.line_01}; + :focus { + border-bottom: 1px solid ${AorB === "A" ? theme.colors.sub_01 : theme.colors.sub_02}; + } `} `; diff --git a/apps/jurumarble/src/app/vote/post/components/TitleAndDescriptionSection.tsx b/apps/jurumarble/src/app/vote/post/components/TitleAndDescriptionSection.tsx index c77e7cfe..bfb8be21 100644 --- a/apps/jurumarble/src/app/vote/post/components/TitleAndDescriptionSection.tsx +++ b/apps/jurumarble/src/app/vote/post/components/TitleAndDescriptionSection.tsx @@ -16,14 +16,11 @@ function TitleAndDescriptionSection({ isCompleted, onClickPostVoteComplete, }: Props) { - const theme = useTheme(); - return ( <>

제목