[Fix/#287] 기능 QA (#289)

* fix: 기능 qa 반영 * fix: 클래스 뷰 리뷰 탭 suspense 수정 * fix: 리뷰 쓰기 버튼 클릭 시 라우팅 수정 * fix: 클래스 뷰 탭 height 수정 * fix: line-height 삭제
PICK-PLE · Sep 15, 2024 · 71028e7 · 71028e7
1 parent 180c632
commit 71028e7
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 14 deletions.
diff --git a/public/image/graphics/img_review_empty.png → public/image/graphics/image_review_empty.png b/public/image/graphics/img_review_empty.png → public/image/graphics/image_review_empty.png
diff --git a/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts b/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts
@@ -58,13 +58,11 @@ export const hostNameStyle = (theme: Theme) => css`
 export const hostKeywordStyle = (theme: Theme) => css`
   color: ${theme.color.purple2};
   ${theme.font['body03-r-12']};
-  line-height: 140%;
 `;
 
 export const hostDescriptionWrapper = (theme: Theme) => css`
   color: ${theme.color.midgray2};
   ${theme.font['body03-r-12']};
-  line-height: 140%;
 
   display: -webkit-box;
   -webkit-line-clamp: 2;

diff --git a/src/pages/class/page/Class/Class.style.ts b/src/pages/class/page/Class/Class.style.ts
@@ -74,6 +74,8 @@ export const tabButtonStyle = (isSelected: boolean) => (theme: Theme) => css`
 
 export const tabSectionStyle = (theme: Theme) => css`
   background-color: ${theme.color.bg_white0};
+  width: 100%;
+  min-height: 75rem;
   padding: 2.8rem 2rem;
 `;
 

diff --git a/src/pages/class/page/Class/Class.tsx b/src/pages/class/page/Class/Class.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -64,9 +64,7 @@ const Class = () => {
   const { data: moimDescription, isLoading: isMoimDescriptionLoading } = useFetchMoimDescription(
     moimId ?? ''
   );
-  const { data: moimNoticeList, isLoading: isMoimNoticeListLoading } = useFetchMoimNoticeList(
-    moimId ?? ''
-  );
+  const { data: moimNoticeList } = useFetchMoimNoticeList(moimId ?? '');
   if (isMoimDetailLoading || isMoimDescriptionLoading) {
     return <Spinner />;
   }
@@ -100,7 +98,6 @@ const Class = () => {
       showToast();
     }
   };
-
   return (
     <div>
       <LogoHeader />
@@ -161,14 +158,16 @@ const Class = () => {
         <section css={[tabSectionStyle, selectTab === '클래스소개' && infoSectionStyle]}>
           {selectTab === '클래스소개' && <ClassInfo content={moimDescription ?? ''} />}
           {selectTab === '공지사항' &&
-            (isMoimNoticeListLoading ? (
-              <Spinner variant="component" />
-            ) : (moimNoticeList || []).length === 0 ? (
+            ((moimNoticeList || []).length === 0 ? (
               <ClassNoticeEmptyView />
             ) : (
               <ClassNotice noticeData={moimNoticeList || []} moimId={moimId ?? ''} />
             ))}
-          {selectTab === '리뷰' && <ClassReviewTab moimId={moimId ?? ''} />}
+          {selectTab === '리뷰' && (
+            <Suspense fallback={<Spinner />}>
+              <ClassReviewTab moimId={moimId ?? ''} />
+            </Suspense>
+          )}
         </section>
         {selectTab === '공지사항' && moimDetail?.hostId === hostId && (
           <div

diff --git a/src/pages/guest/components/MoimCard/MoimCard.tsx b/src/pages/guest/components/MoimCard/MoimCard.tsx
@@ -40,6 +40,9 @@ const MoimCard = ({ guestMyClassData }: MoimCardProps) => {
   const handleCardClick = () => {
     navigate(`/class/${moimId}`);
   };
+  const handleWriteReviewClick = () => {
+    navigate(`/mypage/guest/myclass/${moimId}/review/write`);
+  };
 
   return (
     <div css={moimCardLayout}>
@@ -81,7 +84,7 @@ const MoimCard = ({ guestMyClassData }: MoimCardProps) => {
         </Button>
       ) : null}
       {moimSubmissionState === 'completed' && (
-        <Button variant="xSmall" onClick={handleButtonClick}>
+        <Button variant="xSmall" onClick={handleWriteReviewClick}>
           리뷰 쓰기
         </Button>
       )}

diff --git a/src/pages/host/components/StepTwo/StepTwo.tsx b/src/pages/host/components/StepTwo/StepTwo.tsx
@@ -107,7 +107,7 @@ const StepTwo = ({ onNext }: StepProps) => {
               onChange={(e) => handleInputChange(e, 'email')}
               placeholder="ex. [email protected]"
               isValid={isEmailValid}
-              errorMessage="유효한 이메일 주소를 \n입력해 주세요."
+              errorMessage="유효한 이메일 주소를 입력해 주세요."
               isCountValue={false}
             />
           </section>

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -135,7 +135,7 @@ const theme = {
       ${PretendardFont};
       font-size: 1.2rem;
       font-weight: 400;
-      line-height: normal;
+      line-height: 140%;
       letter-spacing: 0px;
     `,
     'body04-m-12': css`