woowacourse-teams · WaiNaat · Sep 20, 2023 · Sep 18, 2023 · Sep 18, 2023 · Sep 18, 2023
diff --git a/README.md b/README.md
@@ -4,18 +4,18 @@
 
 ## 피움의 집사들을 소개합니다 🤗
 
-|                                                Backend                                                |                                                Backend                                                 |                                                Backend                                                |                                                                Backend                                                                |                                               Frontend                                               |                                               Frontend                                               |                                               Frontend                                               |
-|:-----------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|
+|                                                              Backend                                                              |                                                               Backend                                                               |                                                            Backend                                                            |                                                                 Backend                                                                  |                                                              Frontend                                                               |                                                             Frontend                                                             |                                                            Frontend                                                             |
+| :-------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://github.com/yeonkkk"><img src="https://avatars.githubusercontent.com/u/88660886?v=4" width=400px alt="조이"/></a> | <a href="https://github.com/kim0914"><img src="https://avatars.githubusercontent.com/u/68818952?v=4" width=400px alt="그레이"/></a> | <a href="github.com/Choi-JJunho"><img src="https://avatars.githubusercontent.com/u/49794401?v=4" width=400px alt="주노"/></a> | <a href="https://github.com/rawfishthelgh"><img src="https://avatars.githubusercontent.com/u/79038908?v=4" width=400px alt="하마드"></a> | <a href="https://github.com/hozzijeong"><img src="https://avatars.githubusercontent.com/u/50974359?v=4" width=400px alt="클린"></a> | <a href="https://github.com/WaiNaat"><img src="https://avatars.githubusercontent.com/u/77872742?v=4" width=400px alt="참새"></a> | <a href="https://github.com/bassyu"><img src="https://avatars.githubusercontent.com/u/54442420?v=4" width=400px alt="쵸파"></a> |
-|                                   [조이](https://github.com/yeonkkk)                                    |                                   [그레이](https://github.com/kim0914)                                    |                                 [주노](https://github.com/Choi-JJunho)                                  |                                                [하마드](https://github.com/rawfishthelgh)                                                |                                 [클린](https://github.com/hozzijeong)                                  |                                   [참새](https://github.com/WaiNaat)                                   |                                   [쵸파](https://github.com/bassyu)                                    |
+|                                                [조이](https://github.com/yeonkkk)                                                 |                                                [그레이](https://github.com/kim0914)                                                 |                                            [주노](https://github.com/Choi-JJunho)                                             |                                                [하마드](https://github.com/rawfishthelgh)                                                |                                                [클린](https://github.com/hozzijeong)                                                |                                                [참새](https://github.com/WaiNaat)                                                |                                                [쵸파](https://github.com/bassyu)                                                |
 
 # 피움 서비스 소개
 
 <img src="https://github.com/woowacourse-teams/2023-pium/assets/68818952/987ff41e-08fb-43dd-a4cf-07e7cc4a1dab" width="400px">
 
 식물 관리법은 환경에 따라 다르기 때문에 경험을 통해서 터득할 수밖에 없어요.
 
-여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠? 
+여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠?
 
 '피움'은 이러한 가치를 바탕으로 탄생하게 되었습니다.
 
@@ -32,7 +32,7 @@
 ```shell
 git clone https://github.com/woowacourse-teams/2023-pium.git
 
-cd 2023-pium/frontend 
+cd 2023-pium/frontend
 ```
 
 ### env파일 설정
@@ -47,6 +47,7 @@ vim env/local.env
 
 - local.env 파일 내부에 다음과 같이 설정한다.
 - 카카오 rest_key는 [카카오 로그인 문서](https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api)를 확인하고 적용해야 한다.
+
 ```env
 KAKAO_REST_KEY={본인_카카오_REST_KEY}
 KAKAO_REDIRECT_URL=http://localhost:8282/authorization
@@ -56,7 +57,7 @@ HOST=http://localhost:8080/
 ### 실행
 
 ```shell
-npm install 
+npm install
 
 npm run local
 ```
@@ -76,6 +77,7 @@ vim src/main/resources/application.properties
 ```
 
 아래 내용을 참고하여 properties 파일을 작성한다.
+
 ```properties
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 spring.datasource.url=jdbc:mysql://{서버_HOST}/{DATABASE}?characterEncoding=UTF-8&serverTimezone=Asia/Seoul
@@ -99,10 +101,19 @@ server.servlet.session.cookie.same-site=none
 server.servlet.session.cookie.secure=true
 ```
 
-
 ### 프로젝트 실행
+
 ```shell
 ./gradlew build
 
 java -jar build/libs/pium.jar
 ```
+
+---
+
+폰트: [네이버 나눔 스퀘어 라운드](https://hangeul.naver.com/font)를 수정하여 사용했습니다.
+
+라이선스 (License)
+자세한 사항은 해당 문서를 참조하십시오.
+
+See [LICENSE](https://help.naver.com/service/30016/contents/18088?osType=PC&lang=ko) for more information.
diff --git a/frontend/.storybook/SvgIcon.tsx b/frontend/.storybook/SvgIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const SvgIcons = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
+    <defs>
       <symbol id="account-circle" viewBox="0 0 24 24">
         <path d="M5.85 17.1q1.275-.975 2.85-1.538T12 15q1.725 0 3.3.563t2.85 1.537q.875-1.025 1.363-2.325T20 12q0-3.325-2.337-5.663T12 4Q8.675 4 6.337 6.337T4 12q0 1.475.488 2.775T5.85 17.1ZM12 13q-1.475 0-2.488-1.012T8.5 9.5q0-1.475 1.012-2.488T12 6q1.475 0 2.488 1.012T15.5 9.5q0 1.475-1.012 2.488T12 13Zm0 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z" />
       </symbol>
@@ -179,7 +179,13 @@ const SvgIcons = () => {
           d="M13.5 6.94a1 1 0 0 0-.32-.74L7 .5L.82 6.2a1 1 0 0 0-.32.74v5.56a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1Z"
         ></path>
       </symbol>
-    </svg>
+      <symbol viewBox="0 0 24 24" id="add-circle">
+        <path d="M11 13v3q0 .425.288.713T12 17q.425 0 .713-.288T13 16v-3h3q.425 0 .713-.288T17 12q0-.425-.288-.713T16 11h-3V8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8v3H8q-.425 0-.713.288T7 12q0 .425.288.713T8 13h3Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"></path>
+      </symbol>
+      <symbol viewBox="0 0 24 24" id="survey">
+        <path d="M17 2v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.993.993 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7V2h10ZM7 6H5v14h14V6h-2v2H7V6Zm2 10v2H7v-2h2Zm0-3v2H7v-2h2Zm0-3v2H7v-2h2Zm6-6H9v2h6V4Z"></path>
+      </symbol>
+    </defs>
   );
 };
 

diff --git a/frontend/cypress/e2e/reminder.cy.ts b/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');
+  });
+});
diff --git a/frontend/generateSiteMap.js b/frontend/generateSiteMap.js
@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+
+const prettier = require('prettier');
+
+const SitemapGeneratedDate = new Date().toISOString();
+const DOMAIN = 'https://pium.life.com';
+
+const formatting = (target) => prettier.format(target, { parser: 'html' });
+
+const pages = ['/', '/login', '/garden', '/dict', '/dict/:id', '/dict/new-plant-request'].map(
+  (page) => DOMAIN + page
+);
+
+const pageSitemap = pages
+  .map(
+    (page) => `
+      <url>
+        <loc>${page}</loc>
+        <lastmod>${SitemapGeneratedDate}</lastmod>
+      </url>
+    `
+  )
+  .join('');
+
+const generateSiteMap = `
+  <?xml version="1.0" encoding="UTF-8"?>
+  <urlset
+    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">        
+    ${pageSitemap}
+  </urlset>`;
+
+const formattedSitemap = formatting(generateSiteMap);
+
+fs.writeFileSync('public/seo/sitemap.xml', formattedSitemap, 'utf8');
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
     "test": "echo test is not prepared",
     "local": "cross-env webpack-dev-server --mode=development --env environment=local",
     "dev": "cross-env webpack-dev-server --mode=production --env environment=development",
+    "prebuild-prod": "node generateSiteMap.js",
     "build-dev": "cross-env NODE_ENV=production webpack --env environment=development",
     "build-prod": "cross-env NODE_ENV=production webpack --env environment=production",
     "storybook": "storybook dev -p 6006",

diff --git a/frontend/public/fonts/NanumSquareRoundMissingGlyph.woff2 b/frontend/public/fonts/NanumSquareRoundMissingGlyph.woff2
diff --git a/frontend/public/fonts/font.css b/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/NanumSquareRoundMissingGlyph.woff2') format('woff2');
+}
diff --git a/frontend/public/index.html b/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/NanumSquareRoundMissingGlyph.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" />
@@ -43,6 +32,20 @@
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png" />
     <meta name="theme-color" content="#ffffff" />
+
+    <meta name="naver-site-verification" content="67857523b161515edc96516a89e500915caacc20" />
+    <meta name="robots" content="noindex, nofollow" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://pium.life/" />
+    <meta property="og:title" content="피움🌱" />
+    <meta property="og:image" content="icons/thumbnail.jpg" />
+    <meta
+      name="og:description"
+      content="피움은 여러분의 관리 경험을 기록할 수 있도록 도와주고 각자에게 알맞은 관리법을 빠르게 찾도록 도와주고 있어요."
+    />
+    <meta property="og:site_name" content="Pium" />
+    <meta property="og:locale" content="ko_KR" />
   </head>
   <body>
     <noscript>화면을 보기 위해서는 자바스크립트를 켜 주셔야 해요!</noscript>

diff --git a/frontend/public/seo/robots.txt b/frontend/public/seo/robots.txt
@@ -0,0 +1,13 @@
+# *
+User-agent: *
+Disallow: /404
+
+# *
+User-agent: *
+Allow: /
+
+# Host
+Host: https://pium.life/
+
+# Sitemaps
+Sitemap: https://pium.life/sitemap.xml
diff --git a/frontend/public/seo/sitemap.xml b/frontend/public/seo/sitemap.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
+>
+  <url>
+    <loc>https://pium.life.com/</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+
+  <url>
+    <loc>https://pium.life.com/login</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+
+  <url>
+    <loc>https://pium.life.com/garden</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+
+  <url>
+    <loc>https://pium.life.com/dict</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+
+  <url>
+    <loc>https://pium.life.com/dict/:id</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+
+  <url>
+    <loc>https://pium.life.com/dict/new-plant-request</loc>
+    <lastmod>2023-09-20T03:44:49.995Z</lastmod>
+  </url>
+</urlset>
diff --git a/frontend/src/components/@common/Calendar/Calendar.stories.tsx b/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} />;
+  },
+};
diff --git a/frontend/src/components/@common/Calendar/Calendar.style.ts b/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;
 `;
 

diff --git a/frontend/src/components/@common/ContentHeader/ContentHeader.style.ts b/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;
 `;
diff --git a/frontend/src/components/@common/FormInputBox/FormInputBox.style.ts b/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};
 `;
diff --git a/frontend/src/components/@common/Image/index.tsx b/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 (

diff --git a/frontend/src/components/@common/Modal/Modal.style.ts b/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';
 `;