feat: 개인일정추가 구현

Author: jane1107

src/components/MyCalendar/CreateEventButton.tsx

@@ -0,0 +1,53 @@
+import { useEventState } from '@/stores/myEventsStore.ts';
+import DialogButton from '@/components/common/DialogButton';
+import InputForm from '../common/InputForm';
+import { useState } from 'react';
+
+const CreateEventButton = () => {
+  const { addEvents } = useEventState();
+  const [eventTitle, setTitle] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const onTitleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+  };
+
+  const onStartDateChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStartDate(event.target.value);
+  };
+
+  const onEndDateChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEndDate(event.target.value);
+  };
+
+  const onCreateClicked = () => {
+    console.log('clicked! ', eventTitle, startDate, endDate);
+    if (eventTitle !== '' && startDate !== '' && endDate !== '')
+      addEvents({ title: eventTitle, start: startDate, end: endDate });
+  };
+
+  const eventForm = (
+    <div>
+      <InputForm title="일정 제목" placeholder="새 일정 제목" onChange={onTitleChanged} />
+      <InputForm title="시작 날짜" placeholder="YYYY-MM-DD" onChange={onStartDateChanged} />
+      <InputForm title="끝 날짜" placeholder="YYYY-MM-DD" onChange={onEndDateChanged} />
+      <hr className="m-4" />
+      <button className="btn w-full bg-primary text-base-100" onClick={onCreateClicked}>
+        추가하기
+      </button>
+    </div>
+  );
+  return (
+    <div className="p-8">
+      <DialogButton
+        classname="btn bg-primary text-base-100 w-full"
+        name={'새 일정 추가하기'}
+        title={'일정 추가'}
+        desc={' '}
+        children={eventForm}
+      />
+    </div>
+  );
+};
+export default CreateEventButton;

src/components/common/InputForm.tsx

@@ -9,7 +9,15 @@ interface Props extends HTMLProps<HTMLInputElement> {
   errorText?: string;
 }
 
-const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange, error = false, errorText = '', ...rest }) => {
+const InputForm: React.FC<Props> = ({
+  title,
+  placeholder,
+  hint = '',
+  onChange,
+  error = false,
+  errorText = '',
+  ...rest
+}) => {
   return (
     <label htmlFor={rest.id} className="form-control w-full">
       <div className="label">

src/pages/MyCalendarPage.tsx

@@ -1,4 +1,5 @@
 import Calendar from '../components/common/Calendar.tsx';
+import CreateEventButton from '@/components/MyCalendar/CreateEventButton.tsx';
 
 const MyCalendarPage: React.FC = () => {
   return (
@@ -52,6 +53,7 @@ const MyCalendarPage: React.FC = () => {
           </div>
         </div>
       </main>
+      <CreateEventButton />
     </div>
   );
 };