diff --git a/client/package-lock.json b/client/package-lock.json
index cbdc8688..c285b394 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -27,6 +27,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",
@@ -4578,30 +4579,6 @@
"node": ">=6"
}
},
- "node_modules/@fortawesome/free-brands-svg-icons": {
- "version": "6.4.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
- "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
- "hasInstallScript": true,
- "dependencies": {
- "@fortawesome/fontawesome-common-types": "6.4.2"
- },
- "engines": {
- "node": ">=6"
- }
- },
- "node_modules/@fortawesome/free-regular-svg-icons": {
- "version": "6.4.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
- "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
- "hasInstallScript": true,
- "dependencies": {
- "@fortawesome/fontawesome-common-types": "6.4.2"
- },
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
@@ -14932,6 +14909,11 @@
"node": ">=4.0"
}
},
+ "node_modules/jwt-decode": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+ "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+ },
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
diff --git a/client/package.json b/client/package.json
index 05b0c3be..a693cc73 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/App.js b/client/src/App.js
index 295651dd..944115ff 100644
--- a/client/src/App.js
+++ b/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';
diff --git a/client/src/pages/AskQuestionPage.js b/client/src/pages/AskQuestionPage.js
index ff788f6f..394b2a04 100644
--- a/client/src/pages/AskQuestionPage.js
+++ b/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) {
// 오류 처리 (예: 오류 메시지 표시)
diff --git a/client/src/pages/LoginPage.js b/client/src/pages/LoginPage.js
index 5b6f4091..299d8761 100644
--- a/client/src/pages/LoginPage.js
+++ b/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)}
>
- {error && {error}
}{' '}
+ {error && {error}
}
{/* 에러 메시지 표시 */}