Merge pull request #119 from Team-INSERT/refactor/timetable,home

시간표, 홈 리팩토링

package.json

@@ -48,6 +48,7 @@
     "react-d3-radar": "^1.0.0-rc6",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-scroll-horizontal": "^1.6.6",
     "react-slick": "^0.29.0",
     "react-spinner": "^0.2.7",
@@ -74,7 +75,7 @@
     "@types/graphql": "^14.5.0",
     "@types/jest": "^29.2.4",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-slick": "^0.23.10",
+    "@types/react-slick": "^0.23.12",
     "@typescript-eslint/parser": "^5.43.0",
     "autoprefixer": "^10.4.13",
     "babel-plugin-styled-components": "^2.1.4",

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.1).
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/assets/data/index.ts

@@ -1,6 +1,3 @@
-export { default as emptyCategories } from "./emptyCategories";
 export { default as emptyClassInfo } from "./emptyClassInfo";
 export { default as emptyClassLevel } from "./emptyClassLevel";
-export { default as emptyTimetable } from "./emptyTimetable";
-export { default as emptyInputPost } from "./emptyInputPost";
 export { default as emptyMealList } from "./emptyMealList";

src/assets/images/index.ts

@@ -3,5 +3,11 @@ export { default as loading } from "./loading.gif";
 export { default as defaultProfile } from "./profile_default.png";
 export { default as QR } from "./QR.png";
 export { default as TestBanner } from "./test_banner.png";
-export { default as TestSmallBanner } from "./test_small_banner.png";
 export { default as PageNotFound } from "./page_not_found.png";
+
+export { default as Banner1Image } from "./banner/banner1.png";
+export { default as Banner2Image } from "./banner/banner2.png";
+export { default as Banner3Image } from "./banner/banner3.png";
+export { default as Banner4Image } from "./banner/banner4.svg";
+export { default as Banner5Image } from "./banner/banner2.png";
+export { default as Banner6Image } from "./banner/banner3.png";

src/components/atoms/Select.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { color, font } from "@/styles";
-import { Arrow } from "@/assets/icons";
+import Arrow from "@/assets/icons/Arrow";
 
 interface ISelectProps {
   options: string[];

src/components/common/Aside/InfomationBox.tsx

@@ -56,7 +56,6 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
           </InfomationButton>
         </>
       )}
-      {!isLogined && <LoginText>로그인이 필요해요</LoginText>}
     </Container>
   );
 };
@@ -140,8 +139,4 @@ const InfomationButton = styled.button`
   }
 `;
 
-const LoginText = styled.span`
-  ${font.context};
-`;
-
 export default InfomationBox;

src/components/common/Aside/JoinCheckBox.tsx

@@ -3,7 +3,8 @@ import { color, font } from "@/styles";
 import useAside from "@/hooks/useAside";
 
 const JoinCheckBox = () => {
-  const { asideInfo } = useAside();
+  const { asideInfo, handlePopupOpenClick } = useAside();
+
   return (
     <Container>
       {asideInfo.room && (
@@ -13,11 +14,16 @@ const JoinCheckBox = () => {
             {asideInfo.room.yearSemester.semester}학기
           </Date>
           <RoomNumber>
-            {asideInfo.room.dormitoryType}동 {asideInfo.room.roomNumber}
+            {asideInfo.room.dormitoryType}동 {asideInfo.room.roomNumber}호
           </RoomNumber>
         </HGroup>
       )}
-      <CheckButton disabled={asideInfo.isCheckIn} />
+      <CheckButton
+        onClick={handlePopupOpenClick}
+        disabled={asideInfo.room && asideInfo.isCheckin}
+      >
+        {asideInfo.room && asideInfo.isCheckin ? "입사 완료" : "입사 체크"}
+      </CheckButton>
     </Container>
   );
 };
@@ -56,10 +62,6 @@ const Date = styled.span`
 
 const RoomNumber = styled.span`
   ${font.H5};
-
-  &:after {
-    content: "호";
-  }
 `;
 
 const CheckButton = styled.button`
@@ -70,16 +72,8 @@ const CheckButton = styled.button`
   color: ${color.white};
   ${font.btn3};
 
-  &:after {
-    content: "입사 체크";
-  }
-
   &:disabled {
     background-color: ${color.content};
-
-    &:after {
-      content: "입사 완료";
-    }
   }
 `;
 

src/components/common/Aside/index.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import useUser from "@/hooks/useUser";
 import { Row } from "@/components/Flex";
+import { font } from "@/styles";
 import InfomationBox from "./InfomationBox";
 import MeisterBox from "./MeisterBox";
 import JoinCheckBox from "./JoinCheckBox";
@@ -10,15 +11,15 @@ const Aside = () => {
 
   return (
     <Layout>
-      <Container>
-        <InfomationBox user={user} isLogined={isLogined} />
-        {isLogined && (
+      {isLogined && (
+        <Container>
+          <InfomationBox user={user} isLogined={isLogined} />
           <Row gap="6px" height="100%">
             <MeisterBox />
             <JoinCheckBox />
           </Row>
-        )}
-      </Container>
+        </Container>
+      )}
     </Layout>
   );
 };

src/components/common/Header/Navigation.tsx

@@ -23,6 +23,7 @@ const NavigationList = styled.ul`
 
 const NavigationListItem = styled(Link)`
   font-size: ${font.H6};
+  font-weight: 600;
   color: ${color.black};
   cursor: pointer;
   white-space: pre-wrap;