Skip to content

Commit db02151

Browse files
min050410min050410
authored
Merge pull request #100 from min050410/develop
🔀 feat: 다음 블로그, 이전 블로그 기능 추가
2 parents 4ba84c2 + 05e2df3 commit db02151

33 files changed

Lines changed: 1299 additions & 211 deletions

‎src/components/common/header/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const HeaderComponent = () => {
140140
</div>
141141
<div className="head content">
142142
<Link to="/intro">
143-
<span>소개</span>
143+
<span>포트폴리오</span>
144144
</Link>
145145
<a href={GITHUB_URL}>
146146
<span>깃허브</span>

‎src/components/layout/codeblock/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useRecoilValue } from "recoil";
44
import { themeColorState } from "../../../recoil/theme";
55
import Highlight, { defaultProps, Language } from "prism-react-renderer";
66
import darkTheme from "prism-react-renderer/themes/oceanicNext";
7-
import lightTheme from "prism-react-renderer/themes/github";
7+
import lightTheme from "prism-react-renderer/themes/duotoneLight";
88

99
const Pre = styled.pre`
1010
text-align: left;

‎src/components/layout/nearestPost/index.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from "react";
2+
import { Link } from "gatsby";
3+
4+
type postStateType = {
5+
id: number;
6+
title: string;
7+
filename: string;
8+
} | null;
9+
10+
type NearestPostComponentType = {
11+
nextPost: postStateType;
12+
previousPost: postStateType;
13+
};
14+
15+
const NearestPostComponent = ({
16+
nextPost,
17+
previousPost,
18+
}: NearestPostComponentType) => (
19+
<div className="nearest-post">
20+
{nextPost && (
21+
<div className="nearest-post--next-post">
22+
다음 블로그:{" "}
23+
<Link
24+
to={`/postitem/?name=${nextPost?.filename}`}
25+
key={nextPost?.id}
26+
>
27+
<span>{nextPost?.title}</span>
28+
</Link>
29+
</div>
30+
)}
31+
{previousPost && (
32+
<div className="nearest-post--previous-post">
33+
이전 블로그:{" "}
34+
<Link
35+
to={`/postitem/?name=${previousPost?.filename}`}
36+
key={previousPost?.id}
37+
>
38+
<span>{previousPost?.title}</span>
39+
</Link>
40+
</div>
41+
)}
42+
</div>
43+
);
44+
45+
export default NearestPostComponent;

‎src/components/layout/popular/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,29 @@ export const slickSettings = {
99
arrows: false,
1010
infinite: true,
1111
speed: 1000,
12+
autoplay: true,
1213
autoplaySpeed: 5000,
14+
pauseOnHover: true,
1315
slidesToShow: 6,
1416
slidesToScroll: 6,
17+
initialSlide: 0,
18+
dotsClass: "slick-dots",
19+
responsive: [
20+
{
21+
breakpoint: 1440,
22+
settings: {
23+
slidesToShow: 5,
24+
slidesToScroll: 5,
25+
},
26+
},
27+
{
28+
breakpoint: 960,
29+
settings: {
30+
slidesToShow: 3,
31+
slidesToScroll: 3,
32+
},
33+
},
34+
],
1535
};
1636

1737
//styles

‎src/components/layout/popular/nextArrow.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,16 @@ type NextArrowPropsType = {
44
className?: any;
55
style?: any;
66
onClick?: React.MouseEventHandler<HTMLDivElement>;
7-
}
7+
};
88

9-
const NextArrow = ({
10-
className,
11-
style,
12-
onClick
13-
}: NextArrowPropsType) => {
9+
const NextArrow = ({ className, style, onClick }: NextArrowPropsType) => {
1410
return (
15-
<div className={className} style={{ ...style, display: 'block', background: 'red' }} onClick={onClick} />
16-
)
17-
}
11+
<div
12+
className={className}
13+
style={{ ...style, display: "block", background: "red" }}
14+
onClick={onClick}
15+
/>
16+
);
17+
};
1818

1919
export default NextArrow;
20-
21-
22-
23-

‎src/components/layout/popular/popularCard.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,27 @@ const PopularCardComponent = ({
1515
imgLineOne,
1616
imgLineTwo,
1717
title,
18-
}: PopularCardComponentType) => {
19-
return (
20-
<div className="card" key={id}>
21-
<div className="imgbox">
22-
<Link to={`postitem/?name=${filename}`}>
23-
<img
24-
src={
25-
require(`../../../../static/gradients/${id}.png`)
26-
.default
27-
}
28-
alt={imgLineTwo}
29-
/>
30-
<div className="recent-img-text-one">
31-
<p>{imgLineOne}</p>
32-
</div>
33-
<div className="recent-img-text-two">
34-
<p>{imgLineTwo}</p>
35-
</div>
36-
</Link>
37-
</div>
38-
<h3>{title}</h3>
18+
}: PopularCardComponentType) => (
19+
<div className="card" key={id}>
20+
<div className="imgbox">
21+
<Link to={`postitem/?name=${filename}`}>
22+
<img
23+
src={
24+
require(`../../../../static/gradients/${id}.png`)
25+
.default
26+
}
27+
alt={imgLineTwo}
28+
/>
29+
<div className="recent-img-text-one">
30+
<p>{imgLineOne}</p>
31+
</div>
32+
<div className="recent-img-text-two">
33+
<p>{imgLineTwo}</p>
34+
</div>
35+
</Link>
3936
</div>
40-
);
41-
};
37+
<h3>{title}</h3>
38+
</div>
39+
);
4240

4341
export default PopularCardComponent;

‎src/components/layout/popular/popularPostsData.ts‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,6 @@ const popularPostsData: popularPostsDataType = [
2727
imgLineOne: "",
2828
imgLineTwo: "CORS",
2929
},
30-
{
31-
id: 15,
32-
title: "다익스트라 알고리즘",
33-
filename: "Dijkstra",
34-
imgLineOne: "",
35-
imgLineTwo: "Dijkstra",
36-
},
37-
{
38-
id: 16,
39-
title: "플로이드 워셜 알고리즘",
40-
filename: "Floyed-warshell",
41-
imgLineOne: "Floyed",
42-
imgLineTwo: "Warshell",
43-
},
44-
{
45-
id: 17,
46-
title: "KMP 알고리즘 정리",
47-
filename: "KMP",
48-
imgLineOne: "",
49-
imgLineTwo: "KMP",
50-
},
5130
{
5231
id: 13,
5332
title: "클린 아키텍처에 대해 알아보자",
@@ -56,18 +35,11 @@ const popularPostsData: popularPostsDataType = [
5635
imgLineTwo: "Architecture",
5736
},
5837
{
59-
id: 1,
60-
title: "개인 블로그를 개발한 이유",
61-
filename: "Blog",
62-
imgLineOne: "",
63-
imgLineTwo: "My Blog",
64-
},
65-
{
66-
id: 2,
67-
title: "CORS와 해결방법",
68-
filename: "Cors",
69-
imgLineOne: "",
70-
imgLineTwo: "CORS",
38+
id: 6,
39+
title: "윈도우 터미널 꾸미기",
40+
filename: "Ohmyposh",
41+
imgLineOne: "Oh My",
42+
imgLineTwo: "Posh",
7143
},
7244
{
7345
id: 15,
@@ -76,6 +48,13 @@ const popularPostsData: popularPostsDataType = [
7648
imgLineOne: "",
7749
imgLineTwo: "Dijkstra",
7850
},
51+
{
52+
id: 20,
53+
title: "2022년 회고와 앞으로의 목표",
54+
filename: "Review2022",
55+
imgLineOne: "2022",
56+
imgLineTwo: "Review",
57+
},
7958
{
8059
id: 16,
8160
title: "플로이드 워셜 알고리즘",
@@ -85,17 +64,38 @@ const popularPostsData: popularPostsDataType = [
8564
},
8665
{
8766
id: 17,
88-
title: "KMP 알고리즘 정리",
67+
title: "KMP 알고리즘",
8968
filename: "KMP",
9069
imgLineOne: "",
9170
imgLineTwo: "KMP",
9271
},
9372
{
94-
id: 13,
95-
title: "클린 아키텍처에 대해 알아보자",
96-
filename: "The-clean-architecture",
97-
imgLineOne: "Clean",
98-
imgLineTwo: "Architecture",
73+
id: 18,
74+
title: "React에서 setInterval의 한계점",
75+
filename: "useInterval",
76+
imgLineOne: "React",
77+
imgLineTwo: "LifeCycle",
78+
},
79+
{
80+
id: 10,
81+
title: "힙 정렬(heap sort)에 대해 알아보자",
82+
filename: "Heapsort",
83+
imgLineOne: "",
84+
imgLineTwo: "Heap sort",
85+
},
86+
{
87+
id: 22,
88+
title: "CSRF 공격",
89+
filename: "Csrf",
90+
imgLineOne: "",
91+
imgLineTwo: "CSRF",
92+
},
93+
{
94+
id: 21,
95+
title: "Gradle을 kotiln dsl로 마이그레이션",
96+
filename: "Kts",
97+
imgLineOne: "kts",
98+
imgLineTwo: "migration",
9999
},
100100
];
101101

‎src/components/layout/recent/index.tsx‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useSearchParam } from "../../../hooks";
77

88
// styles
99
import "../../../styles/recent.sass";
10+
import RecentPostComponent from "./recentPost";
1011

1112
const RecentComponent = () => {
1213
const filter = useSearchParam("f");
@@ -15,41 +16,18 @@ const RecentComponent = () => {
1516
const recent_list = recentPostsData
1617
.filter((word) => word.filter == filter || filter === null)
1718
.reverse()
18-
.map((post, i) => (
19-
<div className="recent_content" key={i}>
20-
<Link to={`postitem/?name=${post.filename}`}>
21-
<div className="margin_post">
22-
<div className="post">
23-
<div className="left">
24-
<div className="imgbox">
25-
<img
26-
src={
27-
require(`../../../../static/gradients/${post.id}.png`)
28-
.default
29-
}
30-
alt={post.imgLineTwo}
31-
/>
32-
<div className="img-text-one">
33-
<p>{post.imgLineOne}</p>
34-
</div>
35-
<div className="img-text-two">
36-
<p>{post.imgLineTwo}</p>
37-
</div>
38-
</div>
39-
<div id="text_group">
40-
<h3>{post.title}</h3>
41-
<div>{post.date}</div>
42-
</div>
43-
</div>
44-
<div className="tag">
45-
{post.tag && <span>{post.tag}</span>}
46-
{post.tag2 && <span>{post.tag2}</span>}
47-
{post.tag3 && <span>{post.tag3}</span>}
48-
</div>
49-
</div>
50-
</div>
51-
</Link>
52-
</div>
19+
.map((recentPost, i) => (
20+
<RecentPostComponent
21+
id={recentPost.id}
22+
filename={recentPost.filename}
23+
imgLineOne={recentPost.imgLineOne}
24+
imgLineTwo={recentPost.imgLineTwo}
25+
title={recentPost.title}
26+
date={recentPost.date}
27+
tag={recentPost.tag}
28+
tag2={recentPost.tag2}
29+
tag3={recentPost.tag3}
30+
/>
5331
));
5432
return (
5533
<section>

0 commit comments

Comments
 (0)