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

Chore: 메타태그 적용 및 리액트 헬멧을 이용해서 각 페이지에 title 태그 적용 #371

Merged
merged 2 commits into from
May 31, 2024
Merged

Chore: 메타태그 적용 및 리액트 헬멧을 이용해서 각 페이지에 title 태그 적용 #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a371a8b
Chore: index.html 파일에 메타 태그 추가
hankim0904 May 31, 2024
a903021
Chore: 리액트 헬멧을 이용해서 각 페이지에 title 태그 적용
hankim0904 May 31, 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
25 changes: 25 additions & 0 deletions co-kkiri/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,31 @@
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js"
integrity="sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01"
crossorigin="anonymous"></script>

<!-- SEO 메타 태그 -->
<meta
name="description"
content="스터디/프로젝트에 딱 맞는 팀원을 직접 초대해보자! 스카우트 기반 모집 플랫폼, CO-KKIRI" />
<meta name="keywords" content="CO-KKIRI, 프로젝트, 스터디, 네트워킹, 협업, 공유" />
<meta name="author" content="CO-KKIRI Team" />

<!-- 소셜 미디어를 위한 메타 태그 -->
<meta property="og:type" content="website" />
<meta property="og:title" content="CO-KKIRI" />
<meta property="og:site_name" content="CO-KKIRI" />
<meta
property="og:description"
content="스터디/프로젝트에 딱 맞는 팀원을 직접 초대해보자! 스카우트 기반 모집 플랫폼, CO-KKIRI" />
<meta property="og:image" content="/src/assets/images/ShareImages/share_image.png" />
<meta property="og:url" content="https://co-kkiri.com/" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="CO-KKIRI" />
<meta
name="twitter:description"
content="스터디/프로젝트에 딱 맞는 팀원을 직접 초대해보자! 스카우트 기반 모집 플랫폼, CO-KKIRI" />
<meta name="twitter:image" content="/path/to/image.jpg" />

<title>CO-KKIRI</title>
</head>
<body>
Expand Down
46 changes: 11 additions & 35 deletions co-kkiri/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion co-kkiri/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react": "^18.2.0",
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.5",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7"
},
Expand All @@ -45,7 +46,6 @@
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.51.0",
"react-quill": "^2.0.0",
"react-router-dom": "^6.22.2",
Expand Down
5 changes: 4 additions & 1 deletion co-kkiri/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import GlobalStyles from "./styles/globals";
import PageRouter from "./PageRouter";
import Toasts from "./components/commons/Widgets/Toast";
import { GlobalStackSvgSprite } from "./components/commons/GlobalStackSvgSprite";
import { HelmetProvider } from "react-helmet-async";

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -19,7 +20,9 @@ function App() {
<QueryClientProvider client={queryClient}>
<GlobalStyles />
<ReactQueryDevtools initialIsOpen={false} />
<PageRouter />
<HelmetProvider>
<PageRouter />
</HelmetProvider>
<GlobalStackSvgSprite />
<Toasts />
</QueryClientProvider>
Expand Down
48 changes: 26 additions & 22 deletions co-kkiri/src/PageRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import AuthListener from "./components/commons/AuthListener";
import GithubAuth from "./pages/Auth/GithubAuth";
import KakaoAuth from "./pages/Auth/KakaoAuth";
import PageScrollTop from "./components/commons/PageScrollTop";
import MetaTag from "./components/commons/MetaTag";

const {
HOME_PATH,
Expand All @@ -36,28 +37,31 @@ const {

const PageRouter = () => {
return (
<Router>
<AuthListener />
<PageScrollTop />
<Routes>
<Route path="/" element={<Navigation />}>
<Route path={HOME_PATH} element={<Home />} />
<Route path={STUDY_LIST_PATH} element={<StudyList />} />
<Route path={DETAIL_PATH} element={<Detail />} />
<Route path={EDIT_PATH} element={<Edit />} />
<Route path={RECRUIT_PATH} element={<Recruit />} />
<Route path={REVIEW_PATH} element={<Review />} />
<Route path={SCOUT} element={<Scout />} />
<Route path={MY_PAGE} element={<MyPage />} />
<Route path={MY_STUDY} element={<MyStudy />} />
<Route path={MANAGE} element={<Manage />} />
<Route path="*" element={<NotFound />} />
</Route>
<Route path={GOOGLE_REDIRECT} element={<GoogleAuth />} />
<Route path={GITHUB_REDIRECT} element={<GithubAuth />} />
<Route path={KAKAO_REDIRECT} element={<KakaoAuth />} />
</Routes>
</Router>
<>
<MetaTag title="CO-KKIRI - 스카우트 기반 모집 플랫폼" />
<Router>
<AuthListener />
<PageScrollTop />
<Routes>
<Route path="/" element={<Navigation />}>
<Route path={HOME_PATH} element={<Home />} />
<Route path={STUDY_LIST_PATH} element={<StudyList />} />
<Route path={DETAIL_PATH} element={<Detail />} />
<Route path={EDIT_PATH} element={<Edit />} />
<Route path={RECRUIT_PATH} element={<Recruit />} />
<Route path={REVIEW_PATH} element={<Review />} />
<Route path={SCOUT} element={<Scout />} />
<Route path={MY_PAGE} element={<MyPage />} />
<Route path={MY_STUDY} element={<MyStudy />} />
<Route path={MANAGE} element={<Manage />} />
<Route path="*" element={<NotFound />} />
</Route>
<Route path={GOOGLE_REDIRECT} element={<GoogleAuth />} />
<Route path={GITHUB_REDIRECT} element={<GithubAuth />} />
<Route path={KAKAO_REDIRECT} element={<KakaoAuth />} />
</Routes>
</Router>
</>
);
};
export default PageRouter;
Binary file added co-kkiri/src/assets/images/ShareImages/share_image.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.
13 changes: 13 additions & 0 deletions co-kkiri/src/components/commons/MetaTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Helmet } from "react-helmet-async";

interface MetaTag {
title: string;
}

export default function MetaTag({ title }: MetaTag) {
return (
<Helmet>
<title>{title}</title>
</Helmet>
);
}
38 changes: 21 additions & 17 deletions co-kkiri/src/pages/Detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { PostDetailApiResponseDto } from "@/lib/api/post/type";
import usePostMutation from "@/hooks/useMutation/usePostMutation";
import { postDetailInitialData } from "@/lib/initialData/detail";
import { useHandleError } from "@/hooks/useHandleError";
import MetaTag from "@/components/commons/MetaTag";

export default function Detail() {
const cardRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -50,22 +51,25 @@ export default function Detail() {
const kakaoShareInfo = { title: postDetails.postTitle, name: postDetails.userNickname, postType };

return (
<S.Container>
<S.Box>
<S.GoBackButton />
<S.ShareAndScrapButton isScraped={postDetails.isScraped} postId={postId} kakaoShareInfo={kakaoShareInfo} />
<S.PostSection postDetails={postDetails} postApplyStatus={postApplyStatus} isLoading={isLoading} />
<S.DetailCardSection cardRef={cardRef} postDetails={postDetails} isLoading={isLoading} />
<S.CommentsSection postId={postId} />
<S.ButtonSection
$cardHeight={cardHeight}
postApplyStatus={postApplyStatus}
postId={postId}
teamInviteId={teamInviteId}
isLoading={isLoading}
/>
<ScrollToTop />
</S.Box>
</S.Container>
<>
<MetaTag title={`${postDetails.postTitle} | CO-KKIRI`} />
<S.Container>
<S.Box>
<S.GoBackButton />
<S.ShareAndScrapButton isScraped={postDetails.isScraped} postId={postId} kakaoShareInfo={kakaoShareInfo} />
<S.PostSection postDetails={postDetails} postApplyStatus={postApplyStatus} isLoading={isLoading} />
<S.DetailCardSection cardRef={cardRef} postDetails={postDetails} isLoading={isLoading} />
<S.CommentsSection postId={postId} />
<S.ButtonSection
$cardHeight={cardHeight}
postApplyStatus={postApplyStatus}
postId={postId}
teamInviteId={teamInviteId}
isLoading={isLoading}
/>
<ScrollToTop />
</S.Box>
</S.Container>
</>
);
}
20 changes: 12 additions & 8 deletions co-kkiri/src/pages/Edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import usePostMutation from "@/hooks/useMutation/usePostMutation";
import { FieldValues } from "react-hook-form";
import { useToast } from "@/hooks/useToast";
import TOAST from "@/constants/toast";
import MetaTag from "@/components/commons/MetaTag";

const { serverError } = TOAST;

Expand Down Expand Up @@ -81,14 +82,17 @@ export default function Edit() {

return (
data && (
<S.Container>
<RecruitmentRequestLayout
isLoading={editMutation.isPending}
selectedOptions={selectedOptions}
onSubmitClick={handleSubmit}
buttonText="수정하기"
/>
</S.Container>
<>
<MetaTag title={`${data.postDetails.postTitle} 수정 | CO-KKIRI`} />
<S.Container>
<RecruitmentRequestLayout
isLoading={editMutation.isPending}
selectedOptions={selectedOptions}
onSubmitClick={handleSubmit}
buttonText="수정하기"
/>
</S.Container>
</>
)
);
}
Loading
Loading