feat: 슬라이드 페이지 디자인 수정 [meong-story#94]

src/entities/verification/api/useDetailVerification.ts

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { verificationKey } from '../../../shared/lib/query/queryKey';
+import verificationAPI from './verificationAPI';
+
+const useDetailVerification = ({
+  verificationId,
+}: {
+  verificationId: string;
+}) => {
+  return useSuspenseQuery({
+    queryKey: verificationKey.verification(verificationId),
+    queryFn: () => verificationAPI.getDetailVerification(verificationId),
+  });
+};
+export default useDetailVerification;

src/entities/verification/api/useInfiniteVerificationsForSlide.ts

@@ -16,10 +16,7 @@ const useInfiniteVerificationsForSlide = () => {
 
   const { targetItemRef } =
     useIntersectionObserver<HTMLDivElement>(fetchNextPage);
-  const slideData = data?.pages
-    .reverse()
-    .flatMap((page) => page.items)
-    .reverse();
+  const slideData = data?.pages.flatMap((page) => page.items);
 
   return { data: slideData, targetItemRef, isFetchingNextPage };
 };

src/entities/verification/api/verificationAPI.ts

@@ -9,6 +9,7 @@ import type {
   VerificationsForCalendar,
   VerificationsFroGrid,
   VerificationsForGridByUploader,
+  VerificationResponse,
 } from '../../../shared/types/verification';
 import apiClient from '../../../shared/api';
 
@@ -21,6 +22,13 @@ const verificationAPI = {
     );
     return data;
   },
+  /** verification detail info 조회 */
+  getDetailVerification: async (verificationId: string) => {
+    const { data } = await apiClient.get<VerificationResponse>(
+      END_POINT.DETAIL(verificationId)
+    );
+    return data;
+  },
   /** pet verification post */
   postVerification: async (body: UploadVerificationContents) => {
     const { data } = await apiClient.post<UploadVerificationContents>(

src/mocks/datas/verification.ts

@@ -2512,3 +2512,18 @@ export const UploaderTypeVerificationsForGridData: VerificationsForGridByUploade
       ],
     },
   ];
+
+export const detailVerificationData = {
+  id: '0',
+  createdAt: '2024-04-21T12:00:00Z',
+  category: 'walk',
+  imageUrl: petMockImageUrl2,
+  verificationOption: '1시간 10분',
+  comment:
+    '왼쪽으로 가야되는데 오른쪽으로 간다고 개찡찡댔다... 다음타자 힘들듯^^',
+  author: {
+    id: '2',
+    imageUrl: userMockImageUrl2,
+    name: '막둥이',
+  },
+};

src/mocks/handlers/verification.ts

@@ -43,4 +43,10 @@ export const verificationHandler = [
     baseURL(END_POINT.UPLOADER_GRID),
     withAuth(verification.getVerificationForUploaderGrid)
   ),
+
+  /** get detail verification by id*/
+  http.get(
+    baseURL(END_POINT.DETAIL(':verificationId')),
+    withAuth(verification.getDetailVerification)
+  ),
 ];

src/mocks/resolvers/verification.ts

@@ -7,12 +7,17 @@ import {
   verificationCountInfo,
   verificationForSlideData,
   verificationsForCalendarData,
+  detailVerificationData,
 } from '../datas/verification';
 
 import type { UploadVerificationContents } from '../../shared/types/verification';
 import { MSWResolvers } from '../../shared/lib/mswUtils';
 
 export const verification = {
+  getDetailVerification: async () => {
+    await delay();
+    return HttpResponse.json(detailVerificationData);
+  },
   getVerificationCount: async () => {
     await delay();
     return HttpResponse.json(verificationCountInfo);

src/pages/detailVerification/detailVerificationPage.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from 'react-router-dom';
+import { Suspense } from 'react';
+
+import { Layout } from '../../shared/ui';
+import { LeftArrowIcon } from '../../shared/ui/Icons';
+import ROUTE_PATH from '../../shared/constants/routePath';
+import Spinner from '../../shared/ui/Spinner';
+import { THEME } from '../../shared/styles/theme';
+import DetailVerificationItem from '../../widgets/verification/ui/DetailVerificationItem';
+import useDetailVerification from '../../entities/verification/api/useDetailVerification';
+
+const DetailVerification = () => {
+  const { data: detailVerification } = useDetailVerification({
+    verificationId: '1',
+  });
+  return <DetailVerificationItem verification={detailVerification} as="div" />;
+};
+
+const DetailVerificationPage = () => {
+  const navigate = useNavigate();
+  return (
+    <Layout
+      top={{
+        title: '상세 인증',
+        leftButton: (
+          <LeftArrowIcon
+            style={{ color: THEME.COLORS['P-BUTTON1'] }}
+            onClick={() => navigate(ROUTE_PATH.SLIDE)}
+          />
+        ),
+      }}
+    >
+      <Suspense fallback={<Spinner />}>
+        <DetailVerification />
+      </Suspense>
+    </Layout>
+  );
+};
+
+export default DetailVerificationPage;

src/pages/index.ts

@@ -5,6 +5,7 @@ export { default as UploadVerification } from './upload/UploadVerificationPage';
 
 export { default as Intro } from './Intro';
 export { default as Home } from './Home/HomePage';
+export { default as DetailVerification } from './detailVerification/detailVerificationPage';
 
 export { default as SlidePage } from './slide/SlidePage';
 export { default as Grid } from './grid/GridPage';

src/pages/slide/SlidePage.tsx

@@ -1,25 +1,18 @@
-import { useNavigate } from 'react-router-dom';
 import { Suspense } from 'react';
 
 import { Layout } from '../../shared/ui';
-import { GridIcon } from '../../shared/ui/Icons';
-import ROUTE_PATH from '../../shared/constants/routePath';
-import Slide from '../../widgets/slide/ui/Slide';
 import Spinner from '../../shared/ui/Spinner';
+import Feed from '../../widgets/slide/ui/Feed';
 
 const SlidePage = () => {
-  const navigate = useNavigate();
   return (
     <Layout
       top={{
         title: '슬라이드',
-        rightButton: (
-          <GridIcon onClick={() => navigate(`${ROUTE_PATH.GRID}/all`)} />
-        ),
       }}
     >
       <Suspense fallback={<Spinner />}>
-        <Slide />
+        <Feed />
       </Suspense>
     </Layout>
   );

src/router.tsx

@@ -16,6 +16,7 @@ import {
   GridByUser,
   SendingInvitation,
   FamilyList,
+  DetailVerification,
 } from './pages';
 import AuthProvider from './providers/AuthProvider';
 
@@ -45,6 +46,10 @@ const router = createBrowserRouter([
             element: <Home />,
             path: ROUTE_PATH.ROOT,
           },
+          {
+            element: <DetailVerification />,
+            path: ROUTE_PATH.DETAIL_VERIFICATION,
+          },
           {
             element: <SlidePage />,
             path: ROUTE_PATH.SLIDE,

src/shared/constants/endPoint.ts

@@ -7,6 +7,7 @@ export const BACKEND_ENDPOINT = import.meta.env.DEV
 export const END_POINT = {
   HOME: `/api/home`,
   POST: '/api/post',
+  DETAIL: (verificationId: string) => `/api/verification/${verificationId}`,
   CALENDAR: '/api/calendar',
   SLIDE: '/api/slide',
   GRID: '/api/grid',

src/shared/constants/routePath.ts

@@ -6,6 +6,7 @@ const ROUTE_PATH = {
   REGISTER_PEOPLE: '/register/people',
   VERIFICATION: '/verification',
   UPLOAD_VERIFICATION: '/verification/:category',
+  DETAIL_VERIFICATION: '/verification/:verificationId',
   SLIDE: '/slide',
   GRID: '/grid',
   GRID_BY_TYPE: '/grid/:type',

src/shared/lib/formattedDate.ts

@@ -0,0 +1,13 @@
+const formattedDate = (dateString: string) => {
+  const date = new Date(dateString);
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  };
+
+  return date.toLocaleDateString('ko-KR', options).replace(/\. /g, '.');
+};
+
+export default formattedDate;

src/shared/lib/getVerificationCategoryColor.ts

@@ -1,7 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { THEME } from '../styles/theme';
-import { VERIFICATION } from '../constants/verification';
+import {
+  VERIFICATION,
+  VerificationCategoryType,
+} from '../constants/verification';
 
-export const getVerificationCategoryColor = (category: string) => {
+export const getVerificationCategoryColor = (
+  category: VerificationCategoryType | ({} & string)
+) => {
   switch (category) {
     case VERIFICATION.WALK:
       return THEME.COLORS['P-BUTTON1'];
@@ -15,3 +21,16 @@ export const getVerificationCategoryColor = (category: string) => {
       return THEME.COLORS['INACTIVE-BUTTON'];
   }
 };
+
+export const getVerificationCategoryTextColor = (
+  category: VerificationCategoryType | ({} & string)
+) => {
+  switch (category) {
+    case VERIFICATION.WALK:
+      return 'white';
+    case VERIFICATION.TREATS:
+      return 'white';
+    default:
+      return 'black';
+  }
+};

src/shared/lib/query/queryKey.ts

@@ -3,6 +3,8 @@ import { SortType } from '../../types/verification';
 export const verificationKey = {
   base: ['verification'] as const,
   pet: (petId: string) => [...verificationKey.base, petId] as const,
+  verification: (verificationId: string) =>
+    [...verificationKey.base, verificationId] as const,
   grid: () => [...verificationKey.base, 'grid'] as const,
   allGrid: (sort: SortType) =>
     [...verificationKey.grid(), 'all', sort] as const,

src/widgets/slide/ui/Feed.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import Spinner from '../../../shared/ui/Spinner';
+import useInfiniteVerificationsForSlide from '../../../entities/verification/api/useInfiniteVerificationsForSlide';
+
+import DetailVerificationItem from '../../verification/ui/DetailVerificationItem';
+
+const Feed = () => {
+  const { data, targetItemRef, isFetchingNextPage } =
+    useInfiniteVerificationsForSlide();
+
+  return (
+    <Container>
+      {data.map((verification) => (
+        <DetailVerificationItem
+          key={verification.id}
+          verification={verification}
+        />
+      ))}
+      <div ref={targetItemRef}></div>
+      {isFetchingNextPage && <Spinner size={30} />}
+    </Container>
+  );
+};
+
+export default Feed;
+
+export const Container = styled.div`
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  background-color: #f9f5f5;
+`;