feat: 마감완료 및 지난공고 disabled 처리

part3-team5 · Jun 14, 2024 · a9c9ba8 · a9c9ba8
1 parent 4359d30
commit a9c9ba8
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 19 deletions.
diff --git a/components/Button/Button.types.ts b/components/Button/Button.types.ts
@@ -3,4 +3,5 @@ export interface ButtonProps {
   btnColorType: "orange" | "white" | "gray";
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   btnCustom?: string;
+  disabled?: boolean;
 }
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -4,18 +4,9 @@ import { ButtonProps } from "./Button.types";
 
 const cx = classNames.bind(styles);
 
-const Button = ({
-  children,
-  btnColorType,
-  onClick,
-  btnCustom,
-}: ButtonProps) => {
+const Button = ({ children, btnColorType, onClick, btnCustom, disabled = false }: ButtonProps) => {
   return (
-    <button
-      className={cx(btnColorType, btnCustom)}
-      onClick={onClick}
-      disabled={btnColorType === "gray"}
-    >
+    <button className={cx(btnColorType, btnCustom)} onClick={onClick} disabled={disabled}>
       {children}
     </button>
   );

diff --git a/components/Post/Post.types.ts b/components/Post/Post.types.ts
@@ -9,4 +9,5 @@ export interface PostProps {
   shopAddress2?: string;
   shopImageUrl: string;
   hourlyPay: number;
+  closed: boolean;
 }
diff --git a/components/Post/index.tsx b/components/Post/index.tsx
@@ -17,11 +17,13 @@ const Post: React.FC<PostProps> = ({
   shopAddress1,
   shopImageUrl,
   hourlyPay,
+  closed = false,
 }) => {
   const startTime = moment(startsAt);
   const endTime = moment(startTime).add(workhour, "hours");
   const now = moment();
   const isPast = now.isAfter(startTime);
+  const isClosed = closed;
 
   const startTimeFormatted = startTime.format("YYYY-MM-DD HH:mm");
   const endTimeFormatted = endTime.format("HH:mm");
@@ -38,6 +40,7 @@ const Post: React.FC<PostProps> = ({
           alt="공고 이미지"
         />
         {isPast && <div className={cx("overlay")}>지난 공고</div>}
+        {isClosed && <div className={cx("overlay")}>마감 완료</div>}
       </div>
       <p className={cx("postStoreText", { disabled: isPast })}>{shopName}</p>
       <div className={cx("postText__container", { disabled: isPast })}>

diff --git a/components/Search/index.tsx b/components/Search/index.tsx
@@ -123,6 +123,7 @@ const Search = () => {
                     shopAddress1={notice.shop.item.address1}
                     shopImageUrl={notice.shop.item.imageUrl}
                     hourlyPay={notice.hourlyPay}
+                    closed={notice.closed}
                   />
                 </Link>
               );

diff --git a/components/Shop/ShopNotice/index.tsx b/components/Shop/ShopNotice/index.tsx
@@ -92,11 +92,7 @@ const ShopNotice = ({ onClick }: NoticeEmptyProps) => {
           <div className={cx("notice")}>
             <div className={cx("notice-wrapper")}>
               <p>공고를 등록해 보세요.</p>
-              <Button
-                btnColorType="orange"
-                btnCustom="userNoticeDetailed"
-                onClick={onClick}
-              >
+              <Button btnColorType="orange" btnCustom="userNoticeDetailed" onClick={onClick}>
                 공고 등록하기
               </Button>
             </div>
@@ -120,6 +116,7 @@ const ShopNotice = ({ onClick }: NoticeEmptyProps) => {
                   shopAddress1={item.shop?.address1}
                   hourlyPay={item.hourlyPay}
                   shopImageUrl={item.shop?.imageUrl}
+                  closed={item.closed}
                 />
               </Link>
             );

diff --git a/components/notice/CustomNoticeList/index.tsx b/components/notice/CustomNoticeList/index.tsx
@@ -116,6 +116,7 @@ const CustomNoticeList = () => {
                     shopAddress1={notice.shop.item.address1}
                     shopImageUrl={notice.shop.item.imageUrl}
                     hourlyPay={notice.hourlyPay}
+                    closed={notice.closed}
                   />
                 </Link>
               );

diff --git a/components/notice/NoticeDetailed/index.tsx b/components/notice/NoticeDetailed/index.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import styles from "./NoticeDetailed.module.scss";
 import classNames from "classnames/bind";
 import Button from "@/components/Button";
@@ -9,7 +10,6 @@ import { INoticeDataProps } from "@/types/Notice";
 import { formatCurrency } from "@/utils/formatCurrency";
 import moment from "moment";
 import { calculateIncreasePercent } from "@/utils/calculateIncreasePercent";
-import { useState } from "react";
 import { postApplicant } from "@/api/notice";
 
 const cx = classNames.bind(styles);
@@ -21,6 +21,7 @@ const NoticeDetailed = ({ shopData }: INoticeDataProps) => {
   const endTime = moment(startTime).add(shopData.workhour, "hours");
   const now = moment();
   const isPast = now.isAfter(endTime);
+  const isClosed = shopData.closed;
 
   const startTimeFormatted = startTime.format("YYYY-MM-DD HH:mm");
   const endTimeFormatted = endTime.format("HH:mm");
@@ -59,6 +60,7 @@ const NoticeDetailed = ({ shopData }: INoticeDataProps) => {
             alt="가게 이미지"
           />
           {isPast && <div className={cx("overlay")}>지난 공고</div>}
+          {isClosed && <div className={cx("overlay")}>마감 완료</div>}
         </div>
         <div className={cx("notice-info--detail-wrap")}>
           <div className={cx("notice-info--detail")}>
@@ -70,7 +72,10 @@ const NoticeDetailed = ({ shopData }: INoticeDataProps) => {
                 </span>
                 <div>
                   {increasePercent >= 1 && (
-                    <HourlyPayincreaseButton isPast={isPast} increasePercent={increasePercent} />
+                    <HourlyPayincreaseButton
+                      isPast={isPast || isClosed}
+                      increasePercent={increasePercent}
+                    />
                   )}
                 </div>
               </div>
@@ -85,7 +90,11 @@ const NoticeDetailed = ({ shopData }: INoticeDataProps) => {
             </div>
             <p className={cx("notice-info__intro")}>{shopData.shop.description}</p>
           </div>
-          {isApplied ? (
+          {isPast || isClosed ? (
+            <Button btnColorType="gray" btnCustom="userNoticeDetailed" disabled>
+              신청불가
+            </Button>
+          ) : isApplied ? (
             <Button btnColorType="white" btnCustom="userNoticeDetailed">
               취소하기
             </Button>

diff --git a/components/notice/NoticeList/index.tsx b/components/notice/NoticeList/index.tsx
@@ -111,6 +111,7 @@ const NoticeList: React.FC = () => {
                   shopAddress1={notice.shop.item.address1}
                   shopImageUrl={notice.shop.item.imageUrl}
                   hourlyPay={notice.hourlyPay}
+                  closed={notice.closed}
                 />
               </Link>
             );

diff --git a/pages/notices/[shopId]/[noticeId]/index.tsx b/pages/notices/[shopId]/[noticeId]/index.tsx
@@ -73,6 +73,7 @@ const DetailedNotice = () => {
                       shopAddress1={notice.shop.address1}
                       shopImageUrl={notice.shop.imageUrl}
                       hourlyPay={notice.hourlyPay}
+                      closed={notice.closed}
                     />
                   </Link>
                 );