feat: Timetable 퍼블리싱

src/assets/svgs/TimetableArrow.tsx

@@ -0,0 +1,37 @@
+interface propsType {
+  direction: string;
+}
+
+const TimetableArrow = ({ direction }: propsType) => {
+  return direction == "left" ? (
+    <svg
+      cursor="pointer"
+      width="12"
+      height="18"
+      viewBox="0 0 12 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 1.908L4.19802 9L12 16.092L9.90099 18L-4.76837e-07 9L9.90099 0L12 1.908Z"
+        fill="#242424"
+      />
+    </svg>
+  ) : (
+    <svg
+      cursor="pointer"
+      width="12"
+      height="18"
+      viewBox="0 0 12 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 1.908L7.80198 9L0 16.092L2.09901 18L12 9L2.09901 0L0 1.908Z"
+        fill="#242424"
+      />
+    </svg>
+  );
+};
+
+export default TimetableArrow;

src/components/Main/Timetable/Timetable.tsx

@@ -1,16 +1,56 @@
 import React from "react";
+import TimetableArrow from "../../../assets/svgs/TimetableArrow";
 import styled from "styled-components";
 
 const Timetable = () => {
-  return <_Wrapper></_Wrapper>;
+  return (
+    <_Wrapper>
+      <_TitleLayout>
+        <TimetableArrow direction="left" />
+        <h1>이번주 시간표</h1>
+        <TimetableArrow direction="right" />
+      </_TitleLayout>
+      <_IntroduceText>
+        (검정) : 변경을 하려는 과목{" "}
+        <span>(노랑)</span> : 변경을 원하는 과목
+      </_IntroduceText>
+    </_Wrapper>
+  );
 };
 
 const _Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   width: 430px;
   height: 600px;
   background: #ffffff;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   border-radius: 10px;
 `;
 
+const _TitleLayout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 25px;
+
+  h1 {
+    font-weight: 600;
+    font-size: 20px;
+    color: #242424;
+  }
+`;
+
+const _IntroduceText = styled.p`
+  font-weight: 500;
+  font-size: 14px;
+  color: #242424;
+
+  span {
+    color: #fed267;
+  }
+`;
+
 export default Timetable;