Merge pull request #136 from newnivers/feat/qa

QA

components/domains/detail/tab/review/ReviewTextarea.tsx

@@ -1,13 +1,13 @@
 import type { ChangeEvent } from "react";
-import { useState, useContext } from "react";
+import { useState } from "react";
 import styled, { css } from "styled-components";
 import Rating from "@/components/common/rating";
 import Typography from "@/components/common/text/Typography";
-import { AuthUserInfo } from "@/contexts";
+import useAuthUserStorage from "@/hooks/authUserStorage";
 import { usePostComment } from "@/queries";
 
 export default function ReviewTextarea({ artId }: { artId: number }) {
-  const { authUser } = useContext(AuthUserInfo.Context);
+  const { userAuth } = useAuthUserStorage();
   const [rating, setRating] = useState(0);
   const [review, setReview] = useState("");
   const postComment = usePostComment(artId);
@@ -17,12 +17,12 @@ export default function ReviewTextarea({ artId }: { artId: number }) {
   };
 
   const postReview = () => {
-    if (authUser?.id) {
+    if (userAuth.id) {
       postComment({
         score: rating,
         description: review,
         art: artId,
-        author: Number(authUser.id),
+        author: Number(userAuth.id),
       });
     }
   };

components/domains/ticket-page/ProgressCircle.tsx

@@ -1,56 +1,81 @@
+import { useMemo } from "react";
 import styled from "styled-components";
 import Typography from "@/components/common/text/Typography";
 
-export function ProgressCircle({ leftDate = 0 }: { leftDate: number }) {
+export function ProgressCircle({ leftDay = 0 }: { leftDay: number }) {
+  const isValidDate = (day: number) => {
+    return day < 5 && day > 0;
+  };
+
+  const calculatedPercentage = useMemo(() => {
+    if (!isValidDate(leftDay)) {
+      return 0;
+    } else {
+      const progress = ((5 % leftDay) * 20) / 100;
+
+      return 2 * Math.PI * 90 * (1 - progress);
+    }
+  }, [leftDay]);
+
   return (
     <Wrapper>
-      <InnerCircle>
-        <LeftDay>{`D-${leftDate}`}</LeftDay>
-      </InnerCircle>
-      <OuterCircle count={2} />
+      <LeftDay>{`D-${leftDay}`}</LeftDay>
+      <CircleSvg
+        className="circle_progress"
+        width="200"
+        height="200"
+        viewBox="0 0 200 200"
+      >
+        <Outer
+          className="progress__meter"
+          cx="100"
+          cy="100"
+          r="90"
+          strokeWidth="12"
+          stroke={isValidDate(leftDay) ? "#e6e6e6" : "none"}
+        />
+        {}
+        {isValidDate(leftDay) && (
+          <Bar
+            dash={calculatedPercentage}
+            className="progress__ing"
+            cx="100"
+            cy="100"
+            r="90"
+            strokeWidth={"12"}
+          />
+        )}
+      </CircleSvg>
     </Wrapper>
   );
 }
 
-const makeBorder = (count: number) => {
-  let result = "";
-  for (let i = 0; i < 4; i += 1) {
-    if (count > i) {
-      result += `#F90 `;
-    } else {
-      result += `white `;
-    }
-  }
-
-  return result;
-};
+const CircleSvg = styled.svg`
+  transform: rotate(-90deg);
+`;
 
-const Wrapper = styled.div`
-  position: relative;
+const Bar = styled.circle<{ dash: number }>`
+  stroke: ${({ theme }) => theme.colors.primary.point};
+  fill: none;
+  stroke-dasharray: ${2 * Math.PI * 90};
+  stroke-dashoffset: ${({ dash }) => dash};
 `;
 
-const InnerCircle = styled.div`
-  width: 200px;
-  height: 200px;
-  border: 9px solid;
-  border-radius: 50%;
-  background: rgba(10, 10, 10, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Outer = styled.circle`
+  fill: rgba(10, 10, 10, 0.8);
 `;
 
-const OuterCircle = styled.div<{ count: number }>`
-  position: absolute;
-  top: 0;
+const Wrapper = styled.div`
+  position: relative;
   width: 200px;
   height: 200px;
-  border: 9px solid;
-  border-radius: 50%;
-  border-color: ${({ count }) => makeBorder(count)};
-  rotate: 45deg;
 `;
 
 const LeftDay = styled(Typography)`
+  z-index: 1;
   color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 `;

components/domains/ticket-page/ProgressTicket.tsx

@@ -15,6 +15,7 @@ interface TicketProps {
   onClick: () => void;
   ticketOpenDate?: Date;
   showOpenProgress?: boolean;
+  ticketOpenAt?: string;
 }
 
 export function ProgressTicket({
@@ -24,25 +25,36 @@ export function ProgressTicket({
   startDate,
   endDate,
   onClick,
-  showOpenProgress,
+  ticketOpenAt,
 }: TicketProps) {
   const period = useMemo(() => {
-    const start = `${dayjs(startDate).format("YYYY-DD-MM")} (${dayjs(
+    const start = `${dayjs(startDate).format("YYYY-MM-DD")} (${dayjs(
       startDate
     ).format("ddd")})`;
 
-    const end = `${dayjs(endDate).format("YYYY-DD-MM")} (${dayjs(
+    const end = `${dayjs(endDate).format("YYYY-MM-DD")} (${dayjs(
       endDate
     ).format("ddd")})`;
 
     return `${start} ~ ${end}`;
   }, [startDate, endDate]);
 
+  const leftDay = useMemo(() => {
+    const ticketOpenDay = dayjs(ticketOpenAt);
+
+    return ticketOpenDay.diff(dayjs(), "day");
+  }, []);
+
   return (
     <Wrapper onClick={onClick}>
-      <>
+      <ImageWrapper>
         <Image src={thumbnail} alt="티켓 이미지" width={268} height={370} />
-      </>
+        {ticketOpenAt && (
+          <ProgressCircleWrapper>
+            <ProgressCircle leftDay={leftDay} />
+          </ProgressCircleWrapper>
+        )}
+      </ImageWrapper>
       <Genre typo="subhead03">{`#${genre}`}</Genre>
       <Title typo="subhead03">{title}</Title>
       <Period typo="body02">{period}</Period>
@@ -54,10 +66,20 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  position: relative;
   cursor: pointer;
 `;
 
+const ImageWrapper = styled.div`
+  position: relative;
+`;
+
+const ProgressCircleWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
 const Genre = styled(Typography)`
   color: ${({ theme }) => theme.colors.secondary[500]};
   margin-bottom: 4px;

components/domains/ticket-page/TicketHomePage.tsx

@@ -182,6 +182,7 @@ export function TicketHomePage({
             title={rank.title}
             startDate={rank.startDate}
             endDate={rank.endDate}
+            ticketOpenAt={rank.ticketOpenAt}
           />
         ))}
       </TicketOpenWrapper>