부가서비스

- 링크결제 결제신청 API 연결

src/shared/api/api-url-additional-service.ts

@@ -25,6 +25,10 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 링크결제 - 발송내역 엑셀 다운
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/excel`;
   },
+  extensionLinkPaymentRequest: () => {
+    // POST: 링크결제 - 결제 신청
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/request`;
+  },
   extensionLinkPaymentHistoryDetail: () => {
     // POST: 링크결제 - 발송내역 상세 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/detail`;
@@ -45,7 +49,7 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 링크결제 - 발송대기 상세 내역 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/detail`;
   },
-  extensionLinkPayMentWaitDelete: () => {
+  extensionLinkPaymentWaitDelete: () => {
     // POST: 링크결제 - 발송대기 삭제
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/delete`;
   },

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>
+    </>
+  );
+};