From 65a7fd6353036487939eea685d4c32be05172a36 Mon Sep 17 00:00:00 2001
From: typhoon0678 <typhoon0678@gmail.com>
Date: Wed, 19 Mar 2025 16:55:05 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=ED=8F=B0=ED=8A=B8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=95=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EA=B8=80,=20=EB=8C=93=EA=B8=80=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=EC=97=90=20=EB=B0=A9=EA=B8=88=20=EC=A0=84,?=
 =?UTF-8?q?=20x=EC=8B=9C=EA=B0=84(=EC=9D=BC)=20=EC=A0=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/util/date.tsx                     | 19 +++++++
 src/components/blog/BlogSideBar.tsx          |  6 +--
 src/components/common/Header.tsx             |  6 +--
 src/components/common/ProfileImageCircle.tsx |  3 ++
 src/components/folder/FolderMoveModal.tsx    | 53 --------------------
 src/components/post/CommentCard.tsx          | 24 ++++-----
 src/components/post/PostCard.tsx             | 14 +++---
 src/pages/MainPage.tsx                       |  2 +-
 src/pages/blog/BlogPage.tsx                  |  4 +-
 src/pages/blog/BlogTagPage.tsx               |  2 +-
 src/pages/post/PostPage.tsx                  |  8 +--
 src/pages/post/SearchPage.tsx                |  2 +-
 src/pages/post/WritePage.tsx                 |  2 +-
 13 files changed, 58 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/folder/FolderMoveModal.tsx

diff --git a/src/common/util/date.tsx b/src/common/util/date.tsx
index 9980acb..d88e37a 100644
--- a/src/common/util/date.tsx
+++ b/src/common/util/date.tsx
@@ -14,6 +14,25 @@ export const dateToKorean = (date: Date) => {
         + outputDate.getDate() + '일';
 }
 
+export const relativeDateToKorean = (date: Date) => {
+    const outputDate = new Date(date);
+    const now = new Date();
+
+    const diffHours = now.getHours() - outputDate.getHours();
+
+    if (diffHours < 0) {
+        return dateToKorean(date);
+    } else if (diffHours < 1) {
+        return `방금 전`;
+    } else if (diffHours < 24) {
+        return `${diffHours}시간 전`;
+    } else if (diffHours < 24 * 7) {
+        return `${diffHours / 24}일 전`;
+    } else {
+        return dateToKorean(date);
+    }
+}
+
 export const shortDateToKorean = (date: Date) => {
     const outputDate = new Date(date);
     return (outputDate.getMonth() + 1) + '월 '
diff --git a/src/components/blog/BlogSideBar.tsx b/src/components/blog/BlogSideBar.tsx
index be55dd6..e847b7f 100644
--- a/src/components/blog/BlogSideBar.tsx
+++ b/src/components/blog/BlogSideBar.tsx
@@ -23,12 +23,12 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
     return (
         <div className={`${bgColor} ${side && "h-screen overflow-y-scroll"}`}>
             <div className="flex flex-col justify-start items-center py-4 gap-4 z-200">
-                <ProfileImageCircle profileUrl={profileUrl} size="lg"/>
-                <div className="flex justify-center items-center text-2xl font-black">
+                <ProfileImageCircle profileUrl={profileUrl} size="md"/>
+                <div className="flex justify-center items-center text-xl font-black">
                     {username}
                 </div>
                 {username === loginState.username && (
-                    <div className="flex justify-between items-center gap-x-4 text-xs">
+                    <div className="flex justify-between items-center gap-x-4 my-2 text-xs">
                         <OutlineLink text={"게시글 작성"} to={"/write"}/>
                         <OutlineLink text={"블로그 설정"} to={"/setting/folder"}
                                      addStyle={"!border-neutral-500 !text-neutral-500 hover:bg-neutral-500 hover:!text-white"}/>
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index a4cf373..2ee0acd 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -74,10 +74,10 @@ function Header() {
 
     return (
         <div className="border border-b-2 border-gray-200 px-4 flex justify-between items-center w-full">
-            <Link to={"/"} className="flex items-center justify-center gap-x-3 ml-4">
+            <Link to={"/"} className="flex items-center justify-center gap-x-2">
                 <img src="/logo.png" alt="logo"
-                     className="size-10 mb-1"/>
-                <div className="flex items-center text-xl h-16 font-jalnan">
+                     className="size-8 mb-1"/>
+                <div className="flex items-center text-lg h-16 font-jalnan">
                     DIGLOG
                 </div>
             </Link>
diff --git a/src/components/common/ProfileImageCircle.tsx b/src/components/common/ProfileImageCircle.tsx
index 43d4ca2..08c3fae 100644
--- a/src/components/common/ProfileImageCircle.tsx
+++ b/src/components/common/ProfileImageCircle.tsx
@@ -12,6 +12,9 @@ function ProfileImageCircle({profileUrl, size, onClick, addStyle}: {
     if (size === "lg") {
         imageSize = "size-32";
         iconSize = "size-28";
+    } else if (size === "md") {
+        imageSize = "size-28";
+        iconSize = "size-24";
     } else {
         imageSize += "size-10";
         iconSize += "size-6";
diff --git a/src/components/folder/FolderMoveModal.tsx b/src/components/folder/FolderMoveModal.tsx
deleted file mode 100644
index 0f509d4..0000000
--- a/src/components/folder/FolderMoveModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {FillButton} from "../common/FillButton.tsx";
-import {useState} from "react";
-import {TextButton} from "../common/TextButton.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import ModalLayout from "../../layout/ModalLayout.tsx";
-import {FolderType} from "../../common/types/blog.tsx";
-
-function FolderMoveModal({selectedFolder, folders, handleFolderMove, setShowModal}: {
-    selectedFolder: FolderType | null,
-    folders: FolderType[],
-    handleFolderMove: (folderId: string) => void
-    setShowModal: (showModal: boolean) => void,
-}) {
-
-    const loginState = useSelector((state: RootState) => state.loginSlice);
-
-    const [selectedFolderId, setSelectedFolderId] = useState<string>("");
-
-    const handleFolderChange = () => {
-        handleFolderMove(selectedFolderId);
-
-        setShowModal(false);
-    }
-
-    return (
-        <ModalLayout>
-            <div className="flex flex-col gap-y-4">
-                <p className="font-bold mb-4">
-                    "{selectedFolder?.title}" 폴더를 이동할 곳을 골라주세요.
-                </p>
-                <button
-                    className={`${"top" === selectedFolderId && "bg-lime-300"} border border-gray-400 p-2 text-start hover:bg-lime-300 hover:cursor-pointer`}
-                    onClick={() => setSelectedFolderId("top")}>
-                    {loginState.username}의 블로그
-                </button>
-                {folders.map(folder => (
-                    <button key={folder.id}
-                            className={`${folder.id === selectedFolderId && "bg-lime-300"} ml-8 border border-gray-400 p-2 text-start hover:bg-lime-300 hover:cursor-pointer`}
-                            onClick={() => setSelectedFolderId(folder.id)}>
-                        {folder.title}
-                    </button>
-                ))}
-                <div className="flex justify-between items-center">
-                    <TextButton text={"취소"} onClick={() => setShowModal(false)}/>
-                    <FillButton text={"이동"} onClick={handleFolderChange}/>
-                </div>
-            </div>
-        </ModalLayout>
-    );
-}
-
-export default FolderMoveModal;
\ No newline at end of file
diff --git a/src/components/post/CommentCard.tsx b/src/components/post/CommentCard.tsx
index d438a34..c52bf8c 100644
--- a/src/components/post/CommentCard.tsx
+++ b/src/components/post/CommentCard.tsx
@@ -1,4 +1,4 @@
-import {fullDateToKorean} from "../../common/util/date.tsx";
+import {relativeDateToKorean} from "../../common/util/date.tsx";
 import {MdOutlineAddComment, MdOutlineComment, MdOutlinePerson} from "react-icons/md";
 import {ChangeEvent, useState} from "react";
 import CommentTextField from "./CommentTextField.tsx";
@@ -72,14 +72,14 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                             ? <img className="size-6 rounded-full hover:cursor-pointer"
                                    src={comment.member.profileUrl} alt="user_image"/>
                             : <MdOutlinePerson className="size-5 text-gray-600"/>}
-                        <p className="font-bold">
+                        <p className="font-semibold">
                             {comment.member.username}
                         </p>
-                        <p className="text-gray-400 text-sm">
-                            {fullDateToKorean(comment.createdAt)}
+                        <p className="text-gray-500 text-xs ml-2">
+                            {relativeDateToKorean(comment.createdAt)}
                         </p>
                     </div>
-                    <div className="mt-4 text-gray-900 flex items-center gap-x-2">
+                    <div className="my-2 text-gray-900 flex items-center gap-x-2">
                         {!showEditTextField &&
                             comment.taggedUsername &&
                             <span className="text-lime-700">
@@ -93,12 +93,12 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                                 taggedUsername={comment.taggedUsername}
                                 originalComment={comment}
                                 handleShowTextField={handleShowEdit}/>
-                            : <div>{comment.content}</div>}
+                            : <div className="leading-relaxed">{comment.content}</div>}
                     </div>
                     <div className="flex justify-between items-center">
                         {depth === 0 &&
                             <button
-                                className="w-fit py-2 flex justify-center items-center gap-x-2 text-gray-600 hover:cursor-pointer rounded-md hover:brightness-120"
+                                className="w-fit py-2 flex justify-center items-center gap-x-1.5 text-sm text-gray-600 hover:cursor-pointer rounded-md hover:brightness-120"
                                 onClick={() => {
                                     handleLoadMoreSubComment(page, comment.id);
                                     setPage(page + 1);
@@ -111,15 +111,15 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                             <div className="flex items-center gap-x-4 text-gray-600">
                                 {comment.member.username === loginState.username &&
                                     <div className="flex items-center">
-                                        <TextButton text={"수정"} onClick={handleShowEdit}/>
-                                        <TextButton text={"삭제"} onClick={handleDeleteComment}/>
+                                        <TextButton text={"수정"} onClick={handleShowEdit} addStyle={"!text-xs"}/>
+                                        <TextButton text={"삭제"} onClick={handleDeleteComment} addStyle={"!text-xs"}/>
                                     </div>
                                 }
                                 <button
-                                    className="w-fit py-2 flex justify-center items-center gap-x-2 hover:cursor-pointer rounded-md hover:brightness-120"
+                                    className="w-fit flex justify-center items-center gap-x-1.5 text-xs hover:cursor-pointer rounded-md hover:brightness-120"
                                     onClick={handleOpenTextField}>
-                                    <MdOutlineAddComment className="size-4"/>
-                                    댓글 작성하기
+                                    <MdOutlineAddComment className="size-3 mt-0.5"/>
+                                    댓글 작성
                                 </button>
                             </div>
                         }
diff --git a/src/components/post/PostCard.tsx b/src/components/post/PostCard.tsx
index e256304..ac117fa 100644
--- a/src/components/post/PostCard.tsx
+++ b/src/components/post/PostCard.tsx
@@ -2,7 +2,7 @@ import {PostResponse} from "../../common/types/post.tsx";
 import {getImgSrc, removeHtmlTags} from "../../common/util/html.tsx";
 import DOMPurify from "dompurify";
 import {MdImage} from "react-icons/md";
-import {dateToKorean} from "../../common/util/date.tsx";
+import {relativeDateToKorean} from "../../common/util/date.tsx";
 import {Link} from "react-router-dom";
 
 function PostCard({post}: { post: PostResponse }) {
@@ -23,13 +23,13 @@ function PostCard({post}: { post: PostResponse }) {
             </Link>
             <div className="flex flex-col gap-y-2 my-4">
                 <div className="flex justify-between items-center">
-                    <div className="flex justify-center items-center gap-x-4">
+                    <div className="flex justify-center items-center gap-x-4 text-sm">
                         <Link to={`/blog/${post.username}`}
-                              className="text-sm font-semibold text-lime-700 hover:text-lime-400">
+                              className="font-semibold text-lime-700 hover:text-lime-400">
                             {post.username}
                         </Link>
-                        <div className="text-sm text-gray-500 font-semibold">
-                            {dateToKorean(post.createdAt)}
+                        <div className="text-gray-500 font-normal">
+                            {relativeDateToKorean(post.createdAt)}
                         </div>
                     </div>
                     {/*<div className="flex justify-end items-center gap-x-3 text-sm text-gray-400">*/}
@@ -40,11 +40,11 @@ function PostCard({post}: { post: PostResponse }) {
                     {/*</div>*/}
                 </div>
                 <Link to={`/post/${post.id}`}>
-                    <div className="line-clamp-2 text-lg hover:text-gray-600 font-medium">
+                    <div className="line-clamp-2 hover:text-gray-600 font-medium">
                         {post.title}
                     </div>
                 </Link>
-                <div className="line-clamp-3 text-gray-500 font-normal">
+                <div className="line-clamp-3 text-gray-500 text-sm font-normal">
                     {removeHtmlTags(safeContent)}
                 </div>
             </div>
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 1285c54..ae3ba64 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -33,7 +33,7 @@ function MainPage() {
     return (
         <BasicLayout>
             <div className="w-full flex flex-col justify-center items-start">
-                <div className="text-2xl font-jalnan mb-8">
+                <div className="text-xl font-jalnan mb-8">
                     최근 게시글
                 </div>
                 <div ref={pageRef}
diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
index e9b69cc..c7910aa 100644
--- a/src/pages/blog/BlogPage.tsx
+++ b/src/pages/blog/BlogPage.tsx
@@ -176,10 +176,10 @@ function BlogPage() {
         <BasicLayout>
             <div
                 className={`${(isOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} w-full flex flex-col`}>
-                <div className="flex justify-between items-center px-0 lg:px-8 text-2xl font-jalnan pb-4">
+                <div className="flex justify-between items-center px-0 lg:px-5 font-jalnan pb-4">
                     <TextLink text={`${username}의 블로그`}
                               to={`/blog/${username}`}
-                              addStyle="!text-2xl !font-jalnan"/>
+                              addStyle="!text-xl !font-jalnan"/>
                     <IconButton
                         icon={<MdMenu className="size-8"/>}
                         onClick={handleMenuOpen}
diff --git a/src/pages/blog/BlogTagPage.tsx b/src/pages/blog/BlogTagPage.tsx
index 164345f..e49610c 100644
--- a/src/pages/blog/BlogTagPage.tsx
+++ b/src/pages/blog/BlogTagPage.tsx
@@ -78,7 +78,7 @@ function BlogTagPage() {
             <div className="w-full flex flex-col gap-y-8">
                 <TextLink text={`${username}의 블로그`}
                           to={`/blog/${username}`}
-                          addStyle="flex justify-start !text-2xl !font-jalnan"/>
+                          addStyle="flex justify-start !text-xl !font-jalnan"/>
                 <div className="flex gap-x-4">
                     {tags.map(tag =>
                         <TagCard
diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx
index 0153037..81939b4 100644
--- a/src/pages/post/PostPage.tsx
+++ b/src/pages/post/PostPage.tsx
@@ -201,7 +201,7 @@ function PostPage() {
                             {fullDateToKorean(post.createdAt)}
                         </div>
                     </div>
-                    <div className="text-center leading-relaxed text-4xl text-gray-900 font-jalnan break-words">
+                    <div className="text-center leading-relaxed text-3xl text-gray-900 font-jalnan break-words">
                         {post.title}
                     </div>
                     <div className="flex flex-wrap justify-center items-center gap-4">
@@ -211,9 +211,11 @@ function PostPage() {
                             }}/>)}
                     </div>
                 </div>
-                <div className="max-w-4xl mx-auto py-8 break-words"
+                <div className="w-full max-w-3xl mx-auto py-8 break-words"
                      dangerouslySetInnerHTML={{__html: safeContent}}/>
-                <div className="w-full max-w-4xl mx-auto py-8 rounded-2xl flex flex-col gap-y-0 my-8">
+                <div>
+                </div>
+                <div className="w-full max-w-3xl mx-auto py-8 rounded-2xl flex flex-col gap-y-0 my-8">
                     {loginState.isLogin
                         ? <CommentTextField
                             value={commentInput}
diff --git a/src/pages/post/SearchPage.tsx b/src/pages/post/SearchPage.tsx
index 0a2cb95..e4dd7fd 100644
--- a/src/pages/post/SearchPage.tsx
+++ b/src/pages/post/SearchPage.tsx
@@ -220,7 +220,7 @@ function SearchPage() {
                         </div>
                     </div>
                 </div>
-                <div className="w-full max-w-4xl mx-auto flex flex-col gap-y-2">
+                <div className="w-full max-w-3xl mx-auto flex flex-col gap-y-2">
                     <div className="flex justify-between flex-wrap items-center h-16 sm:h-12">
                         <div className="text-lg">
                             <span className="font-bold">
diff --git a/src/pages/post/WritePage.tsx b/src/pages/post/WritePage.tsx
index 9834f1f..ebd11eb 100644
--- a/src/pages/post/WritePage.tsx
+++ b/src/pages/post/WritePage.tsx
@@ -231,7 +231,7 @@ function WritePage() {
 
     return (
         <BasicLayout>
-            <div className="flex flex-col w-full max-w-4xl mx-auto">
+            <div className="flex flex-col w-full max-w-3xl mx-auto">
                 <div className="flex justify-start items-center">
                     <div className="w-108">
                         <FolderSelectBox folders={folders}