Merge pull request #137 from newnivers/feat/qa

Self-QA
newnivers · Feb 3, 2024 · 6f30a63 · 6f30a63
2 parents ee2e258 + f12abdf
commit 6f30a63
Show file tree

Hide file tree

Showing 18 changed files with 206 additions and 89 deletions.
diff --git a/api/index.ts b/api/index.ts
@@ -2,5 +2,5 @@ export * from "./auth";
 export * from "./detail";
 export * from "./comment";
 export * from "./reserve";
-export * from "./landing";
+export * from "./ticketList";
 export * from "./arts";
diff --git a/api/landing/index.ts b/api/landing/index.ts
diff --git a/api/reserve/index.ts b/api/reserve/index.ts
@@ -1,5 +1,7 @@
 import httpClient from "@/api/core";
 
-export const postReservation = (id: number) => {
-  return httpClient.get(`/arts/tickets/${id}/reserve`);
+export const postReservation = (id: number, quantity: number) => {
+  return httpClient.post(`/art_schedules/${id}/reserve_tickets`, {
+    data: { quantity },
+  });
 };
diff --git a/api/ticketList/index.ts b/api/ticketList/index.ts
@@ -0,0 +1,53 @@
+import httpClient from "@/api/core";
+import type { RequestData } from "@/api/core";
+import type { ArtInfo } from "@/api/detail";
+
+export interface LandingArtListResponseData extends RequestData {
+  data: LandingList;
+}
+
+export interface TicketShowingPageResponseData extends RequestData {
+  data: ShowingList;
+}
+
+export interface TicketHomePageResponseData extends RequestData {
+  data: TicketHome;
+}
+
+interface ShowingList {
+  showing: ArtInfo[];
+}
+
+export interface LandingList {
+  hotRanking: ArtInfo[];
+  ticket: ArtInfo[];
+}
+
+export interface TicketHome {
+  hotRanking: ArtInfo[];
+  ticketOpen: ArtInfo[];
+}
+
+export const getLandingArtList = async () => {
+  const response = await httpClient.get<LandingArtListResponseData>(
+    `/arts/main`
+  );
+
+  return response.data;
+};
+
+export const getTicketHomeList = async () => {
+  const response = await httpClient.get<TicketHomePageResponseData>(
+    `/arts/home`
+  );
+
+  return response.data;
+};
+
+export const getTicketShowingList = async () => {
+  const response = await httpClient.get<TicketShowingPageResponseData>(
+    `/arts/showing `
+  );
+
+  return response.data;
+};
diff --git a/app/detail/[id]/page.tsx b/app/detail/[id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
+import dayjs from "dayjs";
 import styled from "styled-components";
 import { SpacerSkleton } from "@/components/common/spacer";
 import Typography from "@/components/common/text/Typography";
@@ -11,13 +12,20 @@ import {
 } from "@/components/domains/detail";
 import Tab from "@/components/domains/detail/tab";
 import { useTicketDetail } from "@/queries";
+import useAuthUserStorage from "../../../hooks/authUserStorage";
 
 export default function DetailPage({ params }: { params: { id: string } }) {
+  const { userAuth } = useAuthUserStorage();
   const artId = useMemo(() => Number(params.id), [params]);
   const { data, rowInfos } = useTicketDetail(Number(artId));
+  const isDisabled = useMemo(() => {
+    const ticketOpenDay = dayjs(data?.ticketOpenAt);
+
+    return !(ticketOpenDay.diff(dayjs(), "day") < 0 && userAuth.id);
+  }, [data]);
 
   if (!data || !rowInfos) {
-    return <div>Error Page</div>;
+    return <div></div>;
   }
 
   return (
@@ -31,12 +39,12 @@ export default function DetailPage({ params }: { params: { id: string } }) {
           <TicketMainInfo image={data.image} infoData={rowInfos} />
           <Tab>
             <Tab.Review reviews={data.comments ?? []} artId={artId} />
-            <Tab.Location />
-            <Tab.Info />
-            <Tab.CancelInfo />
+            <Tab.Location>{data?.place}</Tab.Location>
+            <Tab.Info>{data?.description}</Tab.Info>
+            <Tab.CancelInfo>{data?.cautionDescription}</Tab.CancelInfo>
           </Tab>
         </DetailInfoWrapper>
-        <ReservationCalendar schedules={data.schedules} disabled={false} />
+        <ReservationCalendar schedules={data.schedules} disabled={isDisabled} />
       </DetailContent>
     </SpacerSkleton>
   );

diff --git a/components/common/button/index.tsx b/components/common/button/index.tsx
@@ -13,11 +13,14 @@ function DefaultButton({
   sort = "primary",
   children,
   onClick,
+  disabled,
   ...rest
 }: Props) {
   return (
-    <StyledButton sort={sort} onClick={onClick} {...rest}>
-      <ButtonText sort={sort}>{children}</ButtonText>
+    <StyledButton sort={sort} onClick={onClick} disabled={disabled} {...rest}>
+      <ButtonText disabled sort={sort}>
+        {children}
+      </ButtonText>
     </StyledButton>
   );
 }
@@ -44,19 +47,23 @@ const StyledButton = styled.button<{ sort: ButtonSort }>`
 
       &:disabled {
         cursor: not-allowed;
+        background-color: ${colors.secondary["400"]};
+        border: none;
       }
     `;
   }}
 `;
 
-const ButtonText = styled(Text)<{ sort: ButtonSort }>`
-  ${({ theme, sort }) => {
+const ButtonText = styled(Text)<{ sort: ButtonSort; disabled: boolean }>`
+  ${({ theme, sort, disabled }) => {
     const { colors } = theme;
 
     return css`
       ${theme.typoToken.subhead02}
       letter-spacing: 0.5px;
-      color: ${sort === "primary" ? colors.white : colors.primary_01};
+      color: ${sort === "primary" || disabled
+        ? colors.white
+        : colors.primary_01};
     `;
   }}
 `;

diff --git a/components/common/calendar/CustomCalendar.tsx b/components/common/calendar/CustomCalendar.tsx
@@ -16,6 +16,7 @@ export default function CustomCalendar({
   onChangeDate,
   notCompleteDates = [],
   includeDates,
+  disabled,
   ...rest
 }: CustomCalendarProps) {
   const [month, setMonth] = useState(new Date());
@@ -52,7 +53,7 @@ export default function CustomCalendar({
       onMonthChange={setMonth}
       disabledKeyboardNavigation
       dayClassName={makeDayClassName}
-      includeDates={includeDates}
+      includeDates={disabled ? [] : includeDates}
       {...rest}
     />
   );

diff --git a/components/common/layout/Footer.tsx b/components/common/layout/Footer.tsx
@@ -1,7 +1,10 @@
+import { useRouter } from "next/navigation";
 import styled, { css } from "styled-components";
 import Typography from "@/components/common/text/Typography";
 
 export default function Footer() {
+  const router = useRouter();
+
   return (
     <Container>
       <HorizontalWrapper>
@@ -20,9 +23,25 @@ export default function Footer() {
         </IntroWrapper>
         <MenuWrapper>
           <MenuHeader>CONTACT US</MenuHeader>
-          <MenuButton>플뉴소개</MenuButton>
-          <MenuButton>고객센터</MenuButton>
-          <MenuButton>Contact</MenuButton>
+          <MenuButton
+            onClick={() =>
+              router.push(
+                "https://www.notion.so/0395d589911f41439d0444bbb2e9f98f?pvs=4"
+              )
+            }
+          >
+            플뉴소개
+          </MenuButton>
+          <MenuButton
+            onClick={() => router.push("https://open.kakao.com/o/ssivmG6f")}
+          >
+            고객센터
+          </MenuButton>
+          <MenuButton
+            onClick={() => router.push("mailto:p.newniverse@gmail.com")}
+          >
+            Contact
+          </MenuButton>
           <MenuButton>작품검수</MenuButton>
         </MenuWrapper>
         <MenuWrapper>
@@ -138,6 +157,7 @@ const MenuButton = styled(Typography)`
     const { colors, typoToken } = theme;
 
     return css`
+      cursor: pointer;
       ${typoToken.body02}
       color: ${colors.secondary[200]};
       margin-bottom: 0.5rem;

diff --git a/components/domains/detail/calendar/ReservationCalendar.tsx b/components/domains/detail/calendar/ReservationCalendar.tsx
@@ -20,6 +20,7 @@ type ReserveModalCase = "NOTICE" | "COMPLETION" | "RESERVATION" | null;
 
 export default function ReservationCalendar({
   schedules = [],
+  disabled = true,
 }: ReservationCalendarProps) {
   const { mutate: postReservation } = usePostReservation();
 
@@ -67,6 +68,7 @@ export default function ReservationCalendar({
           )}
           selected={date}
           onChangeDate={onChangeDate}
+          disabled={disabled}
         />
         <DaySchedules
           selectedDate={date}
@@ -77,6 +79,7 @@ export default function ReservationCalendar({
         <ReservedSeat seatCount={clickedSchedule?.leftSeatCount} />
       </Wrapper>
       <ReserveButton
+        disabled={disabled}
         onClick={() => {
           setModalStatus("NOTICE");
         }}
@@ -104,10 +107,9 @@ export default function ReservationCalendar({
       </ConfirmModal>
       <ReservationModal
         isShow={modalStatus === "RESERVATION"}
-        onReserve={() => {
-          // TODO: 티켓 수량 입력 지금은 방법이 없기 때문에 추후 작업 진행 예정
+        onReserve={(quantity) => {
           if (clickedSchedule) {
-            postReservation(clickedSchedule?.id);
+            postReservation({ id: clickedSchedule?.id, quantity });
             setModalStatus("COMPLETION");
           }
         }}

diff --git a/components/domains/detail/reservation/ReservationModal.tsx b/components/domains/detail/reservation/ReservationModal.tsx
@@ -9,10 +9,11 @@ import ReservationStep from "./ReservationStep";
 interface Props {
   isShow: boolean;
   onClose: () => void;
-  onReserve: () => void;
+  onReserve: (quantity: number) => void;
+  price?: number;
 }
 
-export function ReservationModal({ isShow, onClose, onReserve }: Props) {
+export function ReservationModal({ isShow, onClose, onReserve, price }: Props) {
   const [ticketCount, setTicketCount] = useState(1);
 
   useEffect(() => {
@@ -57,7 +58,7 @@ export function ReservationModal({ isShow, onClose, onReserve }: Props) {
             discount={0}
             reservationFee={0}
             ticketCount={ticketCount}
-            onClickReserveButton={onReserve}
+            onClickReserveButton={() => onReserve(ticketCount)}
           />
         </ContentSection>
       </Content>

diff --git a/components/domains/landing-page/LandingPage.tsx b/components/domains/landing-page/LandingPage.tsx
@@ -1,5 +1,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";
@@ -42,8 +43,8 @@ export function LandingPage() {
         description="현재 티켓 예매가 가능한 작품입니다."
       />
       <TicketsWrapper>
-        {data?.ticketOpen &&
-          data.ticketOpen.map((rank) => (
+        {data?.ticket &&
+          data.ticket.map((rank) => (
             <Ticket
               onClick={() => moveToDetailPage(rank.id)}
               key={rank.id}
@@ -62,6 +63,9 @@ export function LandingPage() {
         title="ARCHIVING"
         description="서울예술대학교의 지난 작품을 확인해 보세요."
       />
+      <Preparing>
+        <Typography typo="subhead01">준비 중입니다.</Typography>{" "}
+      </Preparing>
     </Container>
   );
 }
@@ -101,3 +105,13 @@ const SeeMoreButton = styled.button`
     `;
   }}
 `;
+
+const Preparing = styled.div`
+  width: 1168px;
+  height: 370px;
+  border-radius: 12px;
+  background-color: ${({ theme }) => theme.colors.secondary[100]};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/components/domains/ticket-page/ShowingPage.tsx b/components/domains/ticket-page/ShowingPage.tsx
@@ -5,6 +5,7 @@ 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 = [
   {
@@ -140,6 +141,7 @@ const mock = [
 ];
 
 export function ShowingPage() {
+  const { data } = useGetTicketShowingList();
   const router = useRouter();
 
   const moveToDetailPage = (id: number) => {
@@ -150,17 +152,18 @@ export function ShowingPage() {
     <Container>
       <Header typo="headline">Showing</Header>
       <ShowingWrapper>
-        {[...mock, ...mock, ...mock, ...mock, ...mock].map((rank, index) => (
-          <ProgressTicket
-            onClick={() => moveToDetailPage(rank.id)}
-            key={index}
-            thumbnail={mockImage}
-            genre={rank.genre}
-            title={rank.title}
-            startDate={rank.startDate}
-            endDate={rank.endDate}
-          />
-        ))}
+        {data &&
+          data.showing.map((rank, index) => (
+            <ProgressTicket
+              onClick={() => moveToDetailPage(rank.id)}
+              key={index}
+              thumbnail={mockImage}
+              genre={rank.genre}
+              title={rank.title}
+              startDate={rank.startDate}
+              endDate={rank.endDate}
+            />
+          ))}
       </ShowingWrapper>
     </Container>
   );