Merge pull request #376 from SejongPeer/feature/26

package.json

@@ -27,6 +27,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "read-excel-file": "^5.8.4",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "styled-components": "^6.1.11",

src/components/modal/BottomModal.module.css

@@ -1,33 +1,68 @@
-.modal{
+@media (min-width: 768px) {
+  .modal {
     width: 100vw;
     height: 100vh;
     position: absolute;
     top: 0;
     left: 0;
-}
-.container{
-    width: 100%;
-    height: auto;
+  }
+  .container {
+    width: 100vw;
     max-height: 100px;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     border-radius: 16px 16px 0px 0px;
     position: fixed;
     overflow: scroll;
     bottom: 0;
     z-index: 100;
     padding-bottom: 20px;
     height: auto;
-}
+  }
 
-.animate {
+  .animate {
     max-height: 500px;
     transition: max-height 0.2s ease-in-out;
+  }
+
+  .backdrop {
+    position: fixed;
+    width: 100vw;
+    height: 100%;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.35);
+  }
 }
 
-.backdrop {
+@media (max-width: 768px) {
+  .modal {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .container {
+    width: 100vw;
+    height: 50vh;
+    background-color: #ffffff;
+    border-radius: 16px 16px 0px 0px;
+    position: fixed;
+    overflow: scroll;
+    bottom: 0;
+    z-index: 100;
+    padding-bottom: 20px;
+  }
+
+  .animate {
+    max-height: 500px;
+    transition: max-height 0.2s ease-in-out;
+  }
+
+  .backdrop {
     position: fixed;
-    width: 100%;
+    width: 100vw;
     height: 100%;
     z-index: 10;
     background: rgba(0, 0, 0, 0.35);
-}
+  }
+}

src/pages/main/mainPage/MainPage.js

@@ -16,7 +16,7 @@ import ready from '../../../assets/image/ready.png';
 import style from './MainPage.module.css';
 
 import useStudyInfoStore from '../../study/useStudyInfoStore';
-import { BuddyHandler, HonbobHandler } from './api'; // Import API functions
+import { BuddyHandler, HonbobHandler } from './api';
 
 const images = [honbobUse, buddyUse, peerUse];
 
@@ -25,16 +25,15 @@ const MainPage = () => {
   const { setBuddyCount } = useContext(MyContext);
   const { studyType, setStudyType } = useStudyInfoStore();
 
-  // StudyHandler function to set study type and navigate
-  const StudyHandler = () => {
-    setStudyType('lecture');
+  const StudyHandler = type => {
+    setStudyType(type);
     const refreshToken = localStorage.getItem('refreshToken');
     const accessToken = localStorage.getItem('accessToken');
     if (refreshToken === null || accessToken === null) {
       alert('로그인 후 이용 가능한 서비스입니다!');
       navigate('/login');
     } else {
-      if (studyType === 'lecture') navigate('/study');
+      navigate('/study');
     }
   };
 
@@ -129,8 +128,14 @@ const MainPage = () => {
             </p>
           </div>
           <div className={style.studyContainer}>
-            <button className={style.school} onClick={StudyHandler}></button>
-            <button className={style.except}></button>
+            <button
+              className={style.school}
+              onClick={() => StudyHandler('lecture')}
+            ></button>
+            <button
+              className={style.except}
+              onClick={() => StudyHandler('external_activity')}
+            ></button>
           </div>
         </div>
       </div>

src/pages/main/mainPage/MainPage.module.css

@@ -318,7 +318,7 @@
   }
 
   .festButton {
-    width: 343px;
+    width: 100%;
     height: 204px;
     background-color: white;
     margin-top: 10px;