refactor: 최적화 리팩터링

frontend/cypress/e2e/auth.cy.ts

@@ -1,10 +1,10 @@
 import login from '../utils/login';
 
 describe('비로그인 상태에서는 로그인 페이지로 이동한다.', () => {
-  it('리마인더', () => {
-    cy.visit('/reminder');
-    cy.get('#toast-root').contains('로그인 후 이용 가능').url().should('match', /login/);
-  });
+  // it('리마인더', () => {
+  //   cy.visit('/reminder');
+  //   cy.get('#toast-root').contains('로그인 후 이용 가능').url().should('match', /login/);
+  // });
 
   it('내 반려 식물 목록', () => {
     cy.visit('/pet');

frontend/cypress/e2e/reminder.cy.ts

@@ -0,0 +1,61 @@
+import { convertDateKorYear } from 'utils/date';
+import login from '../utils/login';
+
+describe('리마인더 테스트', () => {
+  beforeEach(() => {
+    login();
+    cy.visit('/reminder');
+  });
+
+  it('리마인더 페이지로 이동할 수 있다.', () => {
+    cy.visit('/');
+
+    cy.get('a').contains('리마인더').click().location('pathname').should('equal', '/reminder');
+  });
+
+  it('내 반려 식물 상세보기로 이동할 수 있다.', () => {
+    cy.get('a[aria-label="참새 나무 상세로 이동"]')
+      .click()
+      .location('pathname')
+      .should('equal', '/pet/1');
+  });
+
+  it('물 주기 등록을 할 수 있다.', () => {
+    const today = convertDateKorYear(new Date());
+    cy.get('div[aria-label="참새 나무의 정보"]')
+      .find('button[aria-label="물 준 날짜 선택"]')
+      .click()
+      .get('div[aria-label="달력"')
+      .should('be.visible')
+      .get(`span[aria-label="${today}"]`)
+      .click()
+
+      .get('#toast-root')
+      .contains('물주기 완료');
+  });
+
+  it('물 주기 날짜를 다음달 1일로 변경할 수 있다.', () => {
+    const curMonth = new Date().getMonth();
+    const nextMonth = curMonth === 11 ? 1 : curMonth + 2;
+    cy.get('div[aria-label="참새 나무의 정보"]')
+      .find('button[aria-label="알림을 줄 날짜 선택"]')
+      .click()
+      .get('div[aria-label="달력"')
+      .should('be.visible')
+      .get(`button[aria-label="다음 달 보기"]`)
+      .click()
+
+      .get('section[aria-live="assertive"]')
+      .find('span')
+      .contains(1)
+      .click()
+
+      .get('#toast-root')
+      .contains('01일로 물주기 날짜 변경')
+
+      .get(`section[aria-label="${Number(nextMonth)}월의 리마인더 정보"]`)
+      .find('div[aria-label="참새 나무의 정보"]')
+      .siblings('div[aria-label="01일"]')
+      .should('be.visible');
+  });
+});

frontend/public/fonts/font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'NanumSquareRound';
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url('/fonts/NanumSquareRoundR2.woff2') format('woff2');
+}

frontend/public/index.html

@@ -7,24 +7,13 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
     <link
-      href="https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2"
+      href="/fonts/NanumSquareRoundR2.woff2"
       rel="preload"
       as="font"
       type="font/woff2"
       crossorigin
     />
-    <link
-      href="https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2"
-      rel="preload"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      href="https://webfontworld.github.io/gmarket/GmarketSans.css"
-      rel="stylesheet"
-      type="text/css"
-    />
+    <link href="/fonts/font.css" rel="stylesheet" type="text/css" />
     <title>피움</title>
     <link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-icon-60x60.png" />

frontend/src/components/@common/Calendar/Calendar.stories.tsx

@@ -20,4 +20,8 @@ export default meta;
 
 type Story = StoryObj<typeof Calendar>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => {
+    return <Calendar selectedDate={null} dateCallback={null} />;
+  },
+};

frontend/src/components/@common/Calendar/Calendar.style.ts

@@ -14,7 +14,7 @@ export const HeaderBox = styled.header`
   width: 300px;
   margin: 0 auto 16px auto;
 
-  font: 900 2rem/3.2rem 'GmarketSans';
+  font: 900 2rem/3.2rem 'NanumSquareRound';
 `;
 
 export const CalendarBox = styled.section`
@@ -25,7 +25,7 @@ export const CalendarBox = styled.section`
   width: 300px;
   margin: 0 auto;
 
-  font: 500 1.6rem/2.4rem 'GmarketSans';
+  font: 500 1.6rem/2.4rem 'NanumSquareRound';
   text-align: center;
 `;
 

frontend/src/components/@common/ContentHeader/ContentHeader.style.ts

@@ -16,6 +16,6 @@ export const HeaderBox = styled.header`
 
 export const Title = styled.p`
   width: 100%;
-  font: normal 2.4rem /3.2rem 'GmarketSans';
+  font: normal 2.4rem /3.2rem 'NanumSquareRound';
   text-align: center;
 `;

frontend/src/components/@common/FormInputBox/FormInputBox.style.ts

@@ -33,7 +33,7 @@ export const RequireFlag = styled.span`
 
 export const Title = styled.p`
   margin-bottom: 16px;
-  font: 500 1.4rem/1.7rem 'GmarketSans';
+  font: 500 1.4rem/1.7rem 'NanumSquareRound';
 `;
 
 export const InputBox = styled.div`
@@ -42,6 +42,6 @@ export const InputBox = styled.div`
 `;
 
 export const ErrorMessage = styled.p`
-  font: 400 1.2rem/1.7rem 'GmarketSans';
+  font: 400 1.2rem/1.7rem 'NanumSquareRound';
   color: ${(props) => props.theme.color.accent};
 `;

frontend/src/components/@common/Image/index.tsx

@@ -2,7 +2,6 @@ import { forwardRef } from 'react';
 import type { StyledImageProps } from './Image.style';
 import { StyledImage } from './Image.style';
 import sadpiumiPng from 'assets/sadpiumi-imageFail.png';
-import sadpiumiWebp from 'assets/sadpiumi-imageFail.webp';
 
 type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onError'> &
   Partial<StyledImageProps>;
@@ -11,7 +10,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(props, ref
   const { type = 'circle', size = '77px', ...imageProps } = props;
 
   const setErrorImage: React.ReactEventHandler<HTMLImageElement> = ({ currentTarget }) => {
-    currentTarget.src = sadpiumiWebp || sadpiumiPng;
+    currentTarget.src = sadpiumiPng;
   };
 
   return (

frontend/src/components/@common/Modal/Modal.style.ts

@@ -54,5 +54,5 @@ export const CloseButton = styled.button`
   position: absolute;
   top: 10px;
   right: 28px;
-  font: 800 2rem/2.4rem 'GmarketSans';
+  font: 800 2rem/2.4rem 'NanumSquareRound';
 `;

frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts

@@ -14,13 +14,13 @@ export const HeaderBox = styled.section`
 
 export const FamilyName = styled.p`
   margin-bottom: 4px;
-  font: 500 1.2rem/1.6rem 'GmarketSans';
+  font: 500 1.2rem/1.6rem 'NanumSquareRound';
   color: ${(props) => props.theme.color.sub};
   text-align: left;
 `;
 
 export const Name = styled.p`
-  font: 900 2.4rem/4rem 'GmarketSans';
+  font: 900 2.4rem/4rem 'NanumSquareRound';
   color: ${(props) => props.theme.color.sub};
   text-align: left;
 `;

frontend/src/components/petPlant/PetPlantRegisterForm/PetPlantRegisterForm.style.ts

@@ -10,7 +10,7 @@ export const Wrapper = styled.form`
   width: 100%;
   height: 100%;
 
-  font: 500 1.8rem/2.2rem 'GmarketSans';
+  font: 500 1.8rem/2.2rem 'NanumSquareRound';
 `;
 
 export const DictionaryPlantImageArea = styled.div`

frontend/src/components/reminder/Card/Card.style.ts

@@ -1,4 +1,5 @@
 import { TodayStatus } from 'types/reminder';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { BackgroundProps } from 'pages/Reminder/Reminder.style';
 import theme from 'style/theme.style';
@@ -24,6 +25,15 @@ export const Wrapper = styled.div`
   border-radius: 8px 0 0 8px;
 `;
 
+export const LinkContainer = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 220px;
+  height: 100%;
+`;
+
 export const StatusBar = styled.div<BackgroundProps>`
   width: 6px;
   height: 100%;
@@ -46,7 +56,7 @@ export const ContentBox = styled.ul`
 `;
 
 export const NickName = styled.li`
-  font: 600 1.4rem/2.1rem 'GmarketSans';
+  font: 600 1.4rem/2.1rem 'NanumSquareRound';
   color: ${({ theme }) => theme.color.sub};
   text-overflow: ellipsis;
   white-space: nowrap;

frontend/src/components/reminder/Card/index.tsx

@@ -5,6 +5,7 @@ import type {
   WaterPlantParams,
 } from 'types/reminder';
 import { useContext } from 'react';
+import { generatePath } from 'react-router-dom';
 import DateInput from 'components/@common/DateInput';
 import Image from 'components/@common/Image';
 import {
@@ -15,6 +16,7 @@ import {
   Alert,
   NickName,
   DictionaryPlantName,
+  LinkContainer,
 } from './Card.style';
 import { ReminderContext } from 'contexts/reminderContext';
 import useAddToast from 'hooks/useAddToast';
@@ -25,6 +27,7 @@ import {
   isDateFormat,
 } from 'utils/date';
 import { DateValidate } from 'utils/validate';
+import { URL_PATH } from 'constants/index';
 
 interface ReminderCardProps {
   data: ReminderExtendType;
@@ -99,20 +102,25 @@ const ReminderCard = ({ data }: ReminderCardProps) => {
     status === 'today' ? convertSubFix(status) : `${Math.abs(dday)}${convertSubFix(status)}`;
 
   return (
-    <Wrapper>
-      <StatusBar status={status} />
-      <Image src={image} size="64px" type="circle" alt={nickName} />
-      <ContentBox role="list" tabIndex={0}>
-        <NickName role="listitem" aria-label="반려 식물 닉네임">
-          {nickName}
-        </NickName>
-        <DictionaryPlantName role="listitem" aria-label="반려 식물 사전 이름">
-          {dictionaryPlantName}
-        </DictionaryPlantName>
-        <Alert status={status} role="listitem" aria-label="물을 줘야하는 날">
-          {alertMessage}
-        </Alert>
-      </ContentBox>
+    <Wrapper aria-label={`${nickName}의 정보`}>
+      <LinkContainer
+        to={generatePath(URL_PATH.petDetail, { id: String(petPlantId) })}
+        aria-label={`${nickName} 상세로 이동`}
+      >
+        <StatusBar status={status} />
+        <Image src={image} size="64px" type="circle" alt={nickName} />
+        <ContentBox role="list" tabIndex={0}>
+          <NickName role="listitem" aria-label="반려 식물 닉네임">
+            {nickName}
+          </NickName>
+          <DictionaryPlantName role="listitem" aria-label="반려 식물 사전 이름">
+            {dictionaryPlantName}
+          </DictionaryPlantName>
+          <Alert status={status} role="listitem" aria-label="물을 줘야하는 날">
+            {alertMessage}
+          </Alert>
+        </ContentBox>
+      </LinkContainer>
       <ActionBox>
         <DateInput
           value=""

frontend/src/components/reminder/CardBox/CardBox.style.ts

@@ -20,7 +20,7 @@ export const InfoBox = styled.div`
 export const DateLabel = styled.span`
   position: absolute;
   top: 8px;
-  font: 700 2rem/2rem 'GmarketSans';
+  font: 700 2rem/2rem 'NanumSquareRound';
 `;
 
 export const CheckButton = styled.button`

frontend/src/components/reminder/MonthBox/MonthBox.style.ts

@@ -12,5 +12,5 @@ export const MonthReminderBox = styled.section`
 
 export const MonthTitle = styled.p`
   width: 100%;
-  font: 900 2.8rem/4rem 'GmarketSans';
+  font: 900 2.8rem/4rem 'NanumSquareRound';
 `;

frontend/src/components/reminder/MonthBox/index.tsx

@@ -20,7 +20,7 @@ const MonthBox = ({ month, reminderDates }: MonthBoxProps) => {
   });
 
   return (
-    <MonthReminderBox role="feed">
+    <MonthReminderBox role="feed" aria-label={`${Number(month)}월의 리마인더 정보`}>
       <MonthTitle>{Number(month)}월</MonthTitle>
       {cardBoxes}
     </MonthReminderBox>

frontend/src/components/search/SearchBox/index.tsx

@@ -62,6 +62,7 @@ const SearchBox = (props: SearchBoxProps) => {
           value={searchName}
           onChange={handleSearchNameChange}
           onKeyDown={searchOnEnter}
+          aria-label="사전 식물 검색"
         />
         {onNextClick && (
           <EnterButton type="button" aria-label="이동하기" onClick={handleNextButtonClick}>

frontend/src/mocks/handlers.ts

@@ -209,6 +209,7 @@ export const makeHandler = (delay = 0, failRate = 0) => {
       }
 
       // 로그이웃 실행 시에 지금 당장 만료되는 쿠키 설정
+      localStorage.removeItem('MSW_COOKIE_STORE');
       return res(
         ctx.delay(delay),
         ctx.status(200),

frontend/src/pages/Error/Error.style.ts

@@ -5,10 +5,12 @@ export const Wrapper = styled.main`
   flex-direction: column;
   row-gap: 30px;
   align-items: center;
+  justify-content: center;
 
   min-width: ${({ theme }) => theme.width.mobile};
   max-width: ${({ theme }) => theme.width.pad};
-  margin: 0 auto 0 auto;
+  height: 100%;
+  margin: 0 auto;
 `;
 
 export const Section = styled.div`
@@ -17,13 +19,20 @@ export const Section = styled.div`
   row-gap: 15px;
   align-items: center;
 
-  width: 90%;
+  width: 334px;
 
   text-align: center;
 `;
 
+export const ButtonSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 334px;
+`;
+
 export const SadPiumiImage = styled.img`
   width: 250px;
+  height: 160px;
 `;
 
 export const Title = styled.h1`
@@ -35,7 +44,7 @@ export const Text = styled.p`
 `;
 
 export const Button = styled.button`
-  width: ${({ theme }) => theme.width.mobile};
+  width: 150px;
   height: 50px;
 
   font-size: 1.6rem;