diff --git a/README.md b/README.md index 9559038d7..e86a963bb 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ ## 피움의 집사들을 소개합니다 🤗 -| Backend | Backend | Backend | Backend | Frontend | Frontend | Frontend | -|:-----------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:| +| Backend | Backend | Backend | Backend | Frontend | Frontend | Frontend | +| :-------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: | | 조이 | 그레이 | 주노 | 하마드 | 클린 | 참새 | 쵸파 | -| [조이](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) | # 피움 서비스 소개 @@ -15,7 +15,7 @@ 식물 관리법은 환경에 따라 다르기 때문에 경험을 통해서 터득할 수밖에 없어요. -여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠? +여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠? '피움'은 이러한 가치를 바탕으로 탄생하게 되었습니다. @@ -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 index 9d86cd193..e6435fc8d 100644 --- a/frontend/.storybook/SvgIcon.tsx +++ b/frontend/.storybook/SvgIcon.tsx @@ -2,7 +2,7 @@ import React from 'react'; const SvgIcons = () => { return ( - + @@ -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" > - + + + + + + + ); }; diff --git a/frontend/cypress/e2e/reminder.cy.ts b/frontend/cypress/e2e/reminder.cy.ts new file mode 100644 index 000000000..5c1af1ff0 --- /dev/null +++ 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 new file mode 100644 index 000000000..2e203123e --- /dev/null +++ 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) => ` + + ${page} + ${SitemapGeneratedDate} + + ` + ) + .join(''); + +const generateSiteMap = ` + + + ${pageSitemap} + `; + +const formattedSitemap = formatting(generateSiteMap); + +fs.writeFileSync('public/seo/sitemap.xml', formattedSitemap, 'utf8'); diff --git a/frontend/package.json b/frontend/package.json index 755b19422..cd9c1c648 100644 --- 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 new file mode 100644 index 000000000..7771a783e Binary files /dev/null and b/frontend/public/fonts/NanumSquareRoundMissingGlyph.woff2 differ diff --git a/frontend/public/fonts/font.css b/frontend/public/fonts/font.css new file mode 100644 index 000000000..64dae0dcf --- /dev/null +++ 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 index 502827ca4..763d966f2 100644 --- 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" /> - - + 피움 @@ -43,6 +32,20 @@ + + + + + + + + + + + diff --git a/frontend/public/seo/robots.txt b/frontend/public/seo/robots.txt new file mode 100644 index 000000000..385a2cd9d --- /dev/null +++ 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 \ No newline at end of file diff --git a/frontend/public/seo/sitemap.xml b/frontend/public/seo/sitemap.xml new file mode 100644 index 000000000..7a1170786 --- /dev/null +++ b/frontend/public/seo/sitemap.xml @@ -0,0 +1,36 @@ + + + + https://pium.life.com/ + 2023-09-20T03:44:49.995Z + + + + https://pium.life.com/login + 2023-09-20T03:44:49.995Z + + + + https://pium.life.com/garden + 2023-09-20T03:44:49.995Z + + + + https://pium.life.com/dict + 2023-09-20T03:44:49.995Z + + + + https://pium.life.com/dict/:id + 2023-09-20T03:44:49.995Z + + + + https://pium.life.com/dict/new-plant-request + 2023-09-20T03:44:49.995Z + + diff --git a/frontend/src/components/@common/Calendar/Calendar.stories.tsx b/frontend/src/components/@common/Calendar/Calendar.stories.tsx index 2b49d3837..9dc8d2625 100644 --- 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; -export const Default: Story = {}; +export const Default: Story = { + render: () => { + return ; + }, +}; diff --git a/frontend/src/components/@common/Calendar/Calendar.style.ts b/frontend/src/components/@common/Calendar/Calendar.style.ts index a6cc5df66..94b8ff611 100644 --- 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 index 0d0466fe2..04f0ebcef 100644 --- 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 index 64e25846a..7fcfc3939 100644 --- 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 index 56d74e050..baac43411 100644 --- 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, 'onError'> & Partial; @@ -11,7 +10,7 @@ const Image = forwardRef(function Image(props, ref const { type = 'circle', size = '77px', ...imageProps } = props; const setErrorImage: React.ReactEventHandler = ({ 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 index 1c9894034..9109e797b 100644 --- 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'; `; diff --git a/frontend/src/components/@common/SvgIcons/SvgFill/index.tsx b/frontend/src/components/@common/SvgIcons/SvgFill/index.tsx index 19c7d5f78..b4e4ba756 100644 --- a/frontend/src/components/@common/SvgIcons/SvgFill/index.tsx +++ b/frontend/src/components/@common/SvgIcons/SvgFill/index.tsx @@ -35,6 +35,7 @@ export const ICONS = [ 'water', 'wind', 'add-circle', + 'survey', ] as const; type IconIds = (typeof ICONS)[number]; diff --git a/frontend/src/components/@common/SvgIcons/SvgSpriteMap.tsx b/frontend/src/components/@common/SvgIcons/SvgSpriteMap.tsx index 5c6800cc2..e629f90d1 100644 --- a/frontend/src/components/@common/SvgIcons/SvgSpriteMap.tsx +++ b/frontend/src/components/@common/SvgIcons/SvgSpriteMap.tsx @@ -183,6 +183,9 @@ const SvgIcons = () => ( + + + props.theme.color.sub}; text-align: left; `; diff --git a/frontend/src/components/petPlant/PetPlantRegisterForm/PetPlantRegisterForm.style.ts b/frontend/src/components/petPlant/PetPlantRegisterForm/PetPlantRegisterForm.style.ts index 3620e6c70..9d687609f 100644 --- a/frontend/src/components/petPlant/PetPlantRegisterForm/PetPlantRegisterForm.style.ts +++ b/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` diff --git a/frontend/src/components/reminder/Card/Card.style.ts b/frontend/src/components/reminder/Card/Card.style.ts index d375e2dac..56b7c1ecf 100644 --- a/frontend/src/components/reminder/Card/Card.style.ts +++ b/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` 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; diff --git a/frontend/src/components/reminder/Card/index.tsx b/frontend/src/components/reminder/Card/index.tsx index ee5edd792..029593f49 100644 --- a/frontend/src/components/reminder/Card/index.tsx +++ b/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 ( - - - {nickName} - - - {nickName} - - - {dictionaryPlantName} - - - {alertMessage} - - + + + + {nickName} + + + {nickName} + + + {dictionaryPlantName} + + + {alertMessage} + + + { }); return ( - + {Number(month)}월 {cardBoxes} diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts index da37a5a28..d255b0b60 100644 --- a/frontend/src/mocks/handlers.ts +++ b/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), diff --git a/frontend/src/pages/Error/Error.style.ts b/frontend/src/pages/Error/Error.style.ts index f6e487914..6939c4d69 100644 --- a/frontend/src/pages/Error/Error.style.ts +++ b/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; diff --git a/frontend/src/pages/Error/NotFound.tsx b/frontend/src/pages/Error/NotFound.tsx index 29af068e3..f093eaab7 100644 --- a/frontend/src/pages/Error/NotFound.tsx +++ b/frontend/src/pages/Error/NotFound.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { Button, SadPiumiImage, Section, Text, Title, Wrapper } from './Error.style'; +import { Button, ButtonSection, SadPiumiImage, Section, Text, Title, Wrapper } from './Error.style'; import useResetErrorBoundary from 'hooks/useResetErrorBoundary'; import { URL_PATH } from 'constants/index'; import SadPiumiImagePng from 'assets/sadpiumi.png'; @@ -23,7 +23,12 @@ const NotFound = () => { - +
이런! @@ -33,14 +38,14 @@ const NotFound = () => { 주소가 올바른지 확인해 보세요 잠시 후에 다시 시도해 주세요
-
+ -
+ ); }; diff --git a/frontend/src/pages/Error/Unauthorize.tsx b/frontend/src/pages/Error/Unauthorize.tsx index af90e9483..9cc87570a 100644 --- a/frontend/src/pages/Error/Unauthorize.tsx +++ b/frontend/src/pages/Error/Unauthorize.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { Section, Wrapper, Text, Title, Button, SadPiumiImage } from './Error.style'; +import { Section, Wrapper, Text, Title, Button, SadPiumiImage, ButtonSection } from './Error.style'; import { GUIDE, URL_PATH } from 'constants/index'; import SadPiumiImagePng from 'assets/sadpiumi.png'; import SadPiumiImageWebp from 'assets/sadpiumi.webp'; @@ -18,20 +18,25 @@ const Unauthorize = () => { - +
웁스! {GUIDE.sessionExpire}
-
- - -
+ ); }; diff --git a/frontend/src/pages/Loading/index.tsx b/frontend/src/pages/Loading/index.tsx index 49c507fa3..5083add28 100644 --- a/frontend/src/pages/Loading/index.tsx +++ b/frontend/src/pages/Loading/index.tsx @@ -7,7 +7,7 @@ const Loading = () => { - + ); diff --git a/frontend/src/pages/Login/Login.style.ts b/frontend/src/pages/Login/Login.style.ts index 469709cdc..655a42a43 100644 --- a/frontend/src/pages/Login/Login.style.ts +++ b/frontend/src/pages/Login/Login.style.ts @@ -49,7 +49,7 @@ export const PlantImg = styled.img` export const Text = styled.p` width: 300px; - font: 900 3.2rem/4rem 'GmarketSans'; + font: 900 3.2rem/4rem 'NanumSquareRound'; color: white; `; @@ -74,7 +74,7 @@ export const GoToMain = styled(Link)` width: 140px; height: 52.5px; - font: 700 1.6rem/5.25rem 'GmarketSans'; + font: 700 1.6rem/5.25rem 'NanumSquareRound'; text-align: center; background: ${({ theme }) => theme.color.grayLight}; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index 0cd428257..b48cdd992 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/frontend/src/pages/Login/index.tsx @@ -56,9 +56,7 @@ const Login = () => { - - 메인으로 돌아가기 - + 메인으로 돌아가기 diff --git a/frontend/src/pages/Main/Main.style.tsx b/frontend/src/pages/Main/Main.style.tsx index 525779c3b..1b7cfc80e 100644 --- a/frontend/src/pages/Main/Main.style.tsx +++ b/frontend/src/pages/Main/Main.style.tsx @@ -47,3 +47,8 @@ export const SearchMessage = styled.p` color: #333333; animation: ${bounce} 6s infinite; `; + +export const Image = styled.img` + width: 192px; + margin-top: 32px; +`; diff --git a/frontend/src/pages/Main/index.tsx b/frontend/src/pages/Main/index.tsx index da17f5cc4..8f86febd4 100644 --- a/frontend/src/pages/Main/index.tsx +++ b/frontend/src/pages/Main/index.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import Navbar from 'components/@common/Navbar'; import SearchBox from 'components/search/SearchBox'; -import { LogoMessage, SearchBoxArea, SearchMessage, Wrapper } from './Main.style'; +import { LogoMessage, SearchBoxArea, SearchMessage, Wrapper, Image } from './Main.style'; import useDictionaryNavigate from 'hooks/useDictionaryPlantNavigate'; import LogoSvg from 'assets/logo.svg'; import LogoWebp from 'assets/logo.webp'; @@ -16,7 +16,12 @@ const Main = () => { 식물을 쉽게 - 피움 로고. 녹색으로 '피움'이라는 글자가 적혀 있다. + 피움 로고. 녹색으로 '피움'이라는 글자가 적혀 있다. 피움에 등록된 식물을 검색해 보세요! diff --git a/frontend/src/pages/MyPage/MyPage.style.ts b/frontend/src/pages/MyPage/MyPage.style.ts index 875545b5a..ad25b2650 100644 --- a/frontend/src/pages/MyPage/MyPage.style.ts +++ b/frontend/src/pages/MyPage/MyPage.style.ts @@ -1,3 +1,4 @@ +import { Link } from 'react-router-dom'; import styled from 'styled-components'; export const Wrapper = styled.main` @@ -28,3 +29,24 @@ export const Button = styled.button` color: ${({ theme: { color } }) => color.gray}; border-radius: 8px; `; + +export const BottomSheet = styled(Link)` + position: fixed; + right: 12px; + bottom: 100px; + + display: flex; + gap: 2px; + align-items: center; + justify-content: center; + + padding: 8px 12px; + + font-size: 1.2rem; + font-weight: 600; + line-height: 1.6rem; + color: ${({ theme }) => theme.color.background}; + + background: ${({ theme }) => theme.color.primary}; + border-radius: 28px; +`; diff --git a/frontend/src/pages/MyPage/index.tsx b/frontend/src/pages/MyPage/index.tsx index 68c4651ee..39775110e 100644 --- a/frontend/src/pages/MyPage/index.tsx +++ b/frontend/src/pages/MyPage/index.tsx @@ -1,11 +1,13 @@ import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import SvgFill from 'components/@common/SvgIcons/SvgFill'; import VerticalDivider from 'components/@common/VerticalDivider/VerticalDivider.style'; -import { Button, ButtonBox, Wrapper } from './MyPage.style'; +import { BottomSheet, Button, ButtonBox, Wrapper } from './MyPage.style'; import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId'; import useLogout from 'hooks/queries/auth/useLogout'; import useWithdraw from 'hooks/queries/auth/useWithdraw'; import useConfirm from 'hooks/useConfirm'; +import theme from 'style/theme.style'; const MyPage = () => { useCheckSessionId(); @@ -38,6 +40,10 @@ const MyPage = () => { 회원 탈퇴 + + + 문의하기 + diff --git a/frontend/src/pages/Reminder/Reminder.style.ts b/frontend/src/pages/Reminder/Reminder.style.ts index c90c5f01b..cdfd3f17e 100644 --- a/frontend/src/pages/Reminder/Reminder.style.ts +++ b/frontend/src/pages/Reminder/Reminder.style.ts @@ -1,4 +1,5 @@ import { TodayStatus } from 'types/reminder'; +import { Link } from 'react-router-dom'; import { css, styled } from 'styled-components'; export interface BackgroundProps { @@ -39,7 +40,7 @@ export const MonthReminderBox = styled.div` export const MonthTitle = styled.p` width: 100%; - font: 900 2.8rem/4rem 'GmarketSans'; + font: 900 2.8rem/4rem 'NanumSquareRound'; `; export const ReminderCardBox = styled.div` @@ -62,7 +63,7 @@ export const InfoBox = styled.div` export const DateLabel = styled.label` position: absolute; top: 8px; - font: 700 2rem/2rem 'GmarketSans'; + font: 700 2rem/2rem 'NanumSquareRound'; `; export const FillStyle = css` @@ -76,3 +77,24 @@ export const EmptyStyle = css` height: 24px; color: ${({ theme }) => theme.color.gray}; `; + +export const NoDataContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 80%; +`; + +export const Title = styled.p` + margin-bottom: 16px; + font: 700 2.4rem/4rem NanumSquareRound; +`; + +export const Register = styled(Link)` + width: 200px; + font: 600 2rem/2.4rem NanumSquareRound; + text-align: center; +`; diff --git a/frontend/src/pages/Reminder/index.tsx b/frontend/src/pages/Reminder/index.tsx index 3292866b7..ed30fe6f5 100644 --- a/frontend/src/pages/Reminder/index.tsx +++ b/frontend/src/pages/Reminder/index.tsx @@ -1,8 +1,12 @@ +import { PrimaryButton } from 'components/@common/Confirm/Confirm.style'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; import MonthBox from 'components/reminder/MonthBox'; -import { ContentBox, Wrapper } from './Reminder.style'; +import { ContentBox, NoDataContainer, Register, Title, Wrapper } from './Reminder.style'; import ReminderProvider from 'contexts/reminderContext'; +import { URL_PATH } from 'constants/index'; +import PiumiEmotionlessPng from 'assets/piumi-emotionless.png'; +import PiumiEmotionlessWebp from 'assets/piumi-emotionless.webp'; import useReminderHooks from './hooks/useReminderHooks'; const Reminder = () => { @@ -17,7 +21,26 @@ const Reminder = () => { - {reminderBox} + {reminderBox.length === 0 ? ( + + + + 감정 없는 피우미 + + 아직 등록된 식물이 없습니다! + + 식물 등록하러 가기 + + + ) : ( + {reminderBox} + )} diff --git a/frontend/src/style/Global.style.ts b/frontend/src/style/Global.style.ts index 66c43fd2c..ad2ced8a3 100644 --- a/frontend/src/style/Global.style.ts +++ b/frontend/src/style/Global.style.ts @@ -4,8 +4,9 @@ import { reset } from './reset.style'; export const GlobalStyle = createGlobalStyle` ${reset} + * { - font-family: "GmarketSans", "Noto Sans KR", sans-serif; + font-family: "NanumSquareRound", "Noto Sans KR", sans-serif; } html, body, #root { @@ -17,7 +18,6 @@ export const GlobalStyle = createGlobalStyle` body { scrollbar-width: none; font-size: 62.5%; - font-display: swap; } body::-webkit-scrollbar { diff --git a/frontend/src/style/theme.style.ts b/frontend/src/style/theme.style.ts index 8e0836978..b779ab02a 100644 --- a/frontend/src/style/theme.style.ts +++ b/frontend/src/style/theme.style.ts @@ -14,12 +14,12 @@ const color = { const font = { emphasize: '', - subTitle: 'normal 600 2rem/2.4rem "GmarketSans"', - title: 'normal 700 3.2rem/4rem "GmarketSans"', - input: 'normal 500 1.8rem/2.2rem "GmarketSans"', - dictTitle: 'normal 600 1.8rem/2.2rem "GmarketSans"', - dictContent: 'normal 400 1.4rem/1.8rem "GmarketSans"', - reminderCardContent: '500 1rem/1.5rem "GmarketSans"', + subTitle: 'normal 600 2rem/2.4rem "NanumSquareRound"', + title: 'normal 700 3.2rem/4rem "NanumSquareRound"', + input: 'normal 500 1.8rem/2.2rem "NanumSquareRound"', + dictTitle: 'normal 600 1.8rem/2.2rem "NanumSquareRound"', + dictContent: 'normal 400 1.4rem/1.8rem "NanumSquareRound"', + reminderCardContent: '500 1rem/1.5rem "NanumSquareRound"', } as const; const width = { diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 61c3b9d1e..33c0fef42 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -74,6 +74,14 @@ module.exports = (env) => ({ from: resolve(__dirname, 'public', 'assets'), to: resolve(__dirname, 'dist', 'assets'), }, + { + from: resolve(__dirname, 'public', 'fonts'), + to: resolve(__dirname, 'dist', 'fonts'), + }, + { + from: resolve(__dirname, 'public', 'seo'), + to: resolve(__dirname, 'dist', './'), + }, ], }), new BundleAnalyzerPlugin({