✨ Feature: 게시물 작성 api 연동하기(#11)

selab-hs · Apr 26, 2022 · 60a8194 · 60a8194
1 parent 23e976b
commit 60a8194
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/components/Header/HeaderBtns/index.tsx b/components/Header/HeaderBtns/index.tsx
@@ -1,10 +1,17 @@
+import axios from 'axios';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
 import { ThemeContext } from '../../../pages/_app';
+import { storage } from '../../utils';
+import { TEMPORARY_POSTS } from '../../utils/constants';
 import DarkModeToggle from './DarkModeToggle';
 import * as S from './style';
 import { Props } from './types';
 
+// TODO: 추후 삭제 예정
+export const token =
+  'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJtaW5icjB0aGVyQGhzLmFjLmtyIiwiaXNzIjoic2VsYWIiLCJhdXRoIjoiUk9MRV9VU0VSIiwiZXhwIjoxNjUwOTU4MzIzfQ.bXy9dkOgEoN5Y-9bySizyEIjvhy-3MYpYTB7dqe1RXka81LU9EBbFEx9TG-f2ZbVNRloTfOwfeb-yduFmOyZqA';
+
 const HeaderBtns = ({ currentTab }: Props) => {
   const { colorTheme } = useContext(ThemeContext);
 
@@ -18,9 +25,36 @@ const HeaderBtns = ({ currentTab }: Props) => {
     alert('임시저장이 완료되었습니다.');
     router.back();
   };
-  const handleCreateBtn = () => {
-    // TODO: 서버에 데이터 전송하기
+
+  const handleCreateBtn = async () => {
+    const tmpPost = storage.get<{ id: string; title: string; content: string }[]>(TEMPORARY_POSTS);
+    const content = tmpPost ? tmpPost[0].content : '';
+    const title = tmpPost ? tmpPost[0].title : '';
+
+    // 입력한 제목이 없을때 예외처리
+    if (!title.length) {
+      alert('제목은 필수로 입력해주세요 🚨');
+      return;
+    }
+
+    // TODO: 데이터 전송 하기
+    try {
+      const response = await axios({
+        method: 'post',
+        url: '/api/v1/free-posts',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: { title, content },
+      });
+
+      router.push(`/free-posts/${response.data.data.id}`);
+    } catch (err) {
+      console.error(err);
+    }
   };
+
   return (
     <S.BtnWrapper colorTheme={colorTheme} currentTab={currentTab}>
       <DarkModeToggle />

diff --git a/components/TuiEditor/index.tsx b/components/TuiEditor/index.tsx
@@ -41,26 +41,6 @@ export default function TuiEditor() {
   const windowSize = useGetWindowSize();
   const { colorTheme } = useContext(ThemeContext);
 
-  function handleSubmit() {
-    // ref가 없을때 예외처리
-    if (!editorRef.current || !titleRef.current) return;
-
-    const titleData = titleRef.current.value;
-    const editorData = editorRef.current.getInstance().getMarkdown();
-
-    // 입력한 제목이 없을때 예외처리
-    if (!titleData.length) {
-      alert('제목은 필수로 입력해주세요 🚨');
-      return;
-    }
-
-    // TODO: 데이터 전송 하기
-    localStorage.setItem('post', JSON.stringify({ id: 1, titleData, editorData }));
-
-    // TODO: id를 받아서 라우팅 하기
-    router.push('/post/1');
-  }
-
   const handleEditorChange = () => {
     if (timeoutId.current) {
       clearTimeout(timeoutId.current);