Merge pull request #125 from DDD-Community/fix/124

[Fix/124] 4-1차 QA

src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx

@@ -56,7 +56,7 @@ const CreatePolaroid = ({
   }, [fontSelectRef, showFontSelect])
 
   return (
-    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
+    <div className="relative flex h-dvh w-full max-w-md touch-none flex-col items-center justify-between bg-gray-900/50">
       <ArrowBack />
       <div className="w-full overflow-y-scroll overscroll-none pb-[114px] pt-16 scrollbar-hide">
         <div className="mx-auto w-[272px]">

src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx

@@ -5,6 +5,7 @@ import { THEMAS } from '@/lib'
 import { useEffect, useState } from 'react'
 import Button from '@/components/Button'
 import ArrowBackIcon from 'public/icons/arrow_back_ios.svg'
+import CheckIcon from 'public/icons/check.svg'
 
 interface ThemaSelectItemProps {
   themaType: ThemaKeyType
@@ -20,10 +21,14 @@ const ThemaSelectItem = ({
   return (
     <div
       className={twMerge(
-        'flex items-center justify-center rounded-lg border-2 bg-gray-700 px-7 py-[22px]',
+        'relative flex items-center justify-center rounded-lg border-2 bg-gray-700 px-7 py-[22px]',
         isCurrentThema ? 'border-gray-100' : 'border-gray-700',
       )}
     >
+      {isCurrentThema && (
+        <CheckIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[calc(50%+10px)] scale-[3] text-gray-0" />
+      )}
+
       <Image
         src={`/images/polaroidThemas/${themaType}.png`}
         alt="polabo"
@@ -58,7 +63,7 @@ const ThemaSelect = ({
   }
 
   return (
-    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
+    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between bg-gray-900/50">
       <div className="absolute left-5 top-10">
         <ArrowBackIcon
           className="h-6 w-6 text-gray-0"

src/app/board/[boardId]/_components/modals/FinalModal.tsx

@@ -11,10 +11,10 @@ const FinalModal = ({ isOpen, onClose, onConfirm }: ModalProps) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <Modal.CenterModal icon={<SurprisedIcon />}>
-        <Modal.Title>
-          {'업로드 후에는\n 수정 및 삭제가 불가합니다.'}
-        </Modal.Title>
-        <Modal.Content>폴라로이드를 업로드 할까요?</Modal.Content>
+        <Modal.Title>폴라로이드를 업로드 할까요?</Modal.Title>
+        <Modal.Content>
+          {'업로드 후에는 수정 및 삭제가 \n 불가합니다.'}
+        </Modal.Content>
 
         <Modal.BottomConfirmCancel
           cancelText="아니요"

src/components/Polaroid/PolaroidDetail/index.tsx

@@ -5,6 +5,8 @@ import CloseIcon from 'public/icons/close.svg'
 import { useEffect, useRef, useState } from 'react'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
+import RightBtn from 'public/icons/carousel-arrow-right.svg'
+import LeftBtn from 'public/icons/carousel-arrow-left.svg'
 import PolaroidDeleteBtn from './PolaroidDeleteBtn'
 import PolaroidItem from './PolaroidItem'
 
@@ -46,6 +48,17 @@ const PolaroidDetailModal = ({
     deletePolaroid(polaroids[currentSlide - 1].id, boardId)
   }
 
+  const onRightClick = () => {
+    if (carouselRef.current) {
+      carouselRef.current.goToSlide(currentSlide + 1)
+    }
+  }
+  const onLeftClick = () => {
+    if (carouselRef.current) {
+      carouselRef.current.goToSlide(currentSlide - 1)
+    }
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} closeOnOutsideClick={false}>
       <div className="relative mx-auto flex h-dvh max-w-md flex-1 touch-pan-x flex-col justify-center overflow-x-hidden py-10">
@@ -54,7 +67,7 @@ const PolaroidDetailModal = ({
           onClick={onClose}
         />
 
-        <div className="overflow-x-hidden">
+        <div className="relative touch-pan-x overflow-x-hidden">
           <Carousel
             ref={carouselRef}
             swipeable
@@ -84,6 +97,19 @@ const PolaroidDetailModal = ({
               {` / ${polaroids.length}`}
             </span>
           </div>
+
+          {currentSlide > 1 && (
+            <LeftBtn
+              className="absolute left-2 top-1/2 hidden -translate-y-1/2 transform cursor-pointer md:block"
+              onClick={onLeftClick}
+            />
+          )}
+          {currentSlide < polaroids.length && (
+            <RightBtn
+              className="absolute right-2 top-1/2 hidden -translate-y-1/2 transform cursor-pointer md:block"
+              onClick={onRightClick}
+            />
+          )}
         </div>
 
         {isBoardOwner && (