feat: #50-사이드 네비게이션 datepicker 추가

package.json

@@ -8,7 +8,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
+    "react-datepicker": "^6.9.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.3",

src/components/SideNavigation/datePickerPopup.js

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect } from "react";
+import styled from "styled-components";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+const PopupContainer = styled.div`
+  position: absolute;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+`;
+
+const DatePickerPopup = ({
+  startDate,
+  endDate,
+  onChange,
+  onClose,
+  position,
+}) => {
+  const popupRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popupRef.current && !popupRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [popupRef, onClose]);
+
+  return (
+    <PopupContainer ref={popupRef} style={position}>
+      <DatePicker
+        selected={startDate}
+        onChange={onChange}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+        inline
+      />
+    </PopupContainer>
+  );
+};
+
+export default DatePickerPopup;

src/components/SideNavigation/sideNavigation.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import {
   Checkbox,
   Item,
@@ -10,13 +10,12 @@ import {
   SectionTitle,
   SectionTitleRow,
   Title,
-} from "./styles";
-import {
   SearchInputContainer,
   SearchInput,
   SearchButton,
   SearchIcon,
 } from "./styles";
+import DatePickerPopup from "./datePickerPopup";
 
 const SideNavigation = ({ categoryObject }) => {
   const initialMainCategoryStates = categoryObject.reduce((acc, category) => {
@@ -46,6 +45,10 @@ const SideNavigation = ({ categoryObject }) => {
   const [subCategoryVisibility, setSubCategoryVisibility] = useState(
     initialSubCategoryVisibility,
   );
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const dateButtonRef = useRef(null);
 
   const handleMainCategoryCheckbox = (kind) => {
     const futureStateOfMain = !mainCategoryStates[kind];
@@ -73,6 +76,27 @@ const SideNavigation = ({ categoryObject }) => {
     setMainCategoryStates(initialMainCategoryStates);
     setSubCategoryStates(initialSubCategoryStates);
     setSubCategoryVisibility(initialSubCategoryVisibility);
+    setStartDate(null);
+    setEndDate(null);
+    setIsDatePickerVisible(false);
+  };
+
+  const handleDateChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    setIsDatePickerVisible(false);
+  };
+
+  const getPosition = () => {
+    if (dateButtonRef.current) {
+      const rect = dateButtonRef.current.getBoundingClientRect();
+      return {
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+      };
+    }
+    return {};
   };
 
   return (
@@ -102,12 +126,34 @@ const SideNavigation = ({ categoryObject }) => {
         모집 기간
       </Title>
       <SearchInputContainer>
-        <SearchInput type="text" placeholder="기간 검색" />
-        <SearchButton>
+        <SearchInput
+          type="text"
+          placeholder="기간 검색"
+          value={
+            startDate && endDate
+              ? `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`
+              : ""
+          }
+          readOnly
+        />
+        <SearchButton
+          ref={dateButtonRef}
+          onClick={() => setIsDatePickerVisible(!isDatePickerVisible)}
+        >
           <SearchIcon src="icons/calendar.svg" alt="Calendar" />
         </SearchButton>
       </SearchInputContainer>
 
+      {isDatePickerVisible && (
+        <DatePickerPopup
+          startDate={startDate}
+          endDate={endDate}
+          onChange={handleDateChange}
+          onClose={() => setIsDatePickerVisible(false)}
+          position={getPosition()}
+        />
+      )}
+
       {/* 직종 분류 섹션 */}
       <Title style={{ textAlign: "left", marginTop: "20px" }}>직종 분류</Title>
       {categoryObject.map((category) => (

src/components/SideNavigation/styles.js

@@ -87,6 +87,7 @@ export const WriteButton = styled.div`
     color: white;
   }
 `;
+
 export const SearchInputContainer = styled.div`
   display: flex;
   align-items: center;
@@ -98,8 +99,6 @@ export const SearchInput = styled.input`
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  background-color: #f3f3f3;
-  font-size: 14px;
 `;
 
 export const SearchButton = styled.button`