[JR-830] 페이지 플로우 정리 및 QA

apps/jurumarble/package.json

@@ -24,6 +24,7 @@
     "react-is": "^18.2.0",
     "react-kakao-maps-sdk": "^1.1.21",
     "react-toastify": "^9.1.3",
+    "sharp": "^0.32.6",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.5.1"
   },

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();

apps/jurumarble/src/app/my/edit/components/UserInfoEditContainer.tsx

@@ -60,15 +60,14 @@ function UserInfoEditContainer() {
         variant="primary"
         width="100%"
         height="56px"
-        onClick={() => {
+        onClick={() =>
           updateUserInfo({
             nickname,
             alcoholLimit,
             mbti,
             imageUrl,
-          });
-          router.push(Path.MY_PAGE);
-        }}
+          })
+        }
       >
         완료
       </CompleteButton>

apps/jurumarble/src/app/my/edit/services/useEditProfileService.ts

@@ -1,7 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { uploadImageAPI } from "lib/apis/common";
 import { deleteUserAPI, updateUserInfoAPI } from "lib/apis/my";
+import Path from "lib/Path";
 import { queryKeys } from "lib/queryKeys";
+import { useRouter } from "next/navigation";
+import { toast } from "react-toastify";
 
 type UpdateUserInfoRequest = Exclude<Parameters<typeof updateUserInfoAPI>[0], undefined>;
 
@@ -39,9 +42,12 @@ export default function useEditProfileService() {
     queryClient.setQueryData(getQueryKey, (prev: any) => ({ ...prev, mbti: value }));
   };
 
+  const router = useRouter();
+
   const { mutate: updateUserInfo } = useMutation(
     (newUserInfo: UpdateUserInfoRequest) => updateUserInfoAPI(newUserInfo),
     {
+      onSuccess: () => router.push(Path.MY_PAGE),
       onError: () => {
         /**
          * @TODO 서버 메시지와 연동
@@ -51,7 +57,12 @@ export default function useEditProfileService() {
     },
   );
 
-  const { mutate: deleteUser } = useMutation(() => deleteUserAPI());
+  const { mutate: deleteUser } = useMutation(() => deleteUserAPI(), {
+    onSuccess: () => {
+      toast("회원 탈퇴가 완료되었습니다.");
+      router.push(Path.MAIN_PAGE);
+    },
+  });
 
   return {
     onUploadImage,

apps/jurumarble/src/app/register/contexts/RegisterProvider.tsx

@@ -86,6 +86,16 @@ export const RegisterProvider = ({ children }: PropsWithChildren) => {
       : 1;
 
   const onNextStep = () => {
+    if (Number(yearOfBirth) > 2004) {
+      toast.error("2004년 이후 출생자는 가입이 불가능합니다.");
+      setYearOfBirth("");
+      return;
+    } else if (999 < Number(yearOfBirth) && Number(yearOfBirth) < 1900) {
+      toast.error("출생년도를 다시 한번 확인해주세요.");
+      setYearOfBirth("");
+      return;
+    }
+
     currentStepIndex < stepList.length
       ? setStep(stepList[currentStepIndex])
       : onToggleWarningModal();
@@ -141,11 +151,7 @@ export const RegisterProvider = ({ children }: PropsWithChildren) => {
     } else if (step === "STEP2") {
       return gender === null;
     } else if (step === "STEP3") {
-      /**
-       * @TODO 토스트 메시지가 두번씩 뜨는 이슈
-       */
-      Number(yearOfBirth) > 2004 && toast.error("2004년 이후 출생자는 가입이 불가능합니다.");
-      return yearOfBirth === "" || yearOfBirth?.length !== 4 || Number(yearOfBirth) > 2004;
+      return yearOfBirth === "" || yearOfBirth?.length !== 4;
     } else if (step === "STEP4") {
       return Object.values(MBTI).some((value) => value === null);
     }

apps/jurumarble/src/app/search/components/DrinkItem.tsx

@@ -2,22 +2,27 @@ import Chip from "components/Chip";
 
 import { transitions } from "lib/styles";
 import Image from "next/image";
+import useDrinkStampService from "services/useDrinkStampService";
 import SvgStamp from "src/assets/icons/components/IcStamp";
 import { DrinkInfo } from "src/types/drink";
 import styled, { css, useTheme } from "styled-components";
 
 interface Props {
   drinkInfo: DrinkInfo;
-  stamp?: boolean;
+
   onClickDrinkItem: (e: React.MouseEvent<HTMLButtonElement>) => void;
   selectedDrinkList?: string[];
 }
 
-function DrinkItem({ drinkInfo, stamp, onClickDrinkItem, selectedDrinkList }: Props) {
-  const { name, productName, image } = drinkInfo;
+function DrinkItem({ drinkInfo, onClickDrinkItem, selectedDrinkList }: Props) {
+  const { id, name, productName, image, enjoyCount } = drinkInfo;
 
   const { colors } = useTheme();
 
+  const { isStampedDrink, postDrinkEnjoy } = useDrinkStampService(id);
+
+  const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;
+
   return (
     <Container onClick={onClickDrinkItem} name={name} selected={selectedDrinkList?.includes(name)}>
       <ImageWrapper>
@@ -26,16 +31,19 @@ function DrinkItem({ drinkInfo, stamp, onClickDrinkItem, selectedDrinkList }: Pr
       <InfoContainer>
         <NameStampContainer>
           <Name>{name}</Name>
-          {stamp && (
-            <StampWrapper>
-              <SvgStamp width={24} height={24} fill={colors.black_05} />
-            </StampWrapper>
-          )}
+          <StampWrapper
+            onClick={(e) => {
+              e.stopPropagation();
+              postDrinkEnjoy(id);
+            }}
+          >
+            <SvgStamp width={24} height={24} fill={stampColor} />
+          </StampWrapper>
         </NameStampContainer>
         <ManufacturerName>{productName}</ManufacturerName>
         <ChipContainer>
           <Chip variant="region">서울</Chip>
-          <Chip variant="numberOfParticipants">213명이 즐겼어요</Chip>
+          <Chip variant="numberOfParticipants">{enjoyCount}명이 즐겼어요</Chip>
         </ChipContainer>
       </InfoContainer>
     </Container>

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;
@@ -16,7 +16,7 @@ interface Props {
 function DrinkList({ searchText, sortOption, regionOption, isSelectedTab }: Props) {
   const { drinkList, fetchNextPage, hasNextPage } = useGetDrinkList({
     page: 0,
-    size: 3,
+    size: 5,
     keyword: searchText,
     region: regionOption,
     sortBy: sortOption,

apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx

@@ -33,7 +33,7 @@ const SelectStyled = styled.span<{ isOpen: boolean }>`
   ${({ theme, isOpen }) => css`
     ${theme.typography.button01};
     color: ${theme.colors.black_03};
-    width: 80px;
+    width: 85px;
     height: 40px;
     .selected-label {
       border: 1px solid ${theme.colors.line_01};

apps/jurumarble/src/app/stemp/components/DrinkItem.tsx → apps/jurumarble/src/app/stamp/components/DrinkItem.tsx

@@ -1,9 +1,9 @@
 import { transitions } from "lib/styles";
 import Image from "next/image";
+import useDrinkStampService from "services/useDrinkStampService";
 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";
 
 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 (
     <Container
@@ -45,7 +45,7 @@ function DrinkItem({ drinkInfo, onClickReplaceDrinkInfo, selectedDrinkList }: Pr
               postDrinkEnjoy(id);
             }}
           >
-            <SvgStamp width={24} height={24} fill={stempColor} />
+            <SvgStamp width={24} height={24} fill={stampColor} />
           </StampWrapper>
         </NameStampContainer>
         <ManufacturerName>{productName}</ManufacturerName>

apps/jurumarble/src/app/stemp/components/DrinkStempContainer.tsx → apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx

@@ -1,24 +1,24 @@
 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,
   });
 
   return (
     <>
-      <MyEnjoiedDrinkInfoSection numberOfStempedDrinks={numberOfStempedDrinks} />
-      <StempedDrinkList
+      <MyEnjoiedDrinkInfoSection numberOfStampedDrinks={numberOfStampedDrinks} />
+      <StampedDrinkList
         regionOption={regionOption}
         onChangeRegionOption={onChangeRegionOption}
         drinkList={drinkList}
@@ -28,4 +28,4 @@ function DrinkStempContainer() {
   );
 }
 
-export default DrinkStempContainer;
+export default DrinkStampContainer;

apps/jurumarble/src/app/stemp/components/MyEnjoiedDrinkInfoSection.tsx → apps/jurumarble/src/app/stamp/components/MyEnjoiedDrinkInfoSection.tsx

@@ -3,16 +3,18 @@ import { DrinkImage } from "public/images";
 import styled, { css } from "styled-components";
 
 interface Props {
-  numberOfStempedDrinks: number;
+  numberOfStampedDrinks: number;
 }
 
-function MyEnjoiedDrinkInfoSection({ numberOfStempedDrinks }: Props) {
+function MyEnjoiedDrinkInfoSection({ numberOfStampedDrinks }: Props) {
   return (
     <Section>
       <div>
         <H2>
           우리술 도장을 <br />
-          <MainColor>{numberOfStempedDrinks}</MainColor>개 모았어요.
+          <div>
+            <MainColor>{numberOfStampedDrinks}</MainColor>개 모았어요.
+          </div>
         </H2>
       </div>
       <Image
@@ -37,6 +39,9 @@ const Section = styled.section`
 const H2 = styled.h2`
   ${({ theme }) => css`
     ${theme.typography.headline02}
+    display: flex;
+    flex-direction: column;
+    line-height: 26px;
   `}
 `;
 

apps/jurumarble/src/app/stemp/components/StempedDrinkList.tsx → apps/jurumarble/src/app/stamp/components/StampedDrinkList.tsx

@@ -11,7 +11,7 @@ interface Props {
   drinkList: DrinkInfo[];
 }
 
-function StempedDrinkList({ regionOption, onChangeRegionOption, drinkList }: Props) {
+function StampedDrinkList({ regionOption, onChangeRegionOption, drinkList }: Props) {
   const router = useRouter();
 
   return (
@@ -41,4 +41,4 @@ const DrinkList = styled.ul`
   margin-top: 24px;
 `;
 
-export default StempedDrinkList;
+export default StampedDrinkList;

apps/jurumarble/src/app/stemp/page.tsx → apps/jurumarble/src/app/stamp/page.tsx

@@ -2,16 +2,16 @@
 
 import BottomBar from "components/BottomBar";
 import Header from "components/Header";
-import DrinkStempContainer from "./components/DrinkStempContainer";
+import DrinkStampContainer from "./components/DrinkStampContainer";
 
-function StempPage() {
+function StampPage() {
   return (
     <>
       <Header />
-      <DrinkStempContainer />
+      <DrinkStampContainer />
       <BottomBar />
     </>
   );
 }
 
-export default StempPage;
+export default StampPage;

apps/jurumarble/src/app/stemp/service/useDrinkStempListService.ts → 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<Parameters<typeof getEnjoyedDrinkList>[0], undefined>;
+type DrinkStampListProps = Exclude<Parameters<typeof getEnjoyedDrinkList>[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 };
 }

apps/jurumarble/src/app/vote/page.tsx

@@ -4,7 +4,7 @@ import BottomBar from "components/BottomBar";
 import { Button } from "components/button";
 import Header from "components/Header";
 import { media } from "lib/styles";
-import { useParams, useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { EmptyAImg } from "public/images";
 import SvgIcDetail from "src/assets/icons/components/IcDetail";
 import styled, { css } from "styled-components";
@@ -16,11 +16,17 @@ 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";
 
 export type Drag = "up" | "down" | null;
 
 function VoteHomePage() {
-  const params = useParams();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams);
+  /**
+   * @TODO 여러번 뜨는 현상 지속시 삭제
+   */
+  params.get("isSuccess") && toast.success("정상적으로 투표가 등록되었습니다!.");
 
   const router = useRouter();
 
@@ -59,6 +65,7 @@ function VoteHomePage() {
 
   if (isLoading) return <PageInner drag={drag}>로딩중</PageInner>;
   if (isError) return <PageInner drag={drag}>에러</PageInner>;
+
   return (
     <>
       <Background>