[2주차] 윤영준 미션 제출합니다.

src/App.css → src/app/App.css

@@ -11,36 +11,14 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh; /* 전체 화면 높이 */
-    background-color: #0000ff8d; /* 빨간색 기본 배경 */
+    background-color: #0000ff8d;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'SUIT-Regular', sans-serif;
 }
 
-.container {
-    z-index: 1;
-    width: 560px;
-    height: 560px;
-    display: flex;
-    border-radius: 28px;
-    background-color: white;
-    transition: width 0.5s ease; /* width 변화에 대한 전환 효과 */
-
-}
-@media (max-width: 768px) {
-
-    .background-overlay {
-        clip-path: polygon(0 0, 50% 0, 0 100%);
-    }
-
-    .container {
-        width: 360px;
-        height: 560px;
-        border-radius: 28px;
-    }
-}
 /* 사용자 정의 SweetAlert2 스타일 */
 .custom-popup {
     font-family: 'SUIT-Regular', sans-serif;
@@ -49,7 +27,6 @@ body {
     padding: 20px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
     overflow: hidden;
-    /* background: rgba(255, 255, 255, 0.95); 살짝 반투명 */
   }
 
 

src/App.js → src/app/App.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import './App.css';
-import CalendarContainer from './component/Calendar/CalendarContainer';
-import Task from './component/Task/Task';
+import CalendarContainer from '../component/Calendar/CalendarContainer';
+import Task from '../component/Task/Task';
+import styled from 'styled-components';
 
 function App() {
   // 선택된 날짜 상태 -> Date 객체 정의
@@ -18,11 +19,9 @@ function App() {
     setIsTaskModalOpen(false); // 모달 닫기
   };
 
-
-
   return (
     <>      
-      <div className='container'>
+      <Container>
         {/* Task가 보이는 상태면 달력을 숨기고, 그렇지 않으면 달력을 표시 */}
         {!isTaskModalOpen ? (
           <CalendarContainer onDateChange={handleDateChange} />
@@ -31,9 +30,22 @@ function App() {
             <Task selectedDate={selectedDate} handleCloseModal={handleCloseModal} />
           </>
         )}
-      </div>
+      </Container>
     </>
   );
 }
+const Container = styled.div`
+  z-index: 1;
+  width: 560px;
+  height: 560px;
+  border-radius: 28px;
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: width 0.5s ease;
+
+  @media (max-width: 768px) {
+    width: 360px;
+  }
+`;
 
 export default App;

src/component/Calendar/CalendarContainer.js

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import Calendar from 'react-calendar';
 import styled from 'styled-components';
 import './custom-calendar.css'; // 커스텀 CSS 파일
-import { getTodoProgressForDate } from '../../utils/LocalStorage';
+import { getTodoProgressForDate } from '../../utils/LocalStorageUtil';
+import CustomHeader from './components/CustomHeader';
 
 
 function CalendarContainer({ onDateChange }) {
@@ -55,24 +56,12 @@ function CalendarContainer({ onDateChange }) {
   return (
     <>      
       <Wrapper>
-        <CustomHeader>
-          <ColorBox>
-            <span className='today'>Today</span>
-            <span className='great'>Great</span>
-            <span className='sorry'>Sorry</span>
-          </ColorBox>
-          <Title>
-            <h2>To Do Calendar</h2>
-            <span>({date.toISOString().split('T')[0]})</span>
-          </Title>
-          <SelectMonth value={month} onChange={handleMonthChange}>
-            {Array.from({ length: 12 }, (_, i) => (
-              <option key={i} value={i}>
-                {new Date(0, i).toLocaleString('en-US', { month: 'long' })} {/* 월 이름 표시 */}
-              </option>
-            ))}
-          </SelectMonth>
-        </CustomHeader>
+        <CustomHeader
+          date={date} 
+          month={month} 
+          setDate={setDate} 
+          handleMonthChange={handleMonthChange} 
+        />
         <Calendar
           locale='en-GB' // 영국 버전 -> 월요일부터 시작
           onChange={handleChange}
@@ -81,12 +70,11 @@ function CalendarContainer({ onDateChange }) {
           tileClassName={getTileClassName} // tileClassName 속성 사용
           showNeighboringMonth={true} // 이전 및 다음 달 날짜 표시
           showNavigation={false}  // 기본 네비게이션 숨기기
-
         />
       </Wrapper>
     </>
   );
-            }
+}
 const Wrapper = styled.div`
   box-sizing: border-box;
   display: flex;
@@ -108,87 +96,4 @@ const TodoProgress = styled.div`
   margin-top: 5px;
 
 `;
-const CustomHeader = styled.div`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 100%;
-  height: 10%;
-  margin-top: 10px;
-  margin-bottom: 10px;
-
-`;
-const ColorBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  span {
-    width: 50px;
-    height: 20px;
-    border-radius: 10px;
-    padding: 5px;
-    text-align: center;
-    font-size: 0.75rem;
-    color: white;
-  }
-  @media (max-width: 768px) {
-    span {
-      width: 35px;
-      height: 15px;
-      font-size: 0.5rem;
-
-    }
-  }
-  .today {
-    background-color: #FF8200;
-  }
-  .great {
-    background-color: #32AAFF;
-  }
-  .sorry {
-    background-color: #FF5A5A;
-  }
-`;
-const Title = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  font-family: "Sofadi One", system-ui;
-  font-weight: 400;
-  font-style: normal;
-  color: rgb(62, 76, 247);
-  h2 {
-    font-size: 1.5rem;
-    margin: 0;
-    @media (max-width: 768px) {
-      font-size: 1.2rem;
-    }
-  }
-  span {
-    font-size: 0.75rem;
-    @media (max-width: 768px) {
-      font-size: 0.6rem;
-    }
-  }
-`;
-
-const SelectMonth = styled.select`
-  padding: 5px;
-  font-size: 1rem;
-  border: none;
-  color: rgb(62, 76, 247);
-  background-color: transparent;
-  box-shadow: inset 0 -1px 0 0 rgb(62, 76, 247);
-  &:focus {
-    outline: none;
-  }
-  @media (max-width: 768px) {
-    font-size: 0.75rem;
-  }
-`;
-
 export default CalendarContainer;

src/component/Calendar/components/CustomHeader.js

@@ -0,0 +1,107 @@
+import React from "react";
+import styled from "styled-components";
+
+export default function CustomHeader({ date, setDate, month, handleMonthChange }) {
+  return (
+    <Wrapper>
+        <ColorBox>
+            <span className='today'>Today</span>
+            <span className='great'>Great</span>
+            <span className='sorry'>Sorry</span>
+        </ColorBox>
+        <Title>
+            <h2>To Do Calendar</h2>
+            <span>({date.toISOString().split('T')[0]})</span>
+        </Title>
+        <SelectMonth value={month} onChange={handleMonthChange}>
+            {Array.from({ length: 12 }, (_, i) => (
+                <option key={i} value={i}>
+                {new Date(0, i).toLocaleString('en-US', { month: 'long' })} {/* 월 이름 표시 */}
+                </option>
+            ))}
+        </SelectMonth>
+    </Wrapper>
+  );
+}
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+const ColorBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  span {
+    width: 50px;
+    height: 20px;
+    border-radius: 10px;
+    padding: 5px;
+    text-align: center;
+    font-size: 0.75rem;
+    color: white;
+  }
+  @media (max-width: 768px) {
+    span {
+      width: 35px;
+      height: 15px;
+      font-size: 0.5rem;
+
+    }
+  }
+  .today {
+    background-color: #FF8200;
+  }
+  .great {
+    background-color: #32AAFF;
+  }
+  .sorry {
+    background-color: #FF5A5A;
+  }
+`;
+const Title = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  font-family: "Sofadi One", system-ui;
+  font-weight: 400;
+  font-style: normal;
+  color: rgb(62, 76, 247);
+  h2 {
+    font-size: 1.5rem;
+    margin: 0;
+    @media (max-width: 768px) {
+      font-size: 1.2rem;
+    }
+  }
+  span {
+    font-size: 0.75rem;
+    @media (max-width: 768px) {
+      font-size: 0.6rem;
+    }
+  }
+`;
+
+const SelectMonth = styled.select`
+  padding: 5px;
+  font-size: 1rem;
+  border: none;
+  color: rgb(62, 76, 247);
+  background-color: transparent;
+  box-shadow: inset 0 -1px 0 0 rgb(62, 76, 247);
+  &:focus {
+    outline: none;
+  }
+  @media (max-width: 768px) {
+    font-size: 0.75rem;
+  }
+`;

src/component/Calendar/custom-calendar.css

@@ -142,6 +142,10 @@
         border-radius: 10px;
         background-color: #32AAFF;
     }
+    div {
+        color: #32AAFF;
+        border-bottom: 1px solid #32AAFF;
+    }
 }
 .sorry {
     abbr {