Merge pull request #75 from GotchaAI/feature/auth

branch: 프로필에 로그아웃 기능 추가

Author: cryingdryice

src/assets/commons/carrot.png

@@ -1,10 +1,21 @@
-import rabbit from "assets/rabbit-sample.png";
-import useUserInformationStore from "store/userInformation";
-import "styles/components/home/Profile.scss";
+import carrot from 'assets/commons/carrot.png';
+import { signOutAPI } from 'services/auth/auth';
+import useUserInformationStore from 'store/userInformation';
+import 'styles/components/home/Profile.scss';
 
 const Profile = () => {
   const profile = useUserInformationStore((state) => state.profile);
   const experience = useUserInformationStore((state) => state.experience);
+
+  const signOutHandler = async () => {
+    try {
+      await signOutAPI();
+      window.location.reload();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
     <div className="profile-container">
       <div className="exp-container">
@@ -20,7 +31,7 @@ const Profile = () => {
       </div>
       <div className="profile-user-info-container">
         <div className="profile-img-container">
-          <img src={rabbit} alt="프로필 사진" />
+          <img src={carrot} alt="프로필 사진" />
         </div>
         <div className="profile-detail-container">
           <div className="profile-detail">
@@ -32,6 +43,10 @@ const Profile = () => {
           </div>
         </div>
       </div>
+
+      <button className="sign-out-btn" type="button" onClick={signOutHandler}>
+        로그아웃
+      </button>
     </div>
   );
 };

src/components/home/Profile.jsx

@@ -9,6 +9,7 @@ export const GUEST_SIGN_IN_API = process.env.REACT_APP_GUEST_SIGN_IN_API;
 export const GUEST_SIGN_UP_API = process.env.REACT_APP_GUEST_SIGN_UP_API;
 export const TOKEN_REISSUE_API = process.env.REACT_APP_TOKEN_REISSUE_API;
 export const CSRF_TOKEN_API = process.env.REACT_APP_CSRF_TOKEN_API;
+export const SIGN_OUT_API = process.env.REACT_APP_SIGN_OUT_API;
 
 export const EMAIL_SEND_API = process.env.REACT_APP_EMAIL_SEND_API;
 export const EMAIL_VERIFY_API = process.env.REACT_APP_EMAIL_VERIFY_API;
@@ -78,4 +79,4 @@ export const SERVICE_QNA_API = process.env.REACT_APP_SERVICE_QNA;
 export const RANKING_API = process.env.REACT_APP_RANKING_API;
 export const RANkING_MY_API = process.env.REACT_APP_MY_RANKING_API;
 
-export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP;
+export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP;

src/constants/api.js

@@ -4,6 +4,7 @@ import {
   EMAIL_VERIFY_API,
   GUEST_SIGN_IN_API,
   SIGN_IN_API,
+  SIGN_OUT_API,
   SIGN_UP_API,
   TOKEN_REISSUE_API,
 } from 'constants/api';
@@ -17,6 +18,10 @@ export const signInAPI = async (authForm) => {
   return await apiInterface('post', SIGN_IN_API, authForm, {}, false);
 };
 
+export const signOutAPI = async () => {
+  return await apiInterface('get', SIGN_OUT_API, {}, {}, true);
+};
+
 export const guestSignInAPI = async () => {
   return await apiInterface('post', GUEST_SIGN_IN_API, {}, {}, false);
 };

src/services/auth/auth.js

@@ -1,4 +1,5 @@
 .profile-container {
+  position: relative;
   width: 255px;
   height: 122px;
 
@@ -46,7 +47,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      font-family: "SUIT-Regular";
+      font-family: 'SUIT-Regular';
       font-size: 13px;
     }
   }
@@ -58,15 +59,20 @@
 
     .profile-img-container {
       position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 67px;
       height: 67px;
-      border: solid 1px;
-      background-color: #d9d9d9;
+      //border: solid 1px;
+      border-radius: 8px;
+
+      background-color: #f28110;
 
       overflow: hidden;
       img {
-        width: 67px;
-        height: 67px;
+        width: 30.67px;
+        height: 35.21px;
       }
     }
 
@@ -76,14 +82,14 @@
       align-items: center;
       justify-content: center;
 
-      width: 149px;
+      width: 129px;
 
-      font-family: "YoonChild";
+      font-family: 'YoonChild';
 
       .profile-detail {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: start;
         justify-content: center;
 
         width: 92px;
@@ -103,7 +109,7 @@
             align-items: center;
             font-size: 15px;
             font-weight: 600;
-            font-family: "YoonChild";
+            font-family: 'YoonChild';
           }
 
           .left-strip {
@@ -117,4 +123,18 @@
       }
     }
   }
+
+  .sign-out-btn {
+    position: absolute;
+    bottom: 5px;
+    right: 10px;
+    background: none;
+    border: none;
+
+    font-size: 10.5px;
+
+    &:hover {
+      color: red;
+    }
+  }
 }