Merge pull request #8 from jeeyn/main

feat: IDE Page UI 프레임 작업 완료

package.json

@@ -15,13 +15,16 @@
     "antd": "^5.14.0",
     "axios": "^1.6.7",
     "framer-motion": "^11.0.3",
+    "markdown": "^0.5.0",
     "monaco-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-cookie": "^7.0.2",
     "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
+    "remark-gfm": "^4.0.0",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -9,10 +9,10 @@ import { LoginPage } from "./pages/LoginPage";
 import { MainPage } from "./pages/MainPage";
 import { MyPage } from "./pages/MyPage";
 import { LoginLoadingPage } from "./pages/LoginLandingPage/loadingPage";
+import { LoginLoadingPage2 } from "./pages/LoginLandingPage/loadingPage2";
 
-import SideMenu from './components/menus/SideMenu';
-import ChatPage from './pages/ChatPage/Chat';
-import { LoginLoadingPage2 } from './pages/LoginLandingPage/loadingPage2';
+import SideMenu from "./components/menus/SideMenu";
+import ChatPage from "./pages/ChatPage/Chat";
 
 import "./index.css";
 import { IDEPage } from "./pages/IDEPage";
@@ -28,22 +28,20 @@ const Layout = () => {
 };
 
 function App() {
-
   return (
     <div className="App">
       <Router>
         <Routes>
-          <Route path='/' >
-            <Route path='/login' element={<LoginPage />} />
-            <Route path='/login/kakao' element={<LoginLoadingPage/>} />
-            <Route path='/login/google' element={<LoginLoadingPage2/>} />
-
-            <Route path="ide" element={<IDEPage />} />
+          <Route path="/" element={<Layout />}>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/login/kakao" element={<LoginLoadingPage />} />
+            <Route path="/login/google" element={<LoginLoadingPage2 />} />
+            <Route path="/ide" element={<IDEPage />} />
           </Route>
-          <Route path='/' element={<SideMenu />} >
+          <Route path="/" element={<SideMenu />}>
             <Route index element={<MainPage />} />
-            <Route path='mypage' element={<MyPage/>} />
-            <Route path='chat' element={<ChatPage />} />
+            <Route path="mypage" element={<MyPage />} />
+            <Route path="chat" element={<ChatPage />} />
           </Route>
         </Routes>
       </Router>

src/pages/IDEPage/CodeEditor/index.js → src/components/ide/CodeEditor.js

@@ -3,8 +3,8 @@ import Editor, { useMonaco } from "@monaco-editor/react";
 import SolarizedLightTheme from "monaco-themes/themes/Solarized-light.json";
 import SolarizedDarkTheme from "monaco-themes/themes/Solarized-dark.json";
 
-import styles from "./styles.module.css";
-import { IdeTopBar } from "../IDETopBar";
+import styles from "./CodeEditor.module.css";
+import { ResultArea } from "./ResultArea";
 
 export const CodeEditor = ({ leftWidth, isDarkMode, setIsDarkMode }) => {
   const monaco = useMonaco(); // 사용할 모나코 인스턴스 생성
@@ -17,11 +17,11 @@ export const CodeEditor = ({ leftWidth, isDarkMode, setIsDarkMode }) => {
     automaticLayout: true,
     fontSize: 14,
     minimap: {
-      enabled: false,
+      enabled: true,
     },
     suggest: {
       // 자동완성 제안 활성화
-      snippetsPreventQuickSuggestions: false,
+      snippetsPreventQuickSuggestions: true,
       suggestions: [],
     },
     padding: {
@@ -66,6 +66,11 @@ export const CodeEditor = ({ leftWidth, isDarkMode, setIsDarkMode }) => {
     };
   }, [isResizing]);
 
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
+
   useEffect(() => {
     if (!monaco) return; // 모나코 인스턴스가 null이면 early return
 
@@ -83,8 +88,12 @@ export const CodeEditor = ({ leftWidth, isDarkMode, setIsDarkMode }) => {
 
   return (
     <>
-      <IdeTopBar />
-      <div className={`${styles.codeEditorContainer}`}>
+      <div
+        className={`${styles.codeEditorContainer}`}
+        style={{
+          width: `${100 - leftWidth}%`,
+        }}
+      >
         <Editor
           height={`${topHeigth}%`}
           width="100%"
@@ -95,6 +104,11 @@ export const CodeEditor = ({ leftWidth, isDarkMode, setIsDarkMode }) => {
           options={editorOptions}
           // onChange={handleEditorChange}
         />
+        <ResultArea
+          result={result}
+          topHeigth={topHeigth}
+          handleMouseDown={handleMouseDown}
+        />
       </div>
     </>
   );

src/pages/IDEPage/CodeEditor/styles.module.css → src/components/ide/CodeEditor.module.css

@@ -1,6 +1,8 @@
 .codeEditorContainer {
   position: relative;
+  float: right;
   height: calc(100vh - 50px);
-  padding-top: 50px;
+  margin-top: 50px;
   flex-shrink: 0;
+  flex-direction: row;
 }

src/components/ide/IDEBottomBar.js

@@ -0,0 +1,73 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+// import Chat from "./Chat";
+// import Stopwatch from "./Stopwatch";
+import styles from "./IDEBottomBar.module.css";
+
+export const IdeBottomBar = ({ sender, setSender, isDarkMode }) => {
+  // const navigate = useNavigate();
+  // const { uuidParam, questionIdParam } = useParams();
+  // const [isChatOpen, setIsChatOpen] = useState(false);
+
+  // // IDE로 리다이렉트시 url 파라미터에서 받을 내용
+  // const [uuid, setUuid] = useState("");
+
+  // // roomId는 uuid + questionId
+  // const [roomId, setRoomId] = useState("");
+
+  // // 채팅방에서 사용할 userName 받아오는 함수
+  // const fetchUserName = async () => {
+  //   await axios
+  //     .get("https://api.hong-sam.online/", { withCredentials: true })
+  //     .then((res) => {
+  //       if (res.data.status === 400 && sender) {
+  //         return;
+  //       } else if (res.data.status === 400) {
+  //         alert(res.data.data);
+  //         navigate(`/${uuidParam}/${questionIdParam}/guest`);
+  //       } else if (res.data.status === 200) {
+  //         setSender(res.data.data.username);
+  //       }
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // };
+
+  // // IDE 페이지 진입 시 url로 받아온 Params를 이용하여 RoomId와 uuid를 초기화해준다
+  // useEffect(() => {
+  //   fetchUserName();
+  //   const tmpRoomId = uuidParam + questionIdParam;
+  //   setUuid(uuidParam);
+  //   setRoomId(tmpRoomId);
+  // }, []);
+
+  // const openChat = () => {
+  //   isChatOpen ? setIsChatOpen(false) : setIsChatOpen(true);
+  // };
+  return (
+    <>
+      <div
+        className={`${
+          styles.ideBottomBarContainer
+        } flex w-screen absolute bottom-0 border-t z-10 ${
+          isDarkMode ? "bg-zinc-800 text-white" : "bg-white"
+        }}`}
+      >
+        <div
+          className={` ${
+            isDarkMode ? "bg-zinc-800 text-white" : "bg-white"
+          } grow`}
+        ></div>
+        <div>Bottom Bar</div>
+        {/* <div className="pr-5 pt-2 pb-2">
+          <Stopwatch />
+        </div>
+        <button className="pr-5 pt-2 pb-2" onClick={openChat}>
+          Chat
+        </button> */}
+      </div>
+    </>
+  );
+};

src/components/ide/IDEBottomBar.module.css

@@ -0,0 +1,10 @@
+.ChatContainer {
+  position: fixed;
+  right: 15px;
+  bottom: 60px;
+  border: 1px solid var(--main-color);
+  border-radius: 10px;
+}
+.ideBottomBarContainer {
+  border-color: var(--main-color);
+}

src/components/ide/QuestionMenu.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import styles from "./QuestionMenu.module.css";
+import ReactMarkDown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export const QuestionMenu = ({ leftWidth, handleMouseDown }) => {
+  return (
+    <div
+      className={`${styles.questionMenuContainer} flex`}
+      style={{
+        width: `${leftWidth}%`,
+      }}
+    >
+      <div className={`questionFont overflow-y-scroll w-full border-r`}>
+        <div className={`text-3xl p-5 border-b`}>
+          <ReactMarkDown remarkPlugins={[remarkGfm]}>Title</ReactMarkDown>
+        </div>
+        <div className={`p-5 border-b`}>
+          <p className="text-lg mb-3">문제 설명</p>
+          <ReactMarkDown remarkPlugins={[remarkGfm]}>Content</ReactMarkDown>
+        </div>
+      </div>
+      <div
+        className="w-1 cursor-col-resize"
+        onMouseDown={handleMouseDown}
+      ></div>
+    </div>
+  );
+};

src/components/ide/QuestionMenu.module.css

@@ -0,0 +1,8 @@
+.questionMenuContainer {
+  flex-shrink: 0;
+  user-select: none;
+  position: relative;
+  float: left;
+  height: calc(100vh - 50px);
+  margin-top: 50px;
+}

src/components/ide/ResultArea.js

@@ -0,0 +1,31 @@
+import React from "react";
+// import styles from "./ResultArea.module.css";
+
+import { ResultTopBar } from "./ResultTopBar";
+
+export const ResultArea = ({ result, topHeigth, handleMouseDown }) => {
+  return (
+    <div
+      // className={`${styles.resultTermContainer} border-t`}
+      style={{
+        maxHeight: `calc(100% - ${topHeigth}%)`,
+      }}
+    >
+      <div
+        className="w-full h-1 cursor-row-resize "
+        onMouseDown={handleMouseDown}
+      ></div>
+      <ResultTopBar />
+      <div>
+        <p className="pl-5 whitespace-pre-line">
+          {result.split("\n").map((line, index) => (
+            <span key={index}>
+              {line}
+              <br />
+            </span>
+          ))}
+        </p>
+      </div>
+    </div>
+  );
+};

src/components/ide/ResultTopBar.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const ResultTopBar = () => {
+  return (
+    <div>
+      <div className="flex h-3">
+        <div className="grow"></div>
+        <button className="h-full p-1"></button>
+      </div>
+    </div>
+  );
+};

src/pages/IDEPage/index.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { FileTree } from "./FileTree";
-import { Terminal } from "./Terminal";
-import { CodeEditor } from "./CodeEditor";
-import { useCustomLogin } from '../../hooks/useCustomLogin'
+import { IdeTopBar } from "../../components/ide/IDETopBar";
+import { QuestionMenu } from "../../components/ide/QuestionMenu";
+import { CodeEditor } from "../../components/ide/CodeEditor";
+import { IdeBottomBar } from "../../components/ide/IDEBottomBar";
+import { useCustomLogin } from "../../hooks/useCustomLogin";
 
 export const IDEPage = () => {
 
@@ -50,12 +51,19 @@ export const IDEPage = () => {
 
   return (
     <div>
-      {/* <Terminal />
-      <FileTree /> */}
-      <CodeEditor
-        leftWidth={leftWidth}
+      <IdeTopBar />
+      <div>
+        <QuestionMenu leftWidth={leftWidth} handleMouseDown={handleMouseDown} />
+        <CodeEditor
+          leftWidth={leftWidth}
+          isDarkMode={isDarkMode}
+          setIsDarkMode={setIsDarkMode}
+        />
+      </div>
+      <IdeBottomBar
+        sender={sender}
+        setSender={setSender}
         isDarkMode={isDarkMode}
-        setIsDarkMode={setIsDarkMode}
       />
     </div>
   );

src/pages/MyPage/index.js

@@ -1,19 +1,17 @@
-import React, { useState } from 'react'
-import { ModifyComponent } from '../../components/member/modifyComponent'
-import { useCustomLogin } from '../../hooks/useCustomLogin'
-
+import React, { useState } from "react";
+import { ModifyComponent } from "../../components/member/ModifyComponent";
+import { useCustomLogin } from "../../hooks/useCustomLogin";
 
 export const MyPage = () => {
-
-  const {isLogin, moveToLoginReturn} = useCustomLogin()
+  const { isLogin, moveToLoginReturn } = useCustomLogin();
 
   if (!isLogin) {
-    return moveToLoginReturn()
+    return moveToLoginReturn();
   }
 
   return (
     <div>
       <ModifyComponent />
     </div>
-  )
-}
+  );
+};