Merge pull request #2 from kodomomo/#1MainPage퍼블리싱

#1 main page퍼블리싱
kodomomo · Dec 21, 2022 · cbcd843 · cbcd843
2 parents eeaf239 + 6ec0158
commit cbcd843
Show file tree

Hide file tree

Showing 17 changed files with 623 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,16 @@
 import React from "react";
-import { Routes } from "react-router-dom";
+import Main from "./pages/Main";
+import GlobalStyle from "./styles/GlobalStyle";
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
 function App() {
   return (
     <div className="App">
-      <Routes></Routes>
+      <GlobalStyle />
+      <Routes>
+        <Route path="/main" element={<Main />} />
+      </Routes>
     </div>
   );
 }

diff --git a/src/assets/svgs/Arrow.tsx b/src/assets/svgs/Arrow.tsx
@@ -0,0 +1,35 @@
+interface propsType {
+  direction: boolean;
+}
+
+const Arrow = ({ direction }: propsType) => {
+  return direction ? (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.9997 14.8301C16.8123 15.0163 16.5589 15.1208 16.2947 15.1208C16.0305 15.1208 15.7771 15.0163 15.5897 14.8301L11.9997 11.2901L8.4597 14.8301C8.27234 15.0163 8.01889 15.1208 7.7547 15.1208C7.49052 15.1208 7.23707 15.0163 7.0497 14.8301C6.95598 14.7371 6.88158 14.6265 6.83081 14.5046C6.78004 14.3828 6.75391 14.2521 6.75391 14.1201C6.75391 13.988 6.78004 13.8573 6.83081 13.7355C6.88158 13.6136 6.95598 13.503 7.0497 13.4101L11.2897 9.17006C11.3827 9.07633 11.4933 9.00193 11.6151 8.95117C11.737 8.9004 11.8677 8.87426 11.9997 8.87426C12.1317 8.87426 12.2624 8.9004 12.3843 8.95117C12.5061 9.00193 12.6167 9.07633 12.7097 9.17006L16.9997 13.4101C17.0934 13.503 17.1678 13.6136 17.2186 13.7355C17.2694 13.8573 17.2955 13.988 17.2955 14.1201C17.2955 14.2521 17.2694 14.3828 17.2186 14.5046C17.1678 14.6265 17.0934 14.7371 16.9997 14.8301Z"
+        fill="#242424"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.9997 9.16994C16.8123 8.98369 16.5589 8.87915 16.2947 8.87915C16.0305 8.87915 15.7771 8.98369 15.5897 9.16994L11.9997 12.7099L8.4597 9.16994C8.27234 8.98369 8.01889 8.87915 7.7547 8.87915C7.49052 8.87915 7.23707 8.98369 7.0497 9.16994C6.95598 9.26291 6.88158 9.37351 6.83081 9.49537C6.78004 9.61723 6.75391 9.74793 6.75391 9.87994C6.75391 10.012 6.78004 10.1427 6.83081 10.2645C6.88158 10.3864 6.95598 10.497 7.0497 10.5899L11.2897 14.8299C11.3827 14.9237 11.4933 14.9981 11.6151 15.0488C11.737 15.0996 11.8677 15.1257 11.9997 15.1257C12.1317 15.1257 12.2624 15.0996 12.3843 15.0488C12.5061 14.9981 12.6167 14.9237 12.7097 14.8299L16.9997 10.5899C17.0934 10.497 17.1678 10.3864 17.2186 10.2645C17.2694 10.1427 17.2955 10.012 17.2955 9.87994C17.2955 9.74793 17.2694 9.61723 17.2186 9.49537C17.1678 9.37351 17.0934 9.26291 16.9997 9.16994Z"
+        fill="#242424"
+      />
+    </svg>
+  );
+};
+
+export default Arrow;
diff --git a/src/assets/svgs/Change.svg b/src/assets/svgs/Change.svg
diff --git a/src/assets/svgs/Notification.svg b/src/assets/svgs/Notification.svg
diff --git a/src/assets/svgs/TimetableArrow.tsx b/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;
diff --git a/src/assets/svgs/Triangle.svg b/src/assets/svgs/Triangle.svg
diff --git a/src/components/Main/TeacherList/RequestList.tsx b/src/components/Main/TeacherList/RequestList.tsx
@@ -0,0 +1,108 @@
+import styled from "styled-components";
+import Change from "../../../assets/svgs/Change.svg";
+import Triangle from "../../../assets/svgs/Triangle.svg";
+
+const RequestList = () => {
+  return (
+    <_Wrapper>
+      <img src={Triangle} />
+      <_ListBox>
+        <_List>
+          <h3>손지원 선생님께서 시간표 변경을 요청하셨습니다</h3>
+          <_ChangeInfo>
+            <p>2022-12-19 (월) 1교시 수학</p>
+            <img src={Change} />
+            <p>2022-12-21 (수) 5교시 운동과 건강</p>
+          </_ChangeInfo>
+          <_ButtonLayout>
+            <_Button background="#FED267">수락</_Button>
+            <_Button background="#242424">취소</_Button>
+          </_ButtonLayout>
+        </_List>
+      </_ListBox>
+    </_Wrapper>
+  );
+};
+
+const _Wrapper = styled.div`
+  z-index: 2;
+  position: absolute;
+  top: 43px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: -2px;
+
+  img {
+    z-index: 1;
+  }
+`;
+
+const _ListBox = styled.div`
+  cursor: default;
+  width: 450px;
+  height: 400px;
+  background: #ffffff;
+  box-shadow: 0px -4px 10px rgba(81, 81, 81, 0.25);
+  border-radius: 10px;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const _List = styled.li`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 5px;
+  width: 435px;
+  padding-left: 15px;
+  height: 110px;
+  background: #ffffff;
+  border-bottom: 1px solid #e8e8e8;
+
+  h3 {
+    font-weight: 600;
+    font-size: 15px;
+    color: #242424;
+  }
+`;
+
+const _ChangeInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  p {
+    font-weight: 500;
+    font-size: 14px;
+    color: #7a7a7a;
+  }
+`;
+
+const _ButtonLayout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+interface buttonProps {
+  background: string;
+}
+
+const _Button = styled.button<buttonProps>`
+  cursor: pointer;
+  width: 80px;
+  height: 32px;
+  background: ${(props) => props.background};
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  color: #ffffff;
+  border: none;
+`;
+
+export default RequestList;
diff --git a/src/components/Main/TeacherList/TeacherFunction.tsx b/src/components/Main/TeacherList/TeacherFunction.tsx
@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import RequestList from "./RequestList";
+import Notification from "../../../assets/svgs/Notification.svg";
+
+const TeacherFunction = () => {
+  return (
+    <_Wrapper>
+      <_ButtonBox>
+        <_Button background="#242424">수행평가 등록</_Button>
+        <_Button background="#FED267">시간표 변경</_Button>
+      </_ButtonBox>
+      <_Notification>
+        <span />
+        <img src={Notification} />
+        <RequestList />
+      </_Notification>
+    </_Wrapper>
+  );
+};
+
+const _Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+interface ButtonProps {
+  background: string;
+}
+
+const _ButtonBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+const _Button = styled.button<ButtonProps>`
+  cursor: pointer;
+  width: 130px;
+  height: 42px;
+  background: ${(props) => props.background};
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  color: #ffffff;
+  border: none;
+`;
+
+const _Notification = styled.button`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  width: 38px;
+  height: 38px;
+  background: #ffffff;
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
+  border-radius: 100px;
+  border: none;
+
+  span {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    right: 0px;
+    top: 0px;
+    background: #ff2c2c;
+    border-radius: 10px;
+  }
+`;
+
+export default TeacherFunction;