Skip to content

Commit 14d5c66

Browse files
MINJE-98MINJE-98
authored
Blog 컴포넌트 관련 구현 (#304)
* feat(constants-post): card title * fix(api-userService): UserName Get 기능을 추가해야 합니다. * feat(lib-utility): seo header object * feat: constants 수정 반영 * feat(modules): blog index * fix: postListQuery * feat(page): blog 컴포넌트 결합
1 parent b78d65d commit 14d5c66

File tree

8 files changed

+129
-19
lines changed

8 files changed

+129
-19
lines changed

‎constants/post/card/title.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import LANGUAGE from "@Library/language/constant";
2+
3+
import { LanguageInterface } from "@Library/language/interface";
4+
5+
const POSTCARD_ALL_CATEGORY_TITLE: LanguageInterface = {
6+
[LANGUAGE.ko]: "전체 카테고리",
7+
[LANGUAGE.en]: "All Categories",
8+
};
9+
export default POSTCARD_ALL_CATEGORY_TITLE;

‎constants/post/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import POSTCARD_ALL_CATEGORY_TITLE from "./card/title";
2+
3+
export { POSTCARD_ALL_CATEGORY_TITLE };

‎lib/api/users/userService.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ export default class UserService {
3030
return newResponse;
3131
}
3232

33+
// TODO: UserName을 전달 받게 변경되어야합니다. -> Backend 스팩이 변경되어야합니다!
3334
async getUserProfile(
3435
userName: string,
3536
options?: AxiosRequestConfig<unknown>
3637
): Promise<GetUserProfileResponseTransFormSettingsDto> {
3738
const { data } = await this.userRepository.usersControllerGetUserProfile(
38-
userName,
39+
1,
3940
options
4041
);
4142
const newResponse: GetUserProfileResponseTransFormSettingsDto = {

‎lib/utility/seo.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { DefaultSeoProps } from "next-seo";
2+
3+
import GetUserProfileResponseTransFormSettingsDto from "@Library/api/users/interface/getUserProfileResponseTransFormSettingsDto";
4+
5+
export const userBlogDetailSeo = (
6+
data: GetUserProfileResponseTransFormSettingsDto
7+
): DefaultSeoProps => {
8+
return {
9+
title: !data.settings.DISPLAY_NAME ? data.name : data.settings.DISPLAY_NAME,
10+
description: !data.settings.INTRO_MSG ? "" : data.settings.INTRO_MSG,
11+
openGraph: {
12+
type: "website",
13+
locale: "ko_KR",
14+
url: "tilog.io",
15+
title: !data.settings.DISPLAY_NAME
16+
? data.name
17+
: data.settings.DISPLAY_NAME,
18+
site_name: "TILog",
19+
20+
images: [
21+
{
22+
url: !data.avatar ? "" : data.avatar,
23+
width: 285,
24+
height: 167,
25+
alt: "TILog_User_Avatar",
26+
},
27+
],
28+
},
29+
};
30+
};

‎src/components/common/organisms/list/PostCardList.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from "react";
33
import CardLoading from "@Components/common/molecules/card/CardLoading";
44
import PostCard from "@Components/common/molecules/card/post/PostCard";
55
import RenderTechIcons from "@Components/common/molecules/tech-icons/RenderTechIcons";
6+
import { POSTCARD_ALL_CATEGORY_TITLE } from "@Constants/post";
67
import useGetPostListQuery from "@Hooks/react-query/post/useGetPostListQuery";
78

89
import GetPostRequestDto from "@Library/api/post/interface/getPostRequestDto";
@@ -41,7 +42,7 @@ const PostCardList = ({
4142
return (
4243
<div>
4344
{!categoryName ? (
44-
<h1>전체카테고리</h1>
45+
<h1>{POSTCARD_ALL_CATEGORY_TITLE.ko}</h1>
4546
) : (
4647
<h2>
4748
<div className="inline mr-5 text-5xl">

‎src/components/modules/blog/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import PostCardList from "@Components/common/organisms/list/PostCardList";
2+
import UserCategoryButtonList from "@Components/common/organisms/list/UserCategoryButtonList";
3+
import CustomSettingsUserProfile from "@Components/common/organisms/profile/CustomSettingsUserProfile";
4+
5+
export { UserCategoryButtonList, CustomSettingsUserProfile, PostCardList };

‎src/hooks/react-query/post/useGetPostListQuery.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AxiosResponse } from "axios";
22
import { useInfiniteQuery } from "react-query";
33

4-
import useGetCategoryListQuery from "@Hooks/react-query/category/useGetCategoryListQuery";
4+
import useSearchCategory from "@Hooks/react-query/category/useSearchCategory";
55
import api from "@Library/api";
66

77
import { GetPostsResponseDto } from "@til-log.lab/tilog-api";
@@ -26,16 +26,16 @@ const useGetPostListQuery = ({
2626
userId,
2727
page,
2828
}: GetPostListQueryInterface) => {
29-
const { data } = useGetCategoryListQuery(categoryName);
30-
const categoryId = data?.data.list.length === 1 ? data.data.list[0].id : 0;
29+
const searchCategory = useSearchCategory();
30+
const data = searchCategory(categoryName);
31+
const categoryId = data?.length === 1 ? data[0].id : 0;
3132

3233
return useInfiniteQuery<
3334
AxiosResponse<GetPostsResponseDto>,
3435
ExceptionInterface,
35-
AxiosResponse<GetPostsResponseDto>,
36-
string
36+
AxiosResponse<GetPostsResponseDto>
3737
>(
38-
`PostList-${dateScope}-${sortScope}-${userId}`,
38+
["PostList", categoryId, userId],
3939
({ pageParam = page }) => {
4040
return api.postService.getPosts(
4141
dateScope,

‎src/pages/blog/[username].tsx

Lines changed: 72 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,82 @@
11
import { GetServerSideProps, NextPage } from "next";
22

3-
import OMyBlog from "@Organisms/MyBlog";
4-
import { wrapper } from "@Redux/store";
5-
import OHeader from "@Organisms/Header";
3+
import { DefaultSeoProps, NextSeo } from "next-seo";
64

7-
const BlogPage: NextPage = () => {
5+
import {
6+
UserCategoryButtonList,
7+
CustomSettingsUserProfile,
8+
PostCardList,
9+
} from "@Components/modules/blog";
10+
import useGetStringTypeToRouter from "@Hooks/router/useGetStringTypeToRouter";
11+
import api from "@Library/api";
12+
import { userBlogDetailSeo } from "@Library/utility/seo";
13+
14+
interface BlogPagePageProps {
15+
seo: DefaultSeoProps;
16+
}
17+
// TODO: 현재 BlogPage는 UserID 1 번을 반환하도록 하드 코딩되어 있습니다. userName로 전달받을 수 있게 변경된다면 그렇게 변경해야합니다.
18+
const BlogPage: NextPage<BlogPagePageProps> = ({ seo }: BlogPagePageProps) => {
19+
const category = useGetStringTypeToRouter("category");
820
return (
9-
<div className="md:mx-20 2xl:mx-60">
10-
<OHeader />
11-
<OMyBlog />
21+
<div>
22+
<NextSeo {...seo} />
23+
<div className="m-auto max-w-[1280px] h-full items-center">
24+
<div className="grid justify-center grid-flow-row p-3 md:justify-between md:grid-flow-col">
25+
<div className="w-full max-w-[450px]">
26+
<CustomSettingsUserProfile userId={1} />
27+
<hr />
28+
<UserCategoryButtonList userId={1} />
29+
<hr />
30+
{/* TODO GITHUB STATUS LINK */}
31+
<p className="text-lg text-neutral-600">Pinned Repo</p>
32+
<div className="flex flex-col gap-y-1">
33+
<div className="h-20 rounded w-30 bg-neutral-500" />
34+
<div className="h-20 rounded w-30 bg-neutral-500" />
35+
<div className="h-20 rounded w-30 bg-neutral-500" />
36+
<div className="h-20 rounded w-30 bg-neutral-500" />
37+
</div>
38+
<hr />
39+
40+
{/* TODO GITHUB STATUS LINK */}
41+
<p className="text-lg text-neutral-600">TopLanguage Repo</p>
42+
<div className="flex flex-row gap-x-1">
43+
<div className="w-10 h-10 rounded bg-neutral-500" />
44+
<div className="w-10 h-10 rounded bg-neutral-500" />
45+
<div className="w-10 h-10 rounded bg-neutral-500" />
46+
<div className="w-10 h-10 rounded bg-neutral-500" />
47+
<div className="w-10 h-10 rounded bg-neutral-500" />
48+
</div>
49+
<hr />
50+
</div>
51+
<PostCardList
52+
dateScope="All"
53+
sortScope="createdAt"
54+
page={0}
55+
categoryName={category}
56+
maxContent={10}
57+
userId={1}
58+
/>
59+
</div>
60+
</div>
1261
</div>
1362
);
1463
};
1564
export default BlogPage;
16-
export const getServerSideProps: GetServerSideProps =
17-
wrapper.getServerSideProps(() => async () => {
65+
export const getServerSideProps: GetServerSideProps = async (context) => {
66+
const { username } = context.query;
67+
if (!username) return { props: {} };
68+
if (Array.isArray(username)) return { props: {} };
69+
try {
70+
const data = await api.usersService.getUserProfile(username);
71+
const seo = userBlogDetailSeo(data);
1872
return {
19-
props: {},
73+
props: {
74+
seo,
75+
},
2076
};
21-
});
77+
} catch (error) {
78+
return {
79+
notFound: true,
80+
};
81+
}
82+
};

0 commit comments

Comments
 (0)