feat: clear inputbox after add

Author: jane1107

src/components/MyCalendar/CreateEventButton.tsx

@@ -1,13 +1,16 @@
 import { useEventState } from '@/stores/myEventsStore.ts';
 import DialogButton from '@/components/common/DialogButton';
-import InputForm from '../common/InputForm';
-import { useState } from 'react';
+import { InputRef } from '../common/InputForm.tsx';
+import { useState, useRef } from 'react';
 
 const CreateEventButton = () => {
   const { addEvents } = useEventState();
   const [eventTitle, setTitle] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
+  const titleRef = useRef(null);
+  const startRef = useRef(null);
+  const endRef = useRef(null);
 
   const onTitleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTitle(event.target.value);
@@ -22,17 +25,24 @@ const CreateEventButton = () => {
   };
 
   const onCreateClicked = () => {
-    console.log('clicked! ', eventTitle, startDate, endDate);
-    if (eventTitle !== '' && startDate !== '' && endDate !== '')
-      addEvents({ title: eventTitle, start: startDate, end: endDate });
+    if (eventTitle !== '' && startDate !== '') {
+      addEvents({ title: eventTitle, start: startDate, end: endDate === '' ? startDate : endDate });
+    }
+    setTitle('');
+    setStartDate('');
+    setEndDate('');
+    titleRef.current.value = null;
+    startRef.current.value = null;
+    endRef.current.value = null;
   };
 
   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" />
+      <hr className="mt-1" />
+      <InputRef title="일정 제목" placeholder="새 일정 제목" onChange={onTitleChanged} ref={titleRef} />
+      <InputRef title="시작 날짜" placeholder="YYYY-MM-DD" onChange={onStartDateChanged} ref={startRef} />
+      <InputRef title="끝 날짜" placeholder="YYYY-MM-DD" onChange={onEndDateChanged} ref={endRef} />
+      <hr className="mb-2 mt-2" />
       <button className="btn w-full bg-primary text-base-100" onClick={onCreateClicked}>
         추가하기
       </button>
@@ -44,7 +54,7 @@ const CreateEventButton = () => {
         classname="btn bg-primary text-base-100 w-full"
         name={'새 일정 추가하기'}
         title={'일정 추가'}
-        desc={' '}
+        desc={''}
         children={eventForm}
       />
     </div>

src/components/common/InputForm.tsx

@@ -1,23 +1,15 @@
-import { HTMLProps } from 'react';
+import { HTMLProps, forwardRef } from 'react';
 
 interface Props extends HTMLProps<HTMLInputElement> {
   title: string;
   placeholder: string;
-  hint: string;
+  hint?: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   error?: boolean;
   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">
@@ -41,4 +33,31 @@ const InputForm: React.FC<Props> = ({
   );
 };
 
+export const InputRef: React.FC<Props> = forwardRef(
+  ({ title, placeholder, hint, onChange, error = false, errorText = '', ...rest }, ref) => {
+    return (
+      <label htmlFor={rest.id} className="form-control w-full">
+        <div className="label">
+          <span className="label-text">{title}</span>
+        </div>
+        <input
+          id={rest.id}
+          placeholder={placeholder}
+          className="input input-bordered w-full"
+          onChange={onChange}
+          ref={ref}
+          {...rest}
+        />
+        {error || hint ? (
+          <div className="label flex h-8 flex-row items-center">
+            <span className={`label-text-alt ${error ? 'text-error' : ''}`}>{error ? errorText : hint}</span>
+          </div>
+        ) : (
+          ''
+        )}
+      </label>
+    );
+  },
+);
+
 export default InputForm;