Skip to content

Commit

Permalink
refactor: 최적화 리팩터링 (#375)
Browse files Browse the repository at this point in the history
* refactor: 이미지에 width와 Height 설정

* refactor: 검색창에 aria-label 추가

* design: 에러 페이지 디자인 수정

* test: Calendar에 props 추가

* refactor: loading 이미지 크기 설정

* refactor: 지원하지 않는 파일 제거

* chore: msw logout 기능 수정

* refactor: reminder 카드 클릭시 상세보기로 이동

* refactor: 테스트를 위한 aria-label 작성

* test: reminder cypress 테스트 작성

* test: 되지 않는 테스트 주석처리

* feat: 리마인더에 데이터가 없을 경우 바로가기 추가

* refactor: font missing glyphs 해결

* chore: seo 설정

* style: 오타 수정

* style: html text와 중복되는 aria-label 제거

* refactor: generateSiteMap 위치 수정

* chore: 폰트 라이센스 적용 및 이름 변경

* feat: 의견 남기기 기능 추가

* chore: font file name 변경 적용
  • Loading branch information
hozzijeong authored and Choi-JJunho committed Sep 20, 2023
1 parent fc594eb commit 0cae357
Show file tree
Hide file tree
Showing 41 changed files with 395 additions and 85 deletions.
25 changes: 18 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">

식물 관리법은 환경에 따라 다르기 때문에 경험을 통해서 터득할 수밖에 없어요.

여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠?
여러분의 관리 경험을 기록한다면 각자에게 알맞은 관리법을 더 빠르게 도출할 수 있겠죠?

'피움'은 이러한 가치를 바탕으로 탄생하게 되었습니다.

Expand All @@ -32,7 +32,7 @@
```shell
git clone https://github.com/woowacourse-teams/2023-pium.git

cd 2023-pium/frontend
cd 2023-pium/frontend
```

### env파일 설정
Expand All @@ -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
Expand All @@ -56,7 +57,7 @@ HOST=http://localhost:8080/
### 실행

```shell
npm install
npm install

npm run local
```
Expand All @@ -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
Expand All @@ -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.
10 changes: 8 additions & 2 deletions frontend/.storybook/SvgIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
);
};

Expand Down
61 changes: 61 additions & 0 deletions frontend/cypress/e2e/reminder.cy.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
38 changes: 38 additions & 0 deletions frontend/generateSiteMap.js
Original file line number Diff line number Diff line change
@@ -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');
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Binary file not shown.
7 changes: 7 additions & 0 deletions frontend/public/fonts/font.css
Original file line number Diff line number Diff line change
@@ -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');
}
29 changes: 16 additions & 13 deletions frontend/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down
13 changes: 13 additions & 0 deletions frontend/public/seo/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# *
User-agent: *
Disallow: /404

# *
User-agent: *
Allow: /

# Host
Host: https://pium.life/

# Sitemaps
Sitemap: https://pium.life/sitemap.xml
36 changes: 36 additions & 0 deletions frontend/public/seo/sitemap.xml
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
},
};
4 changes: 2 additions & 2 deletions frontend/src/components/@common/Calendar/Calendar.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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;
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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};
`;
3 changes: 1 addition & 2 deletions frontend/src/components/@common/Image/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/@common/Modal/Modal.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
`;
Loading

0 comments on commit 0cae357

Please sign in to comment.