FE9-2 · yyezzzy · Dec 13, 2024 · Dec 12, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git 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
@@ -1,12 +1,13 @@
-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 (
     <div className="mx-auto max-w-screen-xl px-4 py-8">
       <Suspense
         fallback={
           <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-            <div>로딩 중...</div>
+            <LoadingSpinner />
           </div>
         }
       >

diff --git 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<BoardCommentProps> = ({
-  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 (
     <div
       className={`flex flex-col rounded-[16px] border ${
         variant === "primary" ? "border-line-100 bg-primary-orange-50" : "border-line-100 bg-grayscale-50"
-      } w-[327px] p-3 sm:w-[477px] sm:p-4`}
+      } w-[327px] p-3 lg:w-[477px] lg:p-4`}
       style={{ minHeight: "202px" }}
     >
       {/* Header + Kebab */}
-      <div className="mb-1 flex items-center justify-between sm:mb-2">
+      <div className="mb-1 flex items-center justify-between lg:mb-2">
         {/* Left Content: Icon + Title */}
         <div className="flex items-center gap-2">
           {/* Icon */}
           <Image
             src={iconSrc}
             alt="Document Icon"
-            width={isLargeScreen ? 32 : 26}
-            height={isLargeScreen ? 32 : 26}
+            width={isDesktop ? 32 : 26}
+            height={isDesktop ? 32 : 26}
             className="inline-block align-middle"
             style={{ transform: "translate(2px, 2px)" }} // 위치 조정
           />
           {/* Title */}
-          <h2 className="line-clamp-2 font-nexon text-[12px] font-medium text-black-100 sm:text-[16px]">{title}</h2>
+          <h2 className="line-clamp-2 font-nexon text-[12px] font-medium text-black-100 lg:text-[16px]">{title}</h2>
         </div>
 
         {/* Right Content: Kebab */}
@@ -72,19 +53,14 @@ const BoardComment: React.FC<BoardCommentProps> = ({
           className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500"
           aria-label="Options"
         >
-          <Image
-            src={kebabSrc}
-            alt="Kebab Menu Icon"
-            width={isLargeScreen ? 28 : 24}
-            height={isLargeScreen ? 28 : 24}
-          />
+          <Image src={kebabSrc} alt="Kebab Menu Icon" width={isDesktop ? 28 : 24} height={isDesktop ? 28 : 24} />
           {/* 크기 조정 */}
         </button>
       </div>
 
       {/* Content */}
       <p
-        className="line-clamp-2 flex-1 overflow-hidden text-ellipsis font-nexon text-[14px] font-normal leading-[1.5] text-grayscale-500 sm:text-[16px] sm:leading-[1.75]"
+        className="line-clamp-2 flex-1 overflow-hidden text-ellipsis font-nexon text-[14px] font-normal leading-[1.5] text-grayscale-500 lg:text-[16px] lg:leading-[1.75]"
         style={{
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
@@ -95,17 +71,17 @@ const BoardComment: React.FC<BoardCommentProps> = ({
       </p>
 
       {/* Divider Line */}
-      <div className="my-[9px] flex items-center justify-center sm:my-[16px]">
-        <div className="w-[279px] bg-line-100 sm:w-[427px]" style={{ height: "1px" }}></div>
+      <div className="my-[9px] flex items-center justify-center lg:my-[16px]">
+        <div className="w-[279px] bg-line-100 lg:w-[427px]" style={{ height: "1px" }}></div>
       </div>
 
       {/* Comments + Date */}
-      <div className="flex flex-1 flex-col justify-between sm:flex-col sm:items-start">
+      <div className="flex flex-1 flex-col justify-between lg:items-start">
         <div>
-          <span className="font-nexon text-[14px] font-semibold text-black-400 sm:text-[18px]">{comments}</span>
+          <span className="font-nexon text-[14px] font-semibold text-black-400 lg:text-[18px]">{comments}</span>
         </div>
         <div className="mt-1">
-          <span className="font-nexon text-[12px] font-normal text-grayscale-500 sm:text-[16px]">{date}</span>
+          <span className="font-nexon text-[12px] font-normal text-grayscale-500 lg:text-[16px]">{date}</span>
         </div>
       </div>
     </div>

diff --git 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 { useState } from "react";
 import Image from "next/image";
 import { formatLocalDate } from "@/utils/workDayFormatter";
+import useWidth from "@/hooks/useWidth";
 
 export interface CardBoardProps {
   title: string;
@@ -15,7 +16,7 @@ export interface CardBoardProps {
   onKebabClick?: () => void; // 케밥 버튼 클릭 핸들러
 }
 
-const CardBoard: React.FC<CardBoardProps> = ({
+const CardBoard = ({
   title,
   content,
   nickname,
@@ -24,22 +25,11 @@ const CardBoard: React.FC<CardBoardProps> = ({
   likeCount,
   variant = "default",
   onKebabClick,
-}) => {
-  const [isLargeScreen, setIsLargeScreen] = useState(false);
+}: CardBoardProps) => {
+  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<CardBoardProps> = ({
   };
 
   // 케밥 아이콘 경로 설정
-  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 (
     <div
@@ -62,19 +52,15 @@ const CardBoard: React.FC<CardBoardProps> = ({
       <div className="flex h-[162px] w-[279px] flex-1 flex-col lg:h-[232px] lg:w-[429px]">
         {/* Header */}
         <div className="mb-2 flex items-center justify-between">
-          <h2 className="line-clamp-2 font-nexon text-[16px] font-semibold text-black-400 sm:text-[18px]">{title}</h2>
+          <h2 className="line-clamp-2 font-nexon text-[16px] font-semibold text-black-400 lg:text-[18px]">{title}</h2>
           {/* Kebab Icon */}
           <button
+            type="button"
             onClick={onKebabClick}
             className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500"
             aria-label="Options"
           >
-            <Image
-              src={kebabSrc}
-              alt="Kebab Menu Icon"
-              width={isLargeScreen ? 28 : 24}
-              height={isLargeScreen ? 28 : 24}
-            />{" "}
+            <Image src={kebabSrc} alt="Kebab Menu Icon" width={isDesktop ? 28 : 24} height={isDesktop ? 28 : 24} />
             {/* 크기 조정 */}
           </button>
         </div>
@@ -90,7 +76,7 @@ const CardBoard: React.FC<CardBoardProps> = ({
         <div className="flex items-center gap-2 lg:gap-3">
           {/* 유저 아이콘 */}
           <Image
-            src={`/icons/user/${isLargeScreen ? "user-profile-md.svg" : "user-profile-sm.svg"}`}
+            src={`/icons/user/${isDesktop ? "user-profile-md.svg" : "user-profile-sm.svg"}`}
             alt="User Icon"
             width={28}
             height={28}
@@ -101,7 +87,7 @@ const CardBoard: React.FC<CardBoardProps> = ({
               {nickname}
             </span>
             <span className="text-grayscale-500">|</span>
-            <span className="whitespace-nowrap font-nexon text-[14px] font-normal text-grayscale-500 sm:text-[16px]">
+            <span className="whitespace-nowrap font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
               {formatLocalDate(updatedAt)}
             </span>
           </div>
@@ -112,7 +98,7 @@ const CardBoard: React.FC<CardBoardProps> = ({
           {/* 댓글 아이콘 */}
           <div className="flex items-center gap-1">
             <Image
-              src={`/icons/comment/${isLargeScreen ? "comment-md.svg" : "comment-sm.svg"}`}
+              src={`/icons/comment/${isDesktop ? "comment-md.svg" : "comment-sm.svg"}`}
               alt="Comment Icon"
               width={22}
               height={22}
@@ -124,10 +110,10 @@ const CardBoard: React.FC<CardBoardProps> = ({
             <Image
               src={`/icons/like/${
                 isLiked
-                  ? isLargeScreen
+                  ? isDesktop
                     ? "like-md-active.svg"
                     : "like-sm-active.svg"
-                  : isLargeScreen
+                  : isDesktop
                     ? "like-md.svg"
                     : "like-sm.svg"
               }`}

diff --git 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<CommentProps> = ({ 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 (
-    <div className="relative flex h-[128px] w-[327px] flex-col border border-line-200 p-4 sm:h-[122px] sm:w-[600px] xl:h-[148px] xl:w-[1480px]">
+    <div className="relative flex h-[122px] w-[600px] flex-col border border-line-200 p-4 md:h-[128px] md:w-[327px] lg:h-[148px] lg:w-[1480px]">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -39,18 +32,19 @@ const Comment: React.FC<CommentProps> = ({ nickname, updatedAt, content, onKebab
             sizes="(max-width: 600px) 24px, (max-width: 1480px) 28px, 30px"
           />
           <div className="flex items-center gap-1 truncate">
-            <span className="truncate font-nexon text-[14px] text-grayscale-500 sm:text-[16px] xl:text-[20px]">
+            <span className="truncate font-nexon text-[14px] text-grayscale-500 md:text-[16px] lg:text-[20px]">
               {nickname}
             </span>
             <span className="text-grayscale-500">|</span>
-            <span className="font-nexon text-[14px] text-grayscale-500 sm:text-[16px] xl:text-[20px]">
+            <span className="font-nexon text-[14px] text-grayscale-500 md:text-[16px] lg:text-[20px]">
               {formatLocalDate(updatedAt)}
             </span>
           </div>
         </div>
 
         {/* Right Content: Kebab */}
         <button
+          type="button"
           onClick={onKebabClick}
           className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500"
           aria-label="Options"
@@ -60,7 +54,7 @@ const Comment: React.FC<CommentProps> = ({ nickname, updatedAt, content, onKebab
       </div>
 
       {/* Comment */}
-      <div className="mt-2 flex h-[96px] w-full flex-1 items-center overflow-hidden text-[14px] leading-[1.5] sm:text-[16px] xl:text-[20px]">
+      <div className="mt-2 flex h-[96px] w-full flex-1 items-center overflow-hidden text-[14px] leading-[1.5] md:text-[16px] lg:text-[20px]">
         <p className="line-clamp-2 font-nexon text-black-400">{content}</p>
       </div>
     </div>

diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
@@ -42,8 +42,14 @@ export default function Header() {
           <nav className="flex h-16 items-center justify-between">
             {/* 로고와 메인 네비게이션 */}
             <div className="flex items-center">
-              {/* 로고 스켈레톤 */}
-              <div className="h-8 w-32 animate-pulse bg-lime-200 sm:w-40 md:w-[200px]" />
+              {/* 로고 스켈레톤 - 이미지로 대체*/}
+              <Image
+                src="/logo.svg"
+                alt="Work Root Logo"
+                width={200}
+                height={60}
+                className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
+              />
 
               {/* 메뉴 스켈레톤 - 실제 메뉴와 동일한 위치에 배치 */}
               <div className="ml-4 flex h-16 items-center space-x-2 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">

diff --git 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]"
       />
+      <div className="flex flex-col justify-center gap-4">
+        <div className="text-center text-base font-semibold text-primary-orange-400 lg:text-lg">
+          페이지 이동 중 입니다
+        </div>
+        <div className="text-center text-sm font-normal text-primary-orange-400 lg:text-base">
+          잠시만 기다려주세요...
+        </div>
+      </div>
     </div>
   );
 }
diff --git 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()}
         >
           뒤로 가기