로테이션 신청 페이지 변경점

src/assets/css/Rotation/New_Rotation.scss

@@ -28,7 +28,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
 }
 
 .rotation-viewSelectDates-title {
@@ -56,12 +56,13 @@
     color: $pinkred;
     font-weight: bold;
     cursor: pointer;
-    font-size: 13px;
-    border: none;
+    font-size: 20px;
+    border: 1px solid $pinkred;
     border-radius: 10px;
     transition: 0.5s ease;
     display: flex;
     align-items: center;
+    text-align: center;
     background: none;
   }
   button:hover {
@@ -128,8 +129,8 @@
   }
   button[disabled] { background: #f0f0f0 !important;}
   button:not([disabled]) {
-    background: none !important;
-    &.selected, &.attendLimited { background: #01BABC !important; }
+    background: rgb(53, 218, 196)!important;
+    &.selected, &.attendLimited { background: rgb(237, 89, 89) !important; }
     &:not(.selectable):hover { cursor: default !important;}
   }
 }

src/components/Main/Apply.tsx

@@ -12,6 +12,7 @@ import CreateEventBox from './CreateEventBox';
 import useSWR from 'swr';
 import fetcher from '@globalObj/function/fetcher';
 import Event from './Event';
+import { getDecodedToken } from '@cert/TokenStorage';
 import apiClient from '@service/apiClient';
 
 function Apply() {
@@ -84,7 +85,7 @@ function Apply() {
   return (
     <div className="main--apply">
       <p className="main--apply--title" ref={ListWrapperRef}>
-        {getToken() ? `${LoginState.id}님, 신청하시죠?` : '로그인 후 신청 가능!'}
+        {getToken() ? `${getDecodedToken().id}님, 신청하시죠?` : '로그인 후 신청 가능!'}
       </p>
       <div className="main--apply--wrapper">
         <div className="main--apply--create_modal_button">

src/components/Rotation/Rotation.tsx

@@ -301,12 +301,6 @@ const SelectDateBox = ({
         ></Calendar>
       </div>
       <div className="rotation--viewSelectDates">
-        <div className="rotation-viewSelectDates-title">{isSubmit ? '불가능하다고 제출한 날짜' : '불가능한 날짜'}</div>
-        <div className="rotation--selectDates-box">
-          {createUnavailableDates(record).map((date, i) => (
-            <span key={i}>{date}</span>
-          ))}
-        </div>
         {!isSubmit && (
           <div className="rotation--reset">
             <button onClick={resetDates}>reset</button>
@@ -430,6 +424,7 @@ export const Rotate = () => {
         .then(() => {
           alert('성공적으로 신청 취소되었습니다');
           mutate(`${getAddress()}/rotations/attendance`);
+          setIsSubmit(false);
           pageReload();
         })
         .catch((err) => {
@@ -452,21 +447,11 @@ export const Rotate = () => {
    */
   useEffect(() => {
     async function fetchAttendLimit(intraId: string, currDate: Date) {
-      // if (checkIsPeriod(null) && checkTokenAndRedirect(null) && intraId) {
-      //   try {
-      //     const attendLimitData = await getAttendLimit(intraId, currDate);
-      //     const attendLimit = attendLimitData.attendLimit;
-      //     setIsSumbit(true);
-      //     setRecord(updateRecord(initialRecord, attendLimit));
-      //   } catch (error) {
-      //     errorAlert(error);
-      //   }
-      // }
       if (checkTokenAndRedirect(null) && intraId) {
         try {
           const attendLimitData = await getAttendLimit();
           const attendLimit = attendLimitData.attendLimit;
-          setIsSubmit(true);
+          setIsSubmit(false);
           setRecord(updateRecord(initialRecord, attendLimit));
         } catch (error) {
           setIsSubmit(false);

src/components/utils/MobileNavber.tsx

@@ -5,25 +5,35 @@ import { useSetRecoilState } from 'recoil';
 import GlobalLoginState from '@recoil/GlobalLoginState';
 import { clearToken, getToken } from '@cert/TokenStorage';
 import hambergImg from '@img/bars-solid-white.svg';
+import getAddress from '@globalObj/function/getAddress';
+import apiClient from '@service/apiClient';
 
 function MobileNavber() {
   const navigate = useNavigate();
   const setLoginState = useSetRecoilState(GlobalLoginState);
   const [modalOpen, setModalOpen] = useState(false);
+  const url = `${getAddress()}/auth/google`;
 
   const onClickLogOut = () => {
-    clearToken();
-    setLoginState(() => {
-      return {
-        id: '',
-        isLogin: false,
-        isAdmin: false,
-        profileUrl: '',
-      };
-    });
-    setModalOpen((prev) => !prev);
-    alert('로그아웃 되셨습니다!');
-    navigate('/');
+    apiClient
+      .post('/auth/logout')
+      .then(() => {
+        clearToken();
+        setLoginState(() => {
+          return {
+            id: '',
+            isLogin: false,
+            isAdmin: false,
+            profileUrl: '',
+          };
+        });
+        setModalOpen((prev) => !prev);
+        alert('로그아웃 되셨습니다!');
+        navigate('/');
+      })
+      .catch((err) => {
+        alert('로그아웃에 실패했습니다.');
+      });
   };
 
   const onClickModalShow = () => {
@@ -88,13 +98,7 @@ function MobileNavber() {
           <span onClick={onClickRotationCalendar}>사서 달력</span>
           {/* <span onClick={onClickAuthReview}>친스타그램</span> */}
           <span onClick={onClickAuthTimeline}>집현전실록</span>
-          {getToken() ? (
-            <span onClick={onClickLogOut}>로그아웃</span>
-          ) : (
-            <Link to={`/auth`} onClick={onClickModalShow}>
-              로그인하기
-            </Link>
-          )}
+          {getToken() ? <span onClick={onClickLogOut}>로그아웃</span> : <a href={url}>구글 로그인</a>}
         </div>
       )}
     </div>