Merge pull request #9 from Con-graduation/feat/practice

FEAT : 회원가입 API 연동

Author: tldms0507

src/api/auth.js

@@ -10,14 +10,14 @@ export async function postLogin(username, password) {
   }
 
 // 회원가입
-export const postRegister = async (email, name, username, password) => {
+export const postRegister = async (email, name, username, nickname, password) => {
   try {
     const response = await client.post("/api/auth/register", {
       email: email,
       name: name,
       username: username,
+      nickname: nickname,
       password: password,
-      confirmPassword: confirmPassword,
     });
     return response.data;
   } catch (error) {

src/pages/join.jsx

@@ -171,13 +171,18 @@ export default function Join() {
         return Object.keys(newErrors).length === 0;
       };
 
-      const handleSubmit = (e) => {
+      const handleSubmit = async (e) => {
         e.preventDefault();
         console.log('현재 입력된 데이터:', formData);
         if (validateForm()) {
-          console.log('회원가입 완료 - 전송할 데이터:', formData);
-          setModalContent('회원가입이 완료되었습니다.');
-          setModalOpen(true);
+          const response = await postRegister(formData.email, formData.name, formData.username, formData.nickname, formData.password);
+          if (response.status == 200) {
+            setModalContent('회원가입이 완료되었습니다.');
+            setModalOpen(true);
+          } else {
+            setModalContent('회원가입 중 오류가 발생했습니다. 다시 시도해주세요.');
+            setModalOpen(true);
+          }
         } else {
           console.log('유효성 검증 실패 - 에러:', errors);
         }

src/pages/setting.jsx

@@ -3,6 +3,14 @@ import { useNavigate } from 'react-router-dom';
 export default function Setting() {
   const navigate = useNavigate();
 
+  const handleLogout = () => {
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('name');
+    localStorage.removeItem('nickname');
+    localStorage.removeItem('level');
+    localStorage.removeItem('googleAuth');
+    navigate('/');
+  };
   return (
     <div className="min-h-screen w-screen bg-[#EEF5FF] flex flex-col">
       <h1 className="text-2xl font-bold pt-10 text-center">설정</h1>
@@ -22,7 +30,9 @@ export default function Setting() {
           </svg>
           알림 설정
         </button>
-        <button className="w-80 py-2 bg-red-400 text-white rounded-md font-bold flex items-center justify-center gap-2 hover:bg-red-500 transition-colors duration-200">
+        <button className="w-80 py-2 bg-red-400 text-white rounded-md font-bold flex items-center justify-center gap-2 hover:bg-red-500 transition-colors duration-200"
+        onClick={handleLogout}
+        >
           <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" />
           </svg>