Merge pull request #50 from 8princesses/fix/home-date

🐛 UpcomingStock의 Date -> dayjs 변경

src/components/home/EndedStock.tsx

@@ -3,33 +3,33 @@ import { getFonts } from "@/styles/fonts";
 import colors from "@/styles/colors";
 import { FC } from "react";
 import EndedStockLogo from "./EndedStockLogo";
+import dayjs, { Dayjs } from "dayjs";
 
 interface EndStockProps {
   stockName: string;
   logoPath: string;
-  openDate: Date;
+  openDate: Dayjs;
   onClick?: () => void;
 }
 
 const EndedStock: FC<EndStockProps> = (props) => {
   const { stockName, logoPath, openDate, onClick } = props;
-  const today = new Date();
-  const curDate = new Date(today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
-  const isPublic = openDate.getFullYear() === 2000 ? false : curDate > openDate;
+  const today = dayjs();
+  const curDate = dayjs(today.get("year") + "-" + (today.get("month") + 1) + "-" + today.get("day"));
+  const isPublic = openDate.get("year") === 2000 ? false : curDate > openDate;
 
   return (
     <Container onClick={onClick}>
       <EndedStockLogo isPublic={isPublic} path={logoPath} />
       <Title>{stockName}</Title>
       <Description color={colors.FONT_LIGHT.SECONDARY}>
-        {openDate.getFullYear() === 2000
+        {openDate.get("year") === 2000
           ? "상장 예정"
-          : `${openDate.getMonth() + 1}월 ${openDate.getDate()}일 상장 ${isPublic ? "완료" : "예정"}`}
+          : `${openDate.get("month") + 1}월 ${openDate.get("day")}일 상장 ${isPublic ? "완료" : "예정"}`}
       </Description>
     </Container>
   );
 };
-
 export default EndedStock;
 
 const Container = styled.div`

src/components/home/EndedStockSection.tsx

@@ -8,6 +8,7 @@ import { fetchEndedStocks } from "@/api/ipo";
 import { EndedStockType } from "@/types";
 import queryKeys from "@/constants/queryKeys";
 import { useRouter } from "next/navigation";
+import dayjs from "dayjs";
 
 const EndedStockSection: FC = () => {
   const [page, setPage] = useState(0);
@@ -30,7 +31,7 @@ const EndedStockSection: FC = () => {
             key={stock.id}
             stockName={stock.name}
             logoPath={stock.logo}
-            openDate={new Date(stock.listingAt)}
+            openDate={dayjs(stock.listingAt)}
             onClick={() => router.push(`/detail/${stock.id}`)}
           />
         ))}

src/components/home/UpcomingStock.tsx

@@ -14,6 +14,7 @@ import { useSetRecoilState } from "recoil";
 import { ToastAtom } from "@/recoil/toastState";
 import { modifyInterestingStock } from "@/api/interesting";
 import { getDiffDate } from "@/util/getDiffDate";
+import dayjs from "dayjs";
 
 interface UpcomingStockProps {
   children: ReactNode;
@@ -42,26 +43,25 @@ const UpcomingStockMain: FC<UpcomingStockProps> = ({ children }) => {
   return <article>{children}</article>;
 };
 const UpcomingStockStatus: FC<UpcomingStockStatusProps> = ({ startDate, endDate }) => {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-  const current = new Date();
-  const today = new Date(current.getFullYear() + "-" + (current.getMonth() + 1) + "-" + current.getDate());
+  const start = dayjs(startDate);
+  const end = dayjs(endDate);
+  const today = dayjs();
   const diff = getDiffDate(startDate);
 
-  if (today < start) {
+  if (today.isBefore(start, "day")) {
     return (
       <UpcomingStockStatusWrap>
         <UpcomingStockStatusLabel color={colors.FONT_LIGHT.TERIARY}>D - {diff} </UpcomingStockStatusLabel>
-        <span>{`청약일 ${start.getMonth() + 1 + "월 " + start.getDate() + "일"}`}</span>
+        <span>{`청약일 ${start.get("month") + 1 + "월 " + start.get("day") + "일"}`}</span>
       </UpcomingStockStatusWrap>
     );
   }
-  if (today <= end) {
+  if (today.isBefore(end) || today.isSame(end)) {
     return (
       <UpcomingStockStatusWrap>
         <Dot />
         <UpcomingStockStatusLabel color={colors.FONT.ACCENT}> 진행 중 </UpcomingStockStatusLabel>
-        <span>{`마감일 ${end.getMonth() + 1 + "월 " + end.getDate() + "일"}`}</span>
+        <span>{`마감일 ${end.get("month") + 1 + "월 " + end.get("day") + "일"}`}</span>
       </UpcomingStockStatusWrap>
     );
   }
@@ -81,7 +81,7 @@ const UpcomingStockCard: FC<UpcomingStockCardProps> = (props) => {
     proposalAgent,
     handleCardClick,
   } = props;
-  const endDate = new Date(proposalEndDate);
+  const endDate = dayjs(proposalEndDate);
   const [pinned, setPinned] = useState(love);
   const setToastString = useSetRecoilState(ToastAtom);
 
@@ -105,7 +105,7 @@ const UpcomingStockCard: FC<UpcomingStockCardProps> = (props) => {
                 {getBankName(proposalAgent)?.slice(0, -2) + " "}
               </UpcomingStockSubscriptionDateText>
               <UpcomingStockSubscriptionText>
-                {endDate.getMonth() + 1 + "월" + endDate.getDate() + "일까지 개설 필요"}
+                {endDate.get("month") + 1 + "월" + endDate.get("day") + "일까지 개설 필요"}
               </UpcomingStockSubscriptionText>
             </span>
             <Button shape="round" size="small" onClick={onClick}>

src/components/home/modal/OpenAccountFull.tsx

@@ -9,6 +9,7 @@ import React, { FC } from "react";
 import UpcomingStock from "../UpcomingStock";
 import { limitlessAgent } from "@/constants/agentInfo";
 import { StockInfoType } from "@/types";
+import dayjs from "dayjs";
 
 interface OpenAccountFullProps {
   agentId: number;
@@ -18,7 +19,8 @@ interface OpenAccountFullProps {
 
 const OpenAccountFull: FC<OpenAccountFullProps> = (props) => {
   const { agentId, handleClose, stockList } = props;
-  const after20BusiDate = getDateAfter20BusinessDays();
+  // const after20BusiDate = getDateAfter20BusinessDays();
+  const after20BusiDate = dayjs().add(20, "day");
   return (
     <FullScreenModal visible={agentId > 0} setInvisible={handleClose}>
       <FullScreenModalDescription>
@@ -32,7 +34,7 @@ const OpenAccountFull: FC<OpenAccountFullProps> = (props) => {
         </p>
       </FullScreenModalDescription>
       {stockList
-        .filter((item) => new Date(item.proposal.needAt) < after20BusiDate)
+        .filter((item) => dayjs(item.proposal.needAt) < after20BusiDate)
         .filter((item) => item.remainAgents.length === 0 && !item.nonRemainAgents.includes(agentId))
         .filter((item) => !item.nonRemainAgents.some((agent) => limitlessAgent.includes(agent)))
         .map((data) => (

src/stories/EndStock.stories.tsx

@@ -1,5 +1,6 @@
 import EndedStock from "@/components/home/EndedStock";
 import type { Meta, StoryObj } from "@storybook/react";
+import dayjs from "dayjs";
 
 const meta = {
   title: "Home/EndedStock",
@@ -14,22 +15,22 @@ export const BeforePublic: Story = {
   args: {
     stockName: "시큐레터",
     logoPath: "",
-    openDate: new Date("2029-08-30"),
+    openDate: dayjs("2029-08-30"),
   },
 };
 
 export const LongName: Story = {
   args: {
     stockName: "큐리옥스바이오시스템템",
     logoPath: "",
-    openDate: new Date("2023-08-15"),
+    openDate: dayjs("2023-08-15"),
   },
 };
 
 export const Done: Story = {
   args: {
     stockName: "스마트레이더시스템",
     logoPath: "",
-    openDate: new Date("2023-08-15"),
+    openDate: dayjs("2023-08-15"),
   },
 };