@movvjs/svelte-schedule-view 0.2.3 → 0.2.4-MOVV-197

package/.svelte-kit/__package__/schedule-view/BookingInfo.svelte

@@ -7,6 +7,7 @@ import { env } from "../store/env";
 import { BookingServiceType, FileType } from "./types";
 import { isEdit } from "./Schedule.svelte";
 import { getCarName } from "./utils";
+import { PhoneNumberBiz } from "./biz";
 import { copiedBooking, originalBooking } from "./stores/booking";
 import { alert } from "./components/notifications";
 import Translation from "./components/translation/Translation.svelte";
@@ -22,8 +23,6 @@ const {
   firstName,
   lastName,
   pax: copiedBookingPax,
-  telNumber,
-  telCountryCode,
   isPicketServiceAvailable,
   isPicketServiceSelected,
   isBabySeatServiceAvailable,
@@ -49,7 +48,7 @@ async function copyContents() {
     texts.push(`${$t("booking.flight")} : ${[$originalBooking.flight?.name, getTerminalName($originalBooking.flight)].filter(Boolean).join(" / ")}`);
   }
   texts.push(`${$t("booking.guestName")} : ${$fullName}`);
-  texts.push(`${$t("booking.telNo")} : ${$originalBooking.tel || "- -"}`);
+  texts.push(`${$t("booking.telNo")} : ${PhoneNumberBiz.format($originalBooking.countryCode, $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}`);
@@ -274,9 +273,9 @@ function getTerminalName(flight) {
 					<th>{$t('booking.telNo')}</th>
 					<td>
 						{#if !$isEdit}
-							<p class="value-txt">{$originalBooking.tel || '- -'}</p>
+							<p class="value-txt">{PhoneNumberBiz.format($originalBooking.countryCode, $originalBooking.tel) || '- -'}</p>
 						{:else}
-							<PhoneNumberInput bind:telCountryCode={$telCountryCode} bind:telNumber={$telNumber} />
+							<PhoneNumberInput bind:telCountryCode={$copiedBooking.countryCode} bind:telNumber={$copiedBooking.tel} />
 						{/if}
 					</td>
 				</tr>

package/.svelte-kit/__package__/schedule-view/api/booking/dto.d.ts

@@ -15,6 +15,7 @@ export type BookingViewDTO = {
     plan: BookingPlanItem[];
     name: string;
     tel: string;
+    countryCode: string;
     email: string;
     serviceType: BookingServiceType;
     carInfo: CarInfo;

package/.svelte-kit/__package__/schedule-view/biz/index.d.ts

@@ -0,0 +1 @@
+export * from './phoneNumber';

package/.svelte-kit/__package__/schedule-view/biz/index.js

@@ -0,0 +1 @@
+export * from './phoneNumber';

package/.svelte-kit/__package__/schedule-view/biz/phoneNumber.d.ts

@@ -0,0 +1,20 @@
+export declare class PhoneNumberBiz {
+    /**
+     * 국가번호 및 연락처를 받아 합쳐진 연락처를 반환.
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     * @param options.countryCodeFormatter 국가코드 포맷팅 함수
+     * @param options.phoneNumberFormatter 연락처 포맷팅 함수
+     * @returns
+     */
+    static format(countryCode: string, phoneNumber: string, options?: {
+        countryCodeFormatter?: (countryCode: string) => string;
+        phoneNumberFormatter?: (phoneNumber: string) => string;
+    }): string;
+    /**
+     * 전화번호 유효성 검증
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     */
+    static validate(countryCode: string, phoneNumber: string): boolean;
+}

package/.svelte-kit/__package__/schedule-view/biz/phoneNumber.js

@@ -0,0 +1,53 @@
+// 공통 비즈니스 로직
+export class PhoneNumberBiz {
+    /**
+     * 국가번호 및 연락처를 받아 합쳐진 연락처를 반환.
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     * @param options.countryCodeFormatter 국가코드 포맷팅 함수
+     * @param options.phoneNumberFormatter 연락처 포맷팅 함수
+     * @returns
+     */
+    static format(countryCode, phoneNumber, options) {
+        let result = [];
+        let code = countryCode;
+        let number = phoneNumber;
+        // 만약 코드는 없고, 번호만 있으면 과거 코드로 인식하고 나누기 후 할당
+        if (!code && number) {
+            const splitted = number.split(' ');
+            if (splitted.length > 1) {
+                code = splitted[0];
+                number = splitted[1];
+            }
+        }
+        if (code) {
+            if (options?.countryCodeFormatter && typeof options.countryCodeFormatter === 'function') {
+                result.push(options.countryCodeFormatter(code));
+            }
+            else {
+                result.push(code);
+            }
+        }
+        if (number) {
+            if (options?.phoneNumberFormatter && typeof options.phoneNumberFormatter === 'function') {
+                result.push(options.phoneNumberFormatter(number));
+            }
+            else {
+                result.push(number);
+            }
+        }
+        return result.join(' ');
+    }
+    /**
+     * 전화번호 유효성 검증
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     */
+    static validate(countryCode, phoneNumber) {
+        if (!countryCode)
+            return false;
+        if (!phoneNumber)
+            return false;
+        return true;
+    }
+}

package/.svelte-kit/__package__/schedule-view/stores/booking.d.ts

@@ -74,14 +74,6 @@ export declare const originalBooking: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number>) => import("svelte/store").Unsubscriber;
         set(pax: number): void;
     };
-    telCountryCode: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(countryCode: string): void;
-    };
-    telNumber: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(numbers: string): void;
-    };
     isBabySeatService: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean>) => import("svelte/store").Unsubscriber;
         set(checked: boolean): void;
@@ -168,14 +160,6 @@ export declare const copiedBooking: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number>) => import("svelte/store").Unsubscriber;
         set(pax: number): void;
     };
-    telCountryCode: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(countryCode: string): void;
-    };
-    telNumber: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(numbers: string): void;
-    };
     isBabySeatService: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean>) => import("svelte/store").Unsubscriber;
         set(checked: boolean): void;

package/.svelte-kit/__package__/schedule-view/stores/booking.js

@@ -165,48 +165,6 @@ function createBookingStore(bookingDTO) {
             });
         }
     };
-    // 연락처 국가번호 값 & 변경
-    const telCountryCode = {
-        subscribe: derived(booking, $booking => {
-            if (!$booking?.tel)
-                return null;
-            const splitted = $booking.tel.split(' ');
-            return splitted.find(tel => tel.startsWith('+')) ?? null;
-        }).subscribe,
-        set(countryCode) {
-            copiedBooking.update($booking => {
-                const tels = [];
-                if (countryCode)
-                    tels.push(countryCode);
-                const $telNumber = get(telNumber);
-                if ($telNumber)
-                    tels.push($telNumber);
-                $booking.tel = tels.join(' ');
-                return $booking;
-            });
-        }
-    };
-    // 연락처 번호 값 & 변경
-    const telNumber = {
-        subscribe: derived(booking, $booking => {
-            if (!$booking?.tel)
-                return null;
-            const splitted = $booking.tel.split(' ').filter(tel => !tel.startsWith('+'));
-            return splitted.join('');
-        }).subscribe,
-        set(numbers) {
-            copiedBooking.update($booking => {
-                const tels = [];
-                const $telCountryCode = get(telCountryCode);
-                if ($telCountryCode)
-                    tels.push($telCountryCode);
-                if (numbers)
-                    tels.push(numbers);
-                $booking.tel = tels.join(' ');
-                return $booking;
-            });
-        }
-    };
     // baby seat 서비스 여부 및 변경
     const isBabySeatService = {
         subscribe: derived(extraServices, $extraServices => {
@@ -353,8 +311,6 @@ function createBookingStore(bookingDTO) {
         firstName,
         lastName,
         pax,
-        telCountryCode,
-        telNumber,
         isBabySeatService,
         isPicketService,
         addTime

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t<meta name=\"referrer\" content=\"no-referrer\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div>" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "jyh7wd"
+	version_hash: "173ovcu"
 };
 
 export async function get_hooks() {

package/.vscode/settings.json

@@ -1,6 +1,7 @@
 {
-	"i18n-ally.localesPaths": ["src/lib/i18n", "src/lib/i18n/locales"],
+	"i18n-ally.localesPaths": ["src/lib/i18n/locales"],
 	"i18n-ally.sourceLanguage": "en",
+	"i18n-ally.displayLanguage": "en",
 	"i18n-ally.keystyle": "nested",
 	"workbench.colorCustomizations": {
 		"activityBar.activeBackground": "#e8a7b4",

package/dist/schedule-view/BookingInfo.svelte

@@ -7,6 +7,7 @@ import { env } from "../store/env";
 import { BookingServiceType, FileType } from "./types";
 import { isEdit } from "./Schedule.svelte";
 import { getCarName } from "./utils";
+import { PhoneNumberBiz } from "./biz";
 import { copiedBooking, originalBooking } from "./stores/booking";
 import { alert } from "./components/notifications";
 import Translation from "./components/translation/Translation.svelte";
@@ -22,8 +23,6 @@ const {
   firstName,
   lastName,
   pax: copiedBookingPax,
-  telNumber,
-  telCountryCode,
   isPicketServiceAvailable,
   isPicketServiceSelected,
   isBabySeatServiceAvailable,
@@ -49,7 +48,7 @@ async function copyContents() {
     texts.push(`${$t("booking.flight")} : ${[$originalBooking.flight?.name, getTerminalName($originalBooking.flight)].filter(Boolean).join(" / ")}`);
   }
   texts.push(`${$t("booking.guestName")} : ${$fullName}`);
-  texts.push(`${$t("booking.telNo")} : ${$originalBooking.tel || "- -"}`);
+  texts.push(`${$t("booking.telNo")} : ${PhoneNumberBiz.format($originalBooking.countryCode, $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}`);
@@ -274,9 +273,9 @@ function getTerminalName(flight) {
 					<th>{$t('booking.telNo')}</th>
 					<td>
 						{#if !$isEdit}
-							<p class="value-txt">{$originalBooking.tel || '- -'}</p>
+							<p class="value-txt">{PhoneNumberBiz.format($originalBooking.countryCode, $originalBooking.tel) || '- -'}</p>
 						{:else}
-							<PhoneNumberInput bind:telCountryCode={$telCountryCode} bind:telNumber={$telNumber} />
+							<PhoneNumberInput bind:telCountryCode={$copiedBooking.countryCode} bind:telNumber={$copiedBooking.tel} />
 						{/if}
 					</td>
 				</tr>

package/dist/schedule-view/api/booking/dto.d.ts

@@ -15,6 +15,7 @@ export type BookingViewDTO = {
     plan: BookingPlanItem[];
     name: string;
     tel: string;
+    countryCode: string;
     email: string;
     serviceType: BookingServiceType;
     carInfo: CarInfo;

package/dist/schedule-view/biz/index.d.ts

@@ -0,0 +1 @@
+export * from './phoneNumber';

package/dist/schedule-view/biz/index.js

@@ -0,0 +1 @@
+export * from './phoneNumber';

package/dist/schedule-view/biz/phoneNumber.d.ts

@@ -0,0 +1,20 @@
+export declare class PhoneNumberBiz {
+    /**
+     * 국가번호 및 연락처를 받아 합쳐진 연락처를 반환.
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     * @param options.countryCodeFormatter 국가코드 포맷팅 함수
+     * @param options.phoneNumberFormatter 연락처 포맷팅 함수
+     * @returns
+     */
+    static format(countryCode: string, phoneNumber: string, options?: {
+        countryCodeFormatter?: (countryCode: string) => string;
+        phoneNumberFormatter?: (phoneNumber: string) => string;
+    }): string;
+    /**
+     * 전화번호 유효성 검증
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     */
+    static validate(countryCode: string, phoneNumber: string): boolean;
+}

package/dist/schedule-view/biz/phoneNumber.js

@@ -0,0 +1,53 @@
+// 공통 비즈니스 로직
+export class PhoneNumberBiz {
+    /**
+     * 국가번호 및 연락처를 받아 합쳐진 연락처를 반환.
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     * @param options.countryCodeFormatter 국가코드 포맷팅 함수
+     * @param options.phoneNumberFormatter 연락처 포맷팅 함수
+     * @returns
+     */
+    static format(countryCode, phoneNumber, options) {
+        let result = [];
+        let code = countryCode;
+        let number = phoneNumber;
+        // 만약 코드는 없고, 번호만 있으면 과거 코드로 인식하고 나누기 후 할당
+        if (!code && number) {
+            const splitted = number.split(' ');
+            if (splitted.length > 1) {
+                code = splitted[0];
+                number = splitted[1];
+            }
+        }
+        if (code) {
+            if (options?.countryCodeFormatter && typeof options.countryCodeFormatter === 'function') {
+                result.push(options.countryCodeFormatter(code));
+            }
+            else {
+                result.push(code);
+            }
+        }
+        if (number) {
+            if (options?.phoneNumberFormatter && typeof options.phoneNumberFormatter === 'function') {
+                result.push(options.phoneNumberFormatter(number));
+            }
+            else {
+                result.push(number);
+            }
+        }
+        return result.join(' ');
+    }
+    /**
+     * 전화번호 유효성 검증
+     * @param countryCode 국가코드
+     * @param phoneNumber 연락처
+     */
+    static validate(countryCode, phoneNumber) {
+        if (!countryCode)
+            return false;
+        if (!phoneNumber)
+            return false;
+        return true;
+    }
+}

package/dist/schedule-view/stores/booking.d.ts

@@ -74,14 +74,6 @@ export declare const originalBooking: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number>) => import("svelte/store").Unsubscriber;
         set(pax: number): void;
     };
-    telCountryCode: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(countryCode: string): void;
-    };
-    telNumber: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(numbers: string): void;
-    };
     isBabySeatService: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean>) => import("svelte/store").Unsubscriber;
         set(checked: boolean): void;
@@ -168,14 +160,6 @@ export declare const copiedBooking: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number>) => import("svelte/store").Unsubscriber;
         set(pax: number): void;
     };
-    telCountryCode: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(countryCode: string): void;
-    };
-    telNumber: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string>) => import("svelte/store").Unsubscriber;
-        set(numbers: string): void;
-    };
     isBabySeatService: {
         subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean>) => import("svelte/store").Unsubscriber;
         set(checked: boolean): void;

package/dist/schedule-view/stores/booking.js

@@ -165,48 +165,6 @@ function createBookingStore(bookingDTO) {
             });
         }
     };
-    // 연락처 국가번호 값 & 변경
-    const telCountryCode = {
-        subscribe: derived(booking, $booking => {
-            if (!$booking?.tel)
-                return null;
-            const splitted = $booking.tel.split(' ');
-            return splitted.find(tel => tel.startsWith('+')) ?? null;
-        }).subscribe,
-        set(countryCode) {
-            copiedBooking.update($booking => {
-                const tels = [];
-                if (countryCode)
-                    tels.push(countryCode);
-                const $telNumber = get(telNumber);
-                if ($telNumber)
-                    tels.push($telNumber);
-                $booking.tel = tels.join(' ');
-                return $booking;
-            });
-        }
-    };
-    // 연락처 번호 값 & 변경
-    const telNumber = {
-        subscribe: derived(booking, $booking => {
-            if (!$booking?.tel)
-                return null;
-            const splitted = $booking.tel.split(' ').filter(tel => !tel.startsWith('+'));
-            return splitted.join('');
-        }).subscribe,
-        set(numbers) {
-            copiedBooking.update($booking => {
-                const tels = [];
-                const $telCountryCode = get(telCountryCode);
-                if ($telCountryCode)
-                    tels.push($telCountryCode);
-                if (numbers)
-                    tels.push(numbers);
-                $booking.tel = tels.join(' ');
-                return $booking;
-            });
-        }
-    };
     // baby seat 서비스 여부 및 변경
     const isBabySeatService = {
         subscribe: derived(extraServices, $extraServices => {
@@ -353,8 +311,6 @@ function createBookingStore(bookingDTO) {
         firstName,
         lastName,
         pax,
-        telCountryCode,
-        telNumber,
         isBabySeatService,
         isPicketService,
         addTime

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@movvjs/svelte-schedule-view",
-	"version": "0.2.3",
+	"version": "0.2.4-MOVV-197",
 	"type": "module",
 	"license": "ISC",
 	"author": {

package/src/lib/schedule-view/BookingInfo.svelte

@@ -10,6 +10,7 @@
 	import { BookingServiceType, FileType, type Flight } from '$scheduleView/types'
 	import { isEdit } from '$scheduleView/Schedule.svelte'
 	import { getCarName } from '$scheduleView/utils'
+	import { PhoneNumberBiz } from '$scheduleView/biz'
 	import { copiedBooking, originalBooking } from '$scheduleView/stores/booking'
 
 	import { alert } from '$scheduleView/components/notifications'
@@ -28,8 +29,6 @@
 		firstName,
 		lastName,
 		pax: copiedBookingPax,
-		telNumber,
-		telCountryCode,
 		isPicketServiceAvailable,
 		isPicketServiceSelected,
 		isBabySeatServiceAvailable,
@@ -58,7 +57,7 @@
 		}
 		texts.push(`${$t('booking.guestName')} : ${$fullName}`)
 		// texts.push(`Email : ${$originalBooking.email || '- -'}`) // 제외
-		texts.push(`${$t('booking.telNo')} : ${$originalBooking.tel || '- -'}`)
+		texts.push(`${$t('booking.telNo')} : ${PhoneNumberBiz.format($originalBooking.countryCode, $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}`)
@@ -297,9 +296,9 @@
 					<th>{$t('booking.telNo')}</th>
 					<td>
 						{#if !$isEdit}
-							<p class="value-txt">{$originalBooking.tel || '- -'}</p>
+							<p class="value-txt">{PhoneNumberBiz.format($originalBooking.countryCode, $originalBooking.tel) || '- -'}</p>
 						{:else}
-							<PhoneNumberInput bind:telCountryCode={$telCountryCode} bind:telNumber={$telNumber} />
+							<PhoneNumberInput bind:telCountryCode={$copiedBooking.countryCode} bind:telNumber={$copiedBooking.tel} />
 						{/if}
 					</td>
 				</tr>

package/src/lib/schedule-view/api/booking/dto.ts

@@ -33,6 +33,7 @@ export type BookingViewDTO = {
 	plan: BookingPlanItem[]
 	name: string
 	tel: string
+	countryCode: string
 	email: string
 	serviceType: BookingServiceType
 	carInfo: CarInfo

package/src/lib/schedule-view/biz/index.ts

@@ -0,0 +1 @@
+export * from './phoneNumber'

package/src/lib/schedule-view/biz/phoneNumber.ts

@@ -0,0 +1,60 @@
+// 공통 비즈니스 로직
+export class PhoneNumberBiz {
+	/**
+	 * 국가번호 및 연락처를 받아 합쳐진 연락처를 반환.
+	 * @param countryCode 국가코드
+	 * @param phoneNumber 연락처
+	 * @param options.countryCodeFormatter 국가코드 포맷팅 함수
+	 * @param options.phoneNumberFormatter 연락처 포맷팅 함수
+	 * @returns
+	 */
+	static format(
+		countryCode: string,
+		phoneNumber: string,
+		options?: {
+			countryCodeFormatter?: (countryCode: string) => string
+			phoneNumberFormatter?: (phoneNumber: string) => string
+		}
+	) {
+		let result = []
+
+		let code = countryCode
+		let number = phoneNumber
+
+		// 만약 코드는 없고, 번호만 있으면 과거 코드로 인식하고 나누기 후 할당
+		if (!code && number) {
+			const splitted = number.split(' ')
+			if (splitted.length > 1) {
+				code = splitted[0]
+				number = splitted[1]
+			}
+		}
+
+		if (code) {
+			if (options?.countryCodeFormatter && typeof options.countryCodeFormatter === 'function') {
+				result.push(options.countryCodeFormatter(code))
+			} else {
+				result.push(code)
+			}
+		}
+		if (number) {
+			if (options?.phoneNumberFormatter && typeof options.phoneNumberFormatter === 'function') {
+				result.push(options.phoneNumberFormatter(number))
+			} else {
+				result.push(number)
+			}
+		}
+		return result.join(' ')
+	}
+
+	/**
+	 * 전화번호 유효성 검증
+	 * @param countryCode 국가코드
+	 * @param phoneNumber 연락처
+	 */
+	static validate(countryCode: string, phoneNumber: string) {
+		if (!countryCode) return false
+		if (!phoneNumber) return false
+		return true
+	}
+}

package/src/lib/schedule-view/stores/booking.ts

@@ -199,44 +199,6 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 		}
 	}
 
-	// 연락처 국가번호 값 & 변경
-	const telCountryCode = {
-		subscribe: derived(booking, $booking => {
-			if (!$booking?.tel) return null
-			const splitted = $booking.tel.split(' ')
-			return splitted.find(tel => tel.startsWith('+')) ?? null
-		}).subscribe,
-		set(countryCode: string) {
-			copiedBooking.update($booking => {
-				const tels = []
-				if (countryCode) tels.push(countryCode)
-				const $telNumber = get(telNumber)
-				if ($telNumber) tels.push($telNumber)
-				$booking.tel = tels.join(' ')
-				return $booking
-			})
-		}
-	}
-
-	// 연락처 번호 값 & 변경
-	const telNumber = {
-		subscribe: derived(booking, $booking => {
-			if (!$booking?.tel) return null
-			const splitted = $booking.tel.split(' ').filter(tel => !tel.startsWith('+'))
-			return splitted.join('')
-		}).subscribe,
-		set(numbers: string) {
-			copiedBooking.update($booking => {
-				const tels = []
-				const $telCountryCode = get(telCountryCode)
-				if ($telCountryCode) tels.push($telCountryCode)
-				if (numbers) tels.push(numbers)
-				$booking.tel = tels.join(' ')
-				return $booking
-			})
-		}
-	}
-
 	// baby seat 서비스 여부 및 변경
 	const isBabySeatService = {
 		subscribe: derived(extraServices, $extraServices => {
@@ -385,8 +347,6 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 		firstName,
 		lastName,
 		pax,
-		telCountryCode,
-		telNumber,
 		isBabySeatService,
 		isPicketService,
 		addTime

package/src/routes/development/+page.svelte

@@ -8,7 +8,7 @@
 
 	let schedule$: Schedule
 
-	let code = '24200-PUZ4L9'
+	let code = '24214-PUWPFP'
 
 	let options: InitOption = {
 		isDev: true,