Merge pull request #279 from SOPT-all/fix/#277/ALL-QA(heesun)

[Fix] 전체 QA (상세페이지, 상세내역페이지, 마이페이지)
SOPT-all · Jan 24, 2025 · 368c748 · 368c748
2 parents 42d211a + 38189aa
commit 368c748
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 19 deletions.
diff --git a/src/components/ClassCard/index.tsx b/src/components/ClassCard/index.tsx
@@ -20,6 +20,7 @@ const ClassCard = ({
   lessonEndDateTime,
   isReservation = true,
   children,
+  onClick,
 }: ClassCardProps) => {
   // 클래스 상태 계산
   const { status, remainingDays } = getClassStatus(lessonStartDateTime, lessonEndDateTime);
@@ -68,7 +69,7 @@ const ClassCard = ({
   };
 
   return (
-    <div className={styles.cardContainerStyle}>
+    <div className={styles.cardContainerStyle} onClick={onClick}>
       <Flex justify="spaceBetween" align="center">
         <Flex align="center" gap="0.3rem" marginBottom="1.2rem">
           <Flex marginRight="0.5rem">{statusIcon()}</Flex>

diff --git a/src/pages/home/components/BottomSection/index.tsx b/src/pages/home/components/BottomSection/index.tsx
@@ -55,7 +55,36 @@ const BottomSection = ({ isInstructor }: { isInstructor: boolean }) => {
 
   return (
     <Flex>
-      <ul className={styles.ulStyle}>{LIST_DATA.map(renderListItem)}</ul>
+      <ul className={styles.ulStyle}>
+        {LIST_DATA.map((item) => {
+          const isDisabled =
+            (item.isInstructorRequired && !isInstructor) || (item.label === '강사 등록' && isInstructor);
+          const ArrowIcon = isDisabled ? IcArrowRightSmallGray0432 : IcArrowRightSmallGray0732;
+
+          const handleClick = () => {
+            if (isDisabled) return;
+            if (item.label === '로그아웃') {
+              handleLogout();
+            } else if (item.path) {
+              navigate(item.path);
+            }
+          };
+
+          return (
+            <React.Fragment key={item.id}>
+              <li className={`${styles.listStyle} ${isDisabled ? styles.disabledStyle : ''}`} onClick={handleClick}>
+                <p>{item.label}</p>
+                <ArrowIcon width={32} height={32} />
+              </li>
+              {item.hasDivider && (
+                <div className={styles.dividerStyle}>
+                  <Divider color="gray1" thickness={1} />
+                </div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </ul>
     </Flex>
   );
 };

diff --git a/src/pages/home/components/TopSection/index.tsx b/src/pages/home/components/TopSection/index.tsx
@@ -44,6 +44,15 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
     );
   };
 
+  const handleMyClassesClick = () => {
+    if (isInstructor && userData.lessonCount === 0) {
+      return;
+    }
+    if (isInstructor) {
+      handleNavigate(ROUTES_CONFIG.instructorClassList.path);
+    }
+  };
+
   return (
     <section className={styles.sectionStyle}>
       <Flex direction="column" align="center">
@@ -92,7 +101,6 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
 
         <Divider direction="vertical" color="gray2" length={32} thickness={1} />
 
-        {/* 관심목록 우선 disabled 처리 */}
         <Flex direction="column" align="center" gap="0.5rem" className={styles.disabledStyle}>
           <Head tag="h4" color={getTextColor(userData.favoriteCount)}>
             {userData.favoriteCount}
@@ -108,7 +116,7 @@ const TopSection = ({ userData, onClose, isInstructor }: TopSectionProps) => {
           gap="0.5rem"
           direction="column"
           align="center"
-          onClick={() => isInstructor && handleNavigate(ROUTES_CONFIG.instructorClassList.path)}
+          onClick={handleMyClassesClick}
           className={isInstructor ? '' : styles.disabledStyle}>
           <Head tag="h4" color={getTextColor(userData.lessonCount ?? 0)}>
             {userData.lessonCount ?? 0}

diff --git a/src/pages/home/types/classCardTypes.ts b/src/pages/home/types/classCardTypes.ts
@@ -10,5 +10,6 @@ export interface ClassCardProps {
   lessonStartDateTime: string | undefined;
   lessonEndDateTime: string | undefined;
   isReservation?: boolean;
+  onClick?: () => void;
   children?: React.ReactNode;
 }
diff --git a/src/pages/instructor/classList/index.tsx b/src/pages/instructor/classList/index.tsx
@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 import { layoutStyle, containerStyle } from '@/pages/instructor/classList/index.css';
+import { handleClassCardClick, handleBoxButtonClick, handleCancelClick } from '@/pages/mypage/utils/clickUtils';
 import BoxButton from '@/components/BoxButton';
 import ClassCard from '@/components/ClassCard';
 import Flex from '@/components/Flex';
 import Header from '@/components/Header';
 import Text from '@/components/Text';
-import { notify } from '@/components/Toast';
 import { useGetMyLessons } from '@/apis/classList/queries';
-import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { Lesson } from '@/types/lessonTypes';
 
 const ClassList = () => {
@@ -24,11 +23,6 @@ const ClassList = () => {
     return <div></div>;
   }
 
-  const handleDetailClick = (lessonId: number) => {
-    const path = ROUTES_CONFIG.instructorClassDetail.path(lessonId.toString());
-    navigate(path);
-  };
-
   return (
     <div className={layoutStyle}>
       <Header.Root isColor={true}>
@@ -42,6 +36,7 @@ const ClassList = () => {
         <Flex direction="column" gap="1.2rem" marginTop="1.6rem">
           {lessonData?.lessons.map((lesson: Lesson) => (
             <ClassCard
+              onClick={() => handleClassCardClick(navigate, lesson.id)}
               isReservation={false}
               key={lesson.id}
               lessonName={lesson.name}
@@ -51,10 +46,10 @@ const ClassList = () => {
               lessonLocation={lesson.location}
               lessonStartDateTime={lesson.startDateTime}
               lessonEndDateTime={lesson.endDateTime}>
-              <BoxButton variant="temp" onClick={() => notify()}>
+              <BoxButton onClick={handleCancelClick} variant="temp">
                 수정하기
               </BoxButton>
-              <BoxButton variant="outline" onClick={() => handleDetailClick(lesson.id)}>
+              <BoxButton variant="outline" onClick={(e) => handleBoxButtonClick(e, navigate, lesson.id, false)}>
                 상세보기
               </BoxButton>
             </ClassCard>

diff --git a/src/pages/mypage/mypageReservation/index.tsx b/src/pages/mypage/mypageReservation/index.tsx
@@ -1,20 +1,19 @@
 import { useNavigate } from 'react-router-dom';
 import { layoutStyle, containerStyle } from '@/pages/mypage/mypageReservation/index.css';
+import { handleClassCardClick, handleBoxButtonClick, handleCancelClick } from '@/pages/mypage/utils/clickUtils';
 import BoxButton from '@/components/BoxButton';
 import ClassCard from '@/components/ClassCard';
 import Flex from '@/components/Flex';
 import Header from '@/components/Header';
 import Text from '@/components/Text';
-import { notify } from '@/components/Toast';
 import { useGetReservations } from '@/apis/myPageReservation/queries';
-import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { Reservation } from '@/types/reservationTypes';
 
 const MyPageReservation = () => {
   const navigate = useNavigate();
-
   const { data: reservationData } = useGetReservations();
 
+
   const handleDetailClick = (reservationId: number | undefined) => {
     if (reservationId !== undefined) {
       const path = ROUTES_CONFIG.mypageReservationDetail.path(reservationId.toString());
@@ -27,6 +26,7 @@ const MyPageReservation = () => {
   const handleNavigateHome = () => {
     navigate('/');
   };
+
   return (
     <div className={layoutStyle}>
       <Header.Root isColor={true}>
@@ -53,12 +53,16 @@ const MyPageReservation = () => {
                 lessonLocation={reservation.location}
                 lessonStartDateTime={reservation.startDateTime}
                 lessonEndDateTime={reservation.endDateTime}
-                isReservation={true}>
-                <BoxButton onClick={notify} variant="temp">
+                isReservation={true}
+                onClick={() => handleClassCardClick(navigate, reservation.reservationId)} 
+              >
+                <BoxButton onClick={handleCancelClick} variant="temp">
                   취소하기
                 </BoxButton>
 
-                <BoxButton variant="outline" onClick={() => handleDetailClick(reservation.reservationId)}>
+                <BoxButton
+                  variant="outline"
+                  onClick={(e) => handleBoxButtonClick(e, navigate, reservation.reservationId, true)}>
                   상세보기
                 </BoxButton>
               </ClassCard>

diff --git a/src/pages/mypage/utils/clickUtils.ts b/src/pages/mypage/utils/clickUtils.ts
@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import { notify } from '@/components/Toast';
+import { ROUTES_CONFIG } from '@/routes/routesConfig';
+
+export const handleClassCardClick = (navigate: ReturnType<typeof useNavigate>, reservationId: number | undefined) => {
+  if (reservationId !== undefined) {
+    const path = ROUTES_CONFIG.class.path(reservationId.toString());
+    navigate(path);
+  } else {
+    navigate(ROUTES_CONFIG.error.path);
+  }
+};
+
+export const handleDetailClick = (
+  navigate: ReturnType<typeof useNavigate>,
+  id: number | undefined,
+  isReservation: boolean
+) => {
+  if (id !== undefined) {
+    const path = isReservation
+      ? ROUTES_CONFIG.mypageReservationDetail.path(id.toString())
+      : ROUTES_CONFIG.instructorClassDetail.path(id.toString());
+    navigate(path);
+  } else {
+    navigate(ROUTES_CONFIG.error.path);
+  }
+};
+
+export const handleCancelClick = (e: React.MouseEvent) => {
+  e.stopPropagation();
+  notify();
+};
+
+export const handleBoxButtonClick = (
+  e: React.MouseEvent,
+  navigate: ReturnType<typeof useNavigate>,
+  reservationId: number | undefined,
+  isReservation: boolean
+) => {
+  e.stopPropagation();
+  handleDetailClick(navigate, reservationId, isReservation);
+};