[2주차] 송유선 미션 제출합니다.

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "moment": "^2.30.1",
     "pretendard": "^1.3.9",
     "react": "^18.3.1",
     "react-calendar": "^5.0.0",

src/App.js

@@ -15,8 +15,8 @@ function App() {
   useEffect(() => {
     const today = new Date();
     const year = today.getFullYear();
-    const month = today.getMonth() + 1;
-    const day = today.getDate();
+    const month = String(today.getMonth() + 1).padStart(2, "0");
+    const day = String(today.getDate()).padStart(2, "0");
     const formattedToday = `${year}-${month}-${day}`;
     setDate(formattedToday);
   }, []);
@@ -51,7 +51,9 @@ function App() {
           date={date}
           setProgress={setProgress}
         />
-        {showCalendar && <TodoCalendar setDate={setDate} progress={progress} />}
+        {showCalendar && (
+          <TodoCalendar setDate={setDate} progress={progress} todos={todos} />
+        )}
       </TodoContainer>
       <FloatingButton onClick={toggleCalendar}>📅</FloatingButton>
     </>
@@ -72,15 +74,14 @@ const TodoContainer = styled.div`
 
 const FloatingButton = styled.button`
   position: fixed;
-  right: 20px;
-  bottom: 20px;
+  right: 40px;
+  bottom: 30px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  background-color: #ff3898;
+  background-color: #ff3898af;
   color: white;
   font-size: 24px;
   border: none;
   cursor: pointer;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 `;

src/components/ProgressBar.jsx

@@ -4,7 +4,9 @@ import styled from "styled-components";
 const ProgressBar = ({ progress }) => {
   return (
     <ProgressBarWrapper>
-      <Progress style={{ width: `${progress}%` }} />
+      <Progress style={{ width: `${progress}%` }}>
+        {progress > 0 && progress < 100 && <Tooltip>{`${progress}%`}</Tooltip>}
+      </Progress>
     </ProgressBarWrapper>
   );
 };
@@ -14,14 +16,29 @@ export default ProgressBar;
 const ProgressBarWrapper = styled.div`
   width: 100%;
   height: 20px;
-  background-color: white;
+  background-color: #ffffff1a;
   border-radius: 10px;
   margin-top: 20px;
 `;
 
 const Progress = styled.div`
+  position: relative;
   height: 100%;
   background-color: #ff3898;
   border-radius: inherit;
   transition: width 0.3s ease-in-out;
 `;
+
+const Tooltip = styled.div`
+  position: absolute;
+  right: -14px;
+  top: -33px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #24d46d;
+  padding: 4px 6px;
+  border-radius: 5px;
+  border: 0.3px solid #24d46d;
+  background: #ffffff1a;
+  z-index: 1;
+`;

src/components/TodoCalendar.jsx

@@ -3,19 +3,36 @@ import Calendar from "react-calendar";
 import styled from "styled-components";
 import "react-calendar/dist/Calendar.css";
 import ProgressBar from "./ProgressBar";
+import moment from "moment";
 
-const TodoCalendar = ({ setDate, progress }) => {
+const TodoCalendar = ({ setDate, todos, progress }) => {
   const handleDateChange = (selectedDate) => {
     const year = selectedDate.getFullYear();
-    const month = selectedDate.getMonth() + 1;
-    const day = selectedDate.getDate();
+    const month = String(selectedDate.getMonth() + 1).padStart(2, "0");
+    const day = String(selectedDate.getDate()).padStart(2, "0");
     const formattedDate = `${year}-${month}-${day}`;
     setDate(formattedDate);
   };
 
   return (
     <CalendarWrapper>
-      <Calendar onChange={handleDateChange} />
+      <Calendar
+        locale="ko"
+        onChange={handleDateChange}
+        next2Label={null}
+        prev2Label={null}
+        formatDay={(locale, date) => moment(date).format("DD")}
+        showNeighboringMonth={false}
+        minDetail="year"
+        tileContent={({ date }) => {
+          const existTodos = todos.some(
+            (todo) => todo.date === moment(date).format("YYYY-MM-DD")
+          );
+          return existTodos ? (
+            <StyledDot key={moment(date).format("YYYY-MM-DD")} />
+          ) : null;
+        }}
+      />
       <ProgressBar progress={progress} />
     </CalendarWrapper>
   );
@@ -26,4 +43,91 @@ export default TodoCalendar;
 const CalendarWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  height: 95%;
+  justify-content: space-evenly;
+
+  .react-calendar {
+    background-color: #ffffff1a;
+    border: none;
+    border-radius: 2rem;
+    color: white;
+    padding: 3% 5%;
+  }
+
+  .react-calendar__month-view {
+    abbr {
+      color: white;
+    }
+  }
+
+  .react-calendar__navigation {
+    justify-content: center;
+  }
+
+  .react-calendar__navigation button {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #ff3898;
+  }
+
+  .react-calendar__navigation button:focus,
+  .react-calendar__navigation button:hover,
+  .react-calendar__navigation button:disabled {
+    background-color: none;
+    border-radius: 0.8rem;
+  }
+
+  .react-calendar__month-view__weekdays abbr {
+    text-decoration: none;
+    font-weight: 800;
+  }
+
+  .react-calendar__month-view__weekdays__weekday abbr {
+    color: #cb84a6;
+  }
+
+  .react-calendar__tile--now {
+    background: none;
+    abbr {
+      color: #ff3898;
+    }
+  }
+
+  .react-calendar__year-view__months__month {
+    border-radius: 0.8rem;
+    background-color: none;
+    padding: 0;
+  }
+
+  .react-calendar__tile--hasActive {
+    background-color: ${(props) => props.theme.primary_2};
+    abbr {
+      color: none;
+    }
+  }
+
+  .react-calendar__tile {
+    padding: 5px 0px 18px;
+    position: relative;
+  }
+
+  .react-calendar__tile:enabled:hover,
+  .react-calendar__tile:enabled:focus,
+  .react-calendar__tile--active {
+    background-color: #ff38981e;
+    border-radius: 0.3rem;
+  }
+`;
+
+export const StyledCalendar = styled(Calendar)``;
+
+export const StyledDot = styled.div`
+  background-color: #ff3898;
+  border-radius: 50%;
+  width: 0.3rem;
+  height: 0.3rem;
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  transform: translateX(-50%);
 `;

src/components/TodoContent.jsx

@@ -13,7 +13,8 @@ const TodoContent = ({ todos, setTodos, date, setProgress }) => {
 
   const todoCount = useMemo(() => {
     const doneCount = todos.filter((todo) => todo.done).length;
-    const progress = todos.length === 0 ? 0 : (doneCount / todos.length) * 100;
+    const progress =
+      todos.length === 0 ? 0 : Math.round((doneCount / todos.length) * 100);
     setProgress(progress);
 
     return `${doneCount} / ${todos.length}`;