마이페이지 완성했습니다

src/app/mypage/page.tsx

@@ -15,12 +15,15 @@ const mypage = () => {
         <div className="page-container">
             <div className="content-wrap">
                 <div className="pl-36 pt-16">
-                    <nav className="px-0 h-1/2 flex z-10">
+                    <div className="h-1/2 flex z-2">
                         <MyPageSidebarForm />
-                        <div className="border-2 border-gray w-2/3 items-center p-3 bg-color-white rounded-lg">
-                            <MyPageInfoForm accessToken={POL_ACCESS_TOKEN} refreshToken={POL_REFRESH_TOKEN} />
+                        <div className="flex justify-end pl-20 pb-24">
+                            <div className="border-2 border-gray w-full items-center p-5 bg-color-white rounded-lg">
+                                <MyPageInfoForm accessToken={POL_ACCESS_TOKEN} refreshToken={POL_REFRESH_TOKEN} />
+                            </div>
+
                         </div>
-                    </nav>
+                    </div>
                 </div>
             </div>
         </div>

src/components/header/HeaderMyPageBtn.tsx

@@ -33,7 +33,7 @@ const HeaderMyPageBtn: React.FC<mypageType> = ({ accessToken }) => {
                 GetMyPageProblemStateInProgress(e, accessToken, setInProgressCode),
                 GetMyPageProblemHeatmap(e, accessToken, setHeatmapInfoArray)
         }}>
-            <Link href="/mypage"><CgProfile className="text-5xl text-thema-color ml-10" /></Link>
+            <Link href="/mypage"><CgProfile className="text-5xl text-blue-500 ml-10" /></Link>
         </button>
 
     )

src/components/mypageinfo/MyPageUserSetting.tsx

@@ -36,15 +36,14 @@ const MyPageUserSettingForm: React.FC<MyPageInfoType> = ({ accessToken, refreshT
                                 비밀번호 변경 후 변경된 비밀번호로 다시 로그인하셔야 사용이 가능합니다
                             </div>
                             <div className="inline-block pt-6 pr-5">
-                                <button type="button" className="w-36 h-8 bg-thema-color text-white rounded">
+                                <button type="button" className="w-36 h-8 bg-blue-500 text-white rounded">
                                     <Link href="/changepassword">비밀번호 변경</Link>
                                 </button>
                             </div>
                         </div>
                     </div>
                     <br />
                     <br />
-                    <br />
                     <div className="px-5 font-bold">
                         삭제하기
                     </div>
@@ -57,7 +56,7 @@ const MyPageUserSettingForm: React.FC<MyPageInfoType> = ({ accessToken, refreshT
                                 삭제 시 개인정보 및 개인 식별 정보가 삭제 되며 통계정보는 유지 됩니다.
                             </div>
                             <div className="pt-6 pr-5">
-                                <button type="button" className="w-36 h-8 bg-thema-color text-white rounded"
+                                <button type="button" className="w-36 h-8 bg-danger-600 text-white rounded"
                                     onClick={() => { toggleModal() }}>
                                     계정 삭제
                                 </button>
@@ -68,9 +67,9 @@ const MyPageUserSettingForm: React.FC<MyPageInfoType> = ({ accessToken, refreshT
             </div>
             {
                 modal &&
-                (<div className="fixed flex justify-center items-center w-full max-h-screen z-0 top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-30" onClick={(e) => {e.preventDefault(); toggleModal()}}>
+                (<div className="fixed flex justify-center items-center w-full max-h-screen z-0 top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-50" onClick={(e) => { e.preventDefault(); toggleModal() }}>
                     <div className="">
-                        <div id="alert-additional-content-2" className="w-full p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-danger-100 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
+                        <div id="alert-additional-content-2" className="w-full p-4 mb-4 text-danger-600 border border-2 border-danger-800 rounded-lg bg-danger-200 dark:bg-gray-800 dark:text-danger-400 dark:border-danger-800" role="alert">
                             <div className="flex items-center">
                                 <svg className="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
@@ -84,16 +83,16 @@ const MyPageUserSettingForm: React.FC<MyPageInfoType> = ({ accessToken, refreshT
                                 그래도 삭제 하시겠습니까?
                             </div>
                             <div className="flex justify-between">
-                                <button type="button" className="text-white bg-red-800 hover:bg-red-900 focus:ring-4 focus:outline-none 
+                                <button type="button" className="text-white bg-danger-600 hover:bg-danger-800 focus:ring-4 focus:outline-none 
                                 focus:ring-red-300 font-medium rounded-lg text-sm px-6 py-3 me-2 text-center 
                                 inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
                                     onClick={(e) => { DeletePlayer(e, userId, accessToken) }}
                                 >
                                     <Link href="/">계정 삭제</Link>
                                 </button>
-                                <button type="button" className="float-right text-red-800 bg-transparent border border-red-800 
-                                hover:bg-red-900 hover:text-white focus:ring-4 focus:outline-none 
-                                focus:ring-red-300 font-medium rounded-lg text-sm px-6 py-3 
+                                <button type="button" className="float-right text-white bg-danger-600 border border-red-800 
+                                hover:bg-danger-800 hover:text-white focus:ring-4 focus:outline-none 
+                                focus:ring-danger-300 font-medium rounded-lg text-sm px-6 py-3 
                                 text-center dark:hover:bg-red-600 dark:border-red-600 dark:text-red-500 
                                 dark:hover:text-white dark:focus:ring-red-800"
                                     onClick={() => toggleModal()}>

src/hooks/useGetXtermUrl.tsx

@@ -1,4 +1,11 @@
 import React,{useState,useEffect} from "react";
+<<<<<<< HEAD
+<<<<<<< HEAD
+
+=======
+>>>>>>> d5b907939b025104df84e8fa8a75886851253267
+=======
+>>>>>>> 219a885f9a4d2af241d5fe1cec44ddddd8f267dd
 
 import { useSearchParams } from "next/navigation";
 

src/utils/myPageProblemStateUtils/MyPageProblemStateUtils.ts

@@ -45,12 +45,11 @@ export const GetMyPageProblemStateInProgress = async (e: React.MouseEvent<HTMLEl
                 Authorization: `Bearer ${accessToken}`,
             }
         }).then(response => response.json())
-            // .then((response: { stageCodeDTOS: { stageCode: string; accessUrl: string; }[] }) => {
-            //     const stageCodeDTOS = response.stageCodeDTOS;
-            //     const stageCodes = stageCodeDTOS.map((stage: { stageCode: string; accessUrl: string; }) => stage.stageCode);
-            //     setInProgressCode(stageCodes);
-            // })
-            .then(response => console.log("진행중인 문제 = ", response))
+            .then((response: { stageCodeDTOS: { stageCode: string; accessUrl: string; }[] }) => {
+                const stageCodeDTOS = response.stageCodeDTOS;
+                const stageCodes = stageCodeDTOS.map((stage: { stageCode: string; accessUrl: string; }) => stage.stageCode);
+                setInProgressCode(stageCodes);
+            })
     }
     catch (error) {
         console.error('무슨에러일까요?:', error);

tailwind.config.js

@@ -30,11 +30,15 @@ module.exports = {
           900: "#1d1d1d", // title
           1000: "#000000",
         },
-        danger: {
+        danger: { // 900
           50: "#FEECF0",
           100: "#FCD4DE",
+          200: "#FECDD3",
+          400: "#FC8181",
           500: "#EB003B", // base
           600: "#D50136", //text
+          800: "#c53030",
+
         },
         "thema-color": "#2D347F",
         "inputBorder-color": "#90929E",
@@ -50,29 +54,23 @@ module.exports = {
       minHeight: {
         "min-height": "25rem",
       },
-      minWidth: {
-        "XtermQuestion-width": "450px",
-      },
       height: {
         "social-height": "6.125rem",
         "problemStage-height": "50rem",
-        "XtermQuestion-height": "765px",
       },
       width: {
         "problemStage-width": "5.75rem",
         "problemStage-isCompleted": "5.5rem",
         "problemStage-title": "11.75rem",
         "problemStage-info": "21.25rem",
-        "Xterm-width": "930px",
       },
       borderRadius: {
         "problemStage-selected-radius": "4px",
-        "XtermQuestion-Radius": "10px",
       },
       borderWidth: {
         "problemStageLi-borderWidth": "1px",
       },
     },
   },
   plugins: [],
-};
+};