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; + } + } }