Merge pull request #48 from Team9994/fix/47-home_maintenance

�홈 페이지 유지보수

Author: Leeseunghwan7305

src/app/(home)/components/RoutineList.tsx

@@ -40,7 +40,7 @@ const RoutineList = ({ routineList }: { routineList: RoutineDto[] }) => {
               .reverse()
               .map((data) => (
                 <div
-                  className="bg-backgrounds-sub rounded-6 h-[76px] box-border mb-3 mx-5 p-4 text-text-main relative"
+                  className="relative bg-backgrounds-sub rounded-6 h-[76px] box-border mb-3 mx-5 p-4 text-text-main cursor-pointer"
                   key={data.routineId}
                   onClick={() => toggleDrawer(data.routineId)}
                 >
@@ -65,24 +65,32 @@ const RoutineList = ({ routineList }: { routineList: RoutineDto[] }) => {
                   {activeMenuId === data.routineId && (
                     <div
                       ref={menuRef}
-                      className="absolute top-[calc(50%-12px)] z-10 right-5 shadow-main bg-backgrounds-light text-md"
+                      className="absolute top-[calc(50%-12px)] right-5 shadow-main bg-backgrounds-light text-md zIndex"
                     >
-                      <div className="w-[152px] h-[46px] text-text-main p-3 cursor-pointer border-b border-borders-sub">
+                      {/* <div
+                        onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                          e.stopPropagation();
+                        }}
+                        className="w-[152px] h-[46px] text-text-main p-3 cursor-pointer border-b border-borders-sub"
+                      >
                         수정
-                      </div>
+                      </div> */}
                       <AlertDialog>
                         <AlertDialogTrigger asChild>
                           <div
                             className="w-[152px] h-[46px] text-text-accent p-3 cursor-pointer"
-                            onClick={() => setRoutineToDelete(data.routineId)}
+                            onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                              e.stopPropagation();
+                              setRoutineToDelete(data.routineId);
+                            }}
                           >
                             삭제
                           </div>
                         </AlertDialogTrigger>
-                        <AlertDialogOverlay className="bg-[rgba(0, 0, 0, 0.7)]" />
+                        <AlertDialogOverlay className="bg-[rgba(0, 0, 0,0.1)" />
                         <AlertDialogContent className="w-[296px] h-[148px] bg-backgrounds-sub rounded-6 p-0 flex flex-col items-center text-text-main border-none">
                           <AlertDialogHeader className="text-center">
-                            <AlertDialogTitle className="text-lg py-[19px] pb-[11px] font-semibold leading-[26px]">
+                            <AlertDialogTitle className="text-lg py-[19px] pb-[11px] font-semibold leading-[26px] text-center">
                               루틴 삭제
                             </AlertDialogTitle>
                             <AlertDialogDescription className="text-sm font-normal leading-5 text-text-main">
@@ -92,14 +100,17 @@ const RoutineList = ({ routineList }: { routineList: RoutineDto[] }) => {
                           <div className="flex items-center h-12">
                             <AlertDialogCancel
                               className="w-[148px] h-full m-0 p-0 text-md font-medium bg-transparent leading-[22px] text-text-light text-center cursor-pointer border-none
-              focus:outline-none focus:ring-0 active:bg-transparent hover:bg-transparent"
-                              onClick={() => setRoutineToDelete(undefined)}
+              focus:outline-none focus:ring-0 active:bg-transparent hover:bg-transparent hover:text-text-main"
+                              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                                e.stopPropagation();
+                                setRoutineToDelete(undefined);
+                              }}
                             >
                               취소
                             </AlertDialogCancel>
                             <AlertDialogAction
                               className="w-[148px] h-full m-0 p-0 text-md font-medium bg-transparent leading-[22px] text-text-accent text-center cursor-pointer border-none
-              focus:outline-none focus:ring-0 active:bg-transparent hover:bg-transparent"
+              focus:outline-none focus:ring-0 active:bg-transparent hover:bg-transparent hover:font-bold"
                               onClick={confirmDelete}
                             >
                               삭제
@@ -129,7 +140,7 @@ const RoutineList = ({ routineList }: { routineList: RoutineDto[] }) => {
         </Link>
         <Drawer open={drawerToggle} onClose={() => toggleDrawer(selectedId)}>
           <div
-            className={`fixed w-full h-screen inset-0 bg-backgrounds-default opacity-70 z-40 transition-opacity duration-300 ${
+            className={`fixed w-full h-screen inset-0 bg-backgrounds-default opacity-70 transition-opacity duration-300 ${
               drawerToggle ? 'opacity-70 visible' : 'opacity-0 invisible'
             }`}
             onClick={() => toggleDrawer(selectedId)}

src/app/(home)/hooks/useRoutine.ts

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useDeleteRoutineMutation } from '@/app/api/routine/query';
 
 const useRoutine = () => {
+  const { deleteRoutineMutation } = useDeleteRoutineMutation();
   const [activeMenuId, setActiveMenuId] = useState<number | undefined>(undefined);
   const [routineToDelete, setRoutineToDelete] = useState<number | undefined>(undefined);
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -28,10 +30,14 @@ const useRoutine = () => {
     }
   };
 
-  const confirmDelete = () => {
-    console.log(`${routineToDelete}가 삭제되었습니다.`);
-    setRoutineToDelete(undefined);
-    setActiveMenuId(undefined);
+  const confirmDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (routineToDelete) {
+      deleteRoutineMutation.mutate(String(routineToDelete));
+      window.location.reload();
+      setRoutineToDelete(undefined);
+      setActiveMenuId(undefined);
+    }
   };
 
   const moveRouter = (id: number, type: string) => {

src/app/(home)/layout.tsx

@@ -1,14 +1,19 @@
 import Footer from '@/components/layouts/Footer';
 import Header from '@/components/layouts/Header';
 import Image from 'next/image';
+import Link from 'next/link';
 import { PropsWithChildren } from 'react';
 
 export default function HomeLayout({ children }: PropsWithChildren<{}>) {
   return (
     <>
       <Header
         left={<Image src={'/assets/logo.svg'} alt={'로고'} width={138} height={24} />}
-        right={<Image src={'/assets/bell.svg'} alt={'알림'} width={17} height={21} />}
+        right={
+          <Link href={'./alarm'}>
+            <Image src={'/assets/bell.svg'} alt={'알림'} width={17} height={21} />
+          </Link>
+        }
         className="relative z-20"
       />
       {children}

src/app/(home)/page.tsx

@@ -9,28 +9,25 @@ import { getRoutineList } from '@/app/api/routine';
 export const revalidate = 0;
 export default async function Home() {
   const session = await auth();
-  console.log(session);
   if (!session?.user.name) {
     redirect('/sign');
   }
   if (session?.nickname === undefined) {
     redirect('/sign/additional-info');
   }
-  // TODO : 만료된 토큰 재발급 처리 with refresh token
-  const routineList = (await getRoutineList()) ?? []; // API 호출 실패 시 빈 배열 반환
+  const routineList = (await getRoutineList()) ?? [];
 
   return (
     <div className="relative flex flex-col min-h-[calc(100vh-48px)] bg-backgrounds-default">
       <div className="absolute top-[-48px] left-0 w-full h-[228px] bg-gradient-to-b from-[#2B3F58] to-[#212227] z-10"></div>
-
       <div className="z-10">
         <div className="w-full h-16 flex items-center mb-2 px-5">
           <Link
             href="./exercise-list/search"
-            className="flex items-center w-full h-10 text-sm leading-5 py-2.5 rounded-6 bg-[#324151]"
+            className="flex items-center w-full h-10 text-sm leading-5 py-2.5 rounded-6 bg-[#324151] hover:opacity-80 active:opacity-80"
           >
             <Image className="m-2" src={'/assets/search.svg'} width={24} height={24} alt="돋보기" />
-            <span className="text-text-light">혹시 궁금한 운동이 있으신가요?!</span>
+            <span className="text-text-light ">혹시 궁금한 운동이 있으신가요?</span>
           </Link>
         </div>
         <h4 className="text-[18px] font-semibold leading-[26px] py-2 pl-5 text-text-main">

src/app/alarm/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Alarm = () => {
+  return <div>알림 페이지</div>;
+};
+
+export default Alarm;

src/app/api/routine/index.ts

@@ -64,7 +64,7 @@ export const putUpdateRoutine = async (id: string, payload: Register_Routine_Pay
 
 export const deleteDeleteRoutine = async (id: string) => {
   try {
-    const res = await api.delete(
+    const res = await clientApi.delete(
       `${process.env.NEXT_PUBLIC_SPRING_BACKEND_URL}${ROUTINE.DELETE_DELETE_ROUTINE(id)}`
     );
     return res.data;

src/app/api/routine/query/index.ts

@@ -1,2 +1,10 @@
-import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteDeleteRoutine } from '..';
+
+export const useDeleteRoutineMutation = () => {
+  const deleteRoutineMutation = useMutation({
+    mutationFn: deleteDeleteRoutine,
+  });
+
+  return { deleteRoutineMutation };
+};

src/app/globals.css

@@ -93,4 +93,7 @@
   .custom-placeholder::placeholder {
     font-size: 18px;
   }
+  .zIndex {
+    z-index: 9999 !important;
+  }
 }

src/app/profile/[nickname]/components/UserInfo.tsx

@@ -21,16 +21,16 @@ const UserInfo = ({ userInfo }: { userInfo: UserInfoType }) => {
     <div className="flex items-center justify-between h-[104px] px-4 ">
       <div className="flex items-center space-x-3">
         <Image
-          src={userInfo.profile}
+          src={userInfo?.profile}
           alt="Profile"
           width={64}
           height={64}
           className="rounded-full"
         />
         <div>
-          <h2 className="text-lg font-semibold text-white">{userInfo.nickname}</h2>
+          <h2 className="text-lg font-semibold text-white">{userInfo?.nickname}</h2>
           <p className="text-sm text-gray-600">
-            팔로워 {userInfo.followerCount} · 팔로잉 {userInfo.followingCount}
+            팔로워 {userInfo?.followerCount} · 팔로잉 {userInfo?.followingCount}
           </p>
         </div>
       </div>