Skip to content

Commit 41797e1

Browse files
author
Joohaem Lee
committed
Enhance Font adjusting on all pages
1 parent a07fb7b commit 41797e1

File tree

31 files changed

+126
-144
lines changed

31 files changed

+126
-144
lines changed

‎public/next.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/app/about/layout.css.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ export const tabsContainer = style({
88
columnGap: "32px",
99
flexWrap: "wrap",
1010

11-
margin: "50px 0 40px"
11+
margin: "40px 0"
1212
})

‎src/app/about/page.css.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const content = style({
1414

1515
display: 'flex',
1616
flexDirection: 'column',
17-
gap: '12px',
17+
gap: '10px',
1818

1919
"@media": {
2020
"screen and (max-width: 1194px)": {

‎src/app/about/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Image from "next/image";
22
import { content, contentImage, contentImageWrapper, contentsContainer, descriptionWrapper } from "./page.css";
33
import Text from "@/components/Text";
44
import Link from "next/link";
5+
import Heading from "@/components/Heading";
56

67
const CONTENTS = [
78
{
@@ -52,9 +53,9 @@ export default function About() {
5253
className={contentImage}
5354
/>
5455
</div>
55-
<Text size="l">
56+
<Heading size="title-s">
5657
{title}
57-
</Text>
58+
</Heading>
5859
<Text size="s" className={descriptionWrapper}>
5960
{description}
6061
</Text>

‎src/app/articles/[id]/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ArticlePage from '@/components/ArticlePage';
22
import Comments from '@/components/Comments';
33
import Container from '@/components/Container';
4+
import Header from '@/components/Header';
45
import { getArticleById, getArticles } from '@/core/blog';
56
import { Metadata, ResolvingMetadata } from 'next';
67

@@ -37,10 +38,11 @@ export async function generateMetadata({ params }: ArticleProps, _parent: Resolv
3738

3839
async function Article({ params }: ArticleProps) {
3940
return (
40-
<Container>
41+
<>
42+
<Header />
4143
<ArticlePage params={params} />
4244
<Comments />
43-
</Container>
45+
</>
4446
);
4547
}
4648

‎src/app/articles/page.css.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,29 @@ export const categoryChipsWrapper = style({
77
display: "flex",
88
gap: "8px",
99

10-
padding: "40px 0 0",
10+
marginTop: "40px",
1111
});
1212

1313
export const articleListContainer = style({
1414
display: "flex",
1515
gap: '30px',
1616
justifyContent: "space-between",
17-
padding: "40px 0 0",
17+
18+
marginTop: "30px",
1819
});
1920

2021
export const articleInfo = style({
21-
color: '#6c757d',
22+
color: 'rgba(0, 0, 0, 0.5)',
2223
});
2324

25+
export const articleTitle = style({
26+
marginTop: '8px'
27+
})
28+
2429
export const articleDescription = style({
25-
marginTop: '16px',
30+
marginTop: '8px',
2631

27-
height: '72px',
32+
height: '56px',
2833
display: '-webkit-box',
2934
overflow: 'hidden',
3035
textOverflow: 'ellipsis',
@@ -34,9 +39,9 @@ export const articleDescription = style({
3439

3540
export const thumbnailWrapper = style({
3641
position: 'relative',
37-
width: "140px",
38-
minWidth: '140px',
39-
height: "140px",
42+
width: "276px",
43+
minWidth: '276px',
44+
height: "123px",
4045

4146
display: "flex",
4247
justifyContent: "center",

‎src/app/articles/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ import {
1414
articleDescription,
1515
articleInfo,
1616
articleListContainer,
17+
articleTitle,
1718
categoryChipsWrapper,
1819
thumbnailImage,
1920
thumbnailWrapper,
2021
} from "./page.css";
2122
import Text from "@/components/Text";
23+
import Label from "@/components/Label";
2224

2325
export async function generateStaticParams() {
2426
const articles = await getArticles();
@@ -61,7 +63,7 @@ export default async function Articles({ params }: ArticlesProps) {
6163
<Container>
6264
<div className={categoryChipsWrapper}>
6365
<Link href="/articles">
64-
<Chip active={!currentCategory}>전체</Chip>
66+
<Chip active={!currentCategory}>All</Chip>
6567
</Link>
6668
{/* {categories.map((category) => (
6769
<Link key={category} href={`/category/${encode(category)}`}>
@@ -77,15 +79,15 @@ export default async function Articles({ params }: ArticlesProps) {
7779
className={articleListContainer}
7880
>
7981
<div>
80-
<Text className={articleInfo}>
82+
<Label size="m" className={articleInfo}>
8183
{article.category} |{" "}
8284
{article.publishedAt &&
8385
format(article.publishedAt, "yyyy.MM.dd")}
84-
</Text>
85-
<Heading as="h2" size="title-l">
86+
</Label>
87+
<Heading as="h2" size="title-m" className={articleTitle}>
8688
{article.title}
8789
</Heading>
88-
<Text className={articleDescription}>
90+
<Text size="s" className={articleDescription}>
8991
{article.description}
9092
</Text>
9193
</div>

‎src/components/ArticlePage/index.css.ts‎

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,43 @@
11
import { style } from "@vanilla-extract/css";
22

3-
export const backLink = style({
4-
display: "flex",
5-
gap: "8px",
6-
padding: "24px 8px",
7-
});
8-
9-
export const label = style({
10-
color: "gray"
11-
});
12-
133
export const thumbnailImageWrapper = style({
144
position: "relative",
155
width: "100%",
16-
height: "400px",
6+
height: "383px",
177

188
overflow: "clip",
9+
10+
backgroundColor: "rgba(1, 1, 1, 0.7)"
1911
});
2012

2113
export const thumbnailImage = style({
22-
objectFit: 'contain'
14+
objectFit: 'cover'
2315
})
2416

25-
export const categories = style({
26-
display: "flex",
27-
marginTop: "32px",
28-
"@media": {
29-
"screen and (max-width: 480px)": {
30-
marginTop: '20px'
31-
}
32-
}
33-
});
17+
export const dimmedFilter = style({
18+
position: "absolute",
19+
top: "0",
20+
left: "0",
21+
right: "0",
22+
bottom: "0",
23+
24+
backgroundColor: "rgba(1, 1, 1, 0.7)"
25+
})
3426

35-
export const categoryChip = style({
36-
borderRadius: "13px",
37-
padding: "6px 12px",
38-
backgroundColor: "#FFC8DC"
39-
});
27+
export const titleContainer = style({
28+
marginTop: "238px"
29+
})
30+
31+
export const articleTitle = style({
32+
marginTop: '10px',
33+
color: "#ffffff"
4034

41-
export const title = style({
42-
marginTop: '40px',
43-
"@media": {
44-
"screen and (max-width: 480px)": {
45-
marginTop: '20px',
46-
}
47-
}
4835
})
4936

50-
export const date = style({
51-
margin: '16px 0 40px',
52-
color: "#343a40",
53-
"@media": {
54-
"screen and (max-width: 480px)": {
55-
margin: '16px 0 20px',
56-
}
57-
}
37+
export const articleInfo = style({
38+
color: "rgba(255, 255, 255, 0.7)"
5839
})
5940

60-
export const bodyContainer = style({})
41+
export const bodyContainer = style({
42+
paddingTop: "30px"
43+
})

‎src/components/ArticlePage/index.tsx‎

Lines changed: 31 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import Link from 'next/link';
21
import Image from 'next/image';
32
import { format } from 'date-fns';
43

54
import { getArticleById } from '@/core/blog';
6-
import { BlockRenderer } from '@/components/renderer/BlockRenderer';
75
import Label from '@/components/Label';
8-
import Text from '@/components/Text';
96
import Heading from '@/components/Heading';
7+
import Container from '@/components/Container';
8+
import { BlockRenderer } from '@/components/renderer/BlockRenderer';
109

11-
import { backLink, bodyContainer, categories, categoryChip, date, thumbnailImageWrapper, label, thumbnailImage, title } from './index.css';
10+
import { bodyContainer, articleInfo, thumbnailImageWrapper, thumbnailImage, articleTitle, dimmedFilter, titleContainer } from './index.css';
1211

1312

1413
interface ArticlePageProps {
@@ -23,55 +22,36 @@ async function ArticlePage({ params }: ArticlePageProps) {
2322

2423
return (
2524
<>
26-
<Link href='/articles' className={backLink}>
27-
<BackIcon />
28-
<Text size='s' className={label}>뒤로 가기</Text>
29-
</Link>
30-
{article.thumbnail && (
31-
<div className={thumbnailImageWrapper}>
32-
<Image
33-
src={article.thumbnail.url}
34-
alt='Thumbnail Image'
35-
fill
36-
className={thumbnailImage}
37-
/>
38-
</div>
39-
)}
40-
<div className={categories}>
41-
{article.category && (
42-
<>
43-
{/* <Link href={`/category/articles?category=${encode(article.category)}`}> */}
44-
<Text className={categoryChip}>
45-
{article.category}
46-
</Text>
47-
{/* </Link> */}
48-
</>
49-
)}
50-
</div>
51-
<Heading as="h1" size='headline-l' className={title}>
52-
{article.title}
53-
</Heading>
54-
<Label size='m' className={date}>
55-
{article.publishedAt && format(article.publishedAt, 'yyyy.MM.dd')}
56-
</Label>
57-
<Text className={bodyContainer}>
25+
{article.thumbnail
26+
? (
27+
<div className={thumbnailImageWrapper}>
28+
<Image
29+
src={article.thumbnail.url}
30+
alt='Thumbnail Image'
31+
fill
32+
className={thumbnailImage}
33+
/>
34+
<div className={dimmedFilter}>
35+
<Container className={titleContainer}>
36+
<Label size='l' serif className={articleInfo}>
37+
{article.category} | {article.publishedAt && format(article.publishedAt, 'yyyy.MM.dd')}
38+
</Label>
39+
<Heading as="h1" size='display-m' serif className={articleTitle}>
40+
{article.title}
41+
</Heading>
42+
</Container>
43+
</div>
44+
</div>
45+
)
46+
: (
47+
null
48+
)
49+
}
50+
<Container className={bodyContainer}>
5851
<BlockRenderer blocks={article.blocks} />
59-
</Text>
52+
</Container>
6053
</>
6154
);
6255
}
6356

64-
export default ArticlePage;
65-
66-
function BackIcon(props: React.SVGProps<SVGSVGElement>) {
67-
return (
68-
<svg width={20} height={20} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
69-
<path
70-
fillRule='evenodd'
71-
clipRule='evenodd'
72-
d='M13.852 2.642a.498.498 0 010 .7L7.194 10l6.658 6.658a.498.498 0 010 .7.498.498 0 01-.7 0L6.144 10.35a.498.498 0 010-.7l7.008-7.008a.498.498 0 01.7 0z'
73-
fill='#808388'
74-
/>
75-
</svg>
76-
);
77-
}
57+
export default ArticlePage;

‎src/components/Chip/index.css.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,13 @@ export const chip = style({
99
});
1010
export const activeChip = style([
1111
chip,
12-
{
13-
border: "1px solid #eeeeee",
14-
backgroundColor: "#eeeeee",
15-
},
1612
]);
1713
export const inactiveChip = style([
1814
chip,
1915
{
20-
border: "1px solid #000",
21-
backgroundColor: "#000",
22-
color: "#fff",
16+
color: "rgba(0, 0, 0, 0.5)",
2317
":hover": {
24-
border: "1px solid #eeeeee",
25-
backgroundColor: "#eeeeee",
18+
color: "#010101",
2619
},
2720
},
2821
]);

0 commit comments

Comments
 (0)