Merge pull request #139 from newnivers/feat/qa

Self-QA
newnivers · Feb 3, 2024 · 68b3084 · 68b3084
2 parents 6f30a63 + 4e2ef8a
commit 68b3084
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 311 deletions.
diff --git a/app/ticket/page.tsx b/app/ticket/page.tsx
@@ -5,7 +5,7 @@ import { TicketHomePage } from "@/components/domains/ticket-page/TicketHomePage"
 export default function TicketPage() {
   return (
     <>
-      <TicketHomePage hotRanking={[]} openTickets={[]} />
+      <TicketHomePage />
     </>
   );
 }
diff --git a/components/domains/detail/TicketMainInfo.tsx b/components/domains/detail/TicketMainInfo.tsx
@@ -2,7 +2,6 @@ import Image from "next/image";
 import styled from "styled-components";
 import type { RowInfoData } from "@/components/domains/detail/RowInfo";
 import RowList from "@/components/domains/detail/RowInfo";
-import mockImage from "@/fixture/ticket-poster.jpeg";
 
 export interface TicketMainInfoProps {
   image: string;
@@ -16,11 +15,7 @@ export default function TicketMainInfo({
   return (
     <MainInfoContainer>
       <ImageWrapper>
-        <Image
-          src={mockImage}
-          alt="ticket-image"
-          style={{ width: "100%", height: "100%" }}
-        />
+        <Image width={368} height={480} src={image} alt="ticket-image" />
       </ImageWrapper>
       <RowList infoData={infoData} />
     </MainInfoContainer>

diff --git a/components/domains/detail/tab/InfoTab.tsx b/components/domains/detail/tab/InfoTab.tsx
@@ -1,5 +1,3 @@
-import type { ReactNode } from "react";
-
-export default function InfoTab({ children }: { children?: ReactNode }) {
-  return <>{children}</>;
+export default function InfoTab({ children }: { children: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: children }}></div>;
 }
diff --git a/components/domains/detail/tab/LocationTab.tsx b/components/domains/detail/tab/LocationTab.tsx
@@ -1,5 +1,3 @@
-import type { ReactNode } from "react";
-
-export default function LocationTab({ children }: { children?: ReactNode }) {
-  return <>{children}</>;
+export default function LocationTab({ children }: { children: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: children }}></div>;
 }
diff --git a/components/domains/detail/tab/ReserveAndCancelTab.tsx b/components/domains/detail/tab/ReserveAndCancelTab.tsx
@@ -1,9 +1,7 @@
-import type { ReactNode } from "react";
-
 export default function ReserveAndCancelTab({
   children,
 }: {
-  children?: ReactNode;
+  children: string;
 }) {
-  return <>{children}</>;
+  return <div dangerouslySetInnerHTML={{ __html: children }}></div>;
 }
diff --git a/components/domains/landing-page/LandingPage.tsx b/components/domains/landing-page/LandingPage.tsx
@@ -2,7 +2,6 @@ import { useRouter } from "next/navigation";
 import styled, { css } from "styled-components";
 import Typography from "@/components/common/text/Typography";
 import { Ticket } from "@/components/domains/landing-page/Ticket";
-import mockImage from "@/fixture/ticket-poster.jpeg";
 import { useGetLandingArtList } from "@/queries";
 import { ListHeader } from "./ListHeader";
 
@@ -29,7 +28,7 @@ export function LandingPage() {
               onClick={() => moveToDetailPage(rank.id)}
               ranking={index + 1}
               key={rank.id}
-              thumbnail={mockImage}
+              thumbnail={rank.image}
               genre={rank.genre}
               title={rank.title}
               startDate={rank.startDate}
@@ -48,7 +47,7 @@ export function LandingPage() {
             <Ticket
               onClick={() => moveToDetailPage(rank.id)}
               key={rank.id}
-              thumbnail={mockImage}
+              thumbnail={rank.image}
               genre={rank.genre}
               title={rank.title}
               startDate={rank.startDate}

diff --git a/components/domains/landing-page/Ticket.tsx b/components/domains/landing-page/Ticket.tsx
@@ -1,20 +1,17 @@
 import { useMemo } from "react";
-import type { StaticImageData } from "next/image";
-import Image from "next/image";
 import dayjs from "dayjs";
 import styled from "styled-components";
 import Typography from "@/components/common/text/Typography";
 
 interface TicketProps {
-  thumbnail: string | StaticImageData;
+  thumbnail: string;
   genre: string;
   title: string;
   startDate: string;
   endDate: string;
   ranking?: number;
   onClick: () => void;
   ticketOpenDate?: Date;
-  showOpenProgress?: boolean;
 }
 
 export function Ticket({
@@ -25,7 +22,6 @@ export function Ticket({
   endDate,
   ranking,
   onClick,
-  showOpenProgress,
 }: TicketProps) {
   const period = useMemo(() => {
     const start = `${dayjs(startDate).format("YYYY-DD-MM")} (${dayjs(
@@ -42,7 +38,7 @@ export function Ticket({
   return (
     <Wrapper onClick={onClick}>
       <>
-        <Image src={thumbnail} alt="티켓 이미지" width={368} height={480} />
+        <img src={thumbnail} alt="티켓 이미지" width={368} height={480} />
       </>
       {ranking ? <Ranking typo="subhead01">{ranking}</Ranking> : <></>}
       <Genre typo="subhead03">{`#${genre}`}</Genre>

diff --git a/components/domains/ticket-page/ProgressTicket.tsx b/components/domains/ticket-page/ProgressTicket.tsx
@@ -1,13 +1,11 @@
 import { useMemo } from "react";
-import type { StaticImageData } from "next/image";
-import Image from "next/image";
 import dayjs from "dayjs";
 import styled from "styled-components";
 import Typography from "@/components/common/text/Typography";
 import { ProgressCircle } from "@/components/domains/ticket-page/ProgressCircle";
 
 interface TicketProps {
-  thumbnail: string | StaticImageData;
+  thumbnail: string;
   genre: string;
   title: string;
   startDate: string;
@@ -48,7 +46,7 @@ export function ProgressTicket({
   return (
     <Wrapper onClick={onClick}>
       <ImageWrapper>
-        <Image src={thumbnail} alt="티켓 이미지" width={268} height={370} />
+        <img src={thumbnail} alt="티켓 이미지" width={268} height={370} />
         {ticketOpenAt && (
           <ProgressCircleWrapper>
             <ProgressCircle leftDay={leftDay} />
@@ -71,6 +69,7 @@ const Wrapper = styled.div`
 
 const ImageWrapper = styled.div`
   position: relative;
+  height: 370px;
 `;
 
 const ProgressCircleWrapper = styled.div`

diff --git a/components/domains/ticket-page/ShowingPage.tsx b/components/domains/ticket-page/ShowingPage.tsx
@@ -4,141 +4,7 @@ import { useRouter } from "next/navigation";
 import styled from "styled-components";
 import Typography from "@/components/common/text/Typography";
 import { ProgressTicket } from "@/components/domains/ticket-page/ProgressTicket";
-import mockImage from "@/fixture/ticket-poster.jpeg";
-import { useGetTicketHomeList, useGetTicketShowingList } from "@/queries";
-
-const mock = [
-  {
-    id: 3,
-    user: 1,
-    place: "빨간대문",
-    title: "test",
-    image: "http://www.naver.com",
-    genre: "test",
-    category: "SHOW",
-    status: "APPROVED",
-    runningTime: 40,
-    ageLimit: 0,
-    interMission: 10,
-    description: "testtesttest",
-    cautionDescription: "testetest",
-    csPhoneNumber: "+821051972093",
-    reservedSeat: false,
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-18T15:00:00Z",
-    isFree: false,
-    purchaseLimitCount: 5,
-    price: "10000.00",
-    schedules: [
-      {
-        id: 5,
-        startAt: "2023-11-16T17:30:00+09:00",
-        leftSeatCount: 0,
-      },
-      {
-        id: 6,
-        startAt: "2023-11-17T17:30:00+09:00",
-        leftSeatCount: 0,
-      },
-    ],
-    comments: [],
-    ticketOpenAt: "2023-11-17T17:30:00+09:00",
-    ticketCloseAt: "2023-11-30T17:30:00+09:00",
-    createdAt: "2023-11-19T17:20:48.206593+09:00",
-    updatedAt: "2024-01-28T13:50:57.773711+09:00",
-    seatMaxCount: 0,
-    hitCount: 27,
-  },
-  {
-    id: 5,
-    user: 2,
-    place: "빨간대문",
-    title: "test",
-    image: "http://www.naver.com",
-    genre: "test",
-    category: "SHOW",
-    status: "APPROVED",
-    runningTime: 40,
-    ageLimit: 0,
-    interMission: 10,
-    description: "testtesttest",
-    cautionDescription: "testetest",
-    csPhoneNumber: "+821051972093",
-    reservedSeat: false,
-    startDate: "2023-11-17T08:30:00Z",
-    endDate: "2023-11-19T15:00:00Z",
-    isFree: false,
-    purchaseLimitCount: 5,
-    price: "10000.00",
-    schedules: [
-      {
-        id: 10,
-        startAt: "2023-11-17T17:30:00+09:00",
-        leftSeatCount: 2,
-      },
-      {
-        id: 9,
-        startAt: "2023-11-18T17:30:00+09:00",
-        leftSeatCount: 0,
-      },
-    ],
-    comments: [
-      {
-        author: 2,
-        art: 5,
-        description: "dfsdsfafadadf",
-        score: 0,
-      },
-    ],
-    ticketOpenAt: "2023-11-17T17:30:00+09:00",
-    ticketCloseAt: "2023-11-19T17:30:00+09:00",
-    createdAt: "2023-12-19T20:13:59.079114+09:00",
-    updatedAt: "2024-01-22T22:50:55.309417+09:00",
-    seatMaxCount: 0,
-    hitCount: 4,
-  },
-  {
-    id: 1,
-    user: 2,
-    place: "빨간대문",
-    title: "test",
-    image: "http://www.naver.com",
-    genre: "test",
-    category: "SHOW",
-    status: "APPROVED",
-    runningTime: 40,
-    ageLimit: 0,
-    interMission: 10,
-    description: "testtesttest",
-    cautionDescription: "testetest",
-    csPhoneNumber: "+821051972093",
-    reservedSeat: false,
-    startDate: "2023-11-16T08:30:00Z",
-    endDate: "2023-11-18T15:00:00Z",
-    isFree: false,
-    purchaseLimitCount: 5,
-    price: "10000.00",
-    schedules: [
-      {
-        id: 1,
-        startAt: "2023-11-16T17:30:00+09:00",
-        leftSeatCount: 0,
-      },
-      {
-        id: 2,
-        startAt: "2023-11-17T17:30:00+09:00",
-        leftSeatCount: 0,
-      },
-    ],
-    comments: [],
-    ticketOpenAt: "2023-11-17T17:30:00+09:00",
-    ticketCloseAt: "2023-11-30T17:30:00+09:00",
-    createdAt: "2023-11-18T18:01:33.129115+09:00",
-    updatedAt: "2024-01-28T15:54:57.218043+09:00",
-    seatMaxCount: 0,
-    hitCount: 2,
-  },
-];
+import { useGetTicketShowingList } from "@/queries";
 
 export function ShowingPage() {
   const { data } = useGetTicketShowingList();
@@ -157,7 +23,7 @@ export function ShowingPage() {
             <ProgressTicket
               onClick={() => moveToDetailPage(rank.id)}
               key={index}
-              thumbnail={mockImage}
+              thumbnail={rank.image}
               genre={rank.genre}
               title={rank.title}
               startDate={rank.startDate}