Skip to content

Commit b9bf77d

Browse files
emscbemscb
committed
Add page titles
1 parent cb8f250 commit b9bf77d

File tree

9 files changed

+121
-112
lines changed

9 files changed

+121
-112
lines changed

‎src/pages/About/health.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import useTranslation from "utils/hooks/useTranslation";
55
const Health = () => {
66
const t = useTranslation();
77
return (
8-
<Page>
8+
<Page title="건강 관련 안내">
99
<h1>{t("파이콘 한국 건강 관련 안내")}</h1>
1010
<p>{t("파이콘 한국에 참여해주신 모든 분들을 위해 안내 말씀드립니다.")}</p>
1111
<h2>코로나19 관련 안내</h2>

‎src/pages/About/howToGetThere.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const HowToGetThere: React.FC = () => {
4242
const mapStyle: React.CSSProperties = { border: 0, width: "100%", height: "450px" };
4343

4444
return (
45-
<Page>
45+
<Page title="장소 안내">
4646
<div style={{ width: "100%", maxWidth: "1200px" }}>
4747
<h1>{t("장소 안내")}</h1>
4848
<h2>{t("수원컨벤션센터")}</h2>

‎src/pages/Contribution/cfp.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Cfp = () => {
66
const t = useTranslation();
77

88
return (
9-
<Page>
9+
<Page title="발표 제안">
1010
<h1>{t("발표 제안하기")}</h1>
1111
<ul>
1212
<li>2차 모집: 6/1~6/22</li>
@@ -16,8 +16,7 @@ const Cfp = () => {
1616
<a href="https://forms.gle/qF4enrUpHKrUeAgAA">https://forms.gle/qF4enrUpHKrUeAgAA</a>
1717
</li>
1818
<li>
19-
문의:{" "}
20-
<a href="mailto:session@pycon.kr">session@pycon.kr</a>
19+
문의: <a href="mailto:session@pycon.kr">session@pycon.kr</a>
2120
</li>
2221
</ul>
2322
</Page>

‎src/pages/Home/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { mdiLinkVariant } from "@mdi/js"
2-
import Icon from "@mdi/react"
3-
import Page from "components/common/Page"
4-
import React from "react"
5-
import { useNavigate } from "react-router"
6-
import styled from "styled-components"
7-
import useTranslation from "utils/hooks/useTranslation"
1+
import { mdiLinkVariant } from "@mdi/js";
2+
import Icon from "@mdi/react";
3+
import Page from "components/common/Page";
4+
import React from "react";
5+
import { useNavigate } from "react-router";
6+
import styled from "styled-components";
7+
import useTranslation from "utils/hooks/useTranslation";
88

99
const Home = () => {
1010
const t = useTranslation();
@@ -71,4 +71,4 @@ const LinkBtn = styled.button`
7171
&:hover {
7272
background-color: rgba(176, 168, 254, 0.2);
7373
}
74-
`
74+
`;

‎src/pages/PosterSession/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const PosterSession = () => {
1414
const registerFormUrl = "https://forms.gle/yjhuUZHR9tR3AR7d9";
1515

1616
return (
17-
<Page>
17+
<Page title="포스터 세션">
1818
<h1>{t("포스터 세션이란?")}</h1>
1919
<p>
2020
{t(

‎src/pages/Session/detail.tsx

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { wrap } from "@suspensive/react"
2-
import React from "react"
3-
import Markdown from "react-markdown"
4-
import * as R from "remeda"
5-
6-
import { SloganShort } from "assets/icons"
7-
import { FallbackImg } from "components/common/FallbackImg"
8-
import Page from "components/common/Page"
9-
import { APIPretalxSessions } from "models/api/session"
10-
import { useNavigate, useParams } from "react-router"
11-
import styled from "styled-components"
12-
import { useRetrieveSessionQuery } from "utils/hooks/useAPI"
13-
import useTranslation from "utils/hooks/useTranslation"
1+
import { wrap } from "@suspensive/react";
2+
import React from "react";
3+
import Markdown from "react-markdown";
4+
import * as R from "remeda";
5+
6+
import { SloganShort } from "assets/icons";
7+
import { FallbackImg } from "components/common/FallbackImg";
8+
import Page from "components/common/Page";
9+
import { APIPretalxSessions } from "models/api/session";
10+
import { useNavigate, useParams } from "react-router";
11+
import styled from "styled-components";
12+
import { useRetrieveSessionQuery } from "utils/hooks/useAPI";
13+
import useTranslation from "utils/hooks/useTranslation";
1414

1515
const SessionSpeakerItem: React.FC<{ speaker: APIPretalxSessions[0]["speakers"][0] }> = ({
1616
speaker,
@@ -29,47 +29,54 @@ const SessionSpeakerItem: React.FC<{ speaker: APIPretalxSessions[0]["speakers"][
2929
<Markdown>{speaker.biography}</Markdown>
3030
</div>
3131
</SessionSpeakerItemStyled>
32-
)
33-
}
32+
);
33+
};
3434

3535
const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }) => {
36-
const t = useTranslation()
36+
const t = useTranslation();
3737

38-
let locale = "알 수 없음"
38+
let locale = "알 수 없음";
3939
switch (session.content_locale) {
4040
case "ko":
41-
locale = "한국어"
42-
break
41+
locale = "한국어";
42+
break;
4343
case "en":
44-
locale = "영어"
45-
break
44+
locale = "영어";
45+
break;
4646
case "ja":
47-
locale = "일본어"
48-
break
47+
locale = "일본어";
48+
break;
4949
default:
50-
locale = "알 수 없음"
50+
locale = "알 수 없음";
5151
}
5252

53-
let datetime = t("알 수 없음")
54-
let duration = session.duration || 0
55-
let room = t("알 수 없음")
56-
57-
if (R.isObjectType(session.slot) && R.isString(session.slot.start) && R.isString(session.slot.end)) {
58-
const startTime = new Date(session.slot.start)
59-
const endTime = new Date(session.slot.end)
60-
const timeFormat = t("ko-KR")
61-
const dateOptions = { day: "numeric" as const, month: "short" as const }
62-
const timeOptions = { hour: "numeric" as const, minute: "numeric" as const }
63-
64-
datetime = `${startTime.toLocaleString(timeFormat, {...dateOptions, ...timeOptions})} ~ ${endTime.toLocaleTimeString(timeFormat, timeOptions)}`
65-
duration = (new Date(session.slot.end).getTime() - new Date(session.slot.start).getTime()) / 1000 / 60
66-
room = t(session.slot.room[Object.keys(session.slot.room)[0]])
53+
let datetime = t("알 수 없음");
54+
let duration = session.duration || 0;
55+
let room = t("알 수 없음");
56+
57+
if (
58+
R.isObjectType(session.slot) &&
59+
R.isString(session.slot.start) &&
60+
R.isString(session.slot.end)
61+
) {
62+
const startTime = new Date(session.slot.start);
63+
const endTime = new Date(session.slot.end);
64+
const timeFormat = t("ko-KR");
65+
const dateOptions = { day: "numeric" as const, month: "short" as const };
66+
const timeOptions = { hour: "numeric" as const, minute: "numeric" as const };
67+
68+
datetime = `${startTime.toLocaleString(timeFormat, { ...dateOptions, ...timeOptions })} ~ ${endTime.toLocaleTimeString(timeFormat, timeOptions)}`;
69+
duration =
70+
(new Date(session.slot.end).getTime() - new Date(session.slot.start).getTime()) / 1000 / 60;
71+
room = t(session.slot.room[Object.keys(session.slot.room)[0]]);
6772
}
6873

6974
return (
7075
<SessionDetailStyled>
7176
<h1>{session.title}</h1>
72-
<h4><Markdown>{session.abstract}</Markdown></h4>
77+
<h4>
78+
<Markdown>{session.abstract}</Markdown>
79+
</h4>
7380
<hr />
7481
<SessionInfoContainerStyled>
7582
<p>{`${t("언어")} : ${t(locale)}`}</p>
@@ -95,44 +102,44 @@ const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }
95102
))}
96103
<hr />
97104
</SessionDetailStyled>
98-
)
99-
}
105+
);
106+
};
100107

101108
export const SessionDetailPage: React.FC = () => {
102-
const t = useTranslation()
103-
const { code } = useParams<{ code: string }>()
104-
const navigate = useNavigate()
109+
const t = useTranslation();
110+
const { code } = useParams<{ code: string }>();
111+
const navigate = useNavigate();
105112

106-
React.useEffect(() => window.scrollTo(0, 0), [])
113+
React.useEffect(() => window.scrollTo(0, 0), []);
107114

108115
if (!(R.isString(code) && !R.isEmpty(code))) {
109-
navigate("/session")
110-
return null
116+
navigate("/session");
117+
return null;
111118
}
112119

113120
const SessionDetailWrapper = wrap
114121
.ErrorBoundary({ fallback: <h4>{t("세션 정보를 불러오는 중 에러가 발생했습니다.")}</h4> })
115122
.Suspense({ fallback: <h4>{t("세션 정보를 불러오는 중 입니다.")}</h4> })
116123
.on(() => {
117124
// eslint-disable-next-line react-hooks/rules-of-hooks
118-
const { data } = useRetrieveSessionQuery(code)
119-
return <SessionDetail session={data} />
120-
})
125+
const { data } = useRetrieveSessionQuery(code);
126+
return <SessionDetail session={data} />;
127+
});
121128

122129
return (
123-
<Page>
130+
<Page title="세션 상세">
124131
<ReturnToSessionList onClick={() => navigate(-1)}>
125132
⬅️ {t("세션 목록으로 돌아가기")}
126133
</ReturnToSessionList>
127134
<SessionDetailWrapper />
128135
</Page>
129-
)
130-
}
136+
);
137+
};
131138

132139
const ReturnToSessionList = styled.small`
133140
color: rgba(255, 255, 255, 0.4);
134141
cursor: pointer;
135-
`
142+
`;
136143

137144
const SessionDetailStyled = styled.div`
138145
h1 {
@@ -154,13 +161,13 @@ const SessionDetailStyled = styled.div`
154161
font-size: 1rem;
155162
}
156163
}
157-
`
164+
`;
158165

159166
const SessionInfoContainerStyled = styled.div`
160167
* {
161168
margin: 0.5rem 0;
162169
}
163-
`
170+
`;
164171

165172
const SessionSpeakerItemStyled = styled.div`
166173
display: flex;
@@ -173,7 +180,7 @@ const SessionSpeakerItemStyled = styled.div`
173180
margin-top: 0;
174181
color: #fff;
175182
}
176-
`
183+
`;
177184

178185
const SessionSpeakerImageContainerStyled = styled.div`
179186
flex: 0 0 auto;
@@ -198,18 +205,18 @@ const SessionSpeakerImageContainerStyled = styled.div`
198205
199206
border-radius: 50%;
200207
}
201-
`
208+
`;
202209

203210
const TagContainer = styled.div`
204211
display: flex;
205212
align-items: center;
206213
justify-content: flex-start;
207214
gap: 0.5rem;
208-
`
215+
`;
209216

210217
const Tag = styled.kbd`
211218
margin: 0;
212219
background-color: #b0a8fe;
213220
font-family: var(--pico-font-family);
214221
font-size: 0.6rem;
215-
`
222+
`;

‎src/pages/Session/list.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import { wrap } from "@suspensive/react"
2-
import React from "react"
3-
import { useNavigate } from "react-router"
4-
import * as R from "remeda"
5-
import styled from "styled-components"
6-
7-
import { SloganShort } from "assets/icons"
8-
import { FallbackImg } from "components/common/FallbackImg"
9-
import Page from "components/common/Page"
10-
import { APIPretalxSessions } from "models/api/session"
11-
import { useListSessionsQuery } from "utils/hooks/useAPI"
12-
import useTranslation from "utils/hooks/useTranslation"
1+
import { wrap } from "@suspensive/react";
2+
import React from "react";
3+
import { useNavigate } from "react-router";
4+
import * as R from "remeda";
5+
import styled from "styled-components";
6+
7+
import { SloganShort } from "assets/icons";
8+
import { FallbackImg } from "components/common/FallbackImg";
9+
import Page from "components/common/Page";
10+
import { APIPretalxSessions } from "models/api/session";
11+
import { useListSessionsQuery } from "utils/hooks/useAPI";
12+
import useTranslation from "utils/hooks/useTranslation";
1313

1414
const SessionItem: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }) => {
1515
const t = useTranslation();
1616
const navigate = useNavigate();
1717

18-
const speakerImageSrc = (
19-
session.image
20-
|| R.isArray(session.speakers) && !R.isEmpty(session.speakers) && session.speakers[0].avatar
21-
|| ""
22-
)
23-
const urlSafeTitle = session.title.replace(/ /g, "-").replace(/([.])/g, "_").replace(/(?![0-9A-Za-zㄱ-ㅣ가-힣-_])./g, "")
18+
const speakerImageSrc =
19+
session.image ||
20+
(R.isArray(session.speakers) && !R.isEmpty(session.speakers) && session.speakers[0].avatar) ||
21+
"";
22+
const urlSafeTitle = session.title
23+
.replace(/ /g, "-")
24+
.replace(/([.])/g, "_")
25+
.replace(/(?![0-9A-Za-zㄱ-ㅣ가-힣-_])./g, "");
2426

2527
return (
2628
<SessionItemEl>
2729
<SessionItemImgContainer>
28-
<FallbackImg
29-
src={speakerImageSrc}
30-
alt={session.title}
31-
errorFallback={<SloganShort />}
32-
/>
30+
<FallbackImg src={speakerImageSrc} alt={session.title} errorFallback={<SloganShort />} />
3331
</SessionItemImgContainer>
3432
<SessionItemInfoContainer>
35-
<h4 onClick={() => navigate(`/session/${session.code}#${urlSafeTitle}`)}>{session.title}</h4>
33+
<h4 onClick={() => navigate(`/session/${session.code}#${urlSafeTitle}`)}>
34+
{session.title}
35+
</h4>
3636
<p>{session.abstract}</p>
3737
<SessionSpeakerContainer>
3838
by{" "}
@@ -92,7 +92,7 @@ export const SessionListPage = () => {
9292
});
9393

9494
return (
95-
<Page>
95+
<Page title="세션 목록">
9696
<h1>{t("세션 목록")}</h1>
9797
<hr />
9898
<h6 style={{ paddingLeft: "1rem" }}>

0 commit comments

Comments
 (0)