From d0c6ec57e2941cdf96a4e908a77530df2e4a1f15 Mon Sep 17 00:00:00 2001 From: hongggy Date: Fri, 13 Dec 2024 09:12:34 +0900 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20CardBoard=20=EC=9E=90=EC=9E=98?= =?UTF-8?q?=ED=95=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/card/board/CardBoard.tsx | 38 +++++++-------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx index 54fc7b2d..c42fbc20 100644 --- a/src/app/components/card/board/CardBoard.tsx +++ b/src/app/components/card/board/CardBoard.tsx @@ -1,8 +1,9 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import Image from "next/image"; import { formatLocalDate } from "@/utils/workDayFormatter"; +import useWidth from "@/hooks/useWidth"; export interface CardBoardProps { title: string; @@ -25,21 +26,10 @@ const CardBoard: React.FC = ({ variant = "default", onKebabClick, }) => { - const [isLargeScreen, setIsLargeScreen] = useState(false); + const { isDesktop } = useWidth(); const [isLiked, setIsLiked] = useState(false); const [likeDisplayCount, setLikeDisplayCount] = useState(likeCount); - useEffect(() => { - const handleResize = () => { - setIsLargeScreen(window.innerWidth >= 600); - }; - - handleResize(); // 초기 상태 설정 - window.addEventListener("resize", handleResize); - - return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 정리 - }, []); - const handleLikeClick = () => { if (isLiked) { setLikeDisplayCount((prev) => prev - 1); // 좋아요 취소 시 감소 @@ -50,7 +40,7 @@ const CardBoard: React.FC = ({ }; // 케밥 아이콘 경로 설정 - const kebabSrc = `/icons/menu/${isLargeScreen ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; + const kebabSrc = `/icons/menu/${isDesktop ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; return (
= ({
{/* Header */}
-

{title}

+

{title}

{/* Kebab Icon */}
@@ -90,7 +76,7 @@ const CardBoard: React.FC = ({
{/* 유저 아이콘 */} User Icon = ({ {nickname} | - + {formatLocalDate(updatedAt)}
@@ -112,7 +98,7 @@ const CardBoard: React.FC = ({ {/* 댓글 아이콘 */}
Comment Icon = ({ Date: Fri, 13 Dec 2024 09:30:33 +0900 Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20useWidth=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=20=EB=B0=8F=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/card/board/BoardComment.tsx | 60 ++++++------------- src/app/components/card/board/CardBoard.tsx | 6 +- src/app/components/card/board/Comment.tsx | 26 ++++---- 3 files changed, 31 insertions(+), 61 deletions(-) diff --git a/src/app/components/card/board/BoardComment.tsx b/src/app/components/card/board/BoardComment.tsx index 2980062e..f43018d5 100644 --- a/src/app/components/card/board/BoardComment.tsx +++ b/src/app/components/card/board/BoardComment.tsx @@ -1,7 +1,7 @@ "use client"; -import React, { useEffect, useState } from "react"; import Image from "next/image"; +import useWidth from "@/hooks/useWidth"; export interface BoardCommentProps { title: string; @@ -12,58 +12,39 @@ export interface BoardCommentProps { onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러 } -const BoardComment: React.FC = ({ - title, - content, - comments, - date, - variant = "default", - onKebabClick, -}) => { - const [isLargeScreen, setIsLargeScreen] = useState(false); - - useEffect(() => { - const handleResize = () => { - setIsLargeScreen(window.innerWidth >= 600); - }; - - handleResize(); // 초기 상태 설정 - window.addEventListener("resize", handleResize); - - return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 정리 - }, []); - +const BoardComment = ({ title, content, comments, date, variant = "default", onKebabClick }: BoardCommentProps) => { + const { isDesktop } = useWidth(); // 아이콘 경로 설정 const iconSrc = variant === "primary" - ? `/images/modal/${isLargeScreen ? "closed-orange-md.svg" : "closed-orange-sm.svg"}` - : `/images/modal/${isLargeScreen ? "closed-gray-md.svg" : "closed-gray-sm.svg"}`; + ? `/images/modal/${isDesktop ? "closed-orange-md.svg" : "closed-orange-sm.svg"}` + : `/images/modal/${isDesktop ? "closed-gray-md.svg" : "closed-gray-sm.svg"}`; // 케밥 아이콘 경로 설정 - const kebabSrc = `/icons/menu/${isLargeScreen ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; + const kebabSrc = `/icons/menu/${isDesktop ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; return (
{/* Header + Kebab */} -
+
{/* Left Content: Icon + Title */}
{/* Icon */} Document Icon {/* Title */} -

{title}

+

{title}

{/* Right Content: Kebab */} @@ -72,19 +53,14 @@ const BoardComment: React.FC = ({ className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500" aria-label="Options" > - Kebab Menu Icon + Kebab Menu Icon {/* 크기 조정 */}
{/* Content */}

= ({

{/* Divider Line */} -
-
+
+
{/* Comments + Date */} -
+
- {comments} + {comments}
- {date} + {date}
diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx index c42fbc20..dec8789b 100644 --- a/src/app/components/card/board/CardBoard.tsx +++ b/src/app/components/card/board/CardBoard.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState } from "react"; +import { useState } from "react"; import Image from "next/image"; import { formatLocalDate } from "@/utils/workDayFormatter"; import useWidth from "@/hooks/useWidth"; @@ -16,7 +16,7 @@ export interface CardBoardProps { onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러 } -const CardBoard: React.FC = ({ +const CardBoard = ({ title, content, nickname, @@ -25,7 +25,7 @@ const CardBoard: React.FC = ({ likeCount, variant = "default", onKebabClick, -}) => { +}: CardBoardProps) => { const { isDesktop } = useWidth(); const [isLiked, setIsLiked] = useState(false); const [likeDisplayCount, setLikeDisplayCount] = useState(likeCount); diff --git a/src/app/components/card/board/Comment.tsx b/src/app/components/card/board/Comment.tsx index a68aca9a..9b0e39ae 100644 --- a/src/app/components/card/board/Comment.tsx +++ b/src/app/components/card/board/Comment.tsx @@ -1,8 +1,8 @@ "use client"; -import React, { useEffect, useState } from "react"; import Image from "next/image"; import { formatLocalDate } from "@/utils/workDayFormatter"; +import useWidth from "@/hooks/useWidth"; export interface CommentProps { nickname: string; @@ -11,22 +11,15 @@ export interface CommentProps { onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러 } -const Comment: React.FC = ({ nickname, updatedAt, content, onKebabClick }) => { - const [isLargeScreen, setIsLargeScreen] = useState(false); - - useEffect(() => { - const handleResize = () => setIsLargeScreen(window.innerWidth >= 600); - handleResize(); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); +const Comment = ({ nickname, updatedAt, content, onKebabClick }: CommentProps) => { + const { isDesktop } = useWidth(); // 케밥 아이콘 경로 설정 - const kebabSrc = `/icons/menu/${isLargeScreen ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; - const kebabSize = isLargeScreen ? 28 : 24; + const kebabSrc = `/icons/menu/${isDesktop ? "kebab-menu-md.svg" : "kebab-menu-sm.svg"}`; + const kebabSize = isDesktop ? 28 : 24; return ( -
+
{/* Header */}
@@ -39,11 +32,11 @@ const Comment: React.FC = ({ nickname, updatedAt, content, onKebab sizes="(max-width: 600px) 24px, (max-width: 1480px) 28px, 30px" />
- + {nickname} | - + {formatLocalDate(updatedAt)}
@@ -51,6 +44,7 @@ const Comment: React.FC = ({ nickname, updatedAt, content, onKebab {/* Right Content: Kebab */}
{/* Comment */} -
+

{content}

From 8b60d82db66cd72b2aa1bfe35df0cf72cde1d73b Mon Sep 17 00:00:00 2001 From: hongggy Date: Fri, 13 Dec 2024 10:49:07 +0900 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20=EB=A1=9C=EB=94=A9=EC=A4=91=20?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/loading-spinner/LoadingSpinner.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/components/loading-spinner/LoadingSpinner.tsx b/src/app/components/loading-spinner/LoadingSpinner.tsx index bab2a750..4cbcf30f 100644 --- a/src/app/components/loading-spinner/LoadingSpinner.tsx +++ b/src/app/components/loading-spinner/LoadingSpinner.tsx @@ -12,6 +12,14 @@ export default function LoadingSpinner() { src="/loding.json" className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]" /> +
+
+ 페이지 이동 중 입니다 +
+
+ 잠시만 기다려주세요... +
+
); } From 7886a2954d1e7af9affb1c600ded83bfc8c743b8 Mon Sep 17 00:00:00 2001 From: hongggy Date: Fri, 13 Dec 2024 10:53:16 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20React=20import=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(pages)/albaList/layout.tsx | 2 +- src/app/(pages)/albaTalk/layout.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/(pages)/albaList/layout.tsx b/src/app/(pages)/albaList/layout.tsx index d518e62e..9c07cced 100644 --- a/src/app/(pages)/albaList/layout.tsx +++ b/src/app/(pages)/albaList/layout.tsx @@ -1,5 +1,5 @@ import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner"; -import React, { Suspense } from "react"; +import { Suspense } from "react"; export default function AlbaListLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/src/app/(pages)/albaTalk/layout.tsx b/src/app/(pages)/albaTalk/layout.tsx index 0762119b..fca6c8a0 100644 --- a/src/app/(pages)/albaTalk/layout.tsx +++ b/src/app/(pages)/albaTalk/layout.tsx @@ -1,4 +1,5 @@ -import React, { Suspense } from "react"; +import { Suspense } from "react"; +import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner"; export default function AlbaTalkLayout({ children }: { children: React.ReactNode }) { return ( @@ -6,7 +7,7 @@ export default function AlbaTalkLayout({ children }: { children: React.ReactNode -
로딩 중...
+
} > From 48523e6db6e3a15b2930671602f75378082d632f Mon Sep 17 00:00:00 2001 From: hongggy Date: Fri, 13 Dec 2024 10:56:19 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20404=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/not-found.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 9f64e3a3..00d461c2 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -35,7 +35,7 @@ export default function NotFound() { variant="solid" width="sm" radius="full" - className="bg-primary-grayscale-500 hover:bg-primary-grayscale-600 text-white" + className="hover:bg-grayscale-600 bg-grayscale-500 text-white" onClick={() => window.history.back()} > 뒤로 가기 From e18eaae0fe775ef7100a37bab202b66449bd57e8 Mon Sep 17 00:00:00 2001 From: hongggy Date: Fri, 13 Dec 2024 10:58:41 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EB=A1=9C=EA=B3=A0=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/app/components/layout/Header.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx index 099c077a..11d09959 100644 --- a/src/app/components/layout/Header.tsx +++ b/src/app/components/layout/Header.tsx @@ -42,8 +42,14 @@ export default function Header() {