diff --git a/src/assets/commons/carrot.png b/src/assets/commons/carrot.png
new file mode 100644
index 0000000..ef1c552
Binary files /dev/null and b/src/assets/commons/carrot.png differ
diff --git a/src/components/home/Profile.jsx b/src/components/home/Profile.jsx
index ec6f367..0b89777 100644
--- a/src/components/home/Profile.jsx
+++ b/src/components/home/Profile.jsx
@@ -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 (
@@ -20,7 +31,7 @@ const Profile = () => {
-

+
@@ -32,6 +43,10 @@ const Profile = () => {
+
+
);
};
diff --git a/src/constants/api.js b/src/constants/api.js
index 56be9cc..4f4903a 100644
--- a/src/constants/api.js
+++ b/src/constants/api.js
@@ -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;
\ No newline at end of file
+export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP;
diff --git a/src/services/auth/auth.js b/src/services/auth/auth.js
index 582a806..fe7421f 100644
--- a/src/services/auth/auth.js
+++ b/src/services/auth/auth.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);
};
diff --git a/src/styles/components/home/Profile.scss b/src/styles/components/home/Profile.scss
index 1a48ac8..09dd6ce 100644
--- a/src/styles/components/home/Profile.scss
+++ b/src/styles/components/home/Profile.scss
@@ -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;
+ }
+ }
}