[SWM-363] Fix : WrongQuiz Button layout

4m9d · Oct 25, 2023 · c5354a9 · c5354a9
1 parent cec298b
commit c5354a9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/dashboard/main/wrongQuizReview/WrongQuizReviewCard.tsx b/src/components/dashboard/main/wrongQuizReview/WrongQuizReviewCard.tsx
@@ -15,9 +15,9 @@ export default function WrongQuizReviewCard({ wrongQuiz }: Props) {
   };
 
   return (
-    <div className='flex flex-col min-h-[2rem]'>
+    <div className='flex flex-col'>
       {mode === 'question' ? (
-        <div>
+        <>
           <div className='items-center justify-between hidden border-b-2 sm:flex border-b-sroom-white'>
             <p className='text-xs text-sroom-gray-100'>
               {wrongQuiz.video_title}
@@ -30,12 +30,12 @@ export default function WrongQuizReviewCard({ wrongQuiz }: Props) {
               정답보기
             </Button>
           </div>
-          <p className='w-full text-xs font-medium whitespace-normal break-keep md:text-sm xl:text-base text-sroom-white line-clamp-1'>
+          <p className='w-full text-xs font-medium whitespace-normal break-keep md:text-sm xl:text-base text-sroom-white line-clamp-1 md:line-clamp-none'>
             {`Q. ${wrongQuiz.quiz_question}`}
           </p>
-        </div>
+        </>
       ) : mode === 'answer' ? (
-        <div>
+        <>
           <div className='items-center justify-between hidden border-b-2 sm:flex border-b-sroom-white'>
             <p className='text-xs text-sroom-gray-100'>
               {getRelativeTime(wrongQuiz.submitted_at)}
@@ -48,10 +48,10 @@ export default function WrongQuizReviewCard({ wrongQuiz }: Props) {
               문제보기
             </Button>
           </div>
-          <p className='text-xs font-medium whitespace-normal break-keep md:text-sm xl:text-base text-sroom-white line-clamp-1'>
+          <p className='text-xs font-medium whitespace-normal break-keep md:text-sm xl:text-base text-sroom-white line-clamp-1 md:line-clamp-none'>
             {`A. ${wrongQuiz.quiz_answer}`}
           </p>
-        </div>
+        </>
       ) : (
         <></>
       )}

diff --git a/src/components/dashboard/main/wrongQuizReview/WrongQuizReviewSlider.tsx b/src/components/dashboard/main/wrongQuizReview/WrongQuizReviewSlider.tsx
@@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperCore from 'swiper';
 import 'swiper/css';
-import 'swiper/css/mousewheel';
 import SwiperNavigationButton from '@/src/components/ui/button/SwiperNavigationButton';
 import WrongQuizReviewCard from './WrongQuizReviewCard';
 
@@ -40,8 +39,10 @@ export default function WrongQuizReviewSlider({ wrongQuizzes }: Props) {
       {wrongQuizzes.length > 0 && (
         <>
           <Swiper
-            className='!py-2 max-h-[2rem] sm:max-h-full'
+            className='!py-1 md:!py-2'
             slidesPerView={1}
+            preventClicks={false}
+            preventClicksPropagation={false}
             navigation={{
               prevEl: prevRef.current,
               nextEl: nextRef.current
@@ -54,20 +55,20 @@ export default function WrongQuizReviewSlider({ wrongQuizzes }: Props) {
             }}
           >
             {wrongQuizzes.map((wrongQuiz, idx) => (
-              <SwiperSlide key={idx} className='px-5 md:px-8 lg:px-10'>
+              <SwiperSlide key={idx} className='px-5 whitespace-normal md:px-8 lg:px-10'>
                 <WrongQuizReviewCard wrongQuiz={wrongQuiz} />
               </SwiperSlide>
             ))}
           </Swiper>
-          <div className='absolute left-0 z-20 flex items-center justify-between w-full -translate-y-1/2 md:px-2 top-1/2 md:h-12'>
+          <div className='absolute left-0 z-20 flex items-center justify-between w-full -translate-y-1/2 md:px-2 top-1/2'>
             <SwiperNavigationButton
-              className='text-sroom-white'
+              className='rounded-full text-sroom-white'
               onClick={() => swiper?.slidePrev()}
               disabled={isFirstSlide}
               navigation='prev'
             />
             <SwiperNavigationButton
-              className='text-sroom-white'
+              className='rounded-full text-sroom-white'
               onClick={() => swiper?.slideNext()}
               disabled={isLastSlide}
               navigation='next'