Feature/#205 DatePicker 구현 (#209)

* chore: react-datepicker 추가

#205

* feat: DatePicker 구현

#205

* refactor: 폴더 이름 변경

#205

* fix: _focus 대신 _groupFocusWithin 사용

#205

* feat: wrapperClassName 추가하여 부모 너비 따라가도록 설정

#205

package.json

@@ -18,6 +18,7 @@
     "jotai": "^2.6.1",
     "next": "14.0.4",
     "react": "^18",
+    "react-datepicker": "^6.6.0",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "react-textarea-autosize": "^8.5.3",

src/components/StyledDatePicker/index.tsx

@@ -0,0 +1,36 @@
+import { Input, InputGroup, Icon, InputRightElement, Box } from '@chakra-ui/react';
+import DatePicker from 'react-datepicker';
+import { BiCalendar } from 'react-icons/bi';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import './style.css';
+import { StyledDatePickerProps } from './types';
+
+const StyledDatePicker = ({ label, selectedDate, onChange }: StyledDatePickerProps) => {
+  return (
+    <Box w="100%" role="group">
+      <DatePicker
+        selected={selectedDate}
+        onChange={onChange}
+        wrapperClassName="styled_date_picker"
+        customInput={
+          <InputGroup w="100%">
+            <Input
+              textStyle="bold_xl"
+              _hover={{ cursor: 'pointer' }}
+              _placeholder={{ color: 'white' }}
+              placeholder={label}
+              readOnly
+              value={selectedDate ? selectedDate.toLocaleDateString() : ''}
+            />
+            <InputRightElement _hover={{ cursor: 'pointer' }}>
+              <Icon as={BiCalendar} textStyle="bold_xl" mr="5" color="gray.50" />
+            </InputRightElement>
+          </InputGroup>
+        }
+      />
+    </Box>
+  );
+};
+
+export default StyledDatePicker;

src/components/StyledDatePicker/style.css

@@ -0,0 +1,3 @@
+.styled_date_picker {
+  width: 100%;
+}

src/components/StyledDatePicker/types.ts

@@ -0,0 +1,5 @@
+export interface StyledDatePickerProps {
+  label: string;
+  selectedDate: Date | null;
+  onChange: (date: Date | null) => void;
+}

src/theme/components/input.ts

@@ -14,7 +14,7 @@ const Input = defineMultiStyleConfig({
         bg: 'orange_light',
         color: 'white',
         rounded: '2xl',
-        _focus: {
+        _groupFocusWithin: {
           borderColor: 'orange',
           bg: 'orange',
         },