[JR-842] 검색페이지 qa 작업 (#161)

* fix: 북마크 정상 작동 및 낙관적 업데이트 적용 * feat: 리스트에서 더보기 버튼 삭제 및 자동 무한 스크롤 * fix: 지역 옵션 select 크기 조정 * fix: 나이에서 출생년도로 텍스트 수정
choooz · Oct 7, 2023 · 9afe136 · 9afe136
1 parent bb83f44
commit 9afe136
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 121 deletions.
diff --git a/apps/jurumarble/src/app/my/components/ChipContainer.tsx b/apps/jurumarble/src/app/my/components/ChipContainer.tsx
@@ -23,9 +23,23 @@ const ChipContainer = ({ date, title, region, mutateBookMark, isBookmark }: Prop
         </FlexRow>
         <FlexRow>
           {isBookmark ? (
-            <SvgIcBookmarkActive width={20} height={20} onClick={() => mutateBookMark()} />
+            <SvgIcBookmarkActive
+              width={20}
+              height={20}
+              onClick={(e) => {
+                e.stopPropagation();
+                mutateBookMark();
+              }}
+            />
           ) : (
-            <SvgIcBookmark width={20} height={20} onClick={() => mutateBookMark()} />
+            <SvgIcBookmark
+              width={20}
+              height={20}
+              onClick={(e) => {
+                e.stopPropagation();
+                mutateBookMark();
+              }}
+            />
           )}
         </FlexRow>
       </TagRow>

diff --git a/apps/jurumarble/src/app/my/components/VoteItem.tsx b/apps/jurumarble/src/app/my/components/VoteItem.tsx
@@ -9,11 +9,7 @@ import VoteDescription from "./VoteDescription";
 type Props = Pick<Content, "voteId" | "region" | "title" | "imageA" | "imageB">;
 
 function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
-  const { mutateBookMark, bookMarkCheckQuery } = useBookmarkService(voteId);
-
-  const { data: bookmarkCheck } = bookMarkCheckQuery;
-
-  const isBookmark = bookmarkCheck?.bookmarked || false;
+  const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
 
   const router = useRouter();
   const onClickDrinkVoteItem = () => {

diff --git a/apps/jurumarble/src/app/my/edit/components/UserInfoEditContainer.tsx b/apps/jurumarble/src/app/my/edit/components/UserInfoEditContainer.tsx
@@ -40,7 +40,7 @@ function UserInfoEditContainer() {
           <Input placeholder={gender === GENDER.MALE ? "남성" : "여성"} width="100%" disabled />
         </GenderAndAgeBox>
         <GenderAndAgeBox>
-          <H3>나이</H3>
+          <H3>출생년도</H3>
           <Input placeholder={`${yearOfBirth}`} width="50%" disabled />
         </GenderAndAgeBox>
       </GenderAndAge>

diff --git a/apps/jurumarble/src/app/search/components/DrinkList.tsx b/apps/jurumarble/src/app/search/components/DrinkList.tsx
@@ -1,7 +1,7 @@
 import { Button } from "components/button";
 import styled, { css } from "styled-components";
 import Path from "lib/Path";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import DrinkItem from "./DrinkItem";
 import { DrinkInfoSortType } from "src/types/common";
 import useGetDrinkList from "../services/useGetDrinkList";
@@ -13,10 +13,13 @@ interface Props {
   isSelectedTab: boolean;
 }
 
-function DrinkList({ searchText, sortOption, regionOption, isSelectedTab }: Props) {
-  const { drinkList, fetchNextPage, hasNextPage } = useGetDrinkList({
+function DrinkList({ searchText, sortOption, regionOption }: Props) {
+  const searchParams = useSearchParams();
+  const selectedTab = searchParams.get("selectedTab");
+
+  const { drinkList, subscribe } = useGetDrinkList({
     page: 0,
-    size: 5,
+    size: selectedTab === "drinkInfo" ? 10 : 3,
     keyword: searchText,
     region: regionOption,
     sortBy: sortOption,
@@ -26,14 +29,10 @@ function DrinkList({ searchText, sortOption, regionOption, isSelectedTab }: Prop
     return <></>;
   }
 
+  const router = useRouter();
   const onClickDrinkItem = (id: number) => {
     router.push(`${Path.DRINK_INFO_PAGE}/${id}`);
   };
-  const router = useRouter();
-
-  const onClickFetchNextPage = () => {
-    hasNextPage && fetchNextPage();
-  };
 
   return (
     <Container>
@@ -44,11 +43,7 @@ function DrinkList({ searchText, sortOption, regionOption, isSelectedTab }: Prop
           onClickDrinkItem={() => onClickDrinkItem(drinkInfo.id)}
         />
       ))}
-      {!isSelectedTab && (
-        <MoreButton variant="outline" width="100%" height="48px" onClick={onClickFetchNextPage}>
-          우리술 정보 더보기
-        </MoreButton>
-      )}
+      {selectedTab === "drinkInfo" && <div ref={subscribe}></div>}
     </Container>
   );
 }
@@ -60,10 +55,4 @@ const Container = styled.div`
   margin-top: 24px;
 `;
 
-const MoreButton = styled(Button)`
-  ${({ theme }) => css`
-    ${theme.typography.body01}
-    margin: 24px 0 40px 0;
-  `};
-`;
 export default DrinkList;
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx
@@ -16,11 +16,7 @@ interface Props {
 function DrinkVoteItem({ voteDrink }: Props) {
   const { voteId, region, title, imageA, imageB } = voteDrink;
 
-  const { mutateBookMark, bookMarkCheckQuery } = useBookmarkService(voteId);
-
-  const { data: bookmarkCheck } = bookMarkCheckQuery;
-
-  const isBookmark = bookmarkCheck?.bookmarked || false;
+  const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
 
   const router = useRouter();
   const onClickDrinkVoteItem = () => {

diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx
@@ -1,4 +1,5 @@
 import { Button } from "components/button";
+import { useSearchParams } from "next/navigation";
 import styled, { css } from "styled-components";
 import useVoteDrinkService from "../services/useVoteDrinkService";
 import DrinkVoteItem from "./DrinkVoteItem";
@@ -10,8 +11,11 @@ interface Props {
   isSelectedTab: boolean;
 }
 
-function DrinkVoteList({ searchText, sortOption, regionOption, isSelectedTab }: Props) {
-  const { voteDrinkList, fetchNextPage, hasNextPage } = useVoteDrinkService({
+function DrinkVoteList({ searchText, sortOption, regionOption }: Props) {
+  const searchParams = useSearchParams();
+  const selectedTab = searchParams.get("selectedTab");
+
+  const { voteDrinkList, subscribe } = useVoteDrinkService({
     page: 0,
     size: 3,
     keyword: searchText,
@@ -23,20 +27,14 @@ function DrinkVoteList({ searchText, sortOption, regionOption, isSelectedTab }:
     return <></>;
   }
 
-  const onClickFetchNextPage = () => {
-    hasNextPage && fetchNextPage();
-  };
+  console.log(voteDrinkList);
 
   return (
     <Container>
       {voteDrinkList.map((voteDrink, index) => (
         <DrinkVoteItem key={`drinkVoteItem_${index}`} voteDrink={voteDrink} />
       ))}
-      {!isSelectedTab && (
-        <MoreButton variant="outline" width="100%" height="48px" onClick={onClickFetchNextPage}>
-          우리술 투표 더보기
-        </MoreButton>
-      )}
+      {selectedTab === "drinkVote" && <div ref={subscribe}></div>}
     </Container>
   );
 }
@@ -48,11 +46,4 @@ const Container = styled.div`
   gap: 8px;
 `;
 
-const MoreButton = styled(Button)`
-  ${({ theme }) => css`
-    ${theme.typography.body01}
-    margin: 24px 0 40px 0;
-  `};
-`;
-
 export default DrinkVoteList;
diff --git a/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx b/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx
@@ -37,14 +37,13 @@ const SelectStyled = styled.span<{ isOpen: boolean }>`
       border: 1px solid ${theme.colors.line_01};
       border-radius: 8px;
       padding: 10px 12px;
-      width: 96px;
     }
     svg {
       ${isOpen && "transform: rotateX( 180deg )"}
     }
   `}
   #select-list {
-    width: 100px;
+    width: 85px;
     height: 200px;
     overflow: auto;
     display: flex;

diff --git a/apps/jurumarble/src/app/search/services/useGetDrinkList.ts b/apps/jurumarble/src/app/search/services/useGetDrinkList.ts
@@ -1,6 +1,7 @@
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { getDrinkList } from "lib/apis/drink";
 import { queryKeys } from "lib/queryKeys";
+import { useInfiniteScroll } from "@monorepo/hooks";
 
 type SearchDrinkServiceProps = Exclude<Parameters<typeof getDrinkList>[0], undefined>;
 
@@ -10,7 +11,7 @@ const getQueryKey = (params: SearchDrinkServiceProps) => [
 ];
 
 export default function useGetDrinkList(params: SearchDrinkServiceProps) {
-  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
+  const { data, fetchNextPage } = useInfiniteQuery(
     getQueryKey(params),
     ({ pageParam }) =>
       getDrinkList({
@@ -28,7 +29,9 @@ export default function useGetDrinkList(params: SearchDrinkServiceProps) {
     },
   );
 
+  const [subscribe] = useInfiniteScroll(fetchNextPage);
+
   const drinkList = data?.pages.flatMap((page) => page.content) ?? [];
 
-  return { drinkList, fetchNextPage, hasNextPage };
+  return { drinkList, subscribe };
 }
diff --git a/apps/jurumarble/src/app/search/services/useVoteDrinkService.ts b/apps/jurumarble/src/app/search/services/useVoteDrinkService.ts
@@ -1,6 +1,7 @@
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { getVoteDrinkList } from "lib/apis/vote";
 import { queryKeys } from "lib/queryKeys";
+import { useInfiniteScroll } from "@monorepo/hooks";
 
 type SearchVoteDrinkServiceProps = Exclude<Parameters<typeof getVoteDrinkList>[0], undefined>;
 
@@ -10,7 +11,7 @@ const getQueryKey = (params: SearchVoteDrinkServiceProps) => [
 ];
 
 export default function useVoteDrinkService(params: SearchVoteDrinkServiceProps) {
-  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
+  const { data, fetchNextPage } = useInfiniteQuery(
     getQueryKey(params),
     ({ pageParam }) =>
       getVoteDrinkList({
@@ -28,7 +29,9 @@ export default function useVoteDrinkService(params: SearchVoteDrinkServiceProps)
     },
   );
 
+  const [subscribe] = useInfiniteScroll(fetchNextPage);
+
   const voteDrinkList = data?.pages.flatMap((page) => page.content) ?? [];
 
-  return { voteDrinkList, fetchNextPage, hasNextPage };
+  return { voteDrinkList, subscribe };
 }
diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx
@@ -8,15 +8,15 @@ import BottomBar from "components/BottomBar";
 import VoteDescription from "./components/VoteDescription";
 import ChipContainer from "./components/ChipContainer";
 import CommentContainer from "./components/CommentContainer";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useToggle } from "@monorepo/hooks";
 import SearchRestaurantModal from "./components/SearchRestaurantModal";
-import usePostBookmarkService from "../services/useBookmarkService";
 import useVoteLoadService from "./services/useVoteLoadService";
 import useExecuteVoteService from "./services/useExecuteVoteService";
 import useFilteredStatisticsService from "./services/useFilterStatisticsService";
 import VoteAnalyzeBar from "./components/VoteAnalyzeBar";
 import { useState } from "react";
+import useBookmarkService from "services/useBookmarkService";
 
 function Detail() {
   const params = useParams();
@@ -32,7 +32,7 @@ function Detail() {
 
   const { data, isError, isLoading } = useVoteLoadService(Number(postId));
 
-  const { mutateBookMark, bookMarkCheckQuery } = usePostBookmarkService(Number(postId));
+  const { mutateBookMark, isBookmark } = useBookmarkService(Number(postId));
 
   const { mutate, select } = useExecuteVoteService(Number(data?.voteId));
   const onMutateVoting = (select: "A" | "B") => {
@@ -49,9 +49,6 @@ function Detail() {
     isLoading: isStatisticsLoading,
     isError: isStatisticsError,
   } = voteStatisticsQuery;
-  const { data: bookmarkCheck } = bookMarkCheckQuery;
-
-  const isBookmark = bookmarkCheck?.bookmarked || false;
 
   if (isLoading || isStatisticsLoading) return <div>로딩중</div>;
   if (isError || isStatisticsError) return <div>에러</div>;

diff --git a/apps/jurumarble/src/app/vote/page.tsx b/apps/jurumarble/src/app/vote/page.tsx
@@ -9,14 +9,14 @@ import { EmptyAImg } from "public/images";
 import SvgIcDetail from "src/assets/icons/components/IcDetail";
 import styled, { css } from "styled-components";
 import useFlipAnimation from "./hooks/useFlipAnimation";
-import usePostBookmarkService from "./services/useBookmarkService";
 import ChipContainer from "./[id]/components/ChipContainer";
 import VoteDescription from "./[id]/components/VoteDescription";
 import Path from "lib/Path";
 import useExecuteVoteService from "./[id]/services/useExecuteVoteService";
 import useInfiniteMainListService from "./services/useGetVoteListService";
 import { useMemo } from "react";
 import { toast } from "react-toastify";
+import useBookmarkService from "services/useBookmarkService";
 
 export type Drag = "up" | "down" | null;
 
@@ -43,7 +43,6 @@ function VoteHomePage() {
     mainVoteList[nowShowing] || {};
 
   const safeImageA = useMemo(() => {
-    console.log(imageA);
     if (!imageA || imageA === "string") return EmptyAImg;
     return imageA;
   }, [imageA]);
@@ -52,17 +51,13 @@ function VoteHomePage() {
     return imageB;
   }, [imageB]);
 
-  const { mutateBookMark, bookMarkCheckQuery } = usePostBookmarkService(voteId);
+  const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
 
   const { mutate, select } = useExecuteVoteService(voteId);
   const onMutateVoting = (select: "A" | "B") => {
     mutate(select);
   };
 
-  const { data: bookmarkCheck } = bookMarkCheckQuery;
-
-  const isBookmark = bookmarkCheck?.bookmarked || false;
-
   if (isLoading) return <PageInner drag={drag}>로딩중</PageInner>;
   if (isError) return <PageInner drag={drag}>에러</PageInner>;
 

diff --git a/apps/jurumarble/src/app/vote/post/services/usePostVoteService.ts b/apps/jurumarble/src/app/vote/post/services/usePostVoteService.ts
@@ -49,44 +49,44 @@ export default function usePostVoteService() {
   const onUploadImage = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files === null) return;
 
-    if (e.target.files.length === 2) {
-      if (e.target.files[0].size > 10485760 || e.target.files[1].size > 10485760) {
+    if (e.target.files.length === 1) {
+      if (e.target.files[0].size > 10485760) {
         alert("파일 용량이 10MB를 초과하였습니다.");
         return;
       }
       const formDataA = new FormData();
-      const formDataB = new FormData();
       formDataA.append("images", e.target.files[0]);
-      formDataB.append("images", e.target.files[1]);
       try {
         const dataA = await uploadImageAPI(formDataA);
-        const dataB = await uploadImageAPI(formDataB);
 
         setPostVoteInfo({
           ...postVoteInfo,
           imageA: dataA.imageUrl,
-          imageB: dataB.imageUrl,
+          imageB: "",
         });
       } catch (error) {
         alert("이미지 업로드에 실패했습니다." + error);
       }
       return;
     }
 
-    if (e.target.files.length === 1) {
-      if (e.target.files[0].size > 10485760) {
+    if (e.target.files.length === 2) {
+      if (e.target.files[0].size > 10485760 || e.target.files[1].size > 10485760) {
         alert("파일 용량이 10MB를 초과하였습니다.");
         return;
       }
       const formDataA = new FormData();
+      const formDataB = new FormData();
       formDataA.append("images", e.target.files[0]);
+      formDataB.append("images", e.target.files[1]);
       try {
         const dataA = await uploadImageAPI(formDataA);
+        const dataB = await uploadImageAPI(formDataB);
 
         setPostVoteInfo({
           ...postVoteInfo,
           imageA: dataA.imageUrl,
-          imageB: "",
+          imageB: dataB.imageUrl,
         });
       } catch (error) {
         alert("이미지 업로드에 실패했습니다." + error);