Merge pull request #260 from TEAM-MONGDOL/develop

[merge] - develop > main 머지
TEAM-MONGDOL · Aug 19, 2024 · 5d92087 · 5d92087
2 parents a84ecb4 + c25f260
commit 5d92087
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 31 deletions.
diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx
@@ -268,7 +268,7 @@ const UserWkHistoryPage = () => {
                   endDate={wkt.endDate}
                   bettingPoint={wkt.bettingPoint}
                   applyStatusType={wkt.applyStatusType}
-                  waitingNumber={wkt.waitNumber}
+                  waitingNumber={wkt.waitNumber || undefined}
                   onClick={() =>
                     handleCardClick(wkt.applyStatusType, wkt.wktId)
                   }

diff --git a/src/app/(route)/(user)/(with-layout)/workation/[id]/page.tsx b/src/app/(route)/(user)/(with-layout)/workation/[id]/page.tsx
@@ -192,12 +192,8 @@ const UserWkDetailPage = ({ params }: UserWkDetailProps) => {
         <div ref={resultRef}>
           <WkResultInfo id={id} />
         </div>
-        {reviewData.reviewInfosForWkt.map((review) => (
-          <div
-            className="flex flex-col gap-10 pt-16"
-            ref={reviewRef}
-            key={review.id}
-          >
+        <div className="flex flex-col gap-10 pt-16" ref={reviewRef}>
+          {reviewData.reviewInfosForWkt[0]?.wktTitle && (
             <UserFilteringSectionContainer
               orderOption={{
                 onClickOrder: () => {
@@ -216,6 +212,9 @@ const UserWkDetailPage = ({ params }: UserWkDetailProps) => {
                 },
               }}
             />
+          )}
+
+          {reviewData.reviewInfosForWkt.map((review) => (
             <WkReviewInfo
               key={review.wktTitle}
               title={review.wktTitle}
@@ -225,8 +224,8 @@ const UserWkDetailPage = ({ params }: UserWkDetailProps) => {
               contents={review.contents}
               rating={review.rating}
             />
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </section>
   );

diff --git a/src/app/(route)/(user)/(with-layout)/workation/page.tsx b/src/app/(route)/(user)/(with-layout)/workation/page.tsx
@@ -5,7 +5,6 @@ import UserTabBarModule from '@/_components/user/common/modules/UserTabBarModule
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import Image from 'next/image';
 import UserTextLabelAtom from '@/_components/user/common/atoms/UserTextLabelAtom';
-import UserStateFilteringContainer from '@/_components/user/common/containers/UserStateFilteringContainer';
 import UserPlaceFilteringContainer from '@/_components/user/common/containers/UserPlaceFilteringContainer';
 import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer';
 import dayjs from 'dayjs';
@@ -17,6 +16,7 @@ import UserDatePickerContainer from '@/_components/user/common/containers/UserDa
 import { useRouter } from 'next/navigation';
 import UserLoading from '@/_components/user/userLoading';
 import NetworkError from '@/_components/common/networkError';
+import UserWktStateFilteringContainer from '@/_components/user/common/containers/UserWktStateFilteringContainer';
 
 const Workation = () => {
   const router = useRouter();
@@ -42,7 +42,11 @@ const Workation = () => {
     startDate: null,
     endDate: null,
   });
-  const [selectedState, setSelectedState] = useState<string>('ONGOING');
+  const [selectedState, setSelectedState] = useState<string[]>([
+    'PLANNED',
+    'ONGOING',
+    'CLOSED',
+  ]);
   const [selectedSpace, setSelectedSpace] = useState<string[]>([]);
   const [selectedOrder, setSelectedOrder] = useState<string>('createdAt,DESC');
   const [selectedTag, setSelectedTag] = useState<DatePickerTagType>('ALL');
@@ -82,7 +86,7 @@ const Workation = () => {
   const updateParam = useCallback(() => {
     setParam((prev) => ({
       ...prev,
-      status: [selectedState],
+      status: [...selectedState],
       places: placeOptions
         .filter((place) => selectedSpace.includes(place.place))
         .map((place) => place.id.toString()),
@@ -124,12 +128,13 @@ const Workation = () => {
     setSelectedTag('ALL');
     setStartDate(null);
     setEndDate(null);
-    setSelectedState('ONGOING');
+    setSelectedState(['ONGOING', 'PLANNED', 'CLOSED']);
   };
 
   const { data, isLoading, isError } = useGetWkListQuery({
-    status: param.status.join(','),
-    wktPlaceIdList: param.places.join(','),
+    status: param.status.length > 0 ? param.status.join(',') : undefined,
+    wktPlaceIdList:
+      param.places.length > 0 ? param.places.join(',') : undefined,
     wktStartDate: param.startDate || null,
     wktEndDate: param.endDate || null,
     pageParam: {
@@ -183,7 +188,7 @@ const Workation = () => {
   }
 
   return (
-    <div className="">
+    <div>
       <UserHeaderContainers
         title="워케이션"
         content="워케이션(Workation)을 통해 업무의 효율과 재충전의 기회를 놓치지 마세요!"
@@ -210,10 +215,9 @@ const Workation = () => {
                   endDate={endDate}
                   setEndDate={setEndDate}
                 />
-                <UserStateFilteringContainer
-                  type="WKT"
-                  selectedOption={selectedState}
-                  onClickOption={setSelectedState}
+                <UserWktStateFilteringContainer
+                  selectedOptions={selectedState}
+                  onClickOptions={setSelectedState}
                 />
                 <UserPlaceFilteringContainer
                   places={placeOptions.map((place) => place.place)}
@@ -243,11 +247,13 @@ const Workation = () => {
         />
       </div>
       <div className="mt-10 px-40">
-        {!data ? (
+        {param.status.length === 0 || param.places.length === 0 ? (
+          <EmptyContainer notTable />
+        ) : !data ? (
           isLoading ? (
             <EmptyContainer text="loading" notTable />
           ) : (
-            <EmptyContainer text="no data" notTable />
+            <EmptyContainer notTable />
           )
         ) : data.pageInfo.totalElements <= 0 ? (
           <EmptyContainer notTable />

diff --git a/src/app/(route)/admin/(with-layout)/notices/page.tsx b/src/app/(route)/admin/(with-layout)/notices/page.tsx
@@ -74,6 +74,8 @@ const NoticesListPage = () => {
     },
   });
 
+  const isNoticeTypeSelected = param.noticeType.length > 0;
+
   return (
     <section className="w-full">
       <div className="mb-12 flex items-center justify-between">
@@ -119,6 +121,7 @@ const NoticesListPage = () => {
           endDatePlaceholder="마감일 선택"
         />
       </FilteringBarContainer>
+
       <TableContainer minWidth="1000px">
         <TableHeaderModule>
           <TableHeaderAtom isFirst width="80px">
@@ -131,7 +134,9 @@ const NoticesListPage = () => {
         </TableHeaderModule>
 
         <tbody>
-          {!data ? (
+          {!isNoticeTypeSelected ? (
+            <EmptyContainer colSpan={5} />
+          ) : !data ? (
             isLoading ? (
               <EmptyContainer colSpan={5} text="loading" />
             ) : (
@@ -162,8 +167,9 @@ const NoticesListPage = () => {
           )}
         </tbody>
       </TableContainer>
+
       <div className="relative mt-8">
-        {data && data.pageInfo.totalElements > 0 && (
+        {isNoticeTypeSelected && data && data.pageInfo.totalElements > 0 && (
           <div className="flex justify-center">
             <PaginationModule
               currentPage={currentPage}

diff --git a/src/app/_components/user/common/containers/UserWktStateFilteringContainer.tsx b/src/app/_components/user/common/containers/UserWktStateFilteringContainer.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { WktStatusConverter, WktStatusList } from '@/_types/commonType';
+import UserFilteringTitleAtom from '@/_components/user/common/atoms/UserFilteringTitleAtom';
+import CheckboxModule from '@/_components/common/modules/CheckboxModule';
+import UserFilteringSubContainer from './UserFilteringSubContainer';
+
+interface UserWktStateFilteringContainerProps {
+  selectedOptions: string[];
+  onClickOptions: (options: string[]) => void;
+}
+
+const UserWktStateFilteringContainer = ({
+  selectedOptions,
+  onClickOptions,
+}: UserWktStateFilteringContainerProps) => {
+  return (
+    <UserFilteringSubContainer>
+      <UserFilteringTitleAtom text="진행 상태" />
+      <div className="flex w-full flex-col gap-y-1.5">
+        {WktStatusList.map((option, idx) => {
+          return (
+            <CheckboxModule
+              option={WktStatusConverter[option]}
+              isChecked={selectedOptions.includes(option)}
+              onClick={() => {
+                if (selectedOptions.includes(option)) {
+                  onClickOptions(
+                    selectedOptions.filter(
+                      (selectedOption) => selectedOption !== option,
+                    ),
+                  );
+                } else {
+                  onClickOptions([...selectedOptions, option]);
+                }
+              }}
+              key={`userStateFiltering${option}`}
+              size={20}
+            />
+          );
+        })}
+      </div>
+    </UserFilteringSubContainer>
+  );
+};
+
+export default UserWktStateFilteringContainer;
diff --git a/src/app/_components/user/workation/WkReviewInfo.tsx b/src/app/_components/user/workation/WkReviewInfo.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
-import { StarRateIcon } from '@/_assets/icons';
+import { StarRateEmptyIcon, StarRateIcon } from '@/_assets/icons';
 import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer';
 import { ReviewInfo } from '@/_constants/common';
 import dayjs from 'dayjs';
@@ -35,11 +35,16 @@ const WkReviewInfo = ({
             </p>
             <div className="ml-auto flex flex-col justify-center">
               <div className="mb-1 flex">
-                <Image src={StarRateIcon} alt="StarRateIcon" />
-                <Image src={StarRateIcon} alt="StarRateIcon" />
-                <Image src={StarRateIcon} alt="StarRateIcon" />
-                <Image src={StarRateIcon} alt="StarRateIcon" />
-                <Image src={StarRateIcon} alt="StarRateIcon" />
+                {[...Array(rating)].map((_, index) => (
+                  <Image key={rating} src={StarRateIcon} alt="StarRateIcon" />
+                ))}
+                {[...Array(5 - rating)].map((_, index) => (
+                  <Image
+                    key={rating}
+                    src={StarRateEmptyIcon}
+                    alt="StarRateEmptyIcon"
+                  />
+                ))}
               </div>
               <p>
                 {rating}점({ReviewInfo[rating as keyof typeof ReviewInfo]})

diff --git a/src/app/_types/adminType.ts b/src/app/_types/adminType.ts
@@ -359,7 +359,7 @@ export const userApplyInfoSchema = z.object({
   applyId: z.number(),
   reviewId: z.number().nullable(),
   thumbnailUrl: z.string(),
-  waitNumber: z.number(),
+  waitNumber: z.number().nullable(),
   wktId: z.number(),
   wktName: z.string(),
   place: z.string(),