Feat fe ask question page api

client/package.json

@@ -22,6 +22,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "jwt-decode": "^3.1.2",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/App.js

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

client/src/pages/AskQuestionPage.js

@@ -6,6 +6,8 @@ import QuestionPageDropdown from '../components/QuestionPageDropdown';
 // import Header from '../components/Header';
 // import Footer from '../components/Footer';
 import axios from 'axios';
+import jwt_decode from 'jwt-decode'; // jwt-decode 패키지를 import
+import { useNavigate } from 'react-router-dom';
 
 const StyleAskPage = styled.div`
   background-color: #f8f9f9;
@@ -140,10 +142,11 @@ const StyleAskPage = styled.div`
 `;
 
 function AskQuestionPage() {
+  const navigate = useNavigate(); // useNavigate 훅을 사용하여 navigate 함수를 가져옴
+
   const editorRef = useRef(null);
   const editor2Ref = useRef(null);
   const TagRef = useRef(null);
-
   // 리덕스 스토어에 액션을 디스패치하여 상태를 업데이트 하는 dispatch함수
   const dispatch = useDispatch();
 
@@ -235,25 +238,44 @@ function AskQuestionPage() {
 
     const title = titleInput.value; // 유저가 입력한 제목
     const questionBody = contentInput; // 유저가 입력한 내용
+    const jwtToken = localStorage.getItem('jwtToken'); // 로그인 페이지에서 저장한 토큰 가져오기
+    console.log(jwtToken);
+
+    // 토큰 해독
+    const decodedToken = jwt_decode(jwtToken);
+    console.log(decodedToken);
+
+    // memberId와 nickname 얻기
+    const nickname = decodedToken.nickname;
 
     // 요청 할 데이터값 정의
     const requestData = {
-      memberId: 2,
-      nickname: '닉네임1',
+      memberId: 3, // memberId 사용
+      nickname: nickname, // nickname 사용
       title,
       questionBody,
     };
+    console.log(requestData);
 
     // 주소값 정의
     const ipv4 = 'http://13.124.105.17:8080';
 
     try {
-      // 백엔드 API로 HTTP POST 요청 보내기
       const response = await axios.post(
         `${ipv4}/questions/new-questions`,
         requestData,
+        {
+          headers: {
+            Authorization: `Bearer ${jwtToken}`, // 토큰을 Authorization 헤더에 추가
+          },
+        },
       );
+
       // 응답 처리 (예: 성공 메시지 표시)
+      const questionid = response.data.questionId;
+      navigate(`/questions/${questionid}`);
+
+      console.log(questionid);
       console.log('질문이 성공적으로 제출되었습니다:', response);
     } catch (error) {
       // 오류 처리 (예: 오류 메시지 표시)

client/src/pages/LoginPage.js

@@ -5,8 +5,8 @@ import icon from '../images/small-logo.svg';
 import googleIcon from '../images/google-icon.svg';
 import githubIcon from '../images/github-icon.svg';
 import facebookIcon from '../images/facebook-icon.svg';
-import axios from 'axios'; // Import axios here
 import { useState } from 'react';
+import axios from 'axios';
 
 const StyleLoginPage = styled.div`
   background-color: #f1f2f3;
@@ -177,6 +177,7 @@ function LoginPage() {
     return emailRegex.test(email);
   };
 
+  // 새로고침 방지
   const handleSubmit = async (event) => {
     event.preventDefault();
 
@@ -186,28 +187,26 @@ function LoginPage() {
       return;
     }
 
-    if (!username || !password) {
-      setemailError('The email is not a valid email address.');
-      return;
-    }
+    // 서버 주소
+    const ipv4 = 'http://13.124.105.17:8080';
 
-    const ipv4 = 'http://13.124.105.17:8080'; // 서버 주소
-
-    const formData = new FormData();
-    formData.append('username', username);
-    formData.append('password', password);
-
-    for (const keyValue of formData) console.log(keyValue);
+    const loginData = {
+      username: username,
+      password: password,
+    };
 
     try {
-      const response = await axios.post(`${ipv4}/users/login`, formData);
-
+      const response = await axios.post(`${ipv4}/users/login`, loginData);
+      console.log(response);
       if (response.status === 200) {
-        console.log('로그인 성공:', response.data);
+        const token = response.headers.authorization; // 응답 객체에서 토큰 추출
+        localStorage.setItem('jwtToken', token); // 토큰 저장
+        console.log('성공');
+        // 이후 필요한 작업 수행
       }
     } catch (error) {
-      console.error('로그인 오류:', error);
-      setError('로그인 정보가 올바르지 않습니다. 다시 확인하고 로그인하세요.'); // 에러 메시지 설정
+      console.error('에러 발생:', error);
+      setError(error.message);
     }
   };
 
@@ -282,7 +281,7 @@ function LoginPage() {
                     onChange={(e) => setPassword(e.target.value)}
                   ></input>
                 </div>
-                {error && <p className="error-message">{error}</p>}{' '}
+                {error && <p className="error-message">{error}</p>}
                 {/* 에러 메시지 표시 */}
               </form>
             </div>