[JR-880] qa 우선순위 높은 작업들 처리

apps/jurumarble/public/images/index.ts

@@ -9,3 +9,4 @@ export { default as DrinkCapacityLow } from './DrinkCapacityLow.png';
 export { default as DrinkCapacityMedium } from './DrinkCapacityMedium.png';
 export { default as DrinkCapacityHigh } from './DrinkCapacityHigh.png';
 export { default as ImgScroll } from './ImgScroll.png';
+export { default as restaurantImg } from './restaurantImg.png';

apps/jurumarble/src/app/drink-info/[id]/components/DrinkCommentContainer.tsx

@@ -111,6 +111,7 @@ function DrinkCommentContainer() {
                 mutateLike={() => mutateLike(id)}
                 mutateHate={() => mutateHate(id)}
                 key={`comment_id_${index}`}
+                region=""
               />
             ),
           )}

apps/jurumarble/src/app/drink-info/[id]/services/useDrinkLoadService.ts

@@ -1,10 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
 import { getDrinkInfo } from 'lib/apis/drink';
-import { reactQueryKeys } from 'lib/queryKeys';
+import { queryKeys } from 'lib/queryKeys';
 
-export default function useDrinkLoadService(id: number) {
+type GetDrinkInfoProps = Exclude<Parameters<typeof getDrinkInfo>[0], undefined>;
+
+const getQueryKey = (params: GetDrinkInfoProps) => [
+  queryKeys.DRINK_INFO,
+  params,
+];
+
+export default function useDrinkLoadService(id: GetDrinkInfoProps) {
   const { data, isLoading, isError } = useQuery(
-    reactQueryKeys.drinksInfo(id),
+    getQueryKey(id),
     () => getDrinkInfo(id),
     {
       enabled: !!id,

apps/jurumarble/src/app/my/components/ChipContainer.tsx

@@ -1,5 +1,6 @@
 import { UseMutateFunction } from '@tanstack/react-query';
 import Chip from 'components/Chip';
+import { formatDate } from 'lib/utils/formatDate';
 import SvgIcBookmark from 'src/assets/icons/components/IcBookmark';
 import SvgIcBookmarkActive from 'src/assets/icons/components/IcBookmarkActive';
 import styled from 'styled-components';
@@ -10,21 +11,24 @@ interface Props {
   region: string;
   mutateBookMark: UseMutateFunction;
   isBookmark: boolean;
+  votedCount: number;
+  createdAt: string;
 }
 
 const ChipContainer = ({
-  date,
   title,
   region,
   mutateBookMark,
   isBookmark,
+  votedCount,
+  createdAt,
 }: Props) => {
   return (
     <>
       <TagRow>
         <FlexRow>
           {region && <Chip variant="region">{region}</Chip>}
-          <Chip variant="numberOfParticipants">122명이 즐겼어요</Chip>
+          <Chip variant="numberOfParticipants">{votedCount}명이 참여중</Chip>
         </FlexRow>
         <FlexRow>
           {isBookmark ? (
@@ -48,11 +52,8 @@ const ChipContainer = ({
           )}
         </FlexRow>
       </TagRow>
-      <TitleRow>
-        {title}
-        {/* <DateText>{date.slice(0, 10)}</DateText> */}
-      </TitleRow>
-      <DateText>{date}</DateText>
+      <TitleRow>{title}</TitleRow>
+      <DateText>{formatDate(createdAt)}</DateText>
     </>
   );
 };

apps/jurumarble/src/app/my/components/VoteItem.tsx

@@ -7,9 +7,26 @@ import styled, { css } from 'styled-components';
 import ChipContainer from './ChipContainer';
 import VoteDescription from './VoteDescription';
 
-type Props = Pick<Content, 'voteId' | 'region' | 'title' | 'imageA' | 'imageB'>;
+type Props = Pick<
+  Content,
+  | 'voteId'
+  | 'region'
+  | 'title'
+  | 'imageA'
+  | 'imageB'
+  | 'votedCount'
+  | 'createdAt'
+>;
 
-function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
+function VoteItem({
+  voteId,
+  region,
+  title,
+  imageA,
+  imageB,
+  votedCount,
+  createdAt,
+}: Props) {
   const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
 
   const router = useRouter();
@@ -25,6 +42,8 @@ function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
         region={region}
         mutateBookMark={mutateBookMark}
         isBookmark={isBookmark}
+        votedCount={votedCount}
+        createdAt={createdAt}
       />
       <VoteDescription imageA={imageA} imageB={imageB} />
     </Container>

apps/jurumarble/src/app/my/components/VoteListContainer.tsx

@@ -47,16 +47,28 @@ function VoteListContainer() {
       />
       <Container>
         <VoteList>
-          {myVoteList.map(({ voteId, region, title, imageA, imageB }) => (
-            <VoteItem
-              key={voteId}
-              voteId={voteId}
-              region={region}
-              title={title}
-              imageA={imageA}
-              imageB={imageB}
-            />
-          ))}
+          {myVoteList.map(
+            ({
+              voteId,
+              region,
+              title,
+              imageA,
+              imageB,
+              votedCount,
+              createdAt,
+            }) => (
+              <VoteItem
+                key={voteId}
+                voteId={voteId}
+                region={region}
+                title={title}
+                imageA={imageA}
+                imageB={imageB}
+                votedCount={votedCount}
+                createdAt={createdAt}
+              />
+            ),
+          )}
         </VoteList>
         <div ref={subscribe} />
       </Container>

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

@@ -2,6 +2,7 @@
 
 import VoteHeader from 'components/VoteHeader';
 import { Button } from 'components/button';
+import Path from 'lib/Path';
 import { NotificationType } from 'lib/apis/notification';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
@@ -49,24 +50,29 @@ function NotificationPage() {
         </EmptyNotification>
       ) : (
         <NotificationList>
-          {notificationList.map(({ content, createdAt, id, type, isRead }) => (
-            <NotificationItem
-              key={id}
-              isRead={isRead}
-              onClick={() => readNotification(id)}
-            >
-              <SvgNotificationCheck
-                width={32}
-                height={32}
-                fill={isRead ? colors.black_04 : colors.main_01}
-              />
-              <ContentBox>
-                <Content>{content}</Content>
-                <TypeMessage>{NOTIFICATION_TYPE[type]}</TypeMessage>
-                <CreatedAt>{createdAt}</CreatedAt>
-              </ContentBox>
-            </NotificationItem>
-          ))}
+          {notificationList.map(
+            ({ content, createdAt, id, type, isRead, url }) => (
+              <NotificationItem
+                key={id}
+                isRead={isRead}
+                onClick={() => {
+                  router.push(`${Path.VOTE_DETAIL_PAGE}/${url}`);
+                  readNotification(id);
+                }}
+              >
+                <SvgNotificationCheck
+                  width={32}
+                  height={32}
+                  fill={isRead ? colors.black_04 : colors.main_01}
+                />
+                <ContentBox>
+                  <Content>{content}</Content>
+                  <TypeMessage>{NOTIFICATION_TYPE[type]}</TypeMessage>
+                  <CreatedAt>{createdAt}</CreatedAt>
+                </ContentBox>
+              </NotificationItem>
+            ),
+          )}
         </NotificationList>
       )}
     </>
@@ -100,6 +106,7 @@ const NotificationItem = styled.li<{ isRead: boolean }>`
     display: flex;
     align-items: center;
     padding: 16px 20px;
+    cursor: pointer;
   `}
 `;
 

apps/jurumarble/src/app/notification/services/useNotificationService.ts

@@ -5,6 +5,7 @@ import {
   readNotificationAPI,
 } from 'lib/apis/notification';
 import { queryKeys } from 'lib/queryKeys';
+import { formatDate } from 'lib/utils/formatDate';
 
 type ReadNotificationProps = Exclude<
   Parameters<typeof readNotificationAPI>[0],
@@ -19,15 +20,10 @@ export default function useNotificationService() {
     getNotificationListAPI,
     {
       select: (data) =>
-        data.map((notification) => {
-          const createdAtDate = new Date(notification.createdAt);
-          return {
-            ...notification,
-            createdAt: `${createdAtDate.getFullYear() - 2000}. ${
-              createdAtDate.getMonth() + 1
-            }. ${createdAtDate.getDate()}`,
-          };
-        }),
+        data.map((notification) => ({
+          ...notification,
+          createdAt: formatDate(notification.createdAt),
+        })),
     },
   );
 

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

@@ -10,7 +10,7 @@ import { Button } from 'components/button';
 import { useCreateQueryString } from 'hooks/useCreateQueryString';
 import { DRINK_INFO_SORT_LIST, DRINK_VOTE_SORT_LIST } from 'lib/constants';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import SvgIcPrev from 'src/assets/icons/components/IcPrev';
+import { SvgIcPrevious } from 'src/assets/icons/components';
 import { DrinkInfoSortType, RegionType, VoteSortType } from 'src/types/common';
 import styled, { css, DefaultTheme } from 'styled-components';
 
@@ -202,8 +202,14 @@ function SearchContainer() {
     <>
       <TopSection>
         <SearchBox>
-          <SvgIcPrev width={24} height={24} />
-          <SearchInput value={searchText} onChange={debouncedChange} />
+          <button onClick={() => router.back()}>
+            <SvgIcPrevious width={24} height={24} />
+          </button>
+          <SearchInput
+            placeholder="관심있는 우리술을 찾아보세요."
+            value={searchText}
+            onChange={debouncedChange}
+          />
         </SearchBox>
         <TabBox>
           {TAB_LIST.map(({ id, name }) => (
@@ -241,6 +247,7 @@ const SearchBox = styled.div`
   display: flex;
   align-items: center;
   gap: 14px;
+  margin-top: 8px;
 `;
 
 const TabBox = styled.ul`

apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx

@@ -15,17 +15,15 @@ function DrinkStampContainer() {
     setRegionOption(value);
   };
 
-  const { drinkList, subscribe, numberOfStampedDrinks } = useDrinkStampService({
+  const { drinkList, subscribe, enjoyedDrinkCount } = useDrinkStampService({
     page: 0,
     size: 10,
     region: regionOption,
   });
 
   return (
     <>
-      <MyEnjoiedDrinkInfoSection
-        numberOfStampedDrinks={numberOfStampedDrinks}
-      />
+      <MyEnjoiedDrinkInfoSection enjoyedDrinkCount={enjoyedDrinkCount} />
       <StampedDrinkList
         regionOption={regionOption}
         onChangeRegionOption={onChangeRegionOption}

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

@@ -3,17 +3,17 @@ import { DrinkImage } from 'public/images';
 import styled, { css } from 'styled-components';
 
 interface Props {
-  numberOfStampedDrinks: number;
+  enjoyedDrinkCount: number;
 }
 
-function MyEnjoiedDrinkInfoSection({ numberOfStampedDrinks }: Props) {
+function MyEnjoiedDrinkInfoSection({ enjoyedDrinkCount }: Props) {
   return (
     <Section>
       <div>
         <H2>
           우리술 도장을 <br />
           <div>
-            <MainColor>{numberOfStampedDrinks}</MainColor>개 모았어요.
+            <MainColor>{enjoyedDrinkCount}</MainColor>개 모았어요.
           </div>
         </H2>
       </div>

apps/jurumarble/src/app/stamp/service/useDrinkStampListService.ts

@@ -22,7 +22,8 @@ export default function useDrinkStampListService(params: DrinkStampListProps) {
         page: pageParam?.page || params.page,
       }),
     {
-      getNextPageParam: ({ last, number }) => {
+      getNextPageParam: ({ drinkData }) => {
+        const { last, number } = drinkData;
         if (last) {
           return undefined;
         }
@@ -34,11 +35,11 @@ export default function useDrinkStampListService(params: DrinkStampListProps) {
     },
   );
 
-  const numberOfStampedDrinks = data?.pages[0].numberOfElements ?? 0;
+  const enjoyedDrinkCount = data?.pages[0].enjoyedDrinkCount ?? 0;
 
-  const drinkList = data?.pages.flatMap((page) => page.content) ?? [];
+  const drinkList = data?.pages.flatMap((page) => page.drinkData.content) ?? [];
 
   const [subscribe] = useInfiniteScroll(fetchNextPage);
 
-  return { drinkList, fetchNextPage, subscribe, numberOfStampedDrinks };
+  return { drinkList, fetchNextPage, subscribe, enjoyedDrinkCount };
 }

apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx

@@ -4,7 +4,6 @@ import ModifyDeleteButtonBox from 'app/vote/components/MenuBox';
 import NonWriterBox from 'app/vote/components/NonWriterBox';
 import Chip from 'components/Chip';
 import Path from 'lib/Path';
-import { AorB } from 'lib/apis/vote';
 import { isLogin } from 'lib/utils/auth';
 import { formatDate } from 'lib/utils/formatDate';
 import { useRouter } from 'next/navigation';
@@ -27,7 +26,7 @@ interface Props {
   isBookmark: boolean;
   postedUserId: number;
   voteId: number;
-  select: AorB | null;
+  votedCount: number;
   onToggleReplaceLoginPageModal: () => void;
 }
 
@@ -40,7 +39,7 @@ const ChipContainer = ({
   mutateBookMark,
   isBookmark,
   postedUserId,
-  select,
+  votedCount,
   onToggleReplaceLoginPageModal,
 }: Props) => {
   const { userInfo } = useGetUserInfo();
@@ -62,7 +61,7 @@ const ChipContainer = ({
       <TagRow>
         <FlexRow>
           {region && <Chip variant="region">{region}</Chip>}
-          {select && <Chip variant="isVote">참여중</Chip>}
+          <Chip variant="isVote">{votedCount ?? 0}명이 참여중</Chip>
         </FlexRow>
         <FlexRow>
           {isBookmark ? (