[Fix/#297] 기획, 디자인 QA (#303)

* feat: 스픽커가 만든 모임 정렬 * feat: ClassApplyRule 아이콘 추가 * feat: ClassApplyDeposit 에 들어가는 게스트 클래스 레지스터 카드 디자인 수정 * feat: HostInfoPage 디자인 수정사항 반영 * feat: HostInfoPage -> class 선택 시 스크롤 맨 위로 올라가게 수정 * feat: api에 스픽커 베테랑 여부 isVeteran 추가 (HostInfoCard, HostInfoPage, HostInfoCardWithLink) * feat: DepositModal x 버튼에onClose 달아주기 * feat: ApplicantListModal 스크롤 만들기 + SimpleUserProfile medium 사이즈 변경 * feat: 관리자 페이지 - 승인 / 거절 / 환불 / 완료 상태 부분 처리하기 * chore: HostInfoEditPage placeholder 수정 * chore: 'https:// 로 시작하는' 문구 추가하기 * chore: MyClassManage console.log 제거 * feat: isReviewed 상태에 따라 버튼 다르게 보이게 / 리뷰 보기 버튼 누르면 클래스 - 리뷰 탭으로 이동 * feat: TimeSelect 스타일 수정 (크기 맞추고, 스크롤 만들기) * refactor: 코드리뷰 반영 (관리자 페이지 승인여부 부분 switch문으로 수정) * chore: renderApprovalStatus로 함수명 바꾸기 * chore: yarn generate-types 하기 * chore: index.ts 저장했음 * feat: Class 페이지 호스트가 참여하기 버튼 누를 경우 토스트 메시지 뜨게 * feat: 스크롤 수정, 버튼 disabled * fix: qa 반영하기
PICK-PLE · Sep 19, 2024 · d36a070 · d36a070
1 parent 3fb596f
commit d36a070
Show file tree

Hide file tree

Showing 28 changed files with 225 additions and 137 deletions.
diff --git a/src/apis/domains/submitter/usePatchMoimSubmitter.ts b/src/apis/domains/submitter/usePatchMoimSubmitter.ts
@@ -23,7 +23,7 @@ export const usePatchMoimSubmitter = () => {
     mutationFn: ({ moimSubmissionId }: PatchMoimSubmitterRequest) =>
       patchMoimSubmitter({ moimSubmissionId }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL_REQUEST] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL] });
     },
   });
 };
diff --git a/src/apis/queryKeys/queryKeys.ts b/src/apis/queryKeys/queryKeys.ts
@@ -26,7 +26,6 @@ export const QUERY_KEY = {
   HOST_SUBMITTER: 'hostSubmitter',
   HOST_SUBMIT_REQUEST: 'hostSubmitRequest',
   MOIM_SUBMITTER_ALL: 'moimSubmitterAll',
-  MOIM_SUBMITTER_ALL_REQUEST: 'miomSubmitterAllRequest',
   HOST_INFO: 'hostInfo',
   HOST_INFO_CLASS: 'hostInfoClass',
   HOST_INFO_REVIEW: 'hostInfoReview',

diff --git a/src/components/common/DateSelect/DateSelect.tsx b/src/components/common/DateSelect/DateSelect.tsx
@@ -44,7 +44,7 @@ const CustomInput = React.forwardRef<HTMLInputElement, CustomInputProps>(
 
 const DateSelect = ({ selected, onChange }: DateSelectProps) => {
   const today = dayjs();
-  const minSelectableDate = today.add(3, 'day');
+  const minSelectableDate = today.add(2, 'day');
 
   return (
     <div css={dataPickerWrapper}>

diff --git a/src/components/common/NumberLabel/NumberLabel.tsx b/src/components/common/NumberLabel/NumberLabel.tsx
@@ -1,10 +1,13 @@
 import { PropsWithChildren } from 'react';
 
+import { IcNumberLabel } from '@svg';
+
 import { wrapperStyle, textStyle } from './NumberLabel.style';
 
 const NumberLabel = ({ children, ...props }: PropsWithChildren) => {
   return (
     <div css={wrapperStyle} {...props}>
+      <IcNumberLabel />
       <span css={textStyle}>{children}</span>
     </div>
   );

diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts b/src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts
@@ -14,9 +14,12 @@ export const profileWrapperSizeStyle = {
     gap: 1.2rem;
   `,
   medium: css`
-    gap: 1rem;
+    gap: 1.2rem;
   `,
   small: css`
+    gap: 1rem;
+  `,
+  xSmall: css`
     gap: 0.5rem;
   `,
 };
@@ -39,10 +42,14 @@ export const imgSizeStyle = {
     height: 4.2rem;
   `,
   medium: css`
+    width: 3.6rem;
+    height: 3.6rem;
+  `,
+  small: css`
     width: 2.5rem;
     height: 2.5rem;
   `,
-  small: css`
+  xSmall: css`
     width: 1.8rem;
     height: 1.8rem;
   `,
@@ -64,6 +71,9 @@ export const usernameSizeStyle = {
     ${theme.font['subhead05-sb-14']}
   `,
   small: (theme: Theme) => css`
+    ${theme.font['subhead05-sb-14']}
+  `,
+  xSmall: (theme: Theme) => css`
     ${theme.font['body04-m-12']}
   `,
 };
diff --git a/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx b/src/components/common/SimpleUserProfile/SimpleUserProfile.tsx
@@ -10,7 +10,7 @@ import {
 } from './SimpleUserProfile.style';
 
 export interface SimpleUserProfileProps extends React.HTMLAttributes<HTMLDivElement> {
-  size: 'small' | 'medium' | 'large' | 'xlarge';
+  size: 'xSmall' | 'small' | 'medium' | 'large' | 'xlarge';
   username: string;
   userImgUrl?: string;
 }

diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts
@@ -65,15 +65,30 @@ export const svgStyle = (hasValue: boolean) => (theme: Theme) => css`
 export const dropdownStyle = (theme: Theme) => css`
   position: absolute;
   top: 100%;
-  left: 0;
+  left: -1.6rem;
   right: 0;
-  z-index: 1000;
+  z-index: 1;
+
   background-color: ${theme.color.white};
   border: 1px solid ${theme.color.lightgray1};
   border-radius: 10px;
+
+  width: 16.2rem;
   max-height: 200px;
+  padding-right: 5rem;
+  margin-top: 1.5rem;
+
   overflow-y: auto;
-  margin-top: 0.5rem;
+
+  &::-webkit-scrollbar {
+    display: block;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${theme.color.lightgray0};
+    border: 5px solid ${theme.color.white};
+    border-radius: 10px;
+  }
 `;
 
 export const optionStyle = (theme: Theme) => css`

diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.style.ts
@@ -24,22 +24,24 @@ export const titleStyle = (theme: Theme) => css`
   ${theme.font['subhead01-sb-18']}
 `;
 
-export const thStyle = (theme: Theme) => css`
-  background-color: #f2f2f2;
-  padding: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
-  word-break: keep-all;
-  border: 1px solid ${theme.color.lightgray1};
-  ${theme.font['subhead05-sb-14']}
-
-  max-width: 10rem;
-`;
-
-export const tdStyle = (theme: Theme) => css`
-  padding: 0.5rem;
-  text-align: center;
-  border: 1px solid ${theme.color.lightgray0};
-  word-break: break-all;
-  ${theme.font['subhead06-m-14']}
+export const trStyle = (theme: Theme) => css`
+  & > th {
+    background-color: #f2f2f2;
+    padding: 0.5rem;
+    text-align: center;
+    vertical-align: middle;
+    word-break: keep-all;
+    border: 1px solid ${theme.color.lightgray1};
+    ${theme.font['subhead05-sb-14']}
+
+    max-width: 10rem;
+  }
+
+  & > td {
+    padding: 0.5rem;
+    text-align: center;
+    border: 1px solid ${theme.color.lightgray0};
+    word-break: break-all;
+    ${theme.font['subhead06-m-14']}
+  }
 `;
diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx
@@ -1,102 +1,102 @@
-import { useEffect } from 'react';
-
 import { useFetchMoimSubmitterList } from '@apis/domains/submitter/useFetchMoimSubmitter';
 import { usePatchMoimSubmitter } from '@apis/domains/submitter/usePatchMoimSubmitter';
 
 import {
   tableContainerStyle,
   tableLayoutStyle,
   tableStyle,
-  tdStyle,
-  thStyle,
   titleStyle,
+  trStyle,
 } from '@pages/admin/components/MoimSubmitter/MoimSubmitter.style';
 
+import { components } from '@schema';
+
+type MoImSubmitterListGetResponse = components['schemas']['MoimSubmissionAllResponse'];
+
 const MOIM_SUBMITTER_STATUS = {
   pendingPayment: '입금 대기',
   pendingApproval: '승인 대기',
+  approved: '승인',
+  rejected: '거절',
+  refunded: '환불',
+  completed: '완료',
 };
 
 const MoimSubmitter = () => {
-  const { data: moimSubmitterList, refetch } = useFetchMoimSubmitterList() || [];
+  const { data: moimSubmitterList } = useFetchMoimSubmitterList() || [];
   const { mutate } = usePatchMoimSubmitter();
 
-  useEffect(() => {
-    refetch();
-  }, [moimSubmitterList, refetch]);
+  const handleButtonClick = (moimSubmissionId: number) => {
+    mutate({ moimSubmissionId });
+  };
 
-  if (moimSubmitterList === null || moimSubmitterList === undefined) {
-    return null;
-  }
+  const renderApprovalStatus = (item: MoImSubmitterListGetResponse) => {
+    switch (item.moimSubmissionState) {
+      case 'pendingPayment':
+        return <button onClick={() => handleButtonClick(item.moimSubmissionId || 0)}>확인</button>;
 
-  const handleButtonClick = (moimSubmissionId: number) => {
-    mutate(
-      { moimSubmissionId },
-      {
-        onSuccess: () => {
-          refetch();
-        },
-      }
-    );
+      case 'pendingApproval':
+        return <div>확인</div>;
+
+      default:
+        return (
+          <div>
+            {MOIM_SUBMITTER_STATUS[item.moimSubmissionState as keyof typeof MOIM_SUBMITTER_STATUS]}
+          </div>
+        );
+    }
   };
+
   return (
     <div css={tableLayoutStyle}>
       <h1 css={titleStyle}>PICKPLE 참가자 입금 확인</h1>
       <div css={tableContainerStyle}>
         <table css={tableStyle}>
           <thead>
-            <tr>
-              <th css={thStyle}>신청 순서</th>
-              <th css={thStyle}>신청 일시</th>
-              <th css={thStyle}>참가자 ID</th>
-              <th css={thStyle}>닉네임</th>
-              <th css={thStyle}>카카오 닉네임</th>
-              <th css={thStyle}>클래스 ID</th>
-              <th css={thStyle}>클래스명</th>
-              <th css={thStyle}>스픽커명</th>
-              <th css={thStyle}>[1] 질문</th>
-              <th css={thStyle}>[1] 답변 </th>
-              <th css={thStyle}>[2] 질문</th>
-              <th css={thStyle}>[2] 답변 </th>
-              <th css={thStyle}>[3] 질문</th>
-              <th css={thStyle}>[3] 답변</th>
-              <th css={thStyle}>상태</th>
-              <th css={thStyle}>승인여부</th>
+            <tr css={trStyle}>
+              <th>신청 순서</th>
+              <th>신청 일시</th>
+              <th>참가자 ID</th>
+              <th>닉네임</th>
+              <th>카카오 닉네임</th>
+              <th>클래스 ID</th>
+              <th>클래스명</th>
+              <th>스픽커명</th>
+              <th>[1] 질문</th>
+              <th>[1] 답변 </th>
+              <th>[2] 질문</th>
+              <th>[2] 답변 </th>
+              <th>[3] 질문</th>
+              <th>[3] 답변</th>
+              <th>상태</th>
+              <th>승인여부</th>
             </tr>
           </thead>
           <tbody>
-            {moimSubmitterList.map((item, index) => (
-              <tr key={index}>
-                <td css={tdStyle}>{item.moimSubmissionId}</td>
-                <td css={tdStyle}>{item.date}</td>
-                <td css={tdStyle}>{item.guestId}</td>
-                <td css={tdStyle}>{item.guestNickname}</td>
-                <td css={tdStyle}>{item.kakaoNickname}</td>
-                <td css={tdStyle}>{item.moimId}</td>
-                <td css={tdStyle}>{item.moimTitle}</td>
-                <td css={tdStyle}>{item.hostNickname}</td>
-                <td css={tdStyle}>{item.questionList?.question1}</td>
-                <td css={tdStyle}>{item.answerList?.answer1}</td>
-                <td css={tdStyle}>{item.questionList?.question2}</td>
-                <td css={tdStyle}>{item.answerList?.answer2}</td>
-                <td css={tdStyle}>{item.questionList?.question3}</td>
-                <td css={tdStyle}>{item.answerList?.answer3}</td>
-                <td css={tdStyle}>
+            {moimSubmitterList?.map((item, index) => (
+              <tr key={index} css={trStyle}>
+                <td>{item.moimSubmissionId}</td>
+                <td>{item.date}</td>
+                <td>{item.guestId}</td>
+                <td>{item.guestNickname}</td>
+                <td>{item.kakaoNickname}</td>
+                <td>{item.moimId}</td>
+                <td>{item.moimTitle}</td>
+                <td>{item.hostNickname}</td>
+                <td>{item.questionList?.question1}</td>
+                <td>{item.answerList?.answer1}</td>
+                <td>{item.questionList?.question2}</td>
+                <td>{item.answerList?.answer2}</td>
+                <td>{item.questionList?.question3}</td>
+                <td>{item.answerList?.answer3}</td>
+                <td>
                   {
                     MOIM_SUBMITTER_STATUS[
                       item.moimSubmissionState as keyof typeof MOIM_SUBMITTER_STATUS
                     ]
                   }
                 </td>
-                <td css={tdStyle}>
-                  {item.moimSubmissionState === 'pendingApproval' ? (
-                    <div>확인</div>
-                  ) : (
-                    <button onClick={() => handleButtonClick(item.moimSubmissionId || 0)}>
-                      확인
-                    </button>
-                  )}
-                </td>
+                <td>{renderApprovalStatus(item)}</td>
               </tr>
             ))}
           </tbody>

diff --git a/src/pages/article/page/Picksight/Picksight.tsx b/src/pages/article/page/Picksight/Picksight.tsx
@@ -1,8 +1,10 @@
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button, Header, Image } from '@components';
 import ArticleParagraph from '@pages/article/components/ArticleParagraph/ArticleParagraph';
 import { IcDropdownRight } from '@svg';
+import { smoothScroll } from '@utils';
 import Footer from 'src/components/common/Footer/Footer';
 import { PicksightImage, PicksightMain } from 'src/constants/images';
 
@@ -20,6 +22,10 @@ import {
 const Picksight = () => {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    smoothScroll(0, false);
+  }, []);
+
   const handleSpickerApplyClick = () => {
     navigate('/mypage/host');
   };
@@ -44,7 +50,7 @@ const Picksight = () => {
         </div>
         <h3 css={articleSubtitle}>
           픽플에는 <strong css={articleStrong}>스픽커</strong>와
-          <strong css={articleStrong}>참가자</strong>가 있어요.
+          <strong css={articleStrong}> 참가자</strong>가 있어요.
         </h3>
         <Image src={PicksightImage} width="100%" />
 

diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.style.ts
@@ -10,7 +10,7 @@ export const cardContainerStyle = (theme: Theme) => css`
   width: 100%;
   padding: 1.5rem;
 
-  border: 0.5px solid ${theme.color.lightgray0};
+  border: 1px solid ${theme.color.lightgray0};
   border-radius: 10px;
 `;
 
@@ -36,7 +36,7 @@ export const spotAndDateSectionStyle = css`
 `;
 export const textSpanStyle = (theme: Theme) => css`
   color: ${theme.color.blackgray};
-  ${theme.font['body02-r-14']}
+  ${theme.font['subhead06-m-14']}
 `;
 
 export const iconAndSpanStyle = css`

diff --git a/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx b/src/pages/class/components/GuestClassRegisterCard/GuestClassRegisterCard.tsx
@@ -65,11 +65,7 @@ const GuestClassRegisterCard = ({
         <Image width="8.4rem" src={moimImageUrl ?? ''} customStyle={imageStyle} />
         <div css={titleAndProfileWrapperStyle}>
           <h4 css={titleStyle}>{title}</h4>
-          <SimpleUserProfile
-            username={hostNickname ?? ''}
-            size="medium"
-            userImgUrl={hostImageUrl}
-          />
+          <SimpleUserProfile username={hostNickname ?? ''} size="small" userImgUrl={hostImageUrl} />
         </div>
       </section>
       <section css={spotAndDateSectionStyle}>