시간표 페이지 퍼블리싱

package.json

@@ -25,6 +25,7 @@
     "eslint-config-next": "13.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.3.1",
+    "moment": "^2.29.4",
     "next": "13.4.4",
     "prettier": "^2.8.8",
     "react": "18.2.0",

src/app/calender/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import CalenderPage from "@/page/calender";
+
+const Calender = () => {
+  return <CalenderPage />;
+};
+
+export default Calender;

src/app/timetable/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import TimeTablePage from "@/page/timetable";
+
+const TimeTable = () => {
+  return <TimeTablePage />;
+};
+
+export default TimeTable;

src/components/atoms/Select.tsx

@@ -0,0 +1,114 @@
+import DownArrow from "@/page/timetable/assets/DownArrow";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled, { css } from "styled-components";
+
+interface ISelectProps {
+  options: string[];
+  defaultOption: string;
+  label: string;
+  size?: string;
+  handler: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const Select = ({
+  options,
+  defaultOption,
+  label,
+  size = "80px",
+  handler,
+}: ISelectProps) => {
+  const [hover, setHover] = React.useState(true);
+
+  const toggleHandler = (option: string) => {
+    handler(option);
+    setHover(true);
+  };
+  return (
+    <StyledSelect
+      onMouseEnter={() => setHover(false)}
+      onMouseLeave={() => setHover(true)}
+    >
+      <StyledDefaultList size={size}>
+        <StyledDefaultListText label={label}>
+          {defaultOption}
+        </StyledDefaultListText>
+        <DownArrow width={12} height={8} />
+      </StyledDefaultList>
+      <StyledList hover={hover}>
+        {options.map((option) => (
+          <StyledListItem
+            key={option}
+            size={size}
+            label={label}
+            onClick={() => toggleHandler(option)}
+          >
+            {option}
+          </StyledListItem>
+        ))}
+      </StyledList>
+    </StyledSelect>
+  );
+};
+
+const StyledSelect = styled.div`
+  width: fit-content;
+  cursor: pointer;
+`;
+
+const StyledDefaultList = styled.div<{ size: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: ${({ size }) => size};
+  padding: 6px 0;
+  border-radius: 4px;
+  background-color: ${color.white};
+  box-shadow: 4px 4px 10px 0 rgba(144, 144, 144, 0.15);
+
+  &:hover {
+    background-color: ${color.on_tertiary};
+  }
+`;
+
+const StyledDefaultListText = styled.div<{ label: string }>`
+  ${font.context};
+  color: ${color.black};
+
+  &:after {
+    content: "${({ label }) => label}";
+  }
+`;
+
+const StyledList = styled.ul<{ hover: boolean }>`
+  position: absolute;
+  border-radius: 4px;
+  background-color: ${color.white};
+  padding: 6px 4px;
+
+  ${({ hover }) =>
+    hover &&
+    css`
+      display: none;
+    `}
+`;
+
+const StyledListItem = styled.li<{ size: string; label: string }>`
+  width: calc(${({ size }) => size} - 8px);
+  padding: 6px 0 6px 8px;
+  border-radius: 4px;
+  ${font.context};
+  background-color: ${color.white};
+
+  &:hover {
+    background-color: ${color.on_tertiary};
+  }
+
+  &:after {
+    content: "${({ label }) => label}";
+  }
+`;
+
+export default Select;

src/hooks/useDate.ts

@@ -0,0 +1,14 @@
+import moment from "moment";
+import "moment/locale/ko";
+
+const useDate = () => {
+  const getHMSDate = () => {
+    const date = moment(new Date());
+    const HMSDate = moment(date).locale("ko").format("A h:mm:ss");
+    return HMSDate;
+  };
+
+  return { getHMSDate };
+};
+
+export default useDate;

src/page/schedule/index.tsx → src/page/calender/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import ScheduleBox from "./layouts/ScheduleBox";
 
-const SchedulePage = () => {
+const CalenderPage = () => {
   return (
     <Layout>
       <Container>
@@ -27,4 +27,4 @@ const Container = styled.div`
   gap: 8px;
 `;
 
-export default SchedulePage;
+export default CalenderPage;

src/page/timetable/assets/DownArrow.tsx

@@ -0,0 +1,21 @@
+import SVGAttribute from "@/global/types/SVGAttribute";
+import React from "react";
+
+const DownArrow = ({ width, height }: SVGAttribute) => {
+  return (
+    <svg
+      width={width ?? 41}
+      height={height ?? 25}
+      viewBox="0 0 41 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.3422 1.86615C38.7783 1.30239 38.0135 0.985684 37.2161 0.985684C36.4187 0.985684 35.654 1.30239 35.09 1.86615L20.2045 16.7517L5.31896 1.86615C4.7518 1.31836 3.99218 1.01526 3.2037 1.02211C2.41523 1.02896 1.66099 1.34522 1.10344 1.90278C0.545881 2.46033 0.229623 3.21457 0.222771 4.00304C0.21592 4.79152 0.519026 5.55114 1.06681 6.1183L18.0784 23.1299C18.6424 23.6937 19.4071 24.0104 20.2045 24.0104C21.0019 24.0104 21.7666 23.6937 22.3306 23.1299L39.3422 6.1183C39.906 5.55437 40.2227 4.78962 40.2227 3.99222C40.2227 3.19482 39.906 2.43008 39.3422 1.86615Z"
+        fill="#727272"
+      />
+    </svg>
+  );
+};
+
+export default DownArrow;

src/page/timetable/index.tsx

@@ -0,0 +1,30 @@
+import Aside from "@/components/common/Aside";
+import React from "react";
+import styled from "styled-components";
+import TimteTableBox from "./layouts/TimteTableBox";
+
+const TimeTablePage = () => {
+  return (
+    <Layout>
+      <Container>
+        <TimteTableBox />
+        <Aside />
+      </Container>
+    </Layout>
+  );
+};
+
+const Layout = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const Container = styled.div`
+  width: 76%;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+`;
+
+export default TimeTablePage;

src/page/timetable/layouts/TimeTableBar.tsx

@@ -0,0 +1,129 @@
+import useDate from "@/hooks/useDate";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import axios from "axios";
+import moment from "moment";
+import React from "react";
+import styled from "styled-components";
+
+const TimeTableBar = () => {
+  const [nowDate, setNowDate] = React.useState("");
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const date = useDate();
+  const [test, setTest] = React.useState([
+    { className: "", startTime: "", endTime: "" },
+  ]);
+
+  React.useEffect(() => {
+    (async () => {
+      const res = await axios.get("https://bssm.kro.kr/api/timetable/2/2");
+      setTest(res.data.timetableList.WED);
+    })();
+  }, []);
+
+  React.useEffect(() => {
+    setInterval(() => {
+      const HMSDate = date.getHMSDate();
+      setNowDate(HMSDate);
+    }, 1000);
+  }, [date]);
+
+  // test
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = 500;
+    }
+    const { endTime } = test[0];
+    const endMoment = moment(endTime, "HH:mm:ss");
+    const nowMoment = moment(new Date(), "HH:mm:ss");
+
+    const duration = moment.duration(endMoment.diff(nowMoment));
+    const formattedDuration = moment
+      .utc(duration.as("milliseconds"))
+      .format("HH:mm:ss");
+  }, [test]);
+
+  return (
+    <Box>
+      <BarBox>
+        <BarDate>{nowDate}</BarDate>
+        <Bar />
+      </BarBox>
+      <BarList ref={scrollRef}>
+        {test.map((item, index) => (
+          <BarItem key={index}>
+            <BarItemText>test</BarItemText>
+          </BarItem>
+        ))}
+      </BarList>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  width: 56vw;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const BarList = styled.div`
+  display: flex;
+  width: 100%;
+  height: 300px;
+  overflow-x: scroll;
+  padding: 10px;
+  padding: 0 28vw;
+  border-radius: 6px;
+  position: relative;
+  gap: 8px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const BarItem = styled.div`
+  width: 100px;
+  padding: 0 120px;
+  border-radius: 6px;
+  height: 80px;
+  display: flex;
+  overflow-x: scroll;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: ${color.white};
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+`;
+
+const BarItemText = styled.span`
+  position: absolute;
+`;
+
+const BarBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+
+  justify-content: center;
+  align-items: center;
+  margin-top: -30vh;
+`;
+
+const Bar = styled.div`
+  width: 5px;
+  border-radius: 5px;
+  background-color: ${color.gray};
+  height: 160px;
+  z-index: 1;
+  pointer-events: none;
+`;
+
+const BarDate = styled.span`
+  ${font.context};
+  z-index: 1;
+`;
+
+export default TimeTableBar;