Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: #197 메타 데이터를 설정하는 컴포넌트 추가 및 적용 #273

Merged
merged 10 commits into from
Nov 20, 2024
Merged

Feat: #197 메타 데이터를 설정하는 컴포넌트 추가 및 적용 #273

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8a256d2
Config: reat-helmet-async 라이브러리 추가
Seok93 Nov 19, 2024
c366c8f
Remove: #197 .gitkeep 파일 삭제
Seok93 Nov 19, 2024
a0a8e69
Config: #197 favicon 아이콘 설정
Seok93 Nov 19, 2024
52e05fc
Feat: MetaData 추가를 위한 컴포넌트 추가
Seok93 Nov 19, 2024
9499ac5
Feat: #197 Page 컴포넌트에 Meta 컴포넌트 적용
Seok93 Nov 19, 2024
c7f2ef3
Chore: #197 메타 데이터 title 일관성을 위한 수정
Seok93 Nov 20, 2024
9b9f808
Chore: #197 접근성 개선을 위한 수정
Seok93 Nov 20, 2024
8df0eb7
Asset: #197 Open Graph용 이미지 추가 및 og:image 재설정
Seok93 Nov 20, 2024
dccbf5b
Config: #197 환경변수명 변경 및 Meta 컴포넌트 적용
Seok93 Nov 20, 2024
885624c
Chore: #197 불필요한 로그 삭제
Seok93 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"react": "^18.2.0",
"react-big-calendar": "^1.13.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.51.4",
"react-icons": "^5.2.1",
"react-markdown": "^9.0.1",
Expand Down
Empty file removed public/.gitkeep
View file
Open in desktop
Empty file.
Binary file added public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/og_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/components/common/Meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Helmet } from 'react-helmet-async';
import logo from '@assets/og_logo.png';

type MetaProps = {
title?: string;
};

export default function Meta({ title = 'Grow up' }: MetaProps) {
return (
<Helmet>
<title>{title}</title>
<meta name="description" content="팀원과 함께 프로젝트를 진행하며 개인 역량을 성장시켜 보세요" />
<meta property="og:title" content="Grow Up" />
<meta property="og:description" content="팀원과 함께 프로젝트를 진행하며 개인 역량을 성장시켜 보세요" />
<meta property="og:image" content={logo} />
Seok93 marked this conversation as resolved.
Show resolved Hide resolved
<meta property="og:url" content={import.meta.env.BASE_URL} />
<meta property="og:type" content="website" />
</Helmet>
);
}
11 changes: 7 additions & 4 deletions src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import MainRouter from '@routes/MainRouter.tsx';
import { queryClient } from '@hooks/query/queryClient';
import '@/globals.css';
import { HelmetProvider } from 'react-helmet-async';

async function enableMocking() {
if (!import.meta.env.DEV) return;
Expand All @@ -16,10 +17,12 @@ async function enableMocking() {
enableMocking().then(() => {
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<MainRouter />
<ReactQueryDevtools />
</QueryClientProvider>
<HelmetProvider>
<QueryClientProvider client={queryClient}>
<MainRouter />
<ReactQueryDevtools />
</QueryClientProvider>
</HelmetProvider>
</React.StrictMode>,
);
});
28 changes: 14 additions & 14 deletions src/mocks/services/authServiceHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import {
UserSignUpRequest,
} from '@/types/UserType';

const BASE_URL = import.meta.env.VITE_BASE_URL;
const API_URL = import.meta.env.VITE_API_URL;

const authServiceHandler = [
// 회원가입 API
http.post(`${BASE_URL}/user`, async ({ request }) => {
http.post(`${API_URL}/user`, async ({ request }) => {
const { verificationCode, email, ...restSignUpData } = (await request.json()) as UserSignUpRequest;

if (verificationCode !== VERIFICATION_CODE_DUMMY) {
Expand Down Expand Up @@ -51,7 +51,7 @@ const authServiceHandler = [
}),

// 닉네임 중복 확인 API
http.post(`${BASE_URL}/user/nickname`, async ({ request }) => {
http.post(`${API_URL}/user/nickname`, async ({ request }) => {
const { nickname } = (await request.json()) as CheckNicknameForm;

const nicknameExists = USER_DUMMY.some((user) => user.nickname === nickname);
Expand All @@ -61,7 +61,7 @@ const authServiceHandler = [
}),

// 로그인 API
http.post(`${BASE_URL}/user/login`, async ({ request }) => {
http.post(`${API_URL}/user/login`, async ({ request }) => {
const { username, password } = (await request.json()) as UserSignInForm;

const foundUser = USER_DUMMY.find((user) => user.username === username && user.password === password);
Expand All @@ -84,7 +84,7 @@ const authServiceHandler = [
}),

// 소셜 로그인 API
http.post(`${BASE_URL}/user/login/:provider`, async ({ request, params }) => {
http.post(`${API_URL}/user/login/:provider`, async ({ request, params }) => {
const { provider } = params as { provider: SocialLoginProvider };
const { code } = (await request.json()) as { code: string };

Expand Down Expand Up @@ -208,7 +208,7 @@ const authServiceHandler = [
}),

// 액세스 토큰 갱신 API
http.post(`${BASE_URL}/user/refresh`, async ({ cookies }) => {
http.post(`${API_URL}/user/refresh`, async ({ cookies }) => {
const { refreshToken, refreshTokenExpiresAt } = cookies;
const cookieRefreshToken = Cookies.get('refreshToken');

Expand Down Expand Up @@ -243,7 +243,7 @@ const authServiceHandler = [
}),

// 로그인 한 사용자 정보 조회 API
http.get(`${BASE_URL}/user/me`, async ({ request }) => {
http.get(`${API_URL}/user/me`, async ({ request }) => {
const accessToken = request.headers.get('Authorization');

if (!accessToken) return new HttpResponse(null, { status: 401 });
Expand All @@ -258,7 +258,7 @@ const authServiceHandler = [
}),

// 로그아웃 API
http.post(`${BASE_URL}/user/logout`, async ({ cookies }) => {
http.post(`${API_URL}/user/logout`, async ({ cookies }) => {
const { refreshToken } = cookies;
const currentTime = Date.now();

Expand All @@ -274,7 +274,7 @@ const authServiceHandler = [
}),

// 액세스 토큰 테스트용 API
http.post(`${BASE_URL}/test`, ({ request }) => {
http.post(`${API_URL}/test`, ({ request }) => {
console.log('테스트용 API 작동 중');

const authHeader = request.headers.get('Authorization');
Expand All @@ -294,7 +294,7 @@ const authServiceHandler = [
}),

// 이메일 인증 번호 요청 API
http.post(`${BASE_URL}/user/verify/send`, async ({ request }) => {
http.post(`${API_URL}/user/verify/send`, async ({ request }) => {
const { email } = (await request.json()) as RequestEmailCode;

if (!email || !EMAIL_REGEX.test(email))
Expand All @@ -304,7 +304,7 @@ const authServiceHandler = [
}),

// 이메일 인증 번호 확인 API
http.post(`${BASE_URL}/user/verify/code`, async ({ request }) => {
http.post(`${API_URL}/user/verify/code`, async ({ request }) => {
const { email, verificationCode } = (await request.json()) as EmailVerificationForm;

const verifyUserEmailAndCode = (userEmail: string, code: string) => {
Expand All @@ -319,7 +319,7 @@ const authServiceHandler = [
}),

// 아이디 찾기 API
http.post(`${BASE_URL}/user/recover/username`, async ({ request }) => {
http.post(`${API_URL}/user/recover/username`, async ({ request }) => {
const { email, verificationCode } = (await request.json()) as EmailVerificationForm;

if (verificationCode !== VERIFICATION_CODE_DUMMY) {
Expand All @@ -336,7 +336,7 @@ const authServiceHandler = [
}),

// 비밀번호 찾기 API
http.post(`${BASE_URL}/user/recover/password`, async ({ request }) => {
http.post(`${API_URL}/user/recover/password`, async ({ request }) => {
const { username, email, verificationCode } = (await request.json()) as SearchPasswordForm;

if (verificationCode !== VERIFICATION_CODE_DUMMY) {
Expand All @@ -354,7 +354,7 @@ const authServiceHandler = [
}),

// 비밀번호 변경 API
http.patch(`${BASE_URL}/user/password`, async ({ request }) => {
http.patch(`${API_URL}/user/password`, async ({ request }) => {
const accessToken = request.headers.get('Authorization');
if (!accessToken) return HttpResponse.json({ message: '인증 정보가 존재하지 않습니다.' }, { status: 401 });

Expand Down
21 changes: 11 additions & 10 deletions src/mocks/services/projectServiceHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@ import { convertTokenToUserId } from '@utils/converter';
import type { SearchUser, UserWithRole } from '@/types/UserType';
import type { Project, ProjectCoworkerForm, ProjectForm } from '@/types/ProjectType';

const BASE_URL = import.meta.env.VITE_BASE_URL;
const API_URL = import.meta.env.VITE_API_URL;
console.log(API_URL);
let autoIncrementIdForProject = PROJECT_DUMMY.length + 1;

const projectServiceHandler = [
// 프로젝트 소속 유저 검색 API
http.get(`${BASE_URL}/project/:projectId/user/search`, ({ request, params }) => {
http.get(`${API_URL}/project/:projectId/user/search`, ({ request, params }) => {
const url = new URL(request.url);
const nickname = url.searchParams.get('nickname') || '';
const accessToken = request.headers.get('Authorization');
Expand Down Expand Up @@ -69,7 +70,7 @@ const projectServiceHandler = [
}),

// 프로젝트 생성 API
http.post(`${BASE_URL}/team/:teamId/project`, async ({ request, params }) => {
http.post(`${API_URL}/team/:teamId/project`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const teamId = Number(params.teamId);
const { coworkers, ...projectInfo } = (await request.json()) as ProjectForm;
Expand Down Expand Up @@ -117,7 +118,7 @@ const projectServiceHandler = [
}),

// 프로젝트 목록 조회 API
http.get(`${BASE_URL}/team/:teamId/project`, ({ request, params }) => {
http.get(`${API_URL}/team/:teamId/project`, ({ request, params }) => {
const accessToken = request.headers.get('Authorization');

const teamId = Number(params.teamId);
Expand All @@ -139,7 +140,7 @@ const projectServiceHandler = [
}),

// 프로젝트 팀원 목록 조회 API
http.get(`${BASE_URL}/project/:projectId/user`, ({ request, params }) => {
http.get(`${API_URL}/project/:projectId/user`, ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);

Expand Down Expand Up @@ -177,7 +178,7 @@ const projectServiceHandler = [
}),

// 프로젝트 삭제 API
http.delete(`${BASE_URL}/project/:projectId`, ({ request, params }) => {
http.delete(`${API_URL}/project/:projectId`, ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);

Expand Down Expand Up @@ -222,7 +223,7 @@ const projectServiceHandler = [
}),

// 프로젝트 수정 API
http.patch(`${BASE_URL}/team/:teamId/project/:projectId`, async ({ request, params }) => {
http.patch(`${API_URL}/team/:teamId/project/:projectId`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const teamId = Number(params.teamId);
Expand Down Expand Up @@ -265,7 +266,7 @@ const projectServiceHandler = [
}),

// 프로젝트 팀원 추가 API
http.post(`${BASE_URL}/project/:projectId/user/invitation`, async ({ request, params }) => {
http.post(`${API_URL}/project/:projectId/user/invitation`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const { userId: projectCoworkerId, roleName } = (await request.json()) as ProjectCoworkerForm;
Expand Down Expand Up @@ -310,7 +311,7 @@ const projectServiceHandler = [
}),

// 프로젝트 팀원 권한 변경 API
http.patch(`${BASE_URL}/project/:projectId/user/:userId/role`, async ({ request, params }) => {
http.patch(`${API_URL}/project/:projectId/user/:userId/role`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const projectCoworkerId = Number(params.userId);
Expand Down Expand Up @@ -355,7 +356,7 @@ const projectServiceHandler = [
}),

// 프로젝트 팀원 삭제 API
http.delete(`${BASE_URL}/project/:projectId/user/:userId`, async ({ request, params }) => {
http.delete(`${API_URL}/project/:projectId/user/:userId`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const projectCoworkerId = Number(params.userId);
Expand Down
12 changes: 6 additions & 6 deletions src/mocks/services/statusServiceHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import { convertTokenToUserId } from '@utils/converter';

import type { ProjectStatusForm, StatusOrderForm } from '@/types/ProjectStatusType';

const BASE_URL = import.meta.env.VITE_BASE_URL;
const API_URL = import.meta.env.VITE_API_URL;
let authIncrementIdForStatus = STATUS_DUMMY.length + 1;

const statusServiceHandler = [
// 프로젝트 상태 목록 조회 API
http.get(`${BASE_URL}/project/:projectId/status`, ({ request, params }) => {
http.get(`${API_URL}/project/:projectId/status`, ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);

Expand All @@ -46,7 +46,7 @@ const statusServiceHandler = [
}),

// 프로젝트 상태 생성 API
http.post(`${BASE_URL}/project/:projectId/status`, async ({ request, params }) => {
http.post(`${API_URL}/project/:projectId/status`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const formData = (await request.json()) as ProjectStatusForm;
Expand All @@ -69,7 +69,7 @@ const statusServiceHandler = [
}),

// 프로젝트 상태 순서 변경 API
http.patch(`${BASE_URL}/project/:projectId/status/order`, async ({ request, params }) => {
http.patch(`${API_URL}/project/:projectId/status/order`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const { statuses: statusOrders } = (await request.json()) as StatusOrderForm;
const projectId = Number(params.projectId);
Expand Down Expand Up @@ -100,7 +100,7 @@ const statusServiceHandler = [
}),

// 프로젝트 상태 수정 API
http.patch(`${BASE_URL}/project/:projectId/status/:statusId`, async ({ request, params }) => {
http.patch(`${API_URL}/project/:projectId/status/:statusId`, async ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const statusId = Number(params.statusId);
Expand Down Expand Up @@ -128,7 +128,7 @@ const statusServiceHandler = [
}),

// 프로젝트 상태 삭제 API
http.delete(`${BASE_URL}/project/:projectId/status/:statusId`, ({ request, params }) => {
http.delete(`${API_URL}/project/:projectId/status/:statusId`, ({ request, params }) => {
const accessToken = request.headers.get('Authorization');
const projectId = Number(params.projectId);
const statusId = Number(params.statusId);
Expand Down
Loading