Merge pull request #52 from Team9994/dev

�운동 리스트 페이지 유지보수

Author: Leeseunghwan7305

next.config.mjs

@@ -35,6 +35,16 @@ const nextConfig = {
         hostname: 'doyg075k8m500.cloudfront.net',
         pathname: '/**',
       },
+      {
+        protocol: 'http',
+        hostname: 'img1.kakaocdn.net',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'img1.kakaocdn.net',
+        pathname: '/**',
+      },
     ],
   },
   webpack: (config) => {

src/app/exercise-details/[id]/edit/page.tsx

@@ -6,14 +6,12 @@ import Image from 'next/image';
 import { Input } from '@/components/ui/input';
 import useInput from '@/hooks/useInput';
 import { useCommentPutMutation } from '@/app/api/exercise-details/query';
-import { useSession } from 'next-auth/react';
 
 const Edit = () => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const exerciseCommentId = searchParams.get('exerciseCommentId');
-  const { data: session } = useSession();
   const pathSegments = pathname.split('/');
   const exerciseId = pathSegments[pathSegments.length - 2];
   const { putCommentMutation } = useCommentPutMutation(exerciseId, 'default');

src/app/exercise-details/[id]/hydrated-page.tsx

@@ -1,31 +1,31 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ExerciseInfo from '../components/ExerciseInfo';
 import SelectToggle from '../components/SelectToggle';
 import Comment from '../components/Comment';
 import Record from '../components/Record';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useDetailsInfo } from '@/app/api/exercise-details/query';
-import { useSession } from 'next-auth/react';
 import Header from '@/components/layouts/Header';
 import Link from 'next/link';
 import Back from '@/components/common/Back';
 import Image from 'next/image';
-import { useDetailLikeRegister } from '@/app/api/exercise/query';
+import { useDeleteCustomExerciseMutation, useDetailLikeRegister } from '@/app/api/exercise/query';
 
 const ExerciseDetails = () => {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const type = searchParams.get('type');
   const [selected, setSelected] = useState<'explain' | 'record'>(
     type === 'default' ? 'explain' : 'record'
   );
-
+  const [isActiveMenu, setIsActiveMenu] = useState<boolean>(false);
   const pathname = usePathname();
 
   const pathSegments = pathname.split('/');
   const lastSegment = pathSegments[pathSegments.length - 1];
 
-  const { data: session } = useSession();
+  const { deleteCustomExerciseMutation } = useDeleteCustomExerciseMutation();
   const { postDetailLikeRegisterMutation } = useDetailLikeRegister();
 
   const { data } = useDetailsInfo({ id: lastSegment, source: 'default' });
@@ -36,14 +36,29 @@ const ExerciseDetails = () => {
       source: type as 'custom' | 'default',
     });
   };
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClickOutside = (e: Event) => {
+    if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+      setIsActiveMenu(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   console.log(data);
   return (
     <div>
       {lastSegment !== 'edit' && (
         <Header
           className={'bg-backgrounds-default'}
           left={
-            <Link href="/">
+            <Link href="/exercise-list/search">
               <Back />
             </Link>
           }
@@ -59,21 +74,50 @@ const ExerciseDetails = () => {
                 height={24}
               />
               {type === 'custom' && (
-                <Image
-                  onClick={handleHeartChange}
-                  priority
-                  src={'/assets/menu.svg'}
-                  alt={'찜하기'}
-                  width={28}
-                  height={28}
-                  className="ml-4 rotate-90"
-                />
+                <div className="relative">
+                  <Image
+                    priority
+                    src={'/assets/menu.svg'}
+                    alt={'메뉴'}
+                    width={28}
+                    height={28}
+                    className="ml-4 rotate-90"
+                    onClick={() => setIsActiveMenu((pre) => !pre)}
+                  />
+                  {isActiveMenu && (
+                    <div
+                      ref={menuRef}
+                      className="absolute top-0 z-20 right-0 shadow-main bg-backgrounds-light text-md"
+                    >
+                      <div
+                        onClick={() => {
+                          router.push(
+                            `/custom-exercise?status=edit&exerciseId=${data?.data?.exerciseId}`
+                          );
+                        }}
+                        className="cursor-pointer w-[152px] h-[46px] text-text-main p-3 border-b border-borders-sub"
+                      >
+                        수정
+                      </div>
+                      <div
+                        onClick={() =>
+                          deleteCustomExerciseMutation.mutate({
+                            id: String(data?.data?.exerciseId),
+                          })
+                        }
+                        className="w-[152px] h-[46px] text-text-accent p-3 cursor-pointer"
+                      >
+                        삭제
+                      </div>
+                    </div>
+                  )}
+                </div>
               )}
             </div>
           }
         />
       )}
-      <ExerciseInfo id={lastSegment} type={type} info={data?.data} />
+      <ExerciseInfo info={data?.data} />
       <SelectToggle type={type} selected={selected} setSelected={setSelected} />
       {type === 'default' && selected === 'explain' && (
         <div className="w-full px-5 mt-4 mb-10">
@@ -87,7 +131,14 @@ const ExerciseDetails = () => {
           })}
           <div className="w-[320px] h-[40px] rounded-6 border border-backgrounds-light text-s flex justify-between items-center px-4 mb-10 mt-5">
             <div className="leading-[18px] text-text-main ">더 자세한 동작을 알고싶다면?</div>
-            <div className="leading-[18px] text-blue">동영상 보러 가기 </div>
+            <Link
+              href={`https://www.youtube.com/results?search_query=${data?.data?.exerciseName}`}
+              className="cursor-pointer leading-[18px] text-blue"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              동영상 보러 가기
+            </Link>
           </div>
           <Comment />
         </div>

src/app/exercise-details/components/Comment.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import useExplain from '../hooks/useExplain';
 import { CommentList } from '../types';
 import { usePathname } from 'next/navigation';
+import defaultPng from './../../../../public/assets/my.svg';
 
 const Comment = () => {
   const {
@@ -20,6 +21,7 @@ const Comment = () => {
     contentReset,
     router,
     id,
+    session,
   } = useExplain();
 
   const pathname = usePathname();
@@ -33,6 +35,12 @@ const Comment = () => {
           className="w-full h-[40px] bg-backgrounds-light focus:outline-none border-none placeholder-[#999999]"
           placeholder="댓글을 작성해보세요"
           onChange={onChange}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              postCommentMutation.mutate({ content, exerciseId: id });
+              contentReset();
+            }
+          }}
           value={content}
         />
         <Image
@@ -60,7 +68,10 @@ const Comment = () => {
         ?.flatMap((page) => page?.data?.commentList)
         ?.map((data: CommentList) => (
           <section key={data?.exerciseCommentId} className="flex relative w-full mb-7">
-            <div className="bg-backgrounds-sub w-6 h-6 rounded-full" />
+            <div className="relative w-6 h-6 rounded-16 overflow-hidden">
+              <Image src={session?.user?.image || defaultPng} alt="프로필 사진" fill />
+            </div>
+
             <div className="ml-2">
               <div className="text-xs mb-2">
                 <span className="mr-2 text-text-sub">{data?.nickName}</span>
@@ -85,14 +96,16 @@ const Comment = () => {
                 <p className={data?.likeStatus ? 'text-blue' : ''}>{data?.likeCount}</p>
               </div>
             </div>
-            <Image
-              className="absolute top-0 right-0 cursor-pointer"
-              src="/assets/menu.svg"
-              width={18}
-              height={18}
-              alt="menu"
-              onClick={() => handleMenuClick(data?.exerciseCommentId)}
-            />
+            {data?.writer && (
+              <Image
+                className="absolute top-0 right-0 cursor-pointer"
+                src="/assets/menu.svg"
+                width={18}
+                height={18}
+                alt="menu"
+                onClick={() => handleMenuClick(data?.exerciseCommentId)}
+              />
+            )}
 
             {data?.writer && activeMenuId === data?.exerciseCommentId && (
               <div

src/app/exercise-details/components/ExerciseInfo.tsx

@@ -1,33 +1,13 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Image from 'next/image';
-import { useDeleteCustomExerciseMutation } from '@/app/api/exercise/query';
-import { useRouter } from 'next/navigation';
 import { GetDetailsInfoType } from '@/app/api/exercise-details/type';
 
 interface ExerciseInfoProps {
-  type: string | null;
-  id: string;
   info: GetDetailsInfoType | undefined;
 }
 
-const ExerciseInfo = ({ id, type, info }: ExerciseInfoProps) => {
-  const router = useRouter();
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  const [isActiveMenu, setIsActiveMenu] = useState<boolean>(false);
-  const handleClickOutside = (e: Event) => {
-    if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-      setIsActiveMenu(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  const { deleteCustomExerciseMutation } = useDeleteCustomExerciseMutation();
+const ExerciseInfo = ({ info }: ExerciseInfoProps) => {
   if (!info) return;
   return (
     <div className="mx-auto px-5">
@@ -36,51 +16,14 @@ const ExerciseInfo = ({ id, type, info }: ExerciseInfoProps) => {
           {info?.exerciseName}
         </h3>
         <div className="flex align-center">
-          <div className="relative flex align-center">
-            {type === 'custom' && (
-              <Image
-                priority
-                src={'/assets/menu.svg'}
-                alt={'메뉴'}
-                width={28}
-                height={28}
-                className="ml-2"
-                onClick={() => setIsActiveMenu((pre) => !pre)}
-              />
-            )}
-            {isActiveMenu && (
-              <div
-                ref={menuRef}
-                className="absolute top-0 z-20 right-0 shadow-main bg-backgrounds-light text-md"
-              >
-                <div
-                  onClick={() => {
-                    router.push(`/custom-exercise?status=edit&exerciseId=${id}`);
-                  }}
-                  className="w-[152px] h-[46px] text-text-main p-3 cursor-pointer border-b border-borders-sub"
-                >
-                  수정
-                </div>
-                <div
-                  onClick={() =>
-                    deleteCustomExerciseMutation.mutate({
-                      id,
-                    })
-                  }
-                  className="w-[152px] h-[46px] text-text-accent p-3 cursor-pointer"
-                >
-                  삭제
-                </div>
-              </div>
-            )}
-          </div>
+          <div className="relative flex align-center"></div>
         </div>
       </div>
 
       <p className="text-sm leading-5 text-text-light mb-4">
         {info?.exerciseTarget} : {info?.exerciseEquipment}
       </p>
-      <div className="w-full h-[184px] bg-backgrounds-light mb-2 relative">
+      <div className="w-full h-[250px] bg-backgrounds-light mb-2 relative">
         {info?.gifUrl === '등록된 이미지 파일이 없습니다.' ? null : (
           <Image src={info.gifUrl} alt={'운동 이미지'} fill />
         )}

src/app/exercise-details/components/SelectToggle.tsx

@@ -1,31 +1,58 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
 interface SelectToggleProps {
   selected: 'explain' | 'record';
   setSelected: React.Dispatch<React.SetStateAction<'explain' | 'record'>>;
   type: string | null;
 }
 
 const SelectToggle = ({ selected, setSelected, type }: SelectToggleProps) => {
+  const explainRef = useRef<HTMLDivElement>(null);
+  const recordRef = useRef<HTMLDivElement>(null);
+  const [underlineStyle, setUnderlineStyle] = useState({ width: 0, left: 0 });
+
+  useEffect(() => {
+    const selectedRef = selected === 'explain' ? explainRef.current : recordRef.current;
+
+    if (selectedRef) {
+      const { offsetWidth, offsetLeft } = selectedRef;
+      setUnderlineStyle({ width: offsetWidth, left: offsetLeft });
+    }
+  }, [selected]);
+
   return (
-    <div className="flex w-full text-base text-center">
+    <div className="relative flex w-full text-base text-center">
+      {/* 밑줄 */}
+      <div
+        className="absolute bottom-0 h-0.5 bg-text-main transition-all duration-300 ease-in-out"
+        style={{
+          width: `${underlineStyle.width}px`,
+          transform: `translateX(${underlineStyle.left}px)`,
+        }}
+      ></div>
+
+      {/* 설명 버튼 */}
       {type === 'default' && (
         <div
+          ref={explainRef}
           className={`flex-grow basis-0 cursor-pointer py-3 ${
             selected === 'explain'
-              ? 'text-text-main font-bold border-b-2 border-text-main'
-              : 'text-borders-main border-b-2 border-borders-main'
+              ? 'text-text-main font-bold border-b-0'
+              : 'text-borders-main border-b border-borders-main'
           }`}
           onClick={() => setSelected('explain')}
         >
           설명
         </div>
       )}
 
+      {/* 기록/분석 버튼 */}
       <div
+        ref={recordRef}
         className={`flex-grow basis-0 cursor-pointer py-3 ${
           selected === 'record'
-            ? 'text-text-main font-bold border-b-2 border-text-main'
-            : 'text-borders-main border-b-2 border-borders-main'
+            ? 'text-text-main font-bold border-b-0'
+            : 'text-borders-main border-b border-borders-main'
         }`}
         onClick={() => setSelected('record')}
       >