feat: calendar UI 완성(#25)

codesquad-members-2021 · May 28, 2021 · be22654 · be22654
1 parent 50ed0ef
commit be22654
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 83 deletions.
diff --git a/frontend/src/components/SearchBar/Calendar/CalendarModal.tsx b/frontend/src/components/SearchBar/Calendar/CalendarModal.tsx
@@ -1,16 +1,10 @@
 import { useRecoilValue } from 'recoil';
-import { calendarModalState } from 'recoil/Atoms';
 import * as S from "components/SearchBar/Calendar/CalendarStyles";
+import MonthlyCalendar from 'components/SearchBar/Calendar/MonthlyCalendar';
 
 const CalendarModal = () => {
-  const { year, month, today } = useRecoilValue(calendarModalState);
-  const daysOfWeek: string[] = ["일", "월", "화", "수", "목", "금", "토"];
-  const startDay: number = new Date(year, month, 1).getDay();
-  const endDate: number = new Date(year, month, 0).getDate();
-  const emptyDates: (number | string)[] = Array(startDay).fill("");
-  const filledDates = Array.from({ length : endDate },(_, i) => i + 1);
-  const dates = [...emptyDates, ...filledDates];
-  const calendarTemplate = dates.map((date, idx) => <div key={'date-' + idx}>{date}</div>)
+  const monthTypes: string[] = ["PREVIOUS", "CURRENT", "NEXT", "MONTH_AFTER_NEXT"];
+
   return (
     <S.CalendarModalLayout>
       <S.CalendarSelector>
@@ -19,28 +13,17 @@ const CalendarModal = () => {
           <button>자유로운 일정</button>
         </div>
       </S.CalendarSelector>
-      <S.CalendarLayout>
-        <div className="title-container">
-          <S.CurrentMonth>
-            <div className="calendar-container" style={{ width: "100%" }}>
-              <S.LeftArrowBtn>
-                <S.RiArrowLeftSLine/>
-              </S.LeftArrowBtn>
-              <div className="year_and_month">{year}년 {month}월</div>
-              <div className="days">{daysOfWeek.map(day => <span>{day}</span>)}</div>
-              <div className="dates">{calendarTemplate}</div>
-            </div>
-          </S.CurrentMonth>
-          <S.NextMonth>
-            <div>
-              <div className="year_and_month">{year}년 {month + 1}월</div>
-              <S.RightArrowBtn>
-                <S.RiArrowRightSLine/>
-              </S.RightArrowBtn>
-            </div>
-          </S.NextMonth>
-        </div>
-      </S.CalendarLayout>
+      <S.LeftArrowBtn>
+        <S.RiArrowLeftSLine/>
+      </S.LeftArrowBtn>
+      <S.RightArrowBtn>
+              <S.RiArrowRightSLine/>
+            </S.RightArrowBtn>
+      <S.MonthlyCalendarContainer>
+      {monthTypes.map((_, idx) =>
+        <MonthlyCalendar monthType={monthTypes[idx]}/>
+      )}
+      </S.MonthlyCalendarContainer>
     </S.CalendarModalLayout>
   );
 };

diff --git a/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx b/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx
@@ -14,10 +14,7 @@ const CalendarModalLayout = styled.div`
   background: #ffffff;
   box-shadow: rgb(0 0 0 / 20%) 0px 6px 20px;
   border-radius: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
+
 `;
 
 const CalendarSelector = styled.div`
@@ -59,22 +56,20 @@ const CalendarSelector = styled.div`
 
 const CalendarLayout = styled.div`
   /* outline: red solid 1px; */
-  width: 90%;
-  margin: 1.6rem;
+  /*margin: 1.6rem;*/
   padding: 1.5rem;
   font-size: 1.6rem;
   font-weight: 600;
 
   .title-container {
     width: 100%;
-    display: flex;
   }
 `;
 
 const LeftArrowBtn = styled.button`
   position: absolute;
-  left: 0;
-  top: 0;
+  left: 3rem;
+  top: 2rem;
   width: 2rem;
   height: 2rem;
   border: none;
@@ -84,17 +79,16 @@ const LeftArrowBtn = styled.button`
   &:hover {
     background-color: rgb(247, 247, 247);
   }
-
   & > svg {
-    height: 1.2rem;
-    width: 1.2rem;
+    height: 2.5rem;
+    width: 2.5rem;
   }
 `;
 
 const RightArrowBtn = styled.button`
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 3rem;
+  top: 2rem;
   width: 2rem;
   height: 2rem;
   border: none;
@@ -106,18 +100,14 @@ const RightArrowBtn = styled.button`
   }
 
   & > svg {
-    height: 1.2rem;
-    width: 1.2rem;
+    height: 2.5rem;
+    width: 2.5rem;
   }
 `;
 
 const CurrentMonth = styled.div`
-  display: flex;
-  border: 1px solid green;
-  width: 50%;
-  text-align: center;
-  flex-direction: column;
-
+  /*border: 1px solid green;*/
+  
   .calendar-container {
     width: 100%;
   }
@@ -132,6 +122,7 @@ const CurrentMonth = styled.div`
     padding-top: 0.5rem;
     margin: 0 auto;
     width: auto;
+    text-align: center;
     height: 2rem;
   }
 
@@ -163,27 +154,12 @@ const CurrentMonth = styled.div`
   }
 `;
 
-const NextMonth = styled.div`
-  display: flex;
-  border: 1px solid green;
-  width: 50%;
-  text-align: center;
-  flex-direction: column;
-
-  &:last-child {
-    position: relative;
-    display: flex;
-    /* border: 1px solid pink; */
-    align-items: center;
-  }
-
-  .year_and_month {
-    padding-top: 0.5rem;
-    margin: 0 auto;
-    width: auto;
-    height: 2rem;
-  }
-`;
+const MonthlyCalendarContainer = styled.div`
+  //각 달의 달력들을 가로로 쭈욱 가지고 있는 애
+  display: grid;
+  width: 200%;
+  grid-template-columns: repeat(4, 1fr);
+`
 
 export {
   CalendarModalLayout,
@@ -192,7 +168,7 @@ export {
   LeftArrowBtn,
   RightArrowBtn,
   CurrentMonth,
-  NextMonth,
   RiArrowLeftSLine,
   RiArrowRightSLine,
+  MonthlyCalendarContainer
 };
diff --git a/frontend/src/components/SearchBar/Calendar/MonthlyCalendar.tsx b/frontend/src/components/SearchBar/Calendar/MonthlyCalendar.tsx
@@ -0,0 +1,37 @@
+import { useRecoilValue } from 'recoil';
+import { calendarModalState } from 'recoil/Atoms';
+import * as S from "components/SearchBar/Calendar/CalendarStyles";
+
+interface MonthProps {
+    monthType: string
+}
+
+const MonthlyCalendar:React.FunctionComponent<MonthProps> = ({monthType}) => {
+  const { year, month, today} = useRecoilValue(calendarModalState);
+  const daysOfWeek: string[] = ["일", "월", "화", "수", "목", "금", "토"];
+  const startDay: number = new Date(year, month, 1).getDay();
+  const endDate: number = new Date(year, month, 0).getDate();
+  const emptyDates: (number | string)[] = Array(startDay).fill("");
+  const filledDates = Array.from({ length : endDate },(_, i) => i + 1);
+  const dates = [...emptyDates, ...filledDates];
+  const calendarTemplate = dates.map((date, idx) => <div key={'date-' + idx}>{date}</div>)
+  console.log(monthType);
+
+  return (
+      <S.CalendarLayout>
+        <div className="title-container">
+          <S.CurrentMonth>
+            <div className="calendar-container">
+
+              <div className="year_and_month">{year}년 {month}월</div>
+              <div className="days">{daysOfWeek.map(day => <span>{day}</span>)}</div>
+              <div className="dates">{calendarTemplate}</div>
+            </div>
+          </S.CurrentMonth>
+        </div>
+      </S.CalendarLayout>
+  );
+};
+
+export default MonthlyCalendar;
+
diff --git a/...src/components/SearchBar/Calendar/Old.tsx → .../src/components/SearchBar/Calendar/Old.md b/...src/components/SearchBar/Calendar/Old.tsx → .../src/components/SearchBar/Calendar/Old.md
@@ -1,3 +1,5 @@
+export {};
+/*
 import * as S from "components/SearchBar/Calendar/CalendarStyles";
 import moment, { Moment } from "moment";
 import 'moment/locale/ko';
@@ -60,3 +62,4 @@ const CalendarModal = () => {
 
 export default CalendarModal;
 
+*/
diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -11,20 +11,15 @@ import {
   useSetRecoilState,
 } from "recoil";
 import React, { useState, useEffect } from "react";
-import { searchBarClickState, checkInClickState } from "recoil/Atoms";
+import { searchBarClickState } from "recoil/Atoms";
 
 const SearchBar = () => {
   // const Reset = useResetRecoilState(searchBarClickState);
   const setsSearchBarClick = useSetRecoilState(searchBarClickState);
-  const checkInTest = useRecoilValue(checkInClickState);
 
   useEffect(() => {
-    console.log(checkInTest);
-    if (checkInTest) document.body.addEventListener("click", ClosePopup);
-    return function cleanup() {
-      document.body.removeEventListener("click", ClosePopup);
-    };
-  }, [checkInTest]);
+    document.body.addEventListener("click", ClosePopup);
+  }, []);
 
   const ClosePopup = (e: MouseEvent): void => {
     console.log(33);