chore : 이름 수정, import 변수 삭제, react import 추가, props 설정, userID 임시 함수 선언

src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './App.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import SignUp from './pages/SignUp';

src/components/Post/Editor/IdeEditor.tsx

@@ -1,29 +1,8 @@
-import React, { useState,useEffect } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
-import Editor, { OnChange, OnMount } from '@monaco-editor/react';
-
-import lightTheme from  '../../../assets/editor/dark.json';
-import darkTheme from  '../../../assets/editor/light.json';
+import Editor from '@monaco-editor/react';
 
 const IdeEditor:React.FC = () =>{
-    const [theme, setTheme] = useState<'light'|'dark'>('dark'); // 테마 상태 관리
-
-    const handleEditorChange: OnChange = (value, event) => {
-        console.log('Editor Change : ', value);
-    };
-
-    const handleEditorDidMount: OnMount = (editor, monaco) => {
-        // 테마 등록
-        monaco.editor.defineTheme('light-theme', lightTheme as any);
-        monaco.editor.defineTheme('dark-theme', darkTheme as any);
-
-        // 초기 테마 적용
-        monaco.editor.setTheme(theme === 'dark' ? 'dark-theme' : 'light-theme');
-      };
-
-    const toggleTheme =() => {
-        setTheme((prev)=>(prev === 'dark'?'light':'dark')); // 상태 업데이트
-    }
 
     return(
         <>
@@ -64,6 +43,6 @@ const Container = styled.div`
     flex: 2;
 
     border-radius: 0.9375rem;
-    background: var(--bc_background, #2B2B2B);
-    box-shadow: 0px 0px 4px 0px var(--bc_black, #161616) inset;
+    background: var(--background, #2B2B2B);
+    box-shadow: 0px 0px 4px 0px var(--black, #161616) inset;
 `;

src/components/Post/Editor/index.tsx

@@ -1,7 +1,6 @@
-import styled from '@emotion/styled';
-import IdeEditor from './IdeEditor';
+import React from "react";
 
-const Editor = () => {
+const Editor:React.FC = () => {
 
 
     return(
@@ -11,8 +10,4 @@ const Editor = () => {
     )
 };
 
-export default Editor;
-
-const Container = styled.div`
-
-`;
+export default Editor;

src/components/Post/Header.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import {BsTrashFill,BsThreeDotsVertical} from 'react-icons/bs';
+import { BsTrashFill,BsThreeDotsVertical } from 'react-icons/bs';
 
-function Header() {
+interface PostHeader{
+  boardName : string;
+  postName : string;
+}
+
+const Header:React.FC<PostHeader> = ({ boardName, postName }) => {
   return (
 
     <Container>
         <Info>
           <Title>
-            <Board>9oorm_KDT</Board>
-            <Post>[FE] 모달창 컴포넌트 만들기</Post>
+            <Board>{boardName}</Board>
+            <Post>{postName}</Post>
           </Title>
           <EditButton />
         </Info>
         <DeleteButton />
       </Container>
   )
-}
+};
 
 export default Header;
 
@@ -33,18 +38,16 @@ const Info=styled.div`
   flex-direction: row;
 
   width: 100%;
-  /* background-color: green; */
 `;
 
 const Title = styled.div`
     display: flex;
     flex-direction: column;
-    gap: 8px; /* 요소 간 간격 제어 */
+    gap: 0.31rem; 
 `;
 
 const Board = styled.p`
-    color: var(--bc-light-gray);
-    font: var(--font-board-name);
+    color: var(--light-gray);
     margin: 0; /* 기본 마진 제거 */
 
     font-family: "Pretendard Variable";
@@ -55,10 +58,10 @@ const Board = styled.p`
 `;
 
 const Post = styled.p`
-    color: var(--bc-white);
+    color: var(--white);
     margin: 0; /* 기본 마진 제거 */
 
-    text-shadow: 0px 0px 4px var(--bc_black, #161616);
+    text-shadow: 0px 0px 4px var(--black, #161616);
     font-family: "Pretendard Variable";
     font-size: 2.5rem;
     font-style: normal;
@@ -68,15 +71,17 @@ const Post = styled.p`
 
 
 const EditButton=styled(BsThreeDotsVertical)`
-    color: var(--bc-light-gray);
+    color: var(--light-gray);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
 `;
 
 const DeleteButton=styled(BsTrashFill)`
-    color: var(--bc-gray);
+    color: var(--gray);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
+
+    margin-top: 3rem;
 `;

src/components/Post/MessageCard/index.tsx

@@ -9,12 +9,20 @@ const MessageCard: React.FC<Message> = ({
   content,
   time,
 }) => {
+
+  // 임시 함수: userId를 가공하거나 기본 출력용으로 활용
+  const getUserIdDisplay = (id: string | number) => {
+    return `User: ${id}`;
+  };
+
   return (
     <Container>
       <ProfileImage src={profileImage}></ProfileImage>
       <Content>
         <p>{name}</p>
         <div>{content}</div>
+        {/* userId를 출력하는 경우 */}
+        <p>{getUserIdDisplay(userId)}</p>
       </Content>
       <Time>{time}</Time>
     </Container>

src/main.tsx

@@ -1,88 +1,15 @@
-import React from 'react';
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App.tsx';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import * as monaco from 'monaco-editor';
 
 
 const queryClient = new QueryClient();
 
 /* monaco-editor 세팅 */
 
-// 성공
-// (window as any).MonacoEnvironment = {
-//   getWorkerUrl(moduleId: string, label: string) {
-//     switch (label) {
-//       case 'typescript':
-//         return `${window.location.origin}/monaco-editor/vs/language/typescript/ts.worker.js`;
-//       case 'javascript':
-//         return `${window.location.origin}/monaco-editor/vs/language/typescript/ts.worker.js`;
-//       case 'css':
-//         return `${window.location.origin}/monaco-editor/vs/language/css/css.worker.js`;
-//       case 'html':
-//         return `${window.location.origin}/monaco-editor/vs/language/html/html.worker.js`;
-//       case 'json':
-//         return `${window.location.origin}/monaco-editor/vs/language/json/json.worker.js`;
-//       default:
-//         return `${window.location.origin}/monaco-editor/vs/editor/editor.worker.js`;
-//     }
-//   },
-// };
-
-// (window as any).MonacoEnvironment = {
-//   getWorkerUrl(moduleId: string, label: string) {
-//     const version = '1.0.0';
-//     switch (label) {
-//       case 'typescript':
-//         return `/monaco-editor/vs/language/typescript/ts.worker.js?v=${version}`;
-//       default:
-//         return `/monaco-editor/vs/editor/editor.worker.js?v=${version}`;
-//     }
-//   },
-// };
-
-// (window as any).MonacoEnvironment = {
-//   getWorkerUrl(moduleId: string, label: string) {
-//     switch (label) {
-//       case 'typescript':
-//         return '/monaco-editor/vs/language/typescript/ts.worker.js';
-//       case 'javascript':
-//         return '/monaco-editor/vs/language/typescript/ts.worker.js';
-//       case 'css':
-//         return '/monaco-editor/vs/language/css/css.worker.js';
-//       case 'html':
-//         return '/monaco-editor/vs/language/html/html.worker.js';
-//       case 'json':
-//         return '/monaco-editor/vs/language/json/json.worker.js';
-//       default:
-//         return '/monaco-editor/vs/editor/editor.worker.js';
-//     }
-//   },
-// };
-
-// (window as any).MonacoEnvironment = {
-//   getWorkerUrl(moduleId: string, label: string) {
-//     switch (label) {
-//       case 'editorWorkerService':
-//         return '/monaco-editor/vs/editor/common/services/editorSimpleWorker.js';
-//       case 'css':
-//         return '/monaco-editor/vs/language/css/css.worker.js';
-//       case 'html':
-//         return '/monaco-editor/vs/language/html/html.worker.js';
-//       case 'json':
-//         return '/monaco-editor/vs/language/json/json.worker.js';
-//       case 'typescript':
-//         return '/monaco-editor/vs/language/typescript/ts.worker.js';
-//       default:
-//         return '/monaco-editor/vs/editor/editor.worker.js';
-//     }
-//   },
-// };
-
 (window as any).MonacoEnvironment = {
-  getWorkerUrl(moduleId: string, label: string) {
+  getWorkerUrl(label: string) {
     switch (label) {
       case 'typescript':
         return '/monaco-editor/vs/language/typescript/ts.worker.js';
@@ -99,23 +26,7 @@ const queryClient = new QueryClient();
 };
 
 
-// (window as any).MonacoEnvironment = {
-//   getWorkerUrl: function (moduleId, label) {
-//     const workerSource = `
-//       importScripts('/monaco-editor/vs/language/typescript/ts.worker.js');
-//     `;
-//     const blob = new Blob([workerSource], { type: 'application/javascript' });
-//     return URL.createObjectURL(blob);
-//   },
-// };
-
-
 createRoot(document.getElementById('root')!).render(
-  // <StrictMode>
-  //   <QueryClientProvider client={queryClient}>
-  //     <App />
-  //   </QueryClientProvider>
-  // </StrictMode>
   <QueryClientProvider client={queryClient}>
       <App />
   </QueryClientProvider>

src/pages/Board/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Board = () => {
+const Board:React.FC = () => {
   return (
     <div>게시판</div>
   )

src/pages/MyPage/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const MyPage = () => {
+const MyPage:React.FC = () => {
   return (
     <div>MyPage</div>
   )

src/pages/Post/index.tsx

@@ -4,10 +4,20 @@ import styled from '@emotion/styled';
 import Header from '../../components/Post/Header';
 import IdeEditor from '../../components/Post/Editor/IdeEditor';
 
-const Post = () => {
+
+const Post: React.FC = () => {
+  /* 추후 api 연동으로 변경*/
+  const dummyData = {
+    boardName : '9oorm_KDT',
+    postName : '[FE] 모달창 컴포넌트 만들기2'
+  }
+
   return (
     <Container>
-      <Header />
+      <Header 
+        boardName={dummyData.boardName}
+        postName={dummyData.postName}
+      />
       <Body>
         <IdeEditor />
 
@@ -33,8 +43,8 @@ const Container=styled.div`
   width: 100%;
   height: 100%;
 
-  color: white;
-  background-color: var(--bc-background);
+  color: var(--white);
+  background-color: var(--background);
 `;
 
 const Body=styled.div`
@@ -51,9 +61,9 @@ const Body=styled.div`
   gap: 1.25rem;
 
   border-radius: 2.1875rem;
-  background-color: var(--bc-input);
-  background: var(--bc-input, rgba(218, 218, 218, 0.35));
-  box-shadow: 0px 0px 4px 0px var(--bc_black, #161616);
+  background-color: var(--input);
+  background: var(--input, rgba(218, 218, 218, 0.35));
+  box-shadow: 0px 0px 4px 0px var(--black, #161616);
 `;
 
 const Test=styled.div`
@@ -62,8 +72,5 @@ const Test=styled.div`
   height: 46.125rem;
   flex-shrink: 0;
 
-  /* width: 30%;
-  height: 30%; */
-
   background-color: red;
 `;

src/pages/SignIn/index.tsx

@@ -9,7 +9,7 @@ import {
 } from './style';
 import logo_black from '../../assets/icons/logo_black.svg';
 
-const SignIn = () => {
+const SignIn:React.FC = () => {
   const [user, setUser] = useState({ id: '', password: '' });
   const [error, setError] = useState(false);
   const [disabled, setDisabled] = useState(false);

src/pages/SignUp/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SignUp = () => {
+const SignUp:React.FC = () => {
   return (
     <div>SignUp</div>
   )