fix(QA): 시간표 관련 오류 수정

Ubinquitous · Ubinquitous · commit 2b4f87270c21 · 2023-10-15T16:00:03.000+09:00
diff --git a/src/components/common/Modal/EmojiModal/index.tsx b/src/components/common/Modal/EmojiModal/index.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { color } from "@/styles";
+import { color, flex } from "@/styles";
 import ModalList from "./ModalList";
 import ModalHeader from "./ModalHeader";
 
@@ -17,8 +17,13 @@ const EmojiModal = (direction: IEmojiModalProps) => {
   return (
     <>
       <Container {...direction}>
-        <ModalHeader handleClickCloseButton={onClose} />
-        <ModalList />
+        아직 지원하지 않는 기능이에요.
+        {false && (
+          <>
+            <ModalHeader handleClickCloseButton={onClose} />
+            <ModalList />
+          </>
+        )}
       </Container>
       <ModalBackground onClick={onClose} />
     </>
@@ -35,9 +40,9 @@ const Container = styled.div<{
   z-index: 10;
   width: 30vw;
   border-radius: 12px;
+  min-height: 20vh;
   height: fit-content;
-  display: flex;
-  flex-direction: column;
+  ${flex.COLUMN_CENTER};
   background-color: ${color.white};
   box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
   ${({ top, right, bottom, left }) => css`
diff --git a/src/provider/layoutProvider.helper.tsx b/src/provider/layoutProvider.helper.tsx
@@ -1,6 +1,5 @@
-import { Column } from "@/components/Flex";
 import { Footer, Header, Modal } from "@/components/common";
-import { GlobalStyle } from "@/styles";
+import { GlobalStyle, flex } from "@/styles";
 import React from "react";
 import { ToastContainer, toast } from "react-toastify";
 import styled from "styled-components";
@@ -12,11 +11,11 @@ const LayoutProvider = ({ children }: React.PropsWithChildren) => {
       <StyledToastify autoClose={1000} position={toast.POSITION.TOP_RIGHT} />
       <GlobalStyle />
       <Modal />
-      <Column gap="6vh">
+      <Layout>
         <Header />
-        {children}
+        <Container>{children}</Container>
         <Footer />
-      </Column>
+      </Layout>
     </>
   );
 };
@@ -28,4 +27,13 @@ const StyledToastify = styled(ToastContainer)`
   }
 `;
 
+const Layout = styled.div`
+  ${flex.COLUMN};
+  gap: 6vh;
+`;
+
+const Container = styled.div`
+  min-height: 80vh;
+`;
+
 export default LayoutProvider;
diff --git a/src/templates/timetable/index.tsx b/src/templates/timetable/index.tsx
@@ -1,12 +1,33 @@
 import styled from "styled-components";
+import { flex } from "@/styles";
+import useUser from "@/hooks/useUser";
+import useModal from "@/hooks/useModal";
+import React from "react";
+import LoginModal from "@/components/common/Modal/LoginModal";
+import { useDidMountEffect } from "@/hooks/useDidMountEffect";
+import Storage from "@/apis/storage";
+import { TOKEN } from "@/constants";
 import TimeTableBox from "./layouts/TimeTableBox";
 
 const TimeTablePage = () => {
+  const { isLogined } = useUser();
+  const { openModal } = useModal();
+
+  useDidMountEffect(() => {
+    if (!Storage.getItem(TOKEN.ACCESS)) {
+      openModal({
+        component: <LoginModal />,
+      });
+    }
+  }, []);
+
   return (
     <Layout>
-      <Container>
-        <TimeTableBox />
-      </Container>
+      {isLogined && (
+        <Container>
+          <TimeTableBox />
+        </Container>
+      )}
     </Layout>
   );
 };
@@ -17,9 +38,8 @@ const Layout = styled.div`
 `;
 
 const Container = styled.div`
-  width: 76%;
-  display: flex;
-  justify-content: center;
+  width: 100%;
+  ${flex.CENTER}
   gap: 8px;
 `;
 
diff --git a/src/templates/timetable/layouts/TimeTableBox.tsx b/src/templates/timetable/layouts/TimeTableBox.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import useDate from "@/hooks/useDate";
 import { useQueryClient } from "@tanstack/react-query";
 import { KEY } from "@/constants";
+import Storage from "@/apis/storage";
 import { emptyTimetable } from "@/assets/data";
 import TimeTableBar from "./TimeTableBar";
 import { useTimetableListQuery } from "../services/query.service";
@@ -16,7 +17,7 @@ const TimeTableBox = () => {
     getNowWeekDay({ type: "KOR" }),
   );
   const [timetableType, setTimetableType] = React.useState<"bar" | "table">(
-    "bar",
+    (Storage.getItem("timetable_type") as "bar" | "table") ?? "bar",
   );
 
   const [dayTimeTable, setDayTimeTable] = React.useState(emptyTimetable);
@@ -32,21 +33,27 @@ const TimeTableBox = () => {
 
   return (
     <Container>
-      <TimeTableCategory
-        weekdays={weekdays}
-        checked={selectedDay}
-        setChecked={setSelectedDay}
-        timetableType={timetableType}
-        setTimetableType={setTimetableType}
-      />
-      {timetableType === "bar" && (
-        <TimeTableBar
-          weekday={translateDay(selectedDay, { to: "ENG_DETAIL" })}
-          dayTimeTable={dayTimeTable}
+      <TimeTableLayoutBox>
+        <TimeTableCategory
+          weekdays={weekdays}
+          checked={selectedDay}
+          setChecked={setSelectedDay}
+          timetableType={timetableType}
+          setTimetableType={setTimetableType}
         />
-      )}
-      {timetableType === "table" && (
-        <TimeTableTable dayTimeTable={dayTimeTable} />
+      </TimeTableLayoutBox>
+      {!!dayTimeTable[translateDay(selectedDay, { to: "ENG_DETAIL" })] && (
+        <>
+          {timetableType === "bar" && (
+            <TimeTableBar
+              weekday={translateDay(selectedDay, { to: "ENG_DETAIL" })}
+              dayTimeTable={dayTimeTable}
+            />
+          )}
+          {timetableType === "table" && (
+            <TimeTableTable dayTimeTable={dayTimeTable} />
+          )}
+        </>
       )}
     </Container>
   );
@@ -55,9 +62,15 @@ const TimeTableBox = () => {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: fit-content;
   justify-content: center;
+  align-items: center;
   gap: 4vh;
+  width: 56%;
+`;
+
+const TimeTableLayoutBox = styled.div`
+  margin-right: auto;
 `;
 
 export default TimeTableBox;
diff --git a/src/templates/timetable/layouts/TimeTableCategory.tsx b/src/templates/timetable/layouts/TimeTableCategory.tsx
@@ -3,6 +3,7 @@ import { Column } from "@/components/Flex";
 import { Category } from "@/components/atoms";
 import { font } from "@/styles";
 import { getTimetableType } from "@/helpers";
+import Storage from "@/apis/storage";
 
 interface ITimeTableCategoryProps {
   weekdays: Array<string>;
@@ -19,9 +20,31 @@ const TimeTableCategory = ({
   timetableType,
   setTimetableType,
 }: ITimeTableCategoryProps) => {
+  const handleTimetableTypeChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setTimetableType(e.target.id as "bar" | "table");
+    Storage.setItem("timetable_type", e.target.id);
+  };
+
   return (
     <Column gap="16px">
       <Title />
+      <Column gap="8px">
+        <Label>시간표 형식</Label>
+        <CategoryBox>
+          {["bar", "table"].map((type) => (
+            <Category
+              key={type}
+              id={type}
+              label={getTimetableType(type)}
+              checked={timetableType === type}
+              onChange={handleTimetableTypeChange}
+              name="date"
+            />
+          ))}
+        </CategoryBox>
+      </Column>
       {timetableType === "bar" && (
         <Column gap="8px">
           <Label>날짜</Label>
@@ -39,21 +62,6 @@ const TimeTableCategory = ({
           </CategoryBox>
         </Column>
       )}
-      <Column gap="8px">
-        <Label>시간표 형식</Label>
-        <CategoryBox>
-          {["bar", "table"].map((type) => (
-            <Category
-              key={type}
-              id={type}
-              label={getTimetableType(type)}
-              checked={timetableType === type}
-              onChange={(e) => setTimetableType(e.target.id as "bar" | "table")}
-              name="date"
-            />
-          ))}
-        </CategoryBox>
-      </Column>
     </Column>
   );
 };
diff --git a/src/templates/timetable/layouts/TimeTableTable.tsx b/src/templates/timetable/layouts/TimeTableTable.tsx
@@ -13,32 +13,34 @@ const TimeTableTable = ({ dayTimeTable }: ITimeTableTableProps) => {
   const { weekdaysENGDetail: weekdays, translateDay } = useDate();
 
   return (
-    <Container>
-      <Column>
-        {Array.from({ length: 8 }).map((_, i) => (
-          <TableItem color={color.content}>
-            <TableHeadText>{i ? `${i}교시` : "교시 \\ 요일"}</TableHeadText>
-          </TableItem>
-        ))}
-      </Column>
-      {weekdays.map((weekday) => {
-        if (!dayTimeTable[weekday]) return;
-        return (
-          <TableBox>
+    !!Object.entries(dayTimeTable).length && (
+      <Container>
+        <Column>
+          {Array.from({ length: 8 }).map((_, i) => (
             <TableItem color={color.content}>
-              <TableHeadText>
-                {translateDay(weekday, { to: "KOR" })}요일
-              </TableHeadText>
+              <TableHeadText>{i ? `${i}교시` : "교시 \\ 요일"}</TableHeadText>
             </TableItem>
-            {dayTimeTable[weekday]?.map((timetable) => (
-              <TableItem color={color.white}>
-                <TableText>{timetable.subject}</TableText>
+          ))}
+        </Column>
+        {weekdays.map((weekday) => {
+          if (!dayTimeTable[weekday]) return;
+          return (
+            <TableBox>
+              <TableItem color={color.content}>
+                <TableHeadText>
+                  {translateDay(weekday, { to: "KOR" })}요일
+                </TableHeadText>
               </TableItem>
-            ))}
-          </TableBox>
-        );
-      })}
-    </Container>
+              {dayTimeTable[weekday]?.map((timetable) => (
+                <TableItem color={color.white}>
+                  <TableText>{timetable.subject}</TableText>
+                </TableItem>
+              ))}
+            </TableBox>
+          );
+        })}
+      </Container>
+    )
   );
 };
 
diff --git a/src/types/storageSettingKey.type.ts b/src/types/storageSettingKey.type.ts
@@ -1,3 +1,7 @@
-type StorageSettingKey = "theme" | "viewAllChildComments" | "post_render_limit";
+type StorageSettingKey =
+  | "theme"
+  | "viewAllChildComments"
+  | "post_render_limit"
+  | "timetable_type";
 
 export default StorageSettingKey;
