질문 작성 API를 연결한다.

src/components/AnswerDetail.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import {Answer, Model} from '../types/model';
 import * as React from 'react';
+import {removeSludge} from "../utils/dateHandler";
 
 const Container = styled.div`
   display: flex;
@@ -54,7 +55,7 @@ const AnswerDetail: React.FC<{props: Model<Answer>}> = ({props}) => {
         <Avatar>
           <AvatarImage src="/jobs_avatar.png" alt="avatar" />
         </Avatar>
-        <Created>{props.createdAt}</Created>
+        <Created>{removeSludge(props.createdAt)}</Created>
       </Left>
       <Contents>{props.contents}</Contents>
     </Container>

src/components/Navbar.tsx

@@ -1,47 +1,81 @@
 import styled from 'styled-components';
 import Link from 'next/link';
 import * as React from 'react';
+import {useContext, useEffect} from 'react';
+import {MemberContext} from "../contexts/MemberContext";
+import {clearToken, getIsLogin} from "../utils/tokenHandler";
+import {useRouter} from "next/router";
 
 const Container = styled.div`
-  display: flex;
-  background: white;
-  vertical-align: center;
+  background: var(--white-yellow);
+  padding: 1rem 2rem;
+  border: 0.1px solid rgba(0, 0, 0, 0.2);
+  margin-bottom: 1rem;
 `;
 
-const Button = styled.button`
-  margin: 1rem;
+const LeftSideButton = styled.button`
+  display: inline-block;
   color: black;
   font-size: large;
-  background: white;
-  border-color: black;
-  border-width: thin;
+  background-color: var(--yellow);
+  border: 0.1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 7px;
   padding: 1rem;
   width: 8rem;
+
+  :hover {
+    background-color: rgba(255, 241, 118, 0.5);
+  }
 `;
 
-const LoginButton = styled.button`
-  margin-left: auto;
+const RightSideButton = styled.button`
+  display: inline-block;
+  float: right;
   color: black;
   font-size: large;
-  background: white;
-  border-color: black;
-  border-width: thin;
+  background-color: var(--yellow);
+  border: 0.1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 7px;
   padding: 1rem;
-  width: 8rem;
+  width: 7rem;
+  margin-left: 2rem;
+
+  :hover {
+    background-color: rgba(255, 241, 118, 0.5);
+  }
 `;
 
 const Navbar: React.FC = () => {
+  const {member: {isLogin}, setMember} = useContext(MemberContext);
+  const {push} = useRouter();
+
+  useEffect(() => {
+    setMember({isLogin: getIsLogin()});
+  }, []);
+
+  const logout = async () => {
+    clearToken();
+    setMember({isLogin: false});
+    await push('/');
+  };
+
   return (
     <Container>
       <Link href={'/'}>
-        <Button>Quna</Button>
-      </Link>
-      <Link href={'/'}>
-        <Button>질문 목록</Button>
-      </Link>
-      <Link href={'/'}>
-        <LoginButton>로그인</LoginButton>
+        <LeftSideButton>Quna</LeftSideButton>
       </Link>
+      {isLogin ? (
+        <RightSideButton onClick={logout}>로그아웃</RightSideButton>
+      ) : (
+        <>
+          <Link href={'/login'}>
+            <RightSideButton>로그인</RightSideButton>
+          </Link>
+          <Link href={'/signup'}>
+            <RightSideButton>회원가입</RightSideButton>
+          </Link>
+        </>
+      )}
     </Container>
   );
 };

src/components/QuestionDetail.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import {Model, Question} from '../types/model';
 import * as React from 'react';
+import {removeSludge} from "../utils/dateHandler";
 
 const Container = styled.div`
   width: 80%;
@@ -69,7 +70,7 @@ const QuestionDetail: React.FC<{props: Model<Question>}> = ({props}) => {
           <Avatar>
             <AvatarImage src="/jobs_avatar.png" alt="avatar" />
           </Avatar>
-          <Created>{props.createdAt}</Created>
+          <Created>{removeSludge(props.createdAt)}</Created>
         </Left>
         <Title>{props.title}</Title>
       </Top>

src/components/QuestionInput.tsx

@@ -1,6 +1,12 @@
-import React, {ChangeEvent, useState} from 'react';
+import * as React from 'react';
+import {ChangeEvent, useState, useContext, useEffect} from 'react';
+import {MemberContext} from "../contexts/MemberContext";
 import styled from 'styled-components';
 import Questioner from './Questioner';
+import {fetchAPI} from '../constants/api';
+import {isCreated} from '../constants/status';
+import {getIsLogin} from "../utils/tokenHandler";
+import {useRouter} from "next/router";
 
 const Container = styled.div`
   /*Layout 적용 이후 width 변경 요망* */
@@ -29,6 +35,7 @@ const InputTitle = styled.input.attrs({
   width: 100%;
   border: 0.1px solid rgba(0, 0, 0, 0.2);
   border-radius: 7px;
+
   ::placeholder {
     color: rgba(0, 0, 0, 0.2);
     font-weight: 500;
@@ -68,12 +75,62 @@ const ButtonSubmit = styled.button`
 `;
 
 const QuestionInput: React.FC = () => {
+  const {member: {isLogin}, setMember} = useContext(MemberContext);
   const [isFolded, setIsFolded] = useState<boolean>(true);
   const [title, setTitle] = useState<string>('');
   const [mainContent, setMainContent] = useState<string>('');
+  const {push} = useRouter();
+
+  useEffect(() => {
+    setMember({isLogin: getIsLogin()});
+  }, []);
+
+  const isNotVerified = () => {
+    if (!title) {
+      alert('질문 제목을 입력해주세요.');
+      return true;
+    } else if (!mainContent) {
+      alert('질문 내용을 입력해주세요.');
+      return true;
+    } else if (!isLogin) {
+      alert('로그인이 필요합니다.');
+      return true;
+    }
+    return false;
+  }
+
+  const handleClickNext = () => {
+    if (!title) {
+      alert('질문 제목을 입력해주세요.');
+      return;
+    }
+
+    setIsFolded(false);
+
+  };
+
+  const handleClickSubmit = async () => {
+    if (isNotVerified()) {
+      return;
+    }
+    /**responderId 관련 로직 확인 필요 */
+    const request = {
+      title : title,
+      contents : mainContent,
+      responderId : null,
+    }
 
-  const handleClick = () => {
-    setIsFolded(!isFolded);
+    try {
+      const {status} = await fetchAPI('POST', 'Questions', null, request);
+
+      if (isCreated(status)) {
+        alert('질문이 등록되었습니다.');
+        await push('/');
+      }
+    } catch (e) {
+      console.error(e);
+      alert('질문 등록에 실패했습니다. 다시 시도해주세요.');
+    }
   };
 
   const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -90,18 +147,18 @@ const QuestionInput: React.FC = () => {
         <>
           <HeaderContainer>
             <Questioner />
-            <InputTitle onChange={handleTitleChange} value={title} />
-            <ButtonNext onClick={handleClick}>Next</ButtonNext>
+            <InputTitle onChange={handleTitleChange} />
+            <ButtonNext onClick={handleClickNext}>Next</ButtonNext>
           </HeaderContainer>
         </>
       ) : (
         <div>
           <HeaderContainer>
             <Questioner />
-            <InputTitle value={title} />
+            <InputTitle onChange={handleTitleChange} defaultValue={title}/>
           </HeaderContainer>
           <InputMain onChange={handleMainChange} value={mainContent} />
-          <ButtonSubmit onClick={handleClick}>Submit</ButtonSubmit>
+          <ButtonSubmit onClick={handleClickSubmit}>Submit</ButtonSubmit>
         </div>
       )}
     </Container>

src/components/QuestionList.tsx

@@ -12,13 +12,13 @@ const Container = styled.div`
 `;
 
 const QuestionList: React.FC<{data: Model<Question>[]}> = ({data}) => {
-  return (
+  return data ? (
     <Container>
       {data.map(question => (
-        <QuestionListItem data={question} />
+        <QuestionListItem key={question.id} data={question} />
       ))}
     </Container>
-  );
+  ): <Container />
 };
 
 export default QuestionList;

src/components/QuestionListItem.tsx

@@ -19,12 +19,12 @@ const Title = styled.div`
   font-weight: 600;
 `;
 
-const QuestionListItem: React.FC<{data: Model<Question>}> = ({data}) => {
+const QuestionListItem: React.FC<{data: Model<Question>}> = ({data: {id, title}}) => {
   return (
-    <Link href={`/questions/${data.id}`}>
+    <Link href={{pathname: '/questions', query: {id}}} as={'/questions'}>
       <Container>
         <Questioner />
-        <Title>{data.title}</Title>
+        <Title>{title}</Title>
       </Container>
     </Link>
   );

src/components/Questioner.tsx

@@ -6,7 +6,6 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: left;
 `;
 
 const Image = styled.img`

src/constants/api.ts

@@ -1,15 +1,55 @@
-const BASE_URL = 'http://localhost:8080';
+import axios from "axios";
+import {TOKEN, TOKEN_TYPE} from "./token";
 
-export const API = (
-  model: 'Question' | 'Answer' | 'Signup' | 'Login' | string,
-  questionsId?: string
+const BASE_URL = 'http://13.124.134.56:8080';
+
+type API = 'Questions' | 'Answers' | 'Signup' | 'Login' | 'QuestionDetail';
+
+const client = axios.create({
+  baseURL: "",
+})
+
+export const getAPIPath = (
+  model: API,
+  questionsId?: string | number
 ) =>
-  model === 'Question'
+  model === 'Questions'
     ? `${BASE_URL}/questions`
-    : model === 'Answer'
-    ? `${BASE_URL}/questions/${questionsId}/answers`
-    : model === 'Login'
-    ? `${BASE_URL}/login`
-    : model === 'Signup'
-    ? `${BASE_URL}/members/`
-    : '';
+    : model === 'QuestionDetail'
+    ? `${BASE_URL}/questions/${questionsId}`
+    : model === 'Answers'
+      ? `${BASE_URL}/questions/${questionsId}/answers`
+      : model === 'Login'
+        ? `${BASE_URL}/login`
+        : model === 'Signup'
+          ? `${BASE_URL}/members`
+          : '';
+
+export const fetchAPI = async (method: 'POST' | 'GET' | 'PUT' | 'DELETE', api: API, questionsId?: string | number, content?: {}) => {
+
+
+  if (method === 'POST' && api === 'Signup') {
+    return await client.post(getAPIPath(api, questionsId), content);
+  }
+  if (method === 'POST') {
+    return await client.post(getAPIPath(api, questionsId), content,
+      {
+        headers: {Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN)}`}
+      })
+  }
+  if (method === 'GET') {
+    return await client.get(getAPIPath(api, questionsId))
+  }
+  if (method === 'PUT') {
+    return await client.put(getAPIPath(api, questionsId), content,
+      {
+        headers: {Authorization: `${TOKEN_TYPE} ${TOKEN}`}
+      })
+  }
+  if (method === 'DELETE') {
+    return await client.delete(getAPIPath(api, questionsId), {
+      headers: {Authorization: `${TOKEN_TYPE} ${TOKEN}`}
+    })
+  }
+  throw new Error();
+}

src/constants/status.ts

@@ -0,0 +1,7 @@
+export const
+  isOk = (status: number) => status === 200,
+  isCreated = (status: number) => status === 201,
+  isNoContent = (status: number) => status === 204,
+  isBadRequest = (status: number) => status === 400,
+  isUnauthorized = (status: number) => status === 401,
+  isNotFound = (status: number) => status === 404;

src/contexts/MemberContext.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {useState} from 'react';
+
+const MemberContext = React.createContext(null);
+
+const MemberProvider = ({children}) => {
+  const [member, setMember] = useState({
+    isLogin: false,
+  });
+
+  const memberState = {
+    member, setMember
+  };
+
+  return (
+    <MemberContext.Provider value={memberState}>
+      {children}
+    </MemberContext.Provider>
+  )
+};
+
+export {
+  MemberProvider,
+  MemberContext
+};