feat(domain/my-info): 내 정보 예약/리뷰 리스트 필드 변경

newnivers · Feb 4, 2024 · 56de39a · 56de39a
1 parent e47376b
commit 56de39a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 131 deletions.
diff --git a/app/my-info/QR/[id]/page.tsx b/app/my-info/QR/[id]/page.tsx
@@ -26,12 +26,15 @@ function QRPage() {
   const [ticketInfo, setTicketInfo] = useState<TicketInfo | null>(null);
 
   useEffect(() => {
+    if (ticketInfo) {
+      return;
+    }
     (async () => {
       const res = await httpClient.get(`/arts/tickets/${params.id}`);
 
       setTicketInfo(res.data);
     })();
-  }, [params]);
+  }, [params, ticketInfo]);
 
   if (!ticketInfo) {
     return (

diff --git a/app/my-info/page.tsx b/app/my-info/page.tsx
@@ -11,8 +11,8 @@ import {
   Account,
   Cardboard,
   ReviewCardboard,
-  reviewList,
   purchaseList,
+  reviewList,
 } from "@/components/domains/my-info";
 import { AuthUserInfo } from "@/contexts";
 import { useAuthUserStorage } from "@/hooks";
@@ -26,13 +26,13 @@ interface MyInfo {
 }
 
 interface MyInfoItem {
-  artThumbnail: string;
-  artTitle: string;
   id: number;
   nickname: string;
+  artTitle: string;
+  artThumbnail: string;
   place: string;
   visitorCount: number;
-  start_at: string;
+  description?: string;
 }
 
 function MyInfoPage() {
@@ -113,29 +113,25 @@ function MyInfoPage() {
                     ? myInfo.purchaseList.map((value, idx) => (
                         <CardboardList key={`${value.artTitle}-${idx}`}>
                           <Cardboard
-                            price={"0"}
+                            id={value.id}
+                            price="무료"
                             image={value.artThumbnail}
                             title={value.artTitle}
                             visitor_count={value.visitorCount}
                             space={value.place}
-                            start_at={value.start_at}
-                          >
-                            test
-                          </Cardboard>
+                          />
                         </CardboardList>
                       ))
                     : myInfo.reviewList.map((value) => (
                         <CardboardList key={value.artTitle}>
                           <ReviewCardboard
-                            price={"0"}
+                            price="무료"
                             image={value.artThumbnail}
                             title={value.artTitle}
                             visitor_count={value.visitorCount}
                             space={value.place}
-                            start_at={value.start_at}
-                          >
-                            test
-                          </ReviewCardboard>
+                            review={value.description || ""}
+                          />
                         </CardboardList>
                       ))}
                 </ul>

diff --git a/components/domains/my-info/cardboard/index.tsx b/components/domains/my-info/cardboard/index.tsx
@@ -1,38 +1,33 @@
-import type { ReactNode } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import styled, { css } from "styled-components";
 import { SpacerSkleton } from "@/components/common/spacer";
 import Typography from "@/components/common/text/Typography";
 
 interface Props {
+  id: number;
   image: string;
   title: string;
-  start_at?: string;
   price?: string;
   visitor_count: number;
   space: string;
-  review?: string;
-  children: ReactNode;
 }
 
 const workInfos = {
-  start_at: "관람일시",
   price: "관람가격",
   visitor_count: "관람인원",
   space: "관람장소",
-  review: "후기",
 } as const;
 
 type Entries<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T][];
 
-export function Cardboard({ image, title, children, ...rest }: Props) {
+export function Cardboard({ id, image, title, ...rest }: Props) {
   const router = useRouter();
 
   const onClickMoveQR = () => {
-    router.replace("/my-info/QR/1");
+    router.replace(`/my-info/QR/${id}`);
   };
 
   const Contents = () => {
@@ -57,7 +52,7 @@ export function Cardboard({ image, title, children, ...rest }: Props) {
   return (
     <SpacerSkleton justify="space-between" style={{ width: "100%" }}>
       <SpacerSkleton gap={38}>
-        <img src={image} width={150} height={212} alt="test-poster" />
+        <Image src={image || ""} width={150} height={212} alt="poster" />
         <SpacerSkleton type="vertical" gap={15}>
           <h5>
             <Typography typo="subhead03">{title}</Typography>

diff --git a/components/domains/my-info/data.ts b/components/domains/my-info/data.ts
@@ -1,101 +1,20 @@
 export const purchaseList = [
   {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
-  },
-  {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점>",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
+    id: 1,
+    artThumbnail: "/img/test-poster.png",
+    artTitle: "현대무용 <시차적 관점>",
+    visitorCount: 100,
+    place: "서울예술대학교 빨간대문",
   },
 ];
 
 export const reviewList = [
   {
-    image: "/img/test-poster.png",
-    title: "현대무용 <시차적 관점> 리뷰",
-    start_at: "2023.01.15 (목) 오전 10:00",
-    price: "무료",
-    vistor_cnt: 100,
-    space: "서울예술대학교 빨간대문",
+    id: 1,
+    artThumbnail: "/img/test-poster.png",
+    artTitle: "현대무용 <시차적 관점>",
+    visitorCount: 100,
+    place: "서울예술대학교 빨간대문",
+    description: "fdsfdsfdsf",
   },
 ];
diff --git a/components/domains/my-info/reviewCardboard/index.tsx b/components/domains/my-info/reviewCardboard/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, type ReactNode } from "react";
+import { useState, useRef } from "react";
 import Image from "next/image";
 import styled from "styled-components";
 import DefaultButton from "@/components/common/button";
@@ -13,23 +13,20 @@ interface Props {
   price: string;
   visitor_count: number;
   space: string;
-  review?: string;
-  children: ReactNode;
+  review: string;
 }
 
 const workInfos = {
-  start_at: "관람일시",
   price: "관람가격",
   visitor_count: "관람인원",
   space: "관람장소",
-  review: "후기",
 } as const;
 
 type Entries<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T][];
 
-export function ReviewCardboard({ image, title, ...rest }: Props) {
+export function ReviewCardboard({ image, title, review, ...rest }: Props) {
   const reviewTextRef = useRef<HTMLDivElement | null>(null);
   const [isShow, setShow] = useState(false);
 
@@ -100,7 +97,7 @@ export function ReviewCardboard({ image, title, ...rest }: Props) {
         </SpacerSkleton>
       </DefaultModal>
       <SpacerSkleton gap={38} style={{ width: "100%" }}>
-        <img src={image} width={150} height={212} alt="test-poster" />
+        <Image src={image || ""} width={150} height={212} alt="test-poster" />
         <SpacerSkleton
           type="vertical"
           gap={15}
@@ -126,14 +123,14 @@ export function ReviewCardboard({ image, title, ...rest }: Props) {
                 alt="review-edit"
               />
             </button> */}
-              <button onClick={() => setShow(true)}>
+              {/* <button onClick={() => setShow(true)}>
                 <Image
                   src="icon/review-close.svg"
                   width={24}
                   height={24}
                   alt="review-close"
                 />
-              </button>
+              </button> */}
             </SpacerSkleton>
           </SpacerSkleton>
           <SpacerSkleton
@@ -146,12 +143,7 @@ export function ReviewCardboard({ image, title, ...rest }: Props) {
             <Contents />
             <SpacerSkleton gap={20}>
               <ContentTypography typo="subhead04">관람후기</ContentTypography>
-              <ReviewText ref={reviewTextRef}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                Perferendis amet ipsum vero! Deserunt, ipsam! Non dolor modi
-                ipsum ratione quo eligendi tempora obcaecati repellat magni et,
-                velit iste! Animi, laborum?
-              </ReviewText>
+              <ReviewText ref={reviewTextRef}>{review}</ReviewText>
             </SpacerSkleton>
             <SpacerSkleton
               justify="flex-end"