[Refactor] 채팅 오류 해결

package.json

@@ -12,7 +12,6 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_7c63d99a915fab5",
-    "dev:db": "json-server src/data/main.json --port=8888",
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
@@ -26,7 +25,6 @@
     "clsx": "^2.1.1",
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^11.11.11",
-    "json-server": "^1.0.0-beta.3",
     "lottie-light-react": "^2.4.0",
     "next": "14.2.15",
     "pretendard": "^1.3.9",

src/apis/getChatMessageData.ts

@@ -3,7 +3,7 @@ import type { GetChatListResponse } from '@manchui-api';
 
 export async function getChatMessageData(roomId: string, lastMessageId: number | undefined) {
   try {
-    const queryParams = lastMessageId ? `?lastMessageId=${lastMessageId}&limit=20` : '?limit=20';
+    const queryParams = lastMessageId ? `?lastMessageId=${lastMessageId}&limit=10` : '?limit=20';
     const res = await instance.get<GetChatListResponse>(`/api/chat/list/${roomId}${queryParams}`);
 
     return res.data;

src/components/shared/GNB/Notification/MobileUI/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable tailwindcss/no-custom-classname */
 import { forwardRef } from 'react';
-import ArrowBtn from 'public/icons/ArrowBtn';
+import Image from 'next/image';
 import NotificationItem from '@/components/shared/GNB/Notification/NotificationItem';
 import type { NotificationContent } from '@manchui-api';
 
@@ -14,12 +14,12 @@ export interface MobileUIProps {
 export const MobileUI = forwardRef<HTMLDivElement, MobileUIProps>(({ notifications, isLoading, onDropClick, isError }, ref) => (
   <div className="fixed inset-0 z-50 bg-white p-10">
     <div className="mb-5 flex items-center">
-      <button type="button" onClick={onDropClick}>
-        <ArrowBtn direction="left" color="#fb1c49" className="size-8" />
-      </button>
+      <div onClick={onDropClick}>
+        <Image src="/icons/arrow-right.svg" alt="알림창 끄기" width={32} height={32} className="rotate-180" />
+      </div>
       <div className="flex w-full items-center justify-between gap-4">
-        <h1 className="text-2xl font-semibold leading-[32px] text-lightred">알림</h1>
-        {!isLoading && <span className="rounded-md bg-lightred px-4 py-2 text-xs font-medium text-white">{`${notifications.length}개`}</span>}
+        <h1 className="text-2xl font-semibold leading-[32px]">알림</h1>
+        {!isLoading && <span className="rounded-md bg-black px-4 py-2 text-xs font-medium text-white">{`${notifications.length}개`}</span>}
       </div>
     </div>
 

src/components/shared/GNB/Notification/NotificationItem/MobileUI/index.tsx

@@ -70,7 +70,7 @@ export default function MobileUI({ data }: NotificationItemProps) {
         <span className="text-nowrap text-xs font-semibold text-lightred">{formatTimeAgo(String(data.createdAt))}</span>
       </div>
 
-      <div className="flex-center pl-100 absolute inset-y-0 right-0 -z-10 rounded-r-[5px] bg-gradient-to-l from-lightred via-red-200 to-transparent pr-20 text-white">
+      <div className="flex-center pl-100 absolute inset-y-0 right-0 -z-10 rounded-r-[5px] bg-gradient-to-l from-black via-black/50 to-transparent pr-20 text-white">
         삭제
       </div>
     </div>

src/components/shared/GNB/Notification/NotificationItem/TabletPCUI/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable tailwindcss/no-custom-classname */
+import Image from 'next/image';
 import Link from 'next/link';
-import XIcon from 'public/icons/XIcon';
 import { deleteNotificationData } from '@/apis/deleteNotificationData';
 import type { NotificationItemProps } from '@/components/shared/GNB/Notification/NotificationItem';
 import { formatTimeAgo } from '@/utils/dateUtils';
@@ -37,14 +37,14 @@ export default function TabletPCUI({ data }: NotificationItemProps) {
     },
   });
 
-  const handleDelete = (e: React.MouseEvent<SVGSVGElement>) => {
+  const handleDelete = (e: React.MouseEvent<HTMLImageElement>) => {
     e.preventDefault();
     mutation.mutate({ notificationId: data.notificationId });
   };
 
   return (
     <Link href={`/detail/${data.gatheringId}`} className="relative flex min-h-[100px] w-full flex-col bg-white px-8 py-4 text-left hover:bg-gray-50">
-      <XIcon color="black" className="absolute right-2 top-2 hidden size-4 tablet:block" onClick={handleDelete} />
+      <Image src="/icons/x.svg" alt="알림창 끄기" width={20} height={20} onClick={handleDelete} className="absolute right-2 top-2 hidden size-4 tablet:block" />
       <p className="line-clamp-2 text-pretty text-[14px] font-medium leading-[24px]">{data.content}</p>
       <span className="mt-auto text-xs font-semibold text-lightred">{formatTimeAgo(String(data.createdAt))}</span>
     </Link>

src/components/shared/GNB/Notification/TabletPCUI/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import * as m from 'framer-motion/m';
-import ArrowBtn from 'public/icons/ArrowBtn';
+import Image from 'next/image';
 import NotificationItem from '@/components/shared/GNB/Notification/NotificationItem';
 import type { NotificationContent } from '@manchui-api';
 
@@ -20,12 +20,12 @@ export const TabletPCUI = forwardRef<HTMLDivElement, TabletPCUIProps>(({ notific
     className="absolute right-0 z-50 mt-2 min-h-40 w-[370px] rounded-md bg-background p-5 shadow-2xl"
   >
     <div className="mb-5 flex items-center">
-      <button type="button" onClick={onDropClick}>
-        <ArrowBtn direction="left" color="#fb1c49" className="size-8" />
-      </button>
+      <div onClick={onDropClick}>
+        <Image src="/icons/arrow-right.svg" alt="알림창 끄기" width={32} height={32} className="rotate-180" />
+      </div>
       <div className="flex w-full items-center justify-between gap-4">
-        <h1 className="text-xl font-semibold text-lightred">알림</h1>
-        {!isLoading && <span className="rounded-md bg-lightred px-2 py-1 text-xs font-medium text-white">{`${notifications.length}개`}</span>}
+        <h1 className="text-xl font-semibold">알림</h1>
+        {!isLoading && <span className="rounded-md bg-black px-2 py-1 text-xs font-medium text-white">{`${notifications.length}개`}</span>}
       </div>
     </div>
 

src/components/shared/GNB/Notification/index.tsx

@@ -98,9 +98,9 @@ export default function Notification() {
 
   return (
     <button type="button" className="relative">
-      <button type="button" onClick={handelDropClick} className="flex items-center justify-center">
+      <div onClick={handelDropClick} className="flex items-center justify-center">
         <Image src="/icons/notificationIcon.svg" alt="알림 버튼" width={28} height={28} />
-      </button>
+      </div>
       {dropOpen && (
         <>
           <div className="hidden tablet:block">

src/components/shared/GNB/Toggle.tsx

@@ -62,7 +62,7 @@ export default function Toggle({ userData }: ToggleProps) {
     <div className="relative flex items-center justify-center" ref={dropdownRef}>
       {/* 프로필 */}
       <button type="button" onClick={isModalOpen ? closeModal : openModal} className="relative z-10">
-        <div className="shadow-custom-md size-10 rounded-full bg-slate-50 focus:outline-none">
+        <div className="size-10 rounded-full bg-slate-50 shadow-custom-md focus:outline-none">
           <Image className="relative size-10 rounded-full object-cover" src={userData.image || '/icons/person-rounded.png'} alt="프로필" fill />
         </div>
       </button>
@@ -73,7 +73,7 @@ export default function Toggle({ userData }: ToggleProps) {
           <Link href="/mypage" onClick={() => setIsModalOpen(false)} className="rounded-lg p-1 transition-colors duration-100 hover:bg-gray-50">
             <div className="flex flex-row content-between items-center">
               <Image src="/icons/person.svg" className="size-6" alt="프로필" width={24} height={24} />
-              <p className="ml-1 text-base font-semibold text-blue-800">마이페이지</p>
+              <p className="ml-1 whitespace-nowrap text-base font-semibold text-blue-800">마이페이지</p>
             </div>
           </Link>
 

src/components/shared/GNB/index.tsx

@@ -61,7 +61,7 @@ export default function GNB() {
         </div>
         <div className="hidden flex-grow tablet:flex tablet:justify-start">
           <div className="hidden items-center gap-3 text-[16px] font-semibold text-black tablet:flex">
-            <Link href="/main" className={clsx('relative flex h-10 w-16 items-center justify-center', 'group')}>
+            <Link href="/main" className={clsx('relative flex h-10 w-20 items-center justify-center', 'group')}>
               모임 찾기
               <span
                 className={clsx(
@@ -71,7 +71,7 @@ export default function GNB() {
                 )}
               />
             </Link>
-            <Link href="/review" className={clsx('relative flex h-10 w-16 items-center justify-center', 'group')}>
+            <Link href="/review" className={clsx('relative flex h-10 w-20 items-center justify-center', 'group')}>
               모든 리뷰
               <span
                 className={clsx(
@@ -81,7 +81,7 @@ export default function GNB() {
                 )}
               />
             </Link>
-            <Link href="/bookmark" className={clsx('relative flex h-10 w-16 items-center justify-center', 'group')}>
+            <Link href="/bookmark" className={clsx('relative flex h-10 w-20 items-center justify-center', 'group')}>
               찜한 모임
               <span
                 className={clsx(

src/components/shared/Toast/index.tsx

@@ -54,7 +54,7 @@ export const Toast = (type: 'success' | 'error' | 'info' | 'warning', message: s
         icon: (
           <div className="rounded-full border-[1.5px] border-white p-1">
             <svg className="size-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
             </svg>
           </div>
         ),
@@ -77,8 +77,8 @@ export const Toast = (type: 'success' | 'error' | 'info' | 'warning', message: s
           <svg className="size-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
             <path
               stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               stroke-width="2"
               d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
             />