@movvjs/svelte-schedule-view 0.0.1

package/dist/schedule/BookingInfo.svelte

@@ -0,0 +1,547 @@
+<script>import { dayjs } from "../dayjs";
+import { padStart, range } from "lodash-es";
+import { BookingServiceType, ExtraServiceType, FileType } from "../types";
+import { copiedBooking, originalBooking } from "./booking";
+import { isEdit } from "./Schedule.svelte";
+import { axios } from "../axios";
+import { alert } from "../alert";
+import { t } from "../i18n";
+import { getCarName } from "../utils";
+import Translation from "./Translation.svelte";
+import FlightSearch from "./FlightSearch.svelte";
+import PhoneNumberInput from "./PhoneNumberInput.svelte";
+import FileUploader from "./FileUploader.svelte";
+import CarSearch from "./CarSearch.svelte";
+import { env } from "../store/env";
+const { stdt, fullName, pax, extraServices, files, plans } = originalBooking;
+const {
+  withPreserveAndPreview,
+  hour,
+  minute,
+  pax: editPax,
+  telNumber,
+  telCountryCode,
+  isPicketServiceAvailable,
+  isPicketServiceSelected,
+  isBabySeatServiceAvailable,
+  defaultFiles,
+  picketFiles,
+  extraServices: editExtraServices,
+  isAutoPicketFile,
+  availableExtraServices,
+  selectedPrice
+} = copiedBooking;
+let translation$;
+let flightSearch$;
+$:
+  mutation = {
+    get hour() {
+      return $hour;
+    },
+    set hour(h) {
+      withPreserveAndPreview(() => {
+        copiedBooking.update(($booking) => {
+          $booking.ymd = dayjs($booking.ymd).hour(h).format("YYYY-MM-DD HH:mm:ss");
+          return $booking;
+        });
+      });
+    },
+    get minute() {
+      return $minute;
+    },
+    set minute(m) {
+      withPreserveAndPreview(() => {
+        copiedBooking.update(($booking) => {
+          $booking.ymd = dayjs($booking.ymd).minute(m).format("YYYY-MM-DD HH:mm:ss");
+          return $booking;
+        });
+      });
+    },
+    get firstName() {
+      return $copiedBooking?.firstName ?? "";
+    },
+    set firstName(value) {
+      copiedBooking.update(($booking) => {
+        $booking.firstName = value;
+        $booking.name = `${value} ${$booking.lastName}`;
+        return $booking;
+      });
+    },
+    get lastName() {
+      return $copiedBooking?.lastName ?? "";
+    },
+    set lastName(value) {
+      copiedBooking.update(($booking) => {
+        $booking.lastName = value;
+        $booking.name = `${$booking.firstName} ${value}`;
+        return $booking;
+      });
+    },
+    get pax() {
+      return $editPax;
+    },
+    set pax(value) {
+      withPreserveAndPreview(() => {
+        copiedBooking.update(($booking) => {
+          $booking.person.adult = value;
+          return $booking;
+        });
+      });
+    },
+    get telCountryCode() {
+      return $telCountryCode ?? null;
+    },
+    set telCountryCode(value) {
+      copiedBooking.update(($booking) => {
+        const tels = [];
+        if (value)
+          tels.push(value);
+        if ($telNumber)
+          tels.push($telNumber);
+        $booking.tel = tels.join(" ");
+        return $booking;
+      });
+    },
+    get telNumber() {
+      return $telNumber ?? null;
+    },
+    set telNumber(value) {
+      copiedBooking.update(($booking) => {
+        const tels = [];
+        if ($telCountryCode)
+          tels.push($telCountryCode);
+        if (value)
+          tels.push(value);
+        $booking.tel = tels.join(" ");
+        return $booking;
+      });
+    },
+    extraServices: {
+      get babySeat() {
+        const service = $editExtraServices.find((extra) => extra.type === ExtraServiceType.baby) ?? null;
+        return !!service;
+      },
+      set babySeat(checked) {
+        withPreserveAndPreview(() => {
+          copiedBooking.update(($booking) => {
+            let extra = $editExtraServices;
+            const addService = $availableExtraServices.find((extra2) => extra2.type === ExtraServiceType.baby);
+            if (checked) {
+              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.baby);
+              extra = [...extra, addService];
+            } else {
+              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.baby);
+            }
+            $booking.extra = extra;
+            return $booking;
+          });
+        });
+      },
+      get picket() {
+        const service = $editExtraServices.find((extra) => extra.type === ExtraServiceType.picket) ?? null;
+        return !!service;
+      },
+      set picket(checked) {
+        withPreserveAndPreview(() => {
+          copiedBooking.update(($booking) => {
+            let extra = $editExtraServices;
+            const addService = $availableExtraServices.find((extra2) => extra2.type === ExtraServiceType.picket);
+            if (checked) {
+              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.picket);
+              extra = [...extra, addService];
+            } else {
+              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.picket);
+              $booking.files = $booking.files.filter((f) => f.type !== FileType.picket);
+            }
+            $booking.extra = extra;
+            return $booking;
+          });
+        });
+      }
+    },
+    get addTime() {
+      return $copiedBooking?.addTime ?? 0;
+    },
+    set addTime(hour2) {
+      withPreserveAndPreview(() => {
+        copiedBooking.update(($booking) => {
+          $booking.addTime = hour2;
+          return $booking;
+        });
+      });
+    }
+  };
+async function copyContents() {
+  const texts = [];
+  texts.push(`FMS CODE : ${$originalBooking.code}`);
+  texts.push(`Group excode : ${$originalBooking.bookingCode}`);
+  texts.push(`${$t("booking.travelDate")} : ${dayjs($stdt).format("ll (dd)")}`);
+  texts.push(`${$t("booking.startTime")} : ${dayjs($stdt).format("HH:mm")}`);
+  texts.push(`${$t("booking.carInfo")} : ${getCarName($originalBooking.carInfo, { seat: true, seatPostfix: $t("booking.seater") })}`);
+  texts.push(`${$t("booking.pax")} : ${$pax}`);
+  texts.push(
+    `${$t("booking.flight")} : ${$originalBooking.flight?.name || "- -"} ${$originalBooking.flight?.selectType === "AUTO" && $originalBooking.flight?.arrivalTerminal ? `/ ${$t("flight.terminal", { values: { number: $originalBooking.flight.arrivalTerminal } })}` : ""}`
+  );
+  texts.push(`${$t("booking.guestName")} : ${$fullName}`);
+  texts.push(`${$t("booking.telNo")} : ${$originalBooking.tel || "- -"}`);
+  const extraServiceText = $originalBooking.extra?.length > 0 ? $originalBooking.extra.map((s) => $t(`extraServiceType.${s.type}`)).join(", ") : "- -";
+  texts.push(`${$t("booking.extraService")} : ${extraServiceText}`);
+  texts.push(`${$t("booking.reservationStatus")} : ${$originalBooking.status}`);
+  if ($originalBooking.serviceType === BookingServiceType.day || $originalBooking.serviceType === BookingServiceType.oneWay) {
+    texts.push(`${$t("booking.useTime")} : ${$originalBooking.useTime} hour(s)`);
+  }
+  const occupantInformationText = $originalBooking.addInfo?.length > 0 ? `
+${$originalBooking.addInfo.map((info, i) => `${i + 1}. ${info.engName || "Empty Name"} (${info.birth || "Empty Birth date"})`).join("\n")}` : "- -";
+  texts.push(`${$t("booking.passengerInfo")}: ${occupantInformationText}`);
+  texts.push(`${$t("booking.memo")} : ${$originalBooking.memo || "- -"}`);
+  const scheduleTexts = [];
+  scheduleTexts.push(`
+${$t("booking.schedule")}`);
+  scheduleTexts.push(`<${$t("schedule.start")}> ${$plans.origin.title} (${$plans.origin.address})`);
+  if ($plans.waypoints.length > 0) {
+    scheduleTexts.push(`${$plans.waypoints.map((w, i) => `${i + 1}. ${w.title} (${w.address})`).join("\n")}`);
+  }
+  scheduleTexts.push(`<${$t("schedule.finish")}> ${$plans.dest.title} (${$plans.dest.address})`);
+  texts.push(scheduleTexts.join("\n"));
+  const resultTexts = texts.join("\n");
+  try {
+    await navigator.clipboard.writeText(resultTexts);
+  } catch (e) {
+  } finally {
+  }
+}
+async function toggleAutoPicket(e) {
+  e.target.checked = $isAutoPicketFile;
+  try {
+    const payload = {
+      firstName: $copiedBooking.firstName?.trim() ?? "",
+      lastName: $copiedBooking.lastName?.trim() ?? "",
+      flightName: $copiedBooking.flight?.name || ""
+    };
+    const { data } = await axios.post(`/partner/booking/auto/picket`, payload);
+    const name = [payload.firstName, payload.lastName, payload.flightName].filter(Boolean).join("_");
+    $copiedBooking.files = [
+      ...$copiedBooking.files,
+      {
+        ...data.data,
+        name: `(auto)_${name}_picket.${data.data.ext}`,
+        auto: true
+      }
+    ];
+  } catch (e2) {
+  } finally {
+  }
+}
+function openFlightSearch() {
+  flightSearch$.open({
+    dateTime: $copiedBooking.ymd,
+    iata: $copiedBooking.origin?.iata
+  }).then((flight) => {
+    $copiedBooking.flight = flight;
+  }).catch((e) => {
+    alert.open({ text: e.message });
+  });
+}
+$: {
+  console.log($copiedBooking);
+}
+</script>
+
+<Translation bind:this={translation$} />
+<FlightSearch bind:this={flightSearch$} />
+
+<div class="bookingInfoZone">
+	<h3>
+		{$t('booking.bookingInfo')}
+		{#if !$isEdit}
+			<button type="button" class="indie_btn_copy_1" on:click={() => copyContents()}>{$t('booking.contentCopy')}</button>
+		{/if}
+	</h3>
+
+	<div class="table_box">
+		<table class="tbl_bookingInfo">
+			<colgroup>
+				<col style="width: 130px;" />
+				<col style="width: auto;" />
+			</colgroup>
+			<tbody>
+				<tr>
+					<th>{$t('booking.travelDate')}</th>
+					<td>
+						<p class="value-txt">{dayjs($stdt).format('ll (dd)')}</p>
+						<!-- <input type="text" class="indie_text_nor xs3 white w100" value="2023-10-16"> -->
+					</td>
+				</tr>
+				<tr>
+					<th>{$t('booking.startTime')}</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{dayjs($stdt).format('HH:mm')}</p>
+						{:else}
+							<div class="indie_time_select_box sm">
+								<select bind:value={mutation.hour}>
+									{#each range(0, 24, 1) as hour}
+										<option value={hour}>{padStart(`${hour}`, 2, '0')}</option>
+									{/each}
+								</select>
+								<span>:</span>
+								<select bind:value={mutation.minute}>
+									{#each range(0, 60, 1) as minute}
+										<option value={minute}>{padStart(`${minute}`, 2, '0')}</option>
+									{/each}
+								</select>
+							</div>
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.reservationStatus')}</th>
+					<td>
+						<p class="value-txt">{$t(`bookingStatus.${$originalBooking.status}`)}</p>
+					</td>
+				</tr>
+
+				{#if $originalBooking.serviceType === BookingServiceType.pickup}
+					<tr>
+						<th>{$t('booking.flight')}</th>
+						<td>
+							{#if !$isEdit}
+								{#if $originalBooking.flight}
+									<p class="indie_value-text flight">
+										<b>{$originalBooking.flight.name}</b>
+										{#if $originalBooking.flight.selectType === 'AUTO' && $originalBooking.flight.arrivalTerminal}
+											/ {$t('flight.terminal', { values: { number: $originalBooking.flight.arrivalTerminal } })}
+										{/if}
+									</p>
+									{#if $originalBooking.flight.selectType === 'MANUAL'}
+										<div class="indie_exclamation_mark_box sm black">
+											<p class="normal">{$t('filght.delayDescription')}</p>
+										</div>
+									{/if}
+								{:else}
+									<p class="indie_value-text flight">- -</p>
+								{/if}
+							{:else}
+								<!--  -->
+								{#if $copiedBooking.flight}
+									<p class="indie_value-text flight">
+										<b>{$copiedBooking.flight.name}</b>
+										{#if $copiedBooking.flight.selectType === 'AUTO' && $copiedBooking.flight.arrivalTerminal}
+											/ {$t('flight.terminal', { values: { number: $copiedBooking.flight.arrivalTerminal } })}
+										{/if}
+									</p>
+									<button type="button" class="indie_btn_squre only refresh_black mgl10" on:click={() => openFlightSearch()}>다시선택</button>
+									{#if $copiedBooking.flight.selectType !== 'AUTO'}
+										<div class="indie_exclamation_mark_box sm black">
+											<p class="normal">{$t('filght.delayDescription')}</p>
+										</div>
+									{/if}
+								{:else}
+									<p class="indie_value-text flight">- -</p>
+									<button type="button" class="indie_btn_squre only refresh_black mgl10" on:click={() => openFlightSearch()}>다시선택</button>
+								{/if}
+							{/if}
+						</td>
+					</tr>
+				{/if}
+
+				<tr>
+					<th>{$t('booking.guestName')}</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{$originalBooking.name}</p>
+						{:else}
+							<div class="f-row gap">
+								<input bind:value={mutation.firstName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.firstName')} />
+								<input bind:value={mutation.lastName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.lastName')} />
+							</div>
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>E-mail</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{$originalBooking.email}</p>
+						{:else}
+							<input bind:value={$copiedBooking.email} type="email" class="indie_text_nor xs3 white w100" placeholder="E-mail" />
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.telNo')}</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{$originalBooking.tel || '- -'}</p>
+						{:else}
+							<PhoneNumberInput bind:telCountryCode={mutation.telCountryCode} bind:telNumber={mutation.telNumber} />
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.pax')}</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{$pax}</p>
+						{:else}
+							<select bind:value={mutation.pax} class="indie_select_nor xs3">
+								{#each range(1, 30, 1) as number}
+									<option value={number}>{number}</option>
+								{/each}
+							</select>
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.extraService')}</th>
+					<td>
+						{#if !$isEdit}
+							{#each $extraServices as service}
+								<p class="indie_tag_round gray">{$t(`extraServiceType.${service.type}`)}</p>
+							{:else}
+								- -
+							{/each}
+						{:else}
+							<div class="indie_f-row mgt5">
+								{#if $isBabySeatServiceAvailable}
+									<span>
+										<input bind:checked={mutation.extraServices.babySeat} type="checkbox" class="indie_check_base fz xs color" id="check_extra_baby" />
+										<label for="check_extra_baby">{$t('extraServiceType.BABY')}</label>
+									</span>
+								{/if}
+
+								{#if $isPicketServiceAvailable}
+									<span>
+										<input bind:checked={mutation.extraServices.picket} type="checkbox" class="indie_check_base fz xs color" id="check_extra_picket" />
+										<label for="check_extra_picket">{$t('extraServiceType.PICKET')}</label>
+									</span>
+								{/if}
+
+								<!-- ! AUTO 기능은 FMS만 가능 (임시) -->
+								{#if $isPicketServiceSelected && $env.target === 'FMS'}
+									<p class="switchs mg-l-auto">
+										<input checked={$isAutoPicketFile} type="checkbox" name="confirm" class="indie_switch_type_5" id="picket_auto" on:input={toggleAutoPicket} />
+										<label for="picket_auto">{$t('booking.autoPicket')}</label>
+									</p>
+								{/if}
+							</div>
+
+							{#if $isPicketServiceSelected}
+								<div class="mgt10">
+									<FileUploader
+										single
+										title={$t('booking.uploadPicketFile')}
+										fileList={$picketFiles}
+										fileType={FileType.picket}
+										on:success={({ detail: files }) => {
+											$copiedBooking.files = [...$copiedBooking.files, ...files]
+										}}
+										on:remove={({ detail: file }) => {
+											$copiedBooking.files = $copiedBooking.files.filter(f => f !== file)
+										}} />
+								</div>
+							{/if}
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.file')}</th>
+					<td>
+						{#if !$isEdit}
+							{#each $files as file}
+								<a href={null} class="indie_file-upload-download-form sm w100" on:click={() => window.open(file.url)} download={file.name}>
+									<span class="name">{file.name}</span>
+								</a>
+							{:else}
+								- -
+							{/each}
+						{:else}
+							<FileUploader
+								title={$t('booking.fileUpload')}
+								fileList={$defaultFiles}
+								fileType={FileType.default}
+								on:success={({ detail: files }) => {
+									$copiedBooking.files = [...$copiedBooking.files, ...files]
+								}}
+								on:remove={({ detail: file }) => {
+									$copiedBooking.files = $copiedBooking.files.filter(f => f !== file)
+								}} />
+						{/if}
+					</td>
+				</tr>
+
+				<tr>
+					<th>{$t('booking.memo')}</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">
+								{$originalBooking.memo || '- -'}
+							</p>
+							<button type="button" class="indie_btn_translation_nor" on:click={() => translation$.open($originalBooking.memo)}>{$t('booking.translate')}</button>
+						{:else}
+							<textarea bind:value={$copiedBooking.memo} class="modify-textarea" />
+						{/if}
+					</td>
+				</tr>
+
+				{#if $originalBooking.serviceType === BookingServiceType.day || $originalBooking.serviceType === BookingServiceType.oneWay}
+					<tr>
+						<th>{$t('booking.useTime')}</th>
+						<td>
+							{#if !$isEdit}
+								<p class="value-txt">{$t('booking.hours', { values: { hour: $originalBooking.useTime } })}</p>
+							{:else}
+								<div class="indie_f-row gap">
+									<select value={$copiedBooking.useTime} class="indie_select_nor xs3 col" disabled>
+										{#each range(1, 15, 1) as h}
+											<option value={h}>{$t('booking.hours', { values: { hour: h } })}</option>
+										{/each}
+									</select>
+									<select bind:value={mutation.addTime} class="indie_select_nor xs3 col">
+										<option value={0}>{$t('booking.extraHours')}</option>
+										{#each range(1, 15, 1) as h}
+											<option value={h}>{$t('booking.hours', { values: { hour: h } })}</option>
+										{/each}
+									</select>
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{/if}
+
+				<tr>
+					<th>
+						{@html $t('booking.carInfo')}
+					</th>
+					<td>
+						{#if !$isEdit}
+							<p class="value-txt">{getCarName($originalBooking.carInfo, { seat: true, seatPostfix: $t('booking.seater') })}</p>
+						{:else}
+							<CarSearch
+								inputId="reqModel-reqSeat"
+								title={$selectedPrice
+									? getCarName($selectedPrice.carInfo, { seat: true, seatPostfix: $t('booking.seater') })
+									: getCarName($copiedBooking.carInfo, { seat: true, seatPostfix: $t('booking.seater') })}
+								placeholder={$t('booking.carInfo')}
+								carList={$copiedBooking.carList}
+								on:select={({ detail: searchPrice }) =>
+									withPreserveAndPreview(() => {
+										$selectedPrice = searchPrice
+									})}
+								on:clear={() =>
+									withPreserveAndPreview(() => {
+										$selectedPrice = null
+									})} />
+						{/if}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>

package/dist/schedule/BookingInfo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BookingInfoProps = typeof __propDef.props;
+export type BookingInfoEvents = typeof __propDef.events;
+export type BookingInfoSlots = typeof __propDef.slots;
+export default class BookingInfo extends SvelteComponent<BookingInfoProps, BookingInfoEvents, BookingInfoSlots> {
+}
+export {};

package/dist/schedule/CarSearch.svelte

@@ -0,0 +1,22 @@
+<script>import BaseSearchInput, {} from "../components/BaseSearchInput.svelte";
+import { t } from "../i18n";
+import { getCarName } from "../utils";
+export let placeholder = $t("booking.carInfo");
+export let inputId;
+export let title;
+export let carList = [];
+let list = [];
+async function search(keyword) {
+  list = carList.filter((item) => {
+    const { model, seat, maker } = item.carInfo;
+    const escapedString = keyword.trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp(escapedString, "gi").test(`${model} ${seat} ${maker}`);
+  }).map((item) => ({
+    title: getCarName(item.carInfo, { seat: true }),
+    subTitle: `${item.useTime} Hour`,
+    value: item
+  }));
+}
+</script>
+
+<BaseSearchInput bind:list width="w220px" {inputId} {title} {placeholder} on:clear on:select on:search={({ detail: keyword }) => search(keyword)} />

package/dist/schedule/CarSearch.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { SearchPriceV2 } from '../types';
+declare const __propDef: {
+    props: {
+        placeholder?: string;
+        inputId: string;
+        title: string;
+        carList?: SearchPriceV2[];
+    };
+    events: {
+        clear: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CarSearchProps = typeof __propDef.props;
+export type CarSearchEvents = typeof __propDef.events;
+export type CarSearchSlots = typeof __propDef.slots;
+export default class CarSearch extends SvelteComponent<CarSearchProps, CarSearchEvents, CarSearchSlots> {
+}
+export {};

package/dist/schedule/FileUploader.svelte

@@ -0,0 +1,76 @@
+<script>import { alert } from "../alert";
+import { CommonAPI } from "../api/common";
+import { axios } from "../axios";
+import { t } from "../i18n";
+import { loaders } from "../loaders";
+import { map } from "lodash-es";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let single = false;
+export let title = $t("booking.fileUpload");
+export let fileList = [];
+export let fileType;
+let files;
+let input$;
+$:
+  uploadButtonShow = (() => {
+    if (single) {
+      return fileList.length === 0;
+    } else {
+      return true;
+    }
+  })();
+function browseFiles() {
+  input$.click();
+}
+async function uploadFile() {
+  const uploadPromises = map(files, async (file) => {
+    const data = new FormData();
+    data.append("file", file);
+    return CommonAPI.upload(data);
+  });
+  try {
+    loaders.show();
+    const results = await Promise.all(uploadPromises);
+    const files2 = results.map(({ name, url }) => ({ name, url }));
+    success(files2);
+  } catch (e) {
+    alert.open({ text: $t("alert.failedToUploadFile") });
+  } finally {
+    files = null;
+    loaders.hide();
+  }
+}
+function success(files2) {
+  dispatch(
+    "success",
+    files2.map((file) => ({ ...file, type: fileType }))
+  );
+}
+function remove(file) {
+  dispatch("remove", file);
+}
+function download(file) {
+  const a$ = document.createElement("a");
+  a$.href = file.url;
+  a$.setAttribute("download", file.name);
+  a$.click();
+}
+</script>
+
+{#if uploadButtonShow}
+	<a href={null} class="indie_file-upload-select-form sm w100" on:click={() => browseFiles()}>
+		<span class="gray">{title}</span>
+		<span class="black">{$t('booking.selectFile')}</span>
+		<input bind:this={input$} bind:files type="file" style="display: none;" on:change={() => uploadFile()} accept="image/*,.pdf" multiple={!single} />
+	</a>
+{/if}
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+{#each fileList as file}
+	<span class="indie_file-upload-view-form sm w100" on:click={() => download(file)}>
+		<span class="name">{file.name}</span>
+		<button type="button" class="indie_btn_close_sm" on:click|stopPropagation={() => remove(file)}>삭제</button>
+	</span>
+{/each}