Merge pull request #68 from KT-vicddory/week6

Week6

.eslintrc.json

@@ -23,7 +23,12 @@
     "@typescript-eslint/no-explicit-any": "warn",
     "react/react-in-jsx-scope": "off",
     "no-console": "warn",
-    "prettier/prettier": "warn"
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
   },
   "settings": {
     "react": {

package.json

@@ -18,7 +18,6 @@
     "react": "^18",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
-    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
     "zustand": "^4.5.4"
   },

src/app/(main)/@modal/(.)testModal/page.tsx

@@ -1,52 +1,78 @@
+'use client';
+
 import Button from '@/components/test/Button';
-import ModalWrapper from '@/components/test/ModalWrapper';
+import ModalTestWrapper from '@/components/test/ModalTestWrapper';
 import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 
 export default function Modal() {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  useEffect(() => {
+    if (!isModalOpen) {
+      router.push('/');
+    }
+  }, [isModalOpen, router]);
+
   return (
     <>
-      <ModalWrapper>
-        <div className="flex justify-center flex-col items-center h-dvh max-w-md m-auto">
-        <div className="w-[448px] h-4/6 bg-[#F8A6A7] flex flex-col justify-center items-center text-center">
-          <div className="w-2/5 rounded-md bg-[#ED2024] text-white flex justify-center items-center text-base py-1 mb-6 mt-12">
-            야구 입문자를 위한
-          </div>
-          <Image
-            src="/svgs/watermark.svg"
-            alt="watermark"
-            width={200}
-            height={62}
-            className="w-40 md:w-[200px]"
-          />
-          <div className="w-60 h-14 text-5xl font-bold mb-3 mt-3 text-[#333333]">
-            궁합테스트
-          </div>
-          <div className="w-60 text-sm font-bold text-[#444444] my-4">
-            나와 어울리는 KT Wiz 선수 알아보기!
-          </div>
-          <Image
-            src="/svgs/emblem.svg"
-            alt="emblem"
-            width={200}
-            height={180}
-            className="w-40 md:w-[200px] mb-4"
-          />
-          <Button width={80} text="2xl" href="/test/questions/1">
-            테스트 START
-          </Button>
-        </div>
-        <div className="w-full h-2/6 bg-[#FFFFFF] flex flex-col justify-center items-center text-center">
-          <div className="w-74 h-[95px] text-sm mt-1 text-[#333333]">
-            kt wiz는 2013년, 제 10구단에 대한 국민들의 강한 열망,
-            <br /> 경기도 및 수원시 그리고 KT그룹의 뜨거운 유치 열정으로
-            <br /> 비상한 솜씨와 비범한 재능을 가진 마법사,
-            <br />
-            wiz라는 이름으로 신비롭고 강력한 힘으로 상상의 야구를
-            <br /> 실현하겠다는 의지를 가지고 새롭게 출범하였습니다.
+      {pathname === '/testModal' ? (
+        <ModalTestWrapper>
+          <div className="flex justify-center flex-col items-center h-dvh max-w-md m-auto relative">
+            <div className="w-[448px] h-4/6 bg-[#F8A6A7] flex flex-col justify-center items-center text-center">
+              <button
+                onClick={closeModal}
+                className="absolute text-2xl right-2 top-0 text-slate-400 hover:text-black"
+              >
+                x
+              </button>
+              <div className="w-2/5 rounded-md bg-[#ED2024] text-white flex justify-center items-center text-base py-1 mb-6 mt-12">
+                야구 입문자를 위한
+              </div>
+              <Image
+                src="/svgs/watermark.svg"
+                alt="watermark"
+                width={200}
+                height={62}
+                className="w-40 md:w-[200px]"
+              />
+              <div className="w-60 h-14 text-5xl font-bold mb-3 mt-3 text-[#333333]">
+                궁합테스트
+              </div>
+              <div className="w-60 text-sm font-bold text-[#444444] my-4">
+                나와 어울리는 KT Wiz 선수 알아보기!
+              </div>
+              <Image
+                src="/svgs/emblem.svg"
+                alt="emblem"
+                width={200}
+                height={180}
+                className="w-40 md:w-[200px] mb-4"
+              />
+              <Button width={80} text="2xl" href="/questionsModal">
+                테스트 START
+              </Button>
+            </div>
+            <div className="w-full h-2/6 bg-[#FFFFFF] flex flex-col justify-center items-center text-center">
+              <div className="w-74 h-[95px] text-sm mt-1 text-[#333333]">
+                kt wiz는 2013년, 제 10구단에 대한 국민들의 강한 열망,
+                <br /> 경기도 및 수원시 그리고 KT그룹의 뜨거운 유치 열정으로
+                <br /> 비상한 솜씨와 비범한 재능을 가진 마법사,
+                <br />
+                wiz라는 이름으로 신비롭고 강력한 힘으로 상상의 야구를
+                <br /> 실현하겠다는 의지를 가지고 새롭게 출범하였습니다.
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </ModalWrapper>
+        </ModalTestWrapper>
+      ) : null}
     </>
   );
 }

src/app/(main)/@modal/default.tsx

@@ -2,7 +2,6 @@
 
 import Button from '@/components/test/Button';
 import Image from 'next/image';
-import { IoIosClose } from 'react-icons/io';
 import { usePathname } from 'next/navigation';
 import ModalWrapper from '@/components/test/ModalWrapper';
 
@@ -14,7 +13,9 @@ export default function Default() {
       {pathname === '/' ? (
         <ModalWrapper>
           <div className="w-[500px] h-[500px] rounded-md fixed top-1/2 left-1/2 p-5 bg-white shadow -translate-x-1/2 -translate-y-1/2">
-            <IoIosClose className="absolute text-3xl right-2 top-2 text-slate-400 hover:text-black" />
+            <button className="absolute text-2xl right-2 top-0 text-slate-400 hover:text-black">
+              x
+            </button>
             <div onClick={(e) => e.stopPropagation()}>
               <div className="flex justify-center flex-col items-center gap-2 mt-4">
                 <h1 className="text-2xl font-bold">