feat: #247 기간 조정 컴포넌트

src/components/DaterangePicker/DaterangePicker.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import * as S from './DaterangePicker.style';
+
+const DaterangePicker = () => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+
+  const handleDateChange = (date, type) => {
+    if (type === 'start') {
+      setStartDate(date);
+    } else if (type === 'end') {
+      setEndDate(date);
+    }
+  };
+
+  return (
+    <>
+      <S.Wrapper>
+        <S.Container>
+          <S.Label>행사 기간</S.Label>
+          <S.StyledDatePicker
+            onSelect={(date) => handleDateChange(date, 'start')}
+            selected={startDate}
+            dateFormat="yyyy-MM-dd"
+            placeholderText={startDate}
+          />
+          <S.TildeIcon />
+          <S.StyledDatePicker
+            onSelect={(date) => handleDateChange(date, 'end')}
+            selected={endDate}
+            dateFormat="yyyy-MM-dd"
+            placeholderText={endDate}
+          />
+        </S.Container>
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default DaterangePicker;

src/components/DaterangePicker/DaterangePicker.style.js

@@ -0,0 +1,50 @@
+import { BREAKPOINTS } from '@/styles';
+import DatePicker from 'react-datepicker';
+import { PiTildeBold } from 'react-icons/pi';
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const Label = styled.div`
+  display: flex;
+  color: #6b6b6b;
+  font-size: 20px;
+
+  @media (max-width: ${BREAKPOINTS[1]}px) {
+    display: none;
+  }
+`;
+
+export const StyledDatePicker = styled(DatePicker)`
+  border: none;
+  background-color: #f8f8f8;
+  padding: 10px 0 10px 20px;
+  height: 24px;
+  width: 128px;
+  font-size: 18px;
+  position: relative;
+  border-radius: 10px;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const TildeIcon = styled(PiTildeBold)`
+  color: #2f7cef;
+
+  @media (max-width: ${BREAKPOINTS[1]}px) {
+    display: none;
+  }
+`;

src/components/DaterangePicker/index.js

@@ -0,0 +1 @@
+export { default as DaterangePicker } from './DaterangePicker';