Blog 컴포넌트 관련 구현 (#306)

MINJE-98 · web-flow · commit 0e461dd9875b · 2022-08-09T20:32:34.000+09:00
* feat(constants): link

* feat(api-post-like): postLike 구현 및 적용

* feat(lib-utility): seo post 추가

* feat(modules): link

* feat(modules): header

* feat(modules): like

* feat(modules): writer

* feat(modules): index

* feat(hooks-like): like mutation, hasLike query

* feat(hooks): isOwner hooks

* feat(hooks-react-query-post): postDetailQuery

* feat(page): page 컴포넌트 결합

* feat: _app root component에 포지션값 추가
diff --git a/constants/post/index.ts b/constants/post/index.ts
@@ -1,3 +1,4 @@
 import POSTCARD_ALL_CATEGORY_TITLE from "./card/title";
 
+export * from "./link";
 export { POSTCARD_ALL_CATEGORY_TITLE };
diff --git a/constants/post/link.ts b/constants/post/link.ts
@@ -0,0 +1,18 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const DIRECT_OWNER_BLOG: LanguageInterface = {
+  [LANGUAGE.ko]: "의 TILog",
+  [LANGUAGE.en]: "'s TILog",
+};
+
+export const POST_EDIT: LanguageInterface = {
+  [LANGUAGE.ko]: "수정",
+  [LANGUAGE.en]: "Edit",
+};
+
+export const POST_DELETE: LanguageInterface = {
+  [LANGUAGE.ko]: "삭제",
+  [LANGUAGE.en]: "Delete",
+};
diff --git a/lib/api/index.ts b/lib/api/index.ts
@@ -1,11 +1,12 @@
 import authService from "@Library/api/auth";
 import categoryService from "@Library/api/category";
-import postService from "@Library/api/post";
+import { postService, postLikeService } from "@Library/api/post";
 import usersService from "@Library/api/users";
 
 export default {
   authService,
   usersService,
   categoryService,
   postService,
+  postLikeService,
 };
diff --git a/lib/api/post/index.ts b/lib/api/post/index.ts
@@ -1,9 +1,14 @@
 import { TILOG_API } from "@Constants/environment";
 import httpClient from "@Library/api/httpClient";
+import PostLikeRepository from "@Library/api/post/like/postLikeRepository";
+import PostLikeService from "@Library/api/post/like/postLikeService";
 import PostRepository from "@Library/api/post/postRepository";
 import PostService from "@Library/api/post/postService";
 
 const postRepository = new PostRepository(httpClient.http, TILOG_API);
-const postService = new PostService(postRepository, httpClient.http);
+const postLikeRepository = new PostLikeRepository(httpClient.http, TILOG_API);
 
-export default postService;
+const postService = new PostService(postRepository);
+const postLikeService = new PostLikeService(postLikeRepository);
+
+export { postService, postLikeService };
diff --git a/lib/api/post/interface/getPostDetailRequest.ts b/lib/api/post/interface/getPostDetailRequest.ts
@@ -0,0 +1,3 @@
+export default interface GetPostDetailRequestDto {
+  postId: string;
+}
diff --git a/lib/api/post/like/interface/LikedRequestDto.ts b/lib/api/post/like/interface/LikedRequestDto.ts
@@ -0,0 +1,10 @@
+import {
+  SetLikedRequestDto,
+  UnsetLikedRequestDto,
+} from "@til-log.lab/tilog-api";
+
+type LikedRequestDto =
+  | SetLikedRequestDto["postId"]
+  | UnsetLikedRequestDto["postId"];
+
+export default LikedRequestDto;
diff --git a/lib/api/post/like/interface/postHasLikeDto.ts b/lib/api/post/like/interface/postHasLikeDto.ts
@@ -0,0 +1,3 @@
+export default interface PostHasLikeDto {
+  postId: string;
+}
diff --git a/lib/api/post/like/postLikeRepository.ts b/lib/api/post/like/postLikeRepository.ts
@@ -0,0 +1,13 @@
+import { AxiosInstance } from "axios";
+
+import { Configuration, PostLikeApi } from "@til-log.lab/tilog-api";
+
+export default class PostLikeRepository extends PostLikeApi {
+  constructor(
+    axios?: AxiosInstance,
+    basePath?: string,
+    configuration?: Configuration
+  ) {
+    super(configuration, basePath, axios);
+  }
+}
diff --git a/lib/api/post/like/postLikeService.ts b/lib/api/post/like/postLikeService.ts
@@ -0,0 +1,65 @@
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+
+import validateToken from "@Library/api/auth/validateTokenDecorator";
+import PostLikeRepository from "@Library/api/post/like/postLikeRepository";
+
+import {
+  HasLikedResponseDto,
+  SetLikedRequestDto,
+  UnsetLikedRequestDto,
+} from "@til-log.lab/tilog-api";
+
+import ExceptionInterface from "@Library/api/exception/interface";
+import LikedRequestDto from "@Library/api/post/like/interface/LikedRequestDto";
+import PostHasLikeDto from "@Library/api/post/like/interface/postHasLikeDto";
+
+export default class PostLikeService {
+  constructor(private readonly postLikeRepository: PostLikeRepository) {}
+
+  @validateToken()
+  private setLike(
+    postId: SetLikedRequestDto["postId"],
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    const setLikedRequestDto: SetLikedRequestDto = {
+      postId,
+    };
+    return this.postLikeRepository.postsLikeControllerSetLike(
+      setLikedRequestDto,
+      options
+    );
+  }
+
+  @validateToken()
+  private unsetLike(
+    postId: UnsetLikedRequestDto["postId"],
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    const unsetLikedRequestDto: UnsetLikedRequestDto = {
+      postId,
+    };
+    return this.postLikeRepository.postsLikeControllerUnsetLike(
+      unsetLikedRequestDto,
+      options
+    );
+  }
+
+  @validateToken()
+  hasLiked(
+    postId: PostHasLikeDto["postId"],
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<HasLikedResponseDto, ExceptionInterface>> {
+    return this.postLikeRepository.postsLikeControllerHasLiked(postId, options);
+  }
+
+  async toggleLike(
+    postId: LikedRequestDto,
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    const { data } = await this.hasLiked(postId, options);
+    const isLiked = data.like;
+
+    if (isLiked) return this.unsetLike(postId, options);
+    return this.setLike(postId, options);
+  }
+}
diff --git a/lib/api/post/postService.ts b/lib/api/post/postService.ts
@@ -1,4 +1,4 @@
-import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
 
 import validateToken from "@Library/api/auth/validateTokenDecorator";
 import PostRepository from "@Library/api/post/postRepository";
@@ -14,10 +14,7 @@ import ExceptionInterface from "@Library/api/exception/interface";
 import GetPostRequestDto from "@Library/api/post/interface/getPostRequestDto";
 
 export default class PostService {
-  constructor(
-    private readonly postRepository: PostRepository,
-    private readonly axios: AxiosInstance
-  ) {}
+  constructor(private readonly postRepository: PostRepository) {}
 
   @validateToken()
   createPost(
diff --git a/lib/utility/seo.ts b/lib/utility/seo.ts
@@ -1,7 +1,53 @@
 import { DefaultSeoProps } from "next-seo";
 
+import { GetPostDetailResponseDto } from "@til-log.lab/tilog-api";
+
 import GetUserProfileResponseTransFormSettingsDto from "@Library/api/users/interface/getUserProfileResponseTransFormSettingsDto";
 
+export const postDefaultSeo = (
+  data: GetPostDetailResponseDto
+): DefaultSeoProps => {
+  return {
+    title: data.title,
+    description: !data.subTitle ? "" : data.subTitle,
+    openGraph: {
+      type: "website",
+      locale: "ko_KR",
+      url: "tilog.io",
+      title: data.title,
+      site_name: "TILog",
+      article: {
+        publishedTime: data.createdAt,
+        modifiedTime: !data.updatedAt ? "" : data.updatedAt,
+        authors: [data.user.username],
+        tags: [data.category.name],
+      },
+      images: [
+        {
+          url: !data.thumbnailUrl ? "" : data.thumbnailUrl,
+          width: 285,
+          height: 167,
+          alt: "TILog_thumbnailUrl",
+        },
+      ],
+    },
+  };
+};
+
+export const notFoundPostSeo = (): DefaultSeoProps => {
+  return {
+    title: "페이지를 찾을 수 없습니다.",
+    description: "페이지를 찾을 수 없습니다.",
+    openGraph: {
+      type: "website",
+      locale: "ko_KR",
+      url: "tilog.io",
+      title: "페이지를 찾을 수 없습니다.",
+      site_name: "TILog",
+    },
+  };
+};
+
 export const userBlogDetailSeo = (
   data: GetUserProfileResponseTransFormSettingsDto
 ): DefaultSeoProps => {
diff --git a/src/components/modules/post/PostHeader.tsx b/src/components/modules/post/PostHeader.tsx
@@ -0,0 +1,35 @@
+import RenderTechIcons from "@Components/common/molecules/tech-icons/RenderTechIcons";
+import DateUserProfile from "@Components/common/organisms/profile/DateUserProfile";
+import PostUpdateLink from "@Components/modules/post/link/postUpdateLink";
+import useIsOwner from "@Hooks/useIsOwner";
+
+import { GetPostDetailResponseDto } from "@til-log.lab/tilog-api";
+
+interface PostHeaderProps {
+  post: GetPostDetailResponseDto;
+}
+
+const PostHeader = ({ post }: PostHeaderProps) => {
+  const isOwner = useIsOwner(post.user.userId);
+  return (
+    <header>
+      <div className="flex">
+        <DateUserProfile userId={post.user.userId} createdAt={post.createdAt} />
+        {isOwner && (
+          <div className="flex ml-auto space-x-5">
+            <PostUpdateLink postId={post.id} />
+          </div>
+        )}
+      </div>
+      <div className="my-3 text-center">
+        <div className="text-2xl">
+          <RenderTechIcons categoryName={post.category.name} />
+        </div>
+        <h1>{post.title}</h1>
+        <h4>{post.subTitle}</h4>
+      </div>
+    </header>
+  );
+};
+
+export default PostHeader;
diff --git a/src/components/modules/post/PostLike.tsx b/src/components/modules/post/PostLike.tsx
@@ -0,0 +1,42 @@
+import LikeCounter from "@Components/common/molecules/counter/LikeCounter";
+import useGetHasLikeQuery from "@Hooks/react-query/like/useGetHasLikeQuery";
+import useLikeMutation from "@Hooks/react-query/like/useLikeMutation";
+
+import PostHasLikeDto from "@Library/api/post/like/interface/postHasLikeDto";
+
+interface PostLikeProps {
+  postId: PostHasLikeDto["postId"];
+  count: number;
+}
+
+const PostLike = ({ postId, count }: PostLikeProps) => {
+  const { mutate } = useLikeMutation();
+  const isLiked = useGetHasLikeQuery(postId);
+  if (!isLiked.data?.data.like)
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={() => {
+            mutate(postId);
+          }}
+        >
+          <LikeCounter iconSize="5" count={count} />
+        </button>
+      </div>
+    );
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          mutate(postId);
+        }}
+      >
+        <LikeCounter active iconSize="5" count={count} />
+      </button>
+    </div>
+  );
+};
+
+export default PostLike;
diff --git a/src/components/modules/post/PostWriter.tsx b/src/components/modules/post/PostWriter.tsx
@@ -0,0 +1,19 @@
+import BlogUserProfile from "@Components/common/organisms/profile/CustomSettingsUserProfile";
+import UserBlogLink from "@Components/modules/post/link/UserBlogLink";
+
+import { PostDetailUserInfoItem } from "@til-log.lab/tilog-api";
+
+interface PostWriterProps {
+  userInfo: PostDetailUserInfoItem;
+}
+
+const PostWriter = ({ userInfo }: PostWriterProps) => {
+  return (
+    <div className="w-full p-5">
+      <BlogUserProfile userId={userInfo.userId} />
+      <UserBlogLink userName={userInfo.username} />
+    </div>
+  );
+};
+
+export default PostWriter;
diff --git a/src/components/modules/post/index.tsx b/src/components/modules/post/index.tsx
@@ -0,0 +1,7 @@
+import IconCategoryLink from "@Components/modules/post/link/IconCategoryLink";
+import PostUpdateLink from "@Components/modules/post/link/postUpdateLink";
+import PostHeader from "@Components/modules/post/PostHeader";
+import PostLike from "@Components/modules/post/PostLike";
+import PostWriter from "@Components/modules/post/PostWriter";
+
+export { IconCategoryLink, PostHeader, PostLike, PostWriter, PostUpdateLink };
diff --git a/src/components/modules/post/link/IconCategoryLink.tsx b/src/components/modules/post/link/IconCategoryLink.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import LinkTo from "@Components/common/atom/LinkTo";
+import RenderTechIcons from "@Components/common/molecules/tech-icons/RenderTechIcons";
+
+interface IconCategoryLinkProps {
+  categoryName: string;
+}
+
+const IconCategoryLink = ({ categoryName }: IconCategoryLinkProps) => {
+  return (
+    <LinkTo
+      href={{
+        pathname: "search",
+        query: { category: categoryName },
+      }}
+      className="flex items-center hover:no-underline gap-x-3"
+    >
+      <div className="text-2xl md:text-5xl">
+        <RenderTechIcons categoryName={categoryName} />
+      </div>
+      <span className="text-xl font-medium md:text-4xl text-neutral-800 dark:text-neutral-50">
+        {categoryName}
+      </span>
+    </LinkTo>
+  );
+};
+
+export default IconCategoryLink;
diff --git a/src/components/modules/post/link/PostUpdateLink.tsx b/src/components/modules/post/link/PostUpdateLink.tsx
@@ -0,0 +1,23 @@
+import LinkTo from "@Components/common/atom/LinkTo";
+import { POST_EDIT } from "@Constants/post";
+
+import { GetPostDetailResponseDto } from "@til-log.lab/tilog-api";
+
+interface PostUpdateLinkProps {
+  postId: GetPostDetailResponseDto["id"];
+}
+
+const PostUpdateLink = ({ postId }: PostUpdateLinkProps) => {
+  return (
+    <LinkTo
+      href={{
+        pathname: "/writer",
+        query: { postId },
+      }}
+      className="text-sm text-neutral-400 hover:text-neutral-500 h-fit"
+    >
+      {POST_EDIT.ko}
+    </LinkTo>
+  );
+};
+export default PostUpdateLink;
diff --git a/src/components/modules/post/link/UserBlogLink.tsx b/src/components/modules/post/link/UserBlogLink.tsx
diff --git a/src/hooks/react-query/like/useGetHasLikeQuery.tsx b/src/hooks/react-query/like/useGetHasLikeQuery.tsx
diff --git a/src/hooks/react-query/like/useLikeMutation.tsx b/src/hooks/react-query/like/useLikeMutation.tsx
diff --git a/src/hooks/react-query/post/useGetPostDetailQuery.ts b/src/hooks/react-query/post/useGetPostDetailQuery.ts
diff --git a/src/hooks/useIsOwner.tsx b/src/hooks/useIsOwner.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
diff --git a/src/pages/post/[postId].tsx b/src/pages/post/[postId].tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`import POSTCARD_ALL_CATEGORY_TITLE from "./card/title";`
`2`	`2`
	`3`	`+export * from "./link";`
`3`	`4`	`export { POSTCARD_ALL_CATEGORY_TITLE };`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default interface GetPostDetailRequestDto {`
	`2`	`+ postId: string;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default interface PostHasLikeDto {`
	`2`	`+ postId: string;`
	`3`	`+}`