feat: 모의고사 풀어보기 탭 만들기

src/components/header/Header.tsx

@@ -1,6 +1,9 @@
 import HeaderBtn from "./HeaderBtn";
 import HeaderLogoutBtn from "./HeaderLogoutBtn";
 import HeaderMyPageBtn from "./HeaderMyPageBtn";
+import HeaderProblemBtn from "./HeaderProblemBtn";
+import HeaderMockTestBtn from "./HeaderMockTestBtn";
+import HeaderAnalyzeBtn from "./HeaderAnalyzeBtn";
 
 import Image from 'next/image'
 
@@ -12,8 +15,8 @@ const Header = () => {
     return (
         <header className="flex w-full px-40 min-h-28 justify-between items-center">
             <HeaderBtn href="/" className="text-thema-color font-[1000] text-4xl" >
-                <Image 
-                    src={"./headerHomeSVG/headerHome.svg"} 
+                <Image
+                    src={"./headerHomeSVG/headerHome.svg"}
                     alt="down"
                     width={30}
                     height={30}
@@ -27,6 +30,9 @@ const Header = () => {
                         <HeaderBtn href="/signup" className="headerBtn" >회원가입</HeaderBtn>
                     </>
                     : <>
+                        <HeaderProblemBtn accessToken={POL_ACCESS_TOKEN.value} />
+                        <HeaderMockTestBtn accessToken={POL_ACCESS_TOKEN.value} />
+                        <HeaderAnalyzeBtn accessToken={POL_ACCESS_TOKEN.value} />
                         <HeaderLogoutBtn accessToken={POL_ACCESS_TOKEN.value} />
                         <HeaderMyPageBtn accessToken={POL_ACCESS_TOKEN.value} />
                     </>}

src/components/header/HeaderAnalyzeBtn.tsx

@@ -0,0 +1,20 @@
+"use client"
+import Link from "next/link"
+import { logoutLocally } from "@/utils/logoutUtils/LogoutUtils"
+import React from "react"
+
+type logoutType = {
+    accessToken: string,
+}
+
+const HeaderAnalyzeBtn: React.FC<logoutType> = ({ accessToken }) => {
+
+    return (
+        <button type="button" className="headerBtn">
+            <Link href="/">내 풀이 분석</Link>
+        </button>
+
+    )
+}
+
+export default HeaderAnalyzeBtn

src/components/header/HeaderMockTestBtn.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import React from "react";
+
+import { useRouter } from "next/navigation";
+
+
+const HeaderMockTestBtn = ({accessToken}:{accessToken:string}) => {
+
+    const router = useRouter();
+    const goProblemSolve = () => {
+        const queryParams = new URLSearchParams();
+
+        ['isCompleted', 'stageGroupTypes', 'difficultyLevels'].forEach(key => {
+            const value = localStorage.getItem(key);
+            if (value) queryParams.set(key, value);
+        });
+
+        router.push(`/challengelist?${queryParams.toString()}`);
+    }
+    return (
+        <button onClick={goProblemSolve}
+            className="headerBtn">
+            모의고사<br />풀어보기
+        </button>
+    )
+}
+
+export default HeaderMockTestBtn

src/components/header/HeaderProblemBtn.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import React from "react";
+
+import { useRouter } from "next/navigation";
+
+const HeaderProblemBtn = ({accessToken}:{accessToken:string}) => {
+
+    const router = useRouter();
+    const goProblemSolve = () => {
+        const queryParams = new URLSearchParams();
+
+        ['isCompleted', 'stageGroupTypes', 'difficultyLevels'].forEach(key => {
+            const value = localStorage.getItem(key);
+            if (value) queryParams.set(key, value);
+        });
+
+        router.push(`/challengelist${queryParams.toString() ? `?${queryParams}` : ''}`);
+    }
+    return (
+        <button onClick={goProblemSolve}
+            className="headerBtn">
+            문제 풀어보기
+        </button>
+    )
+}
+
+export default HeaderProblemBtn

src/components/mypageinfo/Heatmap.jsx

@@ -132,6 +132,7 @@ const HeatmapForm = () => {
                 </div>
                 {isOpen &&
                     (
+
                         <div className='pl-6'>
                             <div id="dropdown" className="position: absolute z-10 border-2 bg-white divide-y divide-gray-900 rounded-lg shadow w-40 dark:bg-gray-700">
                                 <ul className="py-2 text-sm text-gray-700 dark:text-gray-500"> {/* 텍스트 요소 */}

src/components/problemStage/ProblemStageForm.tsx

@@ -1,43 +1,44 @@
 "use client"
 
-import React,{useState} from "react";
+import React, { useState } from "react";
 
-import { useSearchParams,useRouter,usePathname } from 'next/navigation'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
 
 import Image from "next/image";
 
 const ProblemStageForm = () => {
-    const [inputValue,setInputValue] = useState<string>("")
+    const [inputValue, setInputValue] = useState<string>("")
     const searchParams = useSearchParams();
     const router = useRouter();
     const pathname = usePathname();
     const params = new URLSearchParams(searchParams);
-  
-    const SubmitInput = (ele:React.FormEvent<HTMLFormElement>) => {
+
+    const SubmitInput = (ele: React.FormEvent<HTMLFormElement>) => {
         ele.preventDefault()
-        if(inputValue)
-            params.set("searchText",inputValue)
+        if (inputValue)
+            params.set("searchText", inputValue)
         else params.delete("searchText")
-        router.push(pathname+"?"+params.toString());
+        router.push(pathname + "?" + params.toString());
     };
 
 
     return (
-        <form onSubmit={(e)=>{SubmitInput(e)}} className="bg-gray-0 flex items-center justify-center p-3 my-2 w-8/12 h-12 border-solid border rounded-md border-gray-600">
+        <form onSubmit={(e) => { SubmitInput(e) }} className="bg-gray-0 flex items-center justify-center p-3 my-2 w-8/12 h-12 border-solid border rounded-md border-gray-600">
             <button type="submit">
-                <Image 
-                    src={`./problemStage/problemStageInput.svg`} 
+                <Image
+                    src={`./problemStage/problemStageInput.svg`}
                     alt="problemFind"
                     width={20}
                     height={20}
                     style={{ width: '20px', height: '20px' }}
                 />
             </button>
-            <input 
+            <input
                 placeholder="문제 제목 또는 설명으로 찾아볼 수 있어요"
                 className="ml-3 w-full h-full outline-none text-gray-900 placeholder-gray-500"
                 value={inputValue}
-                onChange={(e)=>setInputValue(e.target.value)}
+                onChange={(e) => setInputValue(e.target.value)}
+
             />
         </form>
     )

src/components/problemStage/problemStageContainer/ProblemStageContainer.tsx

@@ -50,7 +50,7 @@ const ProblemStageContainer: React.FC<ProblemStageContainerType> = ({accessToken
     return (
         <>
             <span className="w-8/12 text-gray-700">총 <span
-                    className="text-blue-500 font-bold">{(pageParameters as {
+                className="text-blue-500 font-bold">{(pageParameters as {
                     totalElement: number
                 }).totalElement}개의 스테이지</span>를 풀어볼 수 있어요</span>
             <ul className="w-8/12 flex flex-col bg-gray-0 justify-between h-problemStage-height px-2 border-solid border rounded-md border-SelectBorder-color my-4 mb-36">
@@ -63,6 +63,7 @@ const ProblemStageContainer: React.FC<ProblemStageContainerType> = ({accessToken
                         <span className="flex-1 font-medium text-center px-1">난이도</span>
                         <span className="flex-1 font-medium text-center pr-1">문항수</span>
                     </div>
+
                     {stages?.map(ele => (
                         <ProblemStagesLi
                             key={ele.id}

src/components/problemStage/problemStageSelect/ProblemStageSelectLi.tsx

@@ -1,47 +1,47 @@
 "use client"
 
 import React from "react";
-import { useSearchParams,useRouter,usePathname } from 'next/navigation'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
 
 import type { problemStageSelectType } from "@/types/problemStage";
 
 
 interface ProblemStageSelectLiType {
-    value:string,
-    selectName:problemStageSelectType,
-    itemName:string
+    value: string,
+    selectName: problemStageSelectType,
+    itemName: string
 }
 
-const ProblemStageSelectLi:React.FC<ProblemStageSelectLiType> = ({selectName,value,itemName}) => {
+const ProblemStageSelectLi: React.FC<ProblemStageSelectLiType> = ({ selectName, value, itemName }) => {
     const searchParams = useSearchParams()
     const router = useRouter();
     const pathname = usePathname();
     const params = new URLSearchParams(searchParams.toString());
     const existingItems = params.get(selectName) ? params.get(selectName)!.split(',') : [];
-    
+
     const ChangeChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (event.target.checked) {
-            if (!existingItems.includes(itemName)){
+            if (!existingItems.includes(itemName)) {
                 existingItems.push(itemName);
-                localStorage.setItem(selectName,existingItems.join(","));
+                localStorage.setItem(selectName, existingItems.join(","));
             }
         } else {
             const itemIndex = existingItems.indexOf(itemName);
             existingItems.splice(itemIndex, 1);
             const localStorageItem = localStorage.getItem(selectName)?.split(",");
-            localStorage.setItem(selectName,localStorageItem?.filter(ele=>ele!==itemName).join(",")||"")
+            localStorage.setItem(selectName, localStorageItem?.filter(ele => ele !== itemName).join(",") || "")
         }
         if (existingItems.length > 0) {
             params.set(selectName, existingItems.join(','));
         } else {
             params.delete(selectName);
         }
-        router.push(pathname+"?"+params.toString());
+        router.push(pathname + "?" + params.toString());
     };
-    
+
     return (
         <li className="flex space-x-2 px-1 py-0.5">
-            <input name={value} type="checkbox" onChange={ChangeChecked} checked={existingItems.includes(itemName)}/>
+            <input name={value} type="checkbox" onChange={ChangeChecked} checked={existingItems.includes(itemName)} />
             <label htmlFor={value}>{value}</label>
         </li>
     )

src/hooks/useGetXtermUrl.tsx

@@ -1,4 +1,5 @@
-import React,{useState,useEffect} from "react";
+import React, { useState, useEffect } from "react";
+
 
 import { useSearchParams } from "next/navigation";