Skip to content

style: 폰트 사이즈 조정 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 19, 2025
Merged

style: 폰트 사이즈 조정 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/common/util/date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) + '월 '
Expand Down
6 changes: 3 additions & 3 deletions src/components/blog/BlogSideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}/>
Expand Down
6 changes: 3 additions & 3 deletions src/components/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/components/common/ProfileImageCircle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
53 changes: 0 additions & 53 deletions src/components/folder/FolderMoveModal.tsx
View file
Open in desktop

This file was deleted.

24 changes: 12 additions & 12 deletions src/components/post/CommentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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">
Expand All @@ -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);
Expand All @@ -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>
}
Expand Down
14 changes: 7 additions & 7 deletions src/components/post/PostCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand All @@ -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">*/}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/blog/BlogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/BlogTagPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 5 additions & 3 deletions src/pages/post/PostPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/post/SearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/post/WritePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down