feat: 달력 스타일 커스텀

review-with-ai · Aug 8, 2024 · 233ca1c · 233ca1c
1 parent 3c1d19b
commit 233ca1c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 38 deletions.
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Box } from '@chakra-ui/react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import '@/shared/components/Calendar/CustomCalendar.css';
@@ -18,17 +17,8 @@ export const Home = () => {
     <>
       <Nav />
       <Body>
-        <Box
-          style={{
-            margin: 0,
-            padding: '0 47px',
-            paddingRight: '35px',
-            width: '100%',
-          }}
-        >
-          <h1>home</h1>
-          <NoteList />
-        </Box>
+        <h1>home</h1>
+        <NoteList />
       </Body>
       <HomeAside>
         <Calendar
@@ -38,9 +28,6 @@ export const Home = () => {
           calendarType="gregory"
           value={date}
           onChange={onChangeDate}
-          style={{
-            border: 'none',
-          }}
         />
       </HomeAside>
     </>

diff --git a/src/shared/components/Calendar/CustomCalendar.css b/src/shared/components/Calendar/CustomCalendar.css
@@ -6,21 +6,24 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    font-family: 'Pretendard-Regular', sans-serif;
 }
 
-
 .react-calendar button:enabled:hover {
     cursor: pointer;
 }
 
 .react-calendar__navigation {
     display: flex;
-    height: 44px;
-    margin-bottom: 1em;
+    height: 24px;
+    margin-bottom: 14px;
+    font-family: 'Pretendard-Bold', sans-serif;
+    font-size: 20px;
+    font-weight: bold;
 }
 
 .react-calendar__navigation button {
-    min-width: 44px;
+    min-width: 24px;
     background: none;
 }
 
@@ -35,10 +38,8 @@
 
 .react-calendar__month-view__weekdays {
     text-align: center;
-    text-transform: uppercase;
-    font: inherit;
-    font-size: 0.75em;
-    font-weight: bold;
+    font-size: 14px;
+    font-weight: 500;
 }
 
 .react-calendar__month-view__weekdays__weekday {
@@ -50,7 +51,7 @@
     align-items: center;
     justify-content: center;
     font: inherit;
-    font-size: 0.75em;
+    font-size: 14px;
     font-weight: bold;
 }
 
@@ -61,7 +62,7 @@
 .react-calendar__month-view__days__day--neighboringMonth,
 .react-calendar__decade-view__years__year--neighboringDecade,
 .react-calendar__century-view__decades__decade--neighboringCentury {
-    color: unset;
+    color: #c7c7c7;
 }
 
 .react-calendar__year-view .react-calendar__tile,
@@ -72,12 +73,12 @@
 
 .react-calendar__tile {
     max-width: 100%;
-    padding: 10px 6.6667px;
+    padding: 10px 6px;
     background: none;
     text-align: center;
     line-height: 16px;
     font: inherit;
-    font-size: 0.833em;
+    font-size: 14px;
 }
 
 .react-calendar__tile:disabled {
@@ -87,7 +88,7 @@
 .react-calendar__month-view__days__day--neighboringMonth:disabled,
 .react-calendar__decade-view__years__year--neighboringDecade:disabled,
 .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
-    color: #cdcdcd;
+    color: #b92f2f;
 }
 
 .react-calendar__tile:enabled:hover,
@@ -112,13 +113,13 @@
 
 .react-calendar__tile--hasActive {
     background: #E3E3E3;
-    /*border-radius: 0;*/
+    border-radius: 0;
 }
 
 .react-calendar__tile--hasActive:enabled:hover,
 .react-calendar__tile--hasActive:enabled:focus {
     background: #E3E3E3;
-    border-radius: 50%;
+    border-radius: 0;
 }
 
 .react-calendar__tile--active {
@@ -137,3 +138,6 @@
     background-color: #e6e6e6;
     border-radius: 0;
 }
+
+.react-calendar__tile abbr {
+}
diff --git a/src/shared/components/Layout/Body.tsx b/src/shared/components/Layout/Body.tsx
@@ -9,5 +9,7 @@ export const Body = ({ children }: NoteProps) => <Container>{children}</Containe
 const Container = styled.div`
   width: 100%;
   height: 100vh;
+  padding: 0 47px;
+  padding-right: 35px;
   border: 1px solid purple;
 `;
diff --git a/src/shared/components/Layout/HomeAside.tsx b/src/shared/components/Layout/HomeAside.tsx
@@ -7,7 +7,8 @@ type HomeAsideProps = {
 export const HomeAside = ({ children }: HomeAsideProps) => <Container>{children}</Container>;
 
 const Container = styled.div`
-  width: 280px;
+  width: 300px;
   height: 100vh;
+  padding: 20px;
   border: 1px solid purple;
 `;
diff --git a/src/shared/components/Layout/Navigation.tsx b/src/shared/components/Layout/Navigation.tsx
@@ -7,7 +7,14 @@ type NavigationProps = {
 export const Navigation = ({ children }: NavigationProps) => <Container>{children}</Container>;
 
 const Container = styled.div`
-  width: 220px;
-  height: 100vh;
+  width: 230px;
   border: 1px solid blue;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1200;
+  flex-shrink: 0;
+  height: 100%;
+  min-width: 222px;
+  max-width: 400px;
 `;
diff --git a/src/shared/components/Nav/Nav.tsx b/src/shared/components/Nav/Nav.tsx
@@ -1,4 +1,4 @@
-import { Box, Image } from '@chakra-ui/react';
+import { Flex, Image } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { NavButton, NavContent, NavFooter, Navigation, PATH } from '@/shared';
@@ -47,17 +47,17 @@ export const Nav = () => {
   return (
     <Navigation>
       <Container>
-        <Box
+        <Flex
           width="100%"
-          height="auto"
           onClick={handleClickHome}
           style={{
-            paddingLeft: '10px',
+            padding: '0 20px 10px',
+            paddingLeft: '24px',
             cursor: 'pointer',
           }}
         >
           <Image src="/src/assets/logo.svg" alt="복습할고양 로고" />
-        </Box>
+        </Flex>
         <NavButton onNote={handleClickNewNote} />
         <NavContent onHome={handleClickHome} onTrash={handleClickTrash} />
         <NavFooter onLogout={handleClickLogout} onSetting={handleClickSetting} />
@@ -70,5 +70,6 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
   flex: 1, 1;
 `;