Merge pull request #66 from Leets-Official/fix/#65/Today박스크기-수정

[fix] #65 Today박스크기 UI수정하기
Leets-Official · Dec 14, 2023 · 24ac0fd · 24ac0fd
2 parents 8b3a504 + 486e6d6
commit 24ac0fd
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 13 deletions.
diff --git a/src/components/AdminNavBox.js b/src/components/AdminNavBox.js
@@ -12,7 +12,7 @@ import AttendanceCheck from "./Admin/AttendanceCheck";
 const Box = styled.div`
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 40%;
   height: 100%;
 `;
 
@@ -36,7 +36,7 @@ const TodayBox = styled.div`
   height: 70%;
   border-radius: 10px;
   column-gap: 1em;
-  margin: 0.55em;
+  margin: 10px;
   overflow-y: auto;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 `;

diff --git a/src/components/Attendance.js b/src/components/Attendance.js
@@ -6,8 +6,11 @@ import { useCookies } from "react-cookie";
 const Box = styled.div`
   display: flex;
   flex-direction: column;
-  width: 95%;
+  width: 60%;
   height: 100%;
+  @media screen and (max-width: 1200px) {
+    width: 100%;
+  }
 `;
 
 const Title = styled.div`
@@ -32,8 +35,9 @@ const AttendanceBox = styled.div`
   height: 70%;
   border-radius: 10px;
   font-size: 2em;
-  margin: 0.55em;
-  padding: 0.4em;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
   `;

diff --git a/src/components/Today.js b/src/components/Today.js
@@ -2,13 +2,13 @@ import React from "react";
 import styled from "styled-components";
 
 const Title = styled.div`
-  font-size: 30px;
+  font-size: 28px;
   color: #8c8c8c;
 `;
 const Box = styled.div`
   border-radius: 10px;
-  width: 600px;
-  height: 100px;
+  width: 90%;
+  height: 35%;
   background-color: #eeeeee;
   display: flex;
   padding-left : 20px;
@@ -18,7 +18,7 @@ const Box = styled.div`
 
 const TodayBox = styled.div`
   border-radius: 10px;
-  width: 600px;
+  width: 100%;
   font-family: "Noto Sans KR", sans-serif;
   font-weight: 700;
   display: flex;

diff --git a/src/components/TodayList.js b/src/components/TodayList.js
@@ -7,7 +7,7 @@ import { useCookies } from "react-cookie";
 const Box = styled.div`
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 40%;
   height: 100%;
 `;
 
@@ -31,7 +31,7 @@ const TodayBox = styled.div`
   width: 100%;
   height: 70%;
   border-radius: 10px;
-  margin: 1em;
+  margin: 10px;
   padding: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow-y: auto;

diff --git a/src/pages/Admin.js b/src/pages/Admin.js
@@ -16,7 +16,7 @@ const TDBox = styled.div`
   display: flex;
   width: 100%;
   height: 60%;
-  column-gap: 1em;
+  column-gap: 20px;
 `;
 const Admin = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);

diff --git a/src/pages/Main.js b/src/pages/Main.js
@@ -16,7 +16,7 @@ const TDBox = styled.div`
   display: flex;
   width: 100%;
   height: 60%;
-  column-gap: 3em;
+  column-gap: 40px;
 `;
 const Main = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);