부가서비스

- 링크결제 결제신청 API 연결
2025-09-22 17:00:02 +09:00
parent ea9803d442
commit b5bdd3d855
9 changed files with 327 additions and 98 deletions
--- a/src/shared/ui/filter/single-date-picker.tsx
+++ b/src/shared/ui/filter/single-date-picker.tsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { CalendarType } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import NiceCalendar from '../calendar/nice-calendar';
+
+interface SingleDatePickerProps {
+  title?: string;
+  date: string;
+  setDate: (date: string) => void;
+  placeholder?: string;
+}
+
+export const SingleDatePicker = ({
+  title,
+  date,
+  setDate,
+  placeholder = '날짜 선택'
+}: SingleDatePickerProps) => {
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+
+  const onClickToOpenCalendar = () => {
+    setCalendarOpen(true);
+  };
+
+  const setNewDate = (newDate: string) => {
+    setDate(newDate);
+    setCalendarOpen(false);
+  };
+
+  return (
+    <>
+      {title && (
+        <div className="issue-row gap-10">
+          <div className="issue-label">{title}</div>
+          <div className="issue-field">
+            <div className="input-wrapper date">
+              <input
+                type="text"
+                value={date}
+                className="date-input"
+                placeholder={placeholder}
+                readOnly
+              />
+              <button
+                type="button"
+                className="date-btn"
+                onClick={onClickToOpenCalendar}
+              >
+                <img
+                  src={IMAGE_ROOT + '/ico_date.svg'}
+                  alt="날짜 선택"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!title && (
+        <div className="input-wrapper date">
+          <input
+            type="text"
+            value={date}
+            className="date-input"
+            placeholder={placeholder}
+            
+          />
+          <button
+            type="button"
+            className="date-btn"
+            onClick={onClickToOpenCalendar}
+          >
+            <img
+              src={IMAGE_ROOT + '/ico_date.svg'}
+              alt="날짜 선택"
+            />
+          </button>
+        </div>
+      )}
+
+      <NiceCalendar
+        calendarOpen={calendarOpen}
+        setCalendarOpen={setCalendarOpen}
+        singleDate={date}
+        calendarType={CalendarType.Single}
+        setNewDate={setNewDate}
+      ></NiceCalendar>
+    </>
+  );
+};