From 23abcbf1a7a220aa783cd5bf53b48cf27f1972c7 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:10:33 +0900 Subject: [PATCH 1/6] =?UTF-8?q?New=20:=20=EC=8B=9C=EA=B0=84=20=ED=8F=AC?= =?UTF-8?q?=EB=A7=B7=20=EC=8A=A4=ED=8E=99=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/__test__/post/formatTime.test.ts | 26 +++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 client/src/__test__/post/formatTime.test.ts diff --git a/client/src/__test__/post/formatTime.test.ts b/client/src/__test__/post/formatTime.test.ts new file mode 100644 index 0000000..fdbdfb6 --- /dev/null +++ b/client/src/__test__/post/formatTime.test.ts @@ -0,0 +1,26 @@ +import formatTime from "@/utils/formatTime"; + +describe("인스타그램 스타일 시간 포매팅 함수", () => { + const MOCK_NOW = "Thu Dec 14 2023 00:50:25 GMT+0900 (한국 표준시)"; + const THREE_DAYS_AGO = "Thu Dec 11 2023 00:50:25 GMT+0900 (한국 표준시)"; + const EIGHT_DAYS_AGO = "Thu Dec 6 2023 00:50:25 GMT+0900 (한국 표준시)"; + const ONE_MONTH_AGO = "Thu Nov 11 2023 00:50:25 GMT+0900 (한국 표준시)"; + const THREE_MONTH_AGO = "Thu Sep 11 2023 00:50:25 GMT+0900 (한국 표준시)"; + const ONE_YEAR_AGO = "Thu Dec 14 2022 00:50:25 GMT+0900 (한국 표준시)"; + + it("3일 전이 입력되었을때 '3일 전' 이 출력되는지", () => { + expect(formatTime(THREE_DAYS_AGO, MOCK_NOW)).toEqual("3일 전"); + }); + it("8일 전이 입력되었을때 '1주 전' 이 출력되는지", () => { + expect(formatTime(EIGHT_DAYS_AGO, MOCK_NOW)).toEqual("1주 전"); + }); + it("1달전 이 입력되었을때 '1달 전'이 출력되는지 Trim 하는지 여부", () => { + expect(formatTime(ONE_MONTH_AGO, MOCK_NOW)).toEqual("1달 전"); + }); + it("3달전 이 입력되었을때 '3달 전'이 출력되는지 Trim 하는지 여부", () => { + expect(formatTime(THREE_MONTH_AGO, MOCK_NOW)).toEqual("3달 전"); + }); + it("1년전 이 입력되었을때 '1년 전'이 출력되는지 Trim 하는지 여부", () => { + expect(formatTime(ONE_YEAR_AGO, MOCK_NOW)).toEqual("1년 전"); + }); +}); From 05f9677abcca10b580ee81ec6bb5c9aa16186798 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:10:45 +0900 Subject: [PATCH 2/6] =?UTF-8?q?New=20:=20=EC=8B=9C=EA=B0=84=20=ED=8F=AC?= =?UTF-8?q?=EB=A7=B7=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/utils/formatTime.ts | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 client/src/utils/formatTime.ts diff --git a/client/src/utils/formatTime.ts b/client/src/utils/formatTime.ts new file mode 100644 index 0000000..c69b962 --- /dev/null +++ b/client/src/utils/formatTime.ts @@ -0,0 +1,37 @@ +import dayjs from "dayjs"; +import "dayjs/locale/ko"; +import relativeTime from "dayjs/plugin/relativeTime"; + +// 상대적인 시간을 표시하기 위해 플러그인 추가 +dayjs.extend(relativeTime); +dayjs.locale("ko"); // 로캘을 한국어로 설정 + +/** + * Instagram 스타일의 작성 시간 포맷 함수 + */ +const formatTime = (timestamp: string, now?: string) => { + const postTime = dayjs(timestamp); + const currentTime = dayjs(now || new Date()); + + // 1주 ~ 1달 까지는 n주 전 으로 표기 + if ( + currentTime.diff(postTime, "day") >= 7 && + currentTime.diff(postTime, "month") < 1 + ) { + return `${currentTime.diff(postTime, "week")}주 전`; + } + + // 1년전을 일 년 전 이 아닌 1년 전 으로 표기 + if (currentTime.diff(postTime, "year") === 1) { + return `${currentTime.diff(postTime, "year")}년 전`; + } + // 1년 전을 일 년 전 이 아닌 1년 전 으로 표기 + if (currentTime.diff(postTime, "month") === 1) { + return `${currentTime.diff(postTime, "month")}달 전`; + } + + // 그 외의 경우에는 상대적인 시간 표시 + return postTime.fromNow(); +}; + +export default formatTime; From 127a45e0d737f4a96dd50799808f8d50748b46a9 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:11:03 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Refactor=20:=20=EC=9D=B8=ED=84=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/types/post/PostInterface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/types/post/PostInterface.ts b/client/src/types/post/PostInterface.ts index ae1e9c3..14c48b6 100644 --- a/client/src/types/post/PostInterface.ts +++ b/client/src/types/post/PostInterface.ts @@ -11,7 +11,7 @@ export interface PostInterface { /** * 업데이트 된 날짜 */ - lastModifiedDate?: string; + lastModifiedDate: string; /** * 해당 게시글을 생성한유저PK */ From f8e3ab5aabbe16b957efa1c6d42ea29c8f44c1ce Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:11:24 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Refactor=20:=20=EB=B3=80=EA=B2=BD=EB=90=9C?= =?UTF-8?q?=20=EC=8B=9C=EA=B0=84=20=ED=91=9C=EA=B8=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/post/PostCard.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx index d419b21..5f6fb72 100644 --- a/client/src/components/post/PostCard.tsx +++ b/client/src/components/post/PostCard.tsx @@ -26,13 +26,12 @@ import "../newpost/quill.mention.css"; import { sanitize } from "isomorphic-dompurify"; import UserAvatar from "../user/info/UserAvatar"; import Link from "next/link"; -import HOME, { USER_PAGE } from "@/const/clientPath"; +import { USER_PAGE } from "@/const/clientPath"; import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery"; import PostCardOptionDropdown from "./PostCardOptionDropdown"; import { postcardContext } from "@/store/post/PostCardContext"; -import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation"; -import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation"; import { useRouter } from "next/navigation"; +import formatTime from "@/utils/formatTime"; const PostCard = ({ postAttachUrls, @@ -52,7 +51,6 @@ const PostCard = ({ alcoholNo, }: PostInterface) => { const openPostDetailPage = useOpenPostDetailPage(); - const router = useRouter(); const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]); @@ -61,9 +59,6 @@ const PostCard = ({ const { mutate: likeHandler } = useLikePostMutation(searchContext); const { mutate: unLikeHandler } = useUnLikePostMutation(searchContext); - const { mutateAsync: deletePost } = useDeletePostMutation(); - const { mutateAsync: deleteFile } = useDeleteAttachMutation(); - const { data: currentUser } = useMyInfoQuery(); const isMyPost = useMemo( @@ -106,7 +101,7 @@ const PostCard = ({ >{`@${id}`} - {dayjs(lastModifiedDate).format("MM.DD")} + {formatTime(lastModifiedDate)} @@ -149,7 +144,7 @@ const PostCard = ({ borderRadius: 2, bgcolor: "background.default", cursor: "pointer", - aspectRatio: 2.36 + aspectRatio: 2.36, }} /> )} From 91bc302db466f3ed5b6b5c67f0e1a8912b8068ac Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:21:04 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Minor=20:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/post/PostCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx index 5f6fb72..667f1a9 100644 --- a/client/src/components/post/PostCard.tsx +++ b/client/src/components/post/PostCard.tsx @@ -19,7 +19,6 @@ import ShareIcon from "@/assets/icons/ShareIcon.svg"; import LikeIcon from "@/assets/icons/LikeIcon.svg"; import CommentIcon from "@/assets/icons/CommentIcon.svg"; import AlcoholNameTag from "@/components/wiki/AlcoholNameTag"; -import dayjs from "dayjs"; import useLikePostMutation from "@/queries/post/useLikePostMutation"; import useUnLikePostMutation from "@/queries/post/useUnLikePostMutation"; import "../newpost/quill.mention.css"; From df9f3461d693a797e588754ba3b30a5b0a5205d0 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Thu, 14 Dec 2023 01:21:44 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Refactor=20:=20=ED=95=B4=EC=8B=9C=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80,?= =?UTF-8?q?=20wrap=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/post/PostHashtagList.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/client/src/components/post/PostHashtagList.tsx b/client/src/components/post/PostHashtagList.tsx index f9ed4cb..4bee58c 100644 --- a/client/src/components/post/PostHashtagList.tsx +++ b/client/src/components/post/PostHashtagList.tsx @@ -1,26 +1,25 @@ import { SEARCH_BY_KEYWORD } from "@/const/clientPath"; import { PostInterface } from "@/types/post/PostInterface"; -import { Box, BoxProps, Typography } from "@mui/material"; +import { Stack, StackProps, Typography } from "@mui/material"; import Link from "next/link"; -interface TagListInterface extends BoxProps { - tags: PostInterface['tagList']; +interface TagListInterface extends StackProps { + tags: PostInterface["tagList"]; } const PostHashTagList = ({ tags, ...others }: TagListInterface) => { + const uniqueSet = Array.from(new Set(tags)); return ( <> - {tags?.length > 0 && ( - 0 && ( + - {tags.map((tag,i) => ( + {uniqueSet.map((tag, i) => ( { ))} - + )} );