feat: 문제 페이지 분기 해결

src/components/header/Header.tsx

@@ -2,14 +2,24 @@ import HeaderBtn from "./HeaderBtn";
 import HeaderLogoutBtn from "./HeaderLogoutBtn";
 import HeaderMyPageBtn from "./HeaderMyPageBtn";
 
+import Image from 'next/image'
+
 import { cookies } from 'next/headers'
 
 const Header = () => {
     const cookiesStore = cookies();
     const POL_ACCESS_TOKEN = cookiesStore.get("POL_ACCESS_TOKEN")
     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" >Phantom of  Linux</HeaderBtn>
+            <HeaderBtn href="/" className="text-thema-color font-[1000] text-4xl" >
+                <Image 
+                    src={"./headerHomeSVG/headerHome.svg"} 
+                    alt="down"
+                    width={30}
+                    height={30}
+                    style={{ width: 'auto', height: 'auto' }}
+                />
+            </HeaderBtn>
             <nav className="flex">
                 {POL_ACCESS_TOKEN === undefined ?
                     <>

src/components/header/HeaderBtn.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 
 interface HeaderBtnType {
     href:string,
-    children:string,
+    children:string|React.ReactNode,
     className:string,
 }
 

src/components/loading/Loading.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+
+const Loading = () => {
+    return(
+        <div className="w-screen h-96 flex justify-center items-center" role='status' aria-label='loading'>
+               <div className="grid gap-3">
+                <div className="flex items-center justify-center">
+                  <svg className="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="76" height="75" viewBox="0 0 76 75" fill="none">
+                    <g id="Group 1000003700">
+                      <circle id="Ellipse 715" cx="38.0004" cy="37.1953" r="28" stroke="#E5E7EB" stroke-width="8" />
+                      <path id="Ellipse 716" d="M49.8079 62.5848C53.142 61.0342 56.138 58.842 58.6248 56.1335C61.1117 53.425 63.0407 50.2532 64.3018 46.7992C65.5629 43.3452 66.1313 39.6767 65.9745 36.003C65.8178 32.3293 64.939 28.7225 63.3884 25.3884C61.8378 22.0544 59.6456 19.0584 56.9371 16.5715C54.2286 14.0847 51.0568 12.1556 47.6028 10.8946C44.1488 9.63351 40.4802 9.06511 36.8066 9.22183C33.1329 9.37855 29.5261 10.2573 26.192 11.808" stroke="url(#paint0_linear_13416_7443)" stroke-width="8" stroke-linecap="round" />
+                    </g>
+                    <defs>
+                      <linearGradient id="paint0_linear_13416_7443" x1="0.803595" y1="23.6159" x2="24.4195" y2="74.3928" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#4F46E5" />
+                        <stop offset="1" stop-color="#8B5CF6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span className="text-black text-sm font-normal leading-snug">Loading...</span>
+              </div>
+      </div>
+    )
+}
+
+export default Loading

src/components/problemStage/ProblemStage.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import ProblemStageSelectContainer from "./problemStageSelect/ProblemStageSelectContainer"
 import ProblemStageContainer from "./problemStageContainer/ProblemStageContainer"
+import ProblemStageForm from "./ProblemStageForm";
 import { cookies } from "next/headers";
 
 const ProblemStage = () => {
@@ -10,6 +11,7 @@ const ProblemStage = () => {
     const POL_REFRESH_TOKEN = cookiesStore.get("POL_REFRESH_TOKEN")?.value
     return (
         <main className="w-full flex flex-col items-center justify-center">
+            <ProblemStageForm/>
             <ProblemStageSelectContainer/>
             <ProblemStageContainer 
                 accessToken={POL_ACCESS_TOKEN}

src/components/problemStage/ProblemStageForm.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import React,{useState} from "react";
+
+import { useSearchParams,useRouter,usePathname } from 'next/navigation'
+
+import Image from "next/image";
+
+const ProblemStageForm = () => {
+    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>) => {
+        ele.preventDefault()
+        if(inputValue)
+            params.set("searchText",inputValue)
+        else params.delete("searchText")
+        router.push(pathname+"?"+params.toString());
+    };
+
+
+    return (
+        <form onSubmit={(e)=>{SubmitInput(e)}} className="flex items-center justify-center p-3 my-2 w-8/12 h-12 border-solid border rounded-md border-SelectBorder-color">
+            <button type="submit">
+                <Image 
+                    src={`./problemStage/problemStageInput.svg`} 
+                    alt="problemFind"
+                    width={20}
+                    height={20}
+                    style={{ width: '20px', height: '20px' }}
+                />
+            </button>
+            <input 
+                placeholder="문제 제목으로 찾아볼 수 있어요" 
+                className="ml-3 w-full h-full outline-none"
+                value={inputValue}
+                onChange={(e)=>setInputValue(e.target.value)}
+            />
+        </form>
+    )
+}
+
+
+export default ProblemStageForm

src/components/problemStage/ProblemStageModal.tsx

@@ -46,9 +46,4 @@ const ProblemStageModal:React.FC<ProblemStageModalType> = ({modalState,stageId,t
     )
 }
 
-export default ProblemStageModal
-
-/*
-            router.push(`/problem?stageId=${stageId}`)
-
-*/
+export default ProblemStageModal

src/components/problemStage/problemStageContainer/ProblemStageContainer.tsx

@@ -14,6 +14,7 @@ interface ProblemStageContainerType {
 
 interface Stage {
     id: string;
+    stageCode:string,
     title: string;
     description: string;
     difficultyLevelType: string;
@@ -46,6 +47,7 @@ const ProblemStageContainer:React.FC<ProblemStageContainerType> = ({accessToken,
             <div>
                 <div className="w-full h-10 px-10 flex justify-evenly items-center border-b-problemStageLi-borderWidth border-problemStageLi-color">
                     <span className="w-problemStage-isCompleted font-bold">해결</span>
+                    <span className="w-problemStage-title font-bold">문제 번호</span>
                     <span className="w-problemStage-title font-bold">제목</span>
                     <span className="w-problemStage-info font-bold">설명</span>
                     <span className="w-problemStage-width font-bold">난이도</span>
@@ -54,6 +56,7 @@ const ProblemStageContainer:React.FC<ProblemStageContainerType> = ({accessToken,
                 {stages?.map(ele=>(
                     <ProblemStagesLi 
                         key={ele.id}
+                        stageCode={ele.stageCode}
                         stageId={ele.id}
                         solved={ele?.completedStatus}
                         title={ele.title} 

src/components/problemStage/problemStageContainer/ProblemStagesLi.tsx

@@ -4,27 +4,25 @@ import React,{useState} from "react";
 
 import ProblemStageModal from "../ProblemStageModal"
 
-import { useRouter } from "next/navigation";
 import Image from 'next/image'
 
 interface ProblemStagesLiType {
     title:string,
+    stageCode:string,
     info:string,
     level:string,
     questionCount:number
     solved:string
     stageId:string
 }
 
-const ProblemStagesLi:React.FC<ProblemStagesLiType> = ({title,info,level,questionCount,solved,stageId}) => {
-    const router = useRouter();
-    const [mouseUp, setMouseUp] = useState<boolean>(false)
+const ProblemStagesLi:React.FC<ProblemStagesLiType> = ({title,stageCode,info,level,questionCount,solved,stageId}) => {
     const [modalState,setModalState] = useState<boolean>(false)
     return (
         <>
         <li onClick={()=>{
             setModalState(true)
-        }} onMouseEnter={(e)=>{setMouseUp(true)}} onMouseLeave={(e)=>{setMouseUp(false)}} className={`${mouseUp?"bg-slate-100":"bg-white"} list-none w-full px-10 h-14 flex items-center justify-evenly border-b-problemStageLi-borderWidth border-problemStageLi-color cursor-pointer`}>
+        }} className=" hover:bg-slate-100 list-none w-full px-10 h-14 flex items-center justify-evenly border-b-problemStageLi-borderWidth border-problemStageLi-color cursor-pointer">
             <span className="w-problemStage-isCompleted"> 
             {solved!=="NOT_COMPLETED"?
             <Image 
@@ -35,6 +33,7 @@ const ProblemStagesLi:React.FC<ProblemStagesLiType> = ({title,info,level,questio
                 style={{ width: '20px', height: '20px' }}
             />:""}
             </span>
+            <span className="w-problemStage-title">{stageCode}</span>
             <span className="w-problemStage-title font-bold">{title}</span>
             <span className="w-problemStage-info">{info}</span>
             <span className="w-problemStage-width">{level}</span>

src/components/xterm/Xterm.tsx

@@ -6,16 +6,17 @@ import { AttachAddon } from 'xterm-addon-attach';
 
 import 'xterm/css/xterm.css';
 
+
 interface XtermType{
-  url:string,
-  query:string
+  url:string|undefined,
+  query:string|undefined
 }
 
 const Xterm: React.FC<XtermType> = ({url,query}) => {
   const terminalRef = useRef<Terminal | null>(null);
   const xtermContainerRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
-    if (!terminalRef.current && xtermContainerRef.current && url && query) {
+    if (!terminalRef.current && xtermContainerRef.current && url&&query) {
       const newTerminal = new Terminal();
       const websocket = new WebSocket(url);
       websocket.onopen = () => {

src/components/xterm/XtermBox.tsx

@@ -1,24 +1,53 @@
 "use client"
 
-import React from "react";
+import React,{Suspense,useState} from "react";
 
 import useGetXtermUrl from "@/hooks/useGetXtermUrl";
 
-import Xterm from "./Xterm";
+import type { Resource } from "@/lib/wrappingPromise";
+
+import XtermModal from "./XtermModal";
+import XtermUrlProvider from "./XtermUrlProvider";
+import Loding from "@/components/loading/Loading";
+
+interface CheckProblem {
+    uid: string;
+    stageId: number;
+    stageCode: string;
+    exists: boolean;
+}
 
 interface XtermBoxType {
     accessToken:string|undefined,
     refreshToken:string|undefined
+    problemSolvedCheck:Resource<CheckProblem> | undefined
 }
 
-const XtermBox:React.FC<XtermBoxType> = ({accessToken,refreshToken}) => {
-    const {url,query} = useGetXtermUrl(accessToken,refreshToken);
+const XtermBox:React.FC<XtermBoxType> = ({accessToken,refreshToken,problemSolvedCheck}) => {
+    const [ModalCheck,setModalCheck] = useState<boolean>(true);
+    const [XtermUrlCheck,setXtermUrlCheck] = useState<boolean>(true);//true-get false-post
+    const xtemrConnectUrl = useGetXtermUrl(accessToken,refreshToken,problemSolvedCheck?.read().exists,ModalCheck,XtermUrlCheck)
     return (
-        <div>
-           <Xterm url={url} query={query}/>
-        </div>
+        <Suspense fallback={<Loding/>}>
+            {problemSolvedCheck?.read().exists&&ModalCheck?
+                <>
+                    <div className="w-screen h-96"></div>
+                    <XtermModal setXtermUrlCheck={setXtermUrlCheck} setModalState={setModalCheck}/>
+                </>
+                :
+                <XtermUrlProvider xtemrConnectUrl={xtemrConnectUrl}/>
+            }
+        </Suspense>
     )
 }
 
 
-export default XtermBox
+export default XtermBox
+
+
+/*
+Xterm에 먼저 주면 안된다.. 
+problemSolvedCheck가 
+false면 get으로 주기
+ture면 modal을 이용해서 주기
+*/

src/components/xterm/XtermCheckProvider.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import React,{Suspense} from "react";
+
+import useCheckProblemSolved from "@/hooks/useCheckProblemSolved";
+
+import XtermBox from "./XtermBox";
+import Loding from "@/components/loading/Loading";
+
+interface XtermCheckProviderType {
+    accessToken:string|undefined,
+    refreshToken:string|undefined
+}
+
+const XtermCheckProvider:React.FC<XtermCheckProviderType> = ({accessToken,refreshToken}) => {
+    const problemSolvedCheck = useCheckProblemSolved(accessToken, refreshToken) 
+    return (
+        <Suspense fallback={<Loding/>}>
+            <XtermBox problemSolvedCheck={problemSolvedCheck} accessToken={accessToken} refreshToken={refreshToken}/>
+        </Suspense>
+    )
+}
+
+
+export default XtermCheckProvider

src/components/xterm/XtermContainer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import XtermQuestion from "./XtermQuestion";
-import XtermBox from "./XtermBox";
+import XtermCheckProvider from "./XtermCheckProvider";
 
 import { cookies } from "next/headers";
 
@@ -12,7 +12,7 @@ const XtermContainer = () => {
     return (
         <main>
             <XtermQuestion/>
-            <XtermBox 
+            <XtermCheckProvider 
                 accessToken={POL_ACCESS_TOKEN}
                 refreshToken={POL_REFRESH_TOKEN}
             />               

src/components/xterm/XtermModal.tsx

@@ -0,0 +1,33 @@
+import React, { SetStateAction } from "react";
+
+
+interface XternModalType {
+    setModalState:React.Dispatch<SetStateAction<boolean>>
+    setXtermUrlCheck:React.Dispatch<SetStateAction<boolean>>
+}
+
+
+const XtermModal:React.FC<XternModalType> = ({setModalState,setXtermUrlCheck}) => {
+    return (
+        <div className="flex items-center justify-center fixed z-50 w-full h-full p-4 bg-OpaqueBackground-color md:inset-0">
+            <div className="absolute max-w-md max-h-full bg-white rounded-lg shadow">
+                    <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+                        <h3 className="text-xl font-medium text-gray-900 dark:text-white">
+                            문제를 푼 흔적이 있습니다!
+                        </h3>
+                    </div>
+                <div className="p-4 md:p-5 space-y-4">
+                    <p className="text-center leading-relaxed text-gray-500 dark:text-gray-400">
+                        문제를 이어서 풀 경우 <br/> 터미널을 불러와 일정 시간 소요됩니다!
+                    </p>
+                </div>
+                <div className="flex items-center justify-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+                    <button onClick={(e)=>{setModalState(false)}}  className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">새로 문제 풀기</button>
+                    <button onClick={(e)=>{setXtermUrlCheck(false); setModalState(false)}} className="text-white ms-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">이어서 문제 풀기</button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default XtermModal