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

[Fix] 동적 Index html #261

Merged
merged 8 commits into from
Jul 29, 2024
Merged

[Fix] 동적 Index html #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77dc091
install: react-helmet-async 설치
lydiacho Jul 28, 2024
7b15ff9
feat: Helmet 적용하여 조건부 렌더링
lydiacho Jul 28, 2024
660d1b4
feat: dynamic head 구현
lydiacho Jul 29, 2024
4cc922e
fix: Makers -> makers
lydiacho Jul 29, 2024
32c7e74
feat: makers 버전 파비콘 및 아이콘 추가
lydiacho Jul 29, 2024
9f55cae
fix: season undefined 조건 추가
lydiacho Jul 29, 2024
c8a81e9
chore: 만들어놓은 makers manifest 파일 연결
lydiacho Jul 29, 2024
afc59d6
feat: url 메타태그 추가
lydiacho Jul 29, 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
27 changes: 2 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

<meta property="og:type" content="website" />
<meta property="og:title" content="SOPT 35기 모집 지원하기" />
<meta property="og:description" content="SOPT의 신입 기수 모집페이지입니다." />
<meta property="og:site_name" content="SOPT 리크루팅" />
<meta property="og:locale" content="ko_KR" />
<!-- <meta property="og:url" content="https://www.someurl.com" /> -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이제는 url도 추가해줄 수 있어요~

https://recruiting.sopt.org

<meta property="og:image" content="/imgOg.png" />
<meta property="og:image:alt" content="SOPT 리크루팅 페이지" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />

<meta property="twitter:card" content="website" />
<meta name="twitter:title" content="SOPT 35기 모집 지원하기" />
<meta name="twitter:description" content="SOPT의 신입 기수 모집페이지입니다." />
<!-- <meta property="twitter:site" content="https://www.someurl.com" /> -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도요

<meta name="twitter:image" content="/imgOg.png" />
<meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />

<title>SOPT 35기 모집 지원하기</title>
<meta name="author" content="sopt makers team official 4th" />
<meta name="description" content="SOPT의 신입 기수 모집페이지입니다." />
<meta property="og:url" content="https://recruiting.sopt.org" />
<meta property="twitter:site" content="https://recruiting.sopt.org" />
</head>
<body>
<div id="modal"></div>
Expand Down
14 changes: 14 additions & 0 deletions makersManifest.webmanifest
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"icons": [
{
"src": "/makers_192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/makers_512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
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 @@ -26,6 +26,7 @@
"react": "^18.2.0",
"react-daum-postcode": "^3.1.3",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.51.5",
"react-router-dom": "^6.23.1"
},
Expand Down
Binary file added public/maekrsOg.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.
Binary file added public/makers-touch-icon.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.
Binary file added public/makersFavicon.ico
View file
Open in desktop
Binary file not shown.
13 changes: 13 additions & 0 deletions public/makersIcon.svg
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.
Binary file added public/makers_192.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.
Binary file added public/makers_512.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.
23 changes: 13 additions & 10 deletions 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 { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@ta
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AxiosError } from 'axios';
import { useCallback, useEffect, useRef, useState } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

import Layout from '@components/Layout';
Expand Down Expand Up @@ -107,16 +108,18 @@ const App = () => {
return (
<>
<SessionExpiredDialog ref={sessionRef} />
<ThemeContext.Provider value={themeContextValue}>
<RecruitingInfoContext.Provider value={recruitingInfoContextValue}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<div className={isLight ? light : dark}>
<RouterProvider router={router} />
</div>
</QueryClientProvider>
</RecruitingInfoContext.Provider>
</ThemeContext.Provider>
<HelmetProvider>
<ThemeContext.Provider value={themeContextValue}>
<RecruitingInfoContext.Provider value={recruitingInfoContextValue}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<div className={isLight ? light : dark}>
<RouterProvider router={router} />
</div>
</QueryClientProvider>
</RecruitingInfoContext.Provider>
</ThemeContext.Provider>
</HelmetProvider>
</>
);
};
Expand Down
52 changes: 51 additions & 1 deletion src/common/components/Layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,62 @@
import { PropsWithChildren } from 'react';
import { PropsWithChildren, useContext } from 'react';
import { Helmet } from 'react-helmet-async';
import { Outlet } from 'react-router-dom';

import { RecruitingInfoContext } from '@store/recruitingInfoContext';

import Header from './components/Header';
import { container, mainWrapper } from './style.css';

const Head = () => {
const {
recruitingInfo: { season, isMakers },
} = useContext(RecruitingInfoContext);

const TOUCH_ICON = isMakers ? '/makers-touch-icon.png' : '/apple-touch-icon.png';
const ICON = isMakers ? '/makersIcon.svg' : '/icon.svg';
const FAVICON = isMakers ? '/makersFavicon.ico' : '/favicon.ico';
const SITE_NAME = isMakers === undefined ? 'SOPT 리크루팅' : `SOPT ${isMakers && 'makers '}리크루팅`;
const TITLE = season === undefined ? 'SOPT 모집 지원하기' : `SOPT ${isMakers && 'makers '}${season}기 모집 지원하기`;
const IMAGE = isMakers ? '/makersOg.png' : '/imgOg.png';
const DESCRIPTION =
isMakers === undefined
? `SOPT의 신입 기수 모집페이지입니다.`
: `SOPT${isMakers && ' makers'}의 신입 기수 모집페이지입니다.`;

return (
<Helmet>
<link rel="manifest" href={isMakers ? '/makersManifest.webmanifest' : '/manifest.webmanifest'} />

<link rel="icon" href={FAVICON} sizes="32x32" />
<link rel="icon" href={ICON} type="image/svg+xml" />
<link rel="apple-touch-icon" href={TOUCH_ICON} />

<meta property="og:title" content={TITLE} />
<meta property="og:description" content={DESCRIPTION} />
<meta property="og:site_name" content={SITE_NAME} />

<meta property="og:image" content={IMAGE} />
<meta property="og:image:alt" content={SITE_NAME} />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />

<meta property="twitter:card" content="website" />
<meta name="twitter:title" content={TITLE} />
<meta name="twitter:description" content={DESCRIPTION} />
<meta name="twitter:image" content={IMAGE} />
<meta property="twitter:image:alt" content={SITE_NAME} />

<title>{TITLE}</title>
<meta name="author" content="sopt makers team official 4th" />
<meta name="description" content={DESCRIPTION} />
</Helmet>
);
};

const Layout = ({ children }: PropsWithChildren) => {
return (
<div className={container}>
<Head />
<Header />
<main className={mainWrapper}>{children || <Outlet />}</main>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/views/ApplyPage/components/BottomSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
<div id="check-necessary" className={doubleLineCheck}>
<p className={label}>
{isMakers
? 'SOPT Makers의 행사 및 정기 모임은 매주 일요일에 진행됩니다.'
? 'SOPT makers의 행사 및 정기 모임은 매주 일요일에 진행됩니다.'
: 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}
</p>
<Checkbox checked={isReview ? true : undefined} name="attendance" required>
Expand Down
28 changes: 27 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2714,6 +2714,13 @@ internal-slot@^1.0.7:
hasown "^2.0.0"
side-channel "^1.0.4"

invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
dependencies:
loose-envify "^1.0.0"

is-array-buffer@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
Expand Down Expand Up @@ -3006,7 +3013,7 @@ long@^5.0.0:
resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==

loose-envify@^1.1.0, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -3381,6 +3388,20 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.2"

react-fast-compare@^3.2.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==

react-helmet-async@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
dependencies:
invariant "^2.2.4"
react-fast-compare "^3.2.2"
shallowequal "^1.1.0"

react-hook-form@^7.51.5:
version "7.51.5"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
Expand Down Expand Up @@ -3596,6 +3617,11 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
functions-have-names "^1.2.3"
has-property-descriptors "^1.0.2"

shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Expand Down