[FE] 목록 조회 totalPages 오류 수정 및 EmptyMemberRecord 개선

frontend/src/components/common/Footer/Footer.tsx

@@ -1,5 +1,5 @@
-import color from '@Styles/color';
 import { styled } from 'styled-components';
+
 import Typography from '../Typography/Typography';
 
 const URL = {
@@ -17,12 +17,12 @@ const Footer = () => {
         Copyright © 2023 하루스터디 - All rights reserved.
       </Typography>
       <LinkContainer>
-        <a target="_blank" href={URL.github}>
+        <a target="_blank" href={URL.github} rel="noreferrer">
           <Typography variant="p3" fontSize="12px">
             Github
           </Typography>
         </a>
-        <a target="_blank" href={URL.feedback}>
+        <a target="_blank" href={URL.feedback} rel="noreferrer">
           <Typography variant="p3" fontSize="12px">
             사용자 피드백
           </Typography>

frontend/src/components/record/hooks/useMemberListRecord.ts

@@ -36,7 +36,7 @@ const useMemberListRecord = ({ memberId }: Props) => {
 
     setMemberRecords(studyRecords || []);
     if (totalPagesNumber === 1 || pageInfo.totalPages !== pageInfo.totalPages + 1)
-      setTotalPagesNumber(pageInfo.totalPages + 1);
+      setTotalPagesNumber(pageInfo.totalPages);
   }, [result]);
 
   return { memberRecords, isLoading, totalPagesNumber, shiftPage, currentPageNumber: page };

frontend/src/components/record/member/period/EmptyMemberRecord/EmptyMemberRecord.tsx

@@ -21,19 +21,14 @@ const EmptyMemberRecord = () => {
           text-align: center;
         `}
       >
-        아직 완료한 스터디가 없어요.
+        완료한 스터디가 없어요.
         <br />
-        스터디를 개설하거나 참여하여 스터디를 진행해보세요.
+        스터디를 시작해 보세요.
       </Typography>
       <ButtonContainer>
-        <Link to={ROUTES_PATH.create}>
+        <Link to={ROUTES_PATH.mode}>
           <Button variant="primary" size="small" $block={false}>
-            스터디 개설하기
-          </Button>
-        </Link>
-        <Link to={ROUTES_PATH.participation}>
-          <Button variant="outlined" size="small" $block={false}>
-            스터디 참여하기
+            스터디 시작하기
           </Button>
         </Link>
       </ButtonContainer>
@@ -49,15 +44,36 @@ const Layout = styled.div`
   align-items: center;
   gap: 20px;
 
-  padding-top: 80px;
+  padding-top: 40px;
 
   svg {
     width: 80px;
     height: 80px;
   }
+
+  @media screen and (max-width: 768px) {
+    gap: 20px;
+
+    padding-top: 20px;
+
+    p {
+      font-size: 1.6rem;
+    }
+
+    svg {
+      width: 60px;
+      height: 60px;
+    }
+  }
 `;
 
 const ButtonContainer = styled.div`
   display: flex;
   gap: 20px;
+
+  @media screen and (max-width: 768px) {
+    button {
+      font-size: 1.6rem;
+    }
+  }
 `;

frontend/src/components/record/member/period/MemberRecordPeriod/MemberRecordPeriod.tsx

@@ -23,12 +23,14 @@ const MemberRecordPeriod = ({ memberId }: Props) => {
   return (
     <Layout>
       <PeriodSelectionBar />
-      <PaginationButton
-        totalPagesNumber={totalPagesNumber}
-        currentPageNumber={currentPageNumber}
-        isLoading={isLoading}
-        shiftPage={shiftPage}
-      />
+      {totalPagesNumber !== 0 && (
+        <PaginationButton
+          totalPagesNumber={totalPagesNumber}
+          currentPageNumber={currentPageNumber}
+          isLoading={isLoading}
+          shiftPage={shiftPage}
+        />
+      )}
       <MemberRecordPeriodList memberRecords={memberRecords} isLoading={isLoading} />
       {memberRecords && memberRecords.length > 3 && (
         <PaginationButton

frontend/src/mocks/handlers/queryHandler.ts

@@ -10,6 +10,7 @@ import {
   STUDY_LIST_8,
   STUDY_LIST_9,
   STUDY_LIST_ALL,
+  STUDY_LIST_EMPTY,
   STUDY_LIST_ONE_MONTH,
   STUDY_LIST_THREE_MONTH,
   STUDY_LIST_WEEK,
@@ -51,6 +52,11 @@ export const queryHandler = [
           studyRecords: STUDY_LIST_ONE_MONTH.studyRecords.slice(20 * page, 20 * (page + 1)),
           pageInfo: STUDY_LIST_ONE_MONTH.pageInfo,
         }
+      : startDate === format.date(new Date('2023-07-01'), '-')
+      ? {
+          studyRecords: STUDY_LIST_EMPTY.studyRecords,
+          pageInfo: STUDY_LIST_EMPTY.pageInfo,
+        }
       : {
           studyRecords: STUDY_LIST_WEEK.studyRecords.slice(20 * page, 20 * (page + 1)),
           pageInfo: STUDY_LIST_WEEK.pageInfo,

frontend/src/mocks/mockData.ts

@@ -195,7 +195,7 @@ export const STUDY_LIST_ALL: {
     };
   }),
   pageInfo: {
-    totalPages: 10,
+    totalPages: 11,
   },
 };
 
@@ -222,7 +222,7 @@ export const STUDY_LIST_THREE_MONTH: {
     };
   }),
   pageInfo: {
-    totalPages: 2,
+    totalPages: 3,
   },
 };
 
@@ -249,7 +249,26 @@ export const STUDY_LIST_ONE_MONTH: {
     };
   }),
   pageInfo: {
-    totalPages: 1,
+    totalPages: 2,
+  },
+};
+
+// 1개월 목록 조회
+export const STUDY_LIST_EMPTY: {
+  studyRecords: {
+    studyId: string;
+    name: string;
+    timePerCycle: number;
+    totalCycle: number;
+    createdDate: string;
+  }[];
+  pageInfo: {
+    totalPages: number;
+  };
+} = {
+  studyRecords: [],
+  pageInfo: {
+    totalPages: 0,
   },
 };