feat: 글 작성 API 연동

hyundai-autoever-first-project-team3 · Oct 24, 2024 · 0226cdb · 0226cdb
1 parent 94e4501
commit 0226cdb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/src/components/EditorPage/EditorFooter.jsx b/src/components/EditorPage/EditorFooter.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
-function EditorFooter() {
+function EditorFooter({ handlePostData }) {
   const navigate = useNavigate();
 
   const handleGoBack = () => {
@@ -10,22 +11,31 @@ function EditorFooter() {
 
   return (
     <div className="flex items-center justify-between py-1.5 px-2 editor-footer">
-      <button
+      <Button variant="text" color="inherit" onClick={handleGoBack}>
+        나가기
+      </Button>
+      {/* <button
         className="flex items-center px-2 py-2 font-bold text-gray-400 duration-200 rounded-xl hover:bg-red-500 hover:text-white"
         onClick={handleGoBack}
       >
         나가기 
-      </button>
+      </button> */}
       <div className="flex space-x-2">
-        <button className="px-4 py-2 font-bold text-green-400 duration-150 rounded hover:text-green-600">
+        <Button variant="text" color="info">
+          임시저장
+        </Button>
+        <Button variant="contained" color="info" onClick={handlePostData}>
+          출간하기
+        </Button>
+        {/* <button className="px-4 py-2 font-bold text-green-400 duration-150 rounded hover:text-green-600">
           임시저장
         </button>
         <button className="px-4 py-2 font-bold text-white duration-150 bg-green-500 rounded hover:bg-green-700">
           출간하기
-        </button>
+        </button> */}
       </div>
     </div>
   );
 }
 
-export default EditorFooter;
+export default EditorFooter;
diff --git a/src/components/EditorPage/MdEditor.jsx b/src/components/EditorPage/MdEditor.jsx
@@ -6,22 +6,28 @@ import MDEditor from "@uiw/react-md-editor/nohighlight";
 import "@uiw/react-md-editor/markdown-editor.css";
 import "@uiw/react-markdown-preview/markdown.css";
 import "../../styles/Editor.css";
-import { getAlgorithms } from "../../api/detail";
+import { getAlgorithms, postTIL } from "../../api/detail";
+import { useNavigate } from "react-router-dom";
 
 function MdEditor() {
+  const navigate = useNavigate();
   const [postData, setPostData] = useState({
-    language: "언어",
-    site: "사이트",
-    algorithmId: 1,
-    title: "제목",
-    tag: "태그",
-    link: "링크",
-    codeContent: "코드",
-    content: "내용",
+    language: "",
+    site: "",
+    algorithmId: null,
+    title: "",
+    tag: "",
+    link: "",
+    codeContent: "",
+    content: "",
   });
   const [algorithmOptions, setAlgorithmOptions] = useState([]);
   const algorithmNames = algorithmOptions.map((item) => item.korClassification);
 
+  const handlePostData = () => {
+    postTIL(postData).then((res) => navigate(`/posts/${res.data.id}`));
+  };
+
   const handleDrop = async (event) => {
     event.preventDefault();
     const files = event.dataTransfer.files;
@@ -57,7 +63,7 @@ function MdEditor() {
             name="site"
             value={postData?.site}
             options={["백준", "Programmers", "SWEA", "민코딩"]}
-            placeholder="SITE"
+            placeholder="사이트"
             onChange={(e) => setPostData({ ...postData, site: e.target.value })}
           />
           <Dropdown
@@ -88,7 +94,7 @@ function MdEditor() {
             placeholder: "내용을 입력하세요.",
           }}
         />
-        <EditerFooter />
+        <EditerFooter handlePostData={handlePostData} />
       </div>
       <div className="flex-col hidden w-1/2 h-full p-3 overflow-auto sm:flex bg-sky-50">
         <div className="preview-content">

diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Box, Button, IconButton, Menu, MenuItem, Modal } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {