[Fix/#311] ENDLESS QA (#314)

* feat: 공지사항 상세 페이지 렌더링 시 스크롤 맨 위로 * feat: 더보기 아이콘 모바일 크롬에서 안보이는 이슈 일단 확인용 인라인 css * feat: 필터링 로직에서 필터셀렉트 컴포넌트 항상 보이게 설정 * feat: 게스트 마이 클래스 엠티 뷰 텍스트 수정
PICK-PLE · Sep 20, 2024 · a9663b6 · a9663b6
1 parent a1aed88
commit a9663b6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/src/apis/domains/moim/useFetchGuestApply.ts b/src/apis/domains/moim/useFetchGuestApply.ts
@@ -6,7 +6,7 @@ import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
 import { components } from '@schema';
 import { ApiResponseType } from '@types';
 
-type SubmittedMoimByGuestResponse = components['schemas']['SubmittedMoimByGuestResponse'];
+export type SubmittedMoimByGuestResponse = components['schemas']['SubmittedMoimByGuestResponse'];
 
 const getGuestApplyMoim = async (
   guestId: number,

diff --git a/src/pages/class/components/CommentBox/CommentBox.tsx b/src/pages/class/components/CommentBox/CommentBox.tsx
@@ -74,7 +74,7 @@ const CommentBox = ({ comment, noticeId, host }: CommentBoxProps) => {
 
         {canShowIcon && (
           <div css={iconWrapper}>
-            <IcParkMore onClick={handleDeleteOpen} css={iconStyle} />
+            <IcParkMore onClick={handleDeleteOpen} css={iconStyle} width={24} height={24} />
             {isDeleteOpen && (
               <DeleteCard handleModalOpen={handleModalOpen} handleDeleteClose={handleDeleteClose} />
             )}

diff --git a/src/pages/class/components/HostProfileCard/HostProfileCard.tsx b/src/pages/class/components/HostProfileCard/HostProfileCard.tsx
@@ -80,7 +80,7 @@ const HostProfileCard = ({ data: noticeDetail, noticeId, moimId }: HostProfileCa
     return (
       <>
         <span css={iconStyle}>
-          <IcParkMore onClick={handleDeleteOpen} />
+          <IcParkMore onClick={handleDeleteOpen} width={24} height={24} />
         </span>
         {renderDeleteCard()}
         {renderModal()}

diff --git a/src/pages/class/page/ClassNoticeDetail/ClassNoticeDetail.tsx b/src/pages/class/page/ClassNoticeDetail/ClassNoticeDetail.tsx
@@ -40,6 +40,10 @@ const ClassNoticeDetail = () => {
     }
   }, [commentList]);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div css={classNoticeDetailContainer}>

diff --git a/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx b/src/pages/guest/page/GuestMyClass/GuestMyClass.tsx
@@ -2,6 +2,7 @@ import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
 import { useFetchGuestApply, useFetchGuestParticipate } from '@apis/domains/moim';
+import { SubmittedMoimByGuestResponse } from '@apis/domains/moim/useFetchGuestApply';
 
 import { FilterSelect, Header, Spinner } from '@components';
 import { GuestMyClassEmptyView, MoimCard } from '@pages/guest/components';
@@ -51,6 +52,18 @@ const GuestMyClass = () => {
     setSelectedStatus(status);
   };
 
+  const currentData = activeTab === '신청한' ? applyData : participateData;
+
+  // 각 상태별로 필터링된 데이터 계산
+  const statusFilteredData: { [key: string]: SubmittedMoimByGuestResponse[] | undefined } = {
+    전체: currentData ?? [],
+    '입금 대기': currentData?.filter((data) => data.moimSubmissionState === 'pendingPayment'),
+    '승인 대기': currentData?.filter((data) => data.moimSubmissionState === 'pendingApproval'),
+    '승인 완료': currentData?.filter((data) => data.moimSubmissionState === 'approved'),
+    '승인 거절': currentData?.filter((data) => data.moimSubmissionState === 'rejected'),
+    '환불 완료': currentData?.filter((data) => data.moimSubmissionState === 'refunded'),
+  };
+
   if (isApplyLoading || isParticipateLoading) {
     return <Spinner />;
   }
@@ -59,8 +72,6 @@ const GuestMyClass = () => {
     return <div>Error: {applyError?.message || participateError?.message}</div>;
   }
 
-  const currentData = activeTab === '신청한' ? applyData : participateData;
-
   return (
     <div css={GuestMyClassBackground}>
       <Header title="my 클래스 모임" />
@@ -77,7 +88,8 @@ const GuestMyClass = () => {
         </article>
 
         <main css={mainWrapper}>
-          {activeTab === '신청한' && (currentData?.length ?? 0) > 0 && (
+          {/* 모든 상태에 데이터가 하나라도 있으면 FilterSelect를 보여줌 */}
+          {activeTab === '신청한' && (
             <article css={filterSelectWrapper}>
               <div css={filterSelectStyle}>
                 <FilterSelect
@@ -95,17 +107,18 @@ const GuestMyClass = () => {
             </article>
           )}
 
+          {/* 전체 데이터가 없을 때 GuestMyClassEmptyView를 보여줌 */}
           {currentData?.length === 0 ? (
             <GuestMyClassEmptyView
               text={
                 activeTab === '신청한'
-                  ? '아직 신청한 클래스가 없어요'
+                  ? `${selectedStatus} 중인 클래스가 없어요`
                   : '아직 참가한 클래스가 없어요'
               }
             />
           ) : (
             <ul css={classCardList}>
-              {currentData?.map((data) => (
+              {statusFilteredData[selectedStatus]?.map((data) => (
                 <li css={guestMyClassCardContainer} key={data.moimId}>
                   <MoimCard guestMyClassData={data} />
                 </li>