@jk-core/components 1.1.10 → 1.1.11

package/src/styles/scrollbar.scss

@@ -1,71 +1,71 @@
-@use "@/utils/styles/mediaQuery.scss" as mixinMedia;
-
-@mixin custom-scrollbar($background: var(--G-10), $color: #c6c6c6) {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $color;
-    border-radius: 100px;
-
-    &:hover {
-      background: $color;
-    }
-
-    @include mixinMedia.tablet {
-      border: none;
-    }
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: $background;
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: $background;
-  }
-}
-
-@mixin global-scrollbar() {
-  &::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-
-    @include mixinMedia.tablet {
-      width: 8px;
-      height: 8px;
-    }
-
-    @include mixinMedia.mobile {
-      width: 6px;
-      height: 6px;
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border: 2px solid transparent;
-    background-color: #c6c6c6;
-    border-radius: 100px;
-    cursor: pointer;
-
-    &:hover {
-      background: #aeaeae;
-    }
-
-    @include mixinMedia.tablet {
-      border: none;
-    }
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: var(--G-10);
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: var(--G-10);
-  }
-}
+@use "@/utils/styles/mediaQuery.scss" as mixinMedia;
+
+@mixin custom-scrollbar($background: var(--G-10), $color: #c6c6c6) {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: 100px;
+
+    &:hover {
+      background: $color;
+    }
+
+    @include mixinMedia.tablet {
+      border: none;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $background;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: $background;
+  }
+}
+
+@mixin global-scrollbar() {
+  &::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+
+    @include mixinMedia.tablet {
+      width: 8px;
+      height: 8px;
+    }
+
+    @include mixinMedia.mobile {
+      width: 6px;
+      height: 6px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    background-color: #c6c6c6;
+    border-radius: 100px;
+    cursor: pointer;
+
+    &:hover {
+      background: #aeaeae;
+    }
+
+    @include mixinMedia.tablet {
+      border: none;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--G-10);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: var(--G-10);
+  }
+}

package/src/svg.d.ts

@@ -1,6 +1,6 @@
-// svg를 ReactComponent처럼 사용하기 위해 선언
-declare module '*.svg' {
-  import { HTMLAttributes } from 'react';
-
-  export default React.Component<HTMLAttributes<HTMLDivElement>>;
-}
+// svg를 ReactComponent처럼 사용하기 위해 선언
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+
+  export default React.Component<HTMLAttributes<HTMLDivElement>>;
+}

package/src/utils/styles/mediaQuery.scss

@@ -1,22 +1,22 @@
-// 스크롤바 너비 14px 추가
-$pc: 1396px;
-$tablet: 1395px;
-$mobile: 774px;
-
-@mixin pc {
-  @media (min-width: $pc) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: $tablet) {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media (max-width: $mobile) {
-    @content;
-  }
-}
+// 스크롤바 너비 14px 추가
+$pc: 1396px;
+$tablet: 1395px;
+$mobile: 774px;
+
+@mixin pc {
+  @media (min-width: $pc) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $mobile) {
+    @content;
+  }
+}

package/src/utils/ts/allowDecimal.ts

@@ -1,5 +1,5 @@
-export const allowDecimal = (val: number) => {
-  const str = val.toString();
-  const decimal = str.split('.')[1];
-  return !decimal || decimal.length <= 2;
+export const allowDecimal = (val: number) => {
+  const str = val.toString();
+  const decimal = str.split('.')[1];
+  return !decimal || decimal.length <= 2;
 };

package/src/utils/ts/autoHypen.ts

@@ -1,33 +1,33 @@
-export default function AutoHypen(input:string) {
-  const value = input.replace(/[^0-9]/g, '');
-
-  const result = [];
-  let restNumber = '';
-
-  // 지역번호와 나머지 번호로 나누기
-  if (value.startsWith('02')) {
-    // 서울 02 지역번호
-    result.push(value.substr(0, 2));
-    restNumber = value.substring(2);
-  } else if (value.startsWith('1')) {
-    // 지역 번호가 없는 경우
-    // 1xxx-yyyy
-    restNumber = value;
-  } else {
-    // 나머지 3자리 지역번호
-    // 0xx-yyyy-zzzz
-    result.push(value.substr(0, 3));
-    restNumber = value.substring(3);
-  }
-
-  if (restNumber.length === 7) {
-    // 7자리만 남았을 때는 xxx-yyyy
-    result.push(restNumber.substring(0, 3));
-    result.push(restNumber.substring(3));
-  } else {
-    result.push(restNumber.substring(0, 4));
-    result.push(restNumber.substring(4));
-  }
-
-  return (result.filter((val) => val).join('-'));
-}
+export default function AutoHypen(input:string) {
+  const value = input.replace(/[^0-9]/g, '');
+
+  const result = [];
+  let restNumber = '';
+
+  // 지역번호와 나머지 번호로 나누기
+  if (value.startsWith('02')) {
+    // 서울 02 지역번호
+    result.push(value.substr(0, 2));
+    restNumber = value.substring(2);
+  } else if (value.startsWith('1')) {
+    // 지역 번호가 없는 경우
+    // 1xxx-yyyy
+    restNumber = value;
+  } else {
+    // 나머지 3자리 지역번호
+    // 0xx-yyyy-zzzz
+    result.push(value.substr(0, 3));
+    restNumber = value.substring(3);
+  }
+
+  if (restNumber.length === 7) {
+    // 7자리만 남았을 때는 xxx-yyyy
+    result.push(restNumber.substring(0, 3));
+    result.push(restNumber.substring(3));
+  } else {
+    result.push(restNumber.substring(0, 4));
+    result.push(restNumber.substring(4));
+  }
+
+  return (result.filter((val) => val).join('-'));
+}

package/src/utils/ts/calculateMax.ts

@@ -1,24 +1,24 @@
-import { isDefined } from '@jk-core/utils';
-
-/**
- * unit으로 나누어떨어지면서,
- * a가 양수라면, a보다 크되 가장 작은 정수.
- * a가 음수라면, a보다 작되 가장 큰 정수를 반환.
- * 절댓값이 threshold에 미치지못한다면, 그대로 반환.
- * @param {*} value
- * @param {*} unit
- */
-export const calculateMax = (
-  value?: number,
-  threshold: number = 10,
-  unit: number = 10,
-) => {
-  if (!isDefined(value)) return value;
-  if (unit === 0 || Math.abs(value) < threshold) return value;
-  if (value > 0) {
-    return Math.ceil(value / unit) * unit;
-  } if (value < 0) {
-    return Math.floor(value / unit) * unit;
-  }
-  return value;
-};
+import { isDefined } from '@jk-core/utils';
+
+/**
+ * unit으로 나누어떨어지면서,
+ * a가 양수라면, a보다 크되 가장 작은 정수.
+ * a가 음수라면, a보다 작되 가장 큰 정수를 반환.
+ * 절댓값이 threshold에 미치지못한다면, 그대로 반환.
+ * @param {*} value
+ * @param {*} unit
+ */
+export const calculateMax = (
+  value?: number,
+  threshold: number = 10,
+  unit: number = 10,
+) => {
+  if (!isDefined(value)) return value;
+  if (unit === 0 || Math.abs(value) < threshold) return value;
+  if (value > 0) {
+    return Math.ceil(value / unit) * unit;
+  } if (value < 0) {
+    return Math.floor(value / unit) * unit;
+  }
+  return value;
+};

package/src/utils/ts/checkIsMobilePlatform.ts

@@ -1,15 +1,15 @@
-const checkIsMobile = () => {
-  const { userAgent } = navigator;
-
-  if (userAgent.match(/Android/i) || userAgent.match(/iPhone|iPad|iPod/i)) {
-    return true;
-  }
-
-  if (userAgent.match(/Windows/i) || userAgent.match(/Macintosh/i)) {
-    return false;
-  }
-
-  return true;
-};
-
-export default checkIsMobile;
+const checkIsMobile = () => {
+  const { userAgent } = navigator;
+
+  if (userAgent.match(/Android/i) || userAgent.match(/iPhone|iPad|iPod/i)) {
+    return true;
+  }
+
+  if (userAgent.match(/Windows/i) || userAgent.match(/Macintosh/i)) {
+    return false;
+  }
+
+  return true;
+};
+
+export default checkIsMobile;

package/src/utils/ts/formatFileSize.ts

@@ -1,16 +1,16 @@
-export const formatFileSize = (bytes: number, unit: 'KB' | 'MB' | 'GB' | 'TB' = 'MB') => {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  let unitIndex = 0;
-  let size = bytes;
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex += 1;
-    if (units[unitIndex] === unit) break;
-  }
-
-  return ({
-    size,
-    unit: units[unitIndex],
-  });
-};
+export const formatFileSize = (bytes: number, unit: 'KB' | 'MB' | 'GB' | 'TB' = 'MB') => {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let unitIndex = 0;
+  let size = bytes;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+    if (units[unitIndex] === unit) break;
+  }
+
+  return ({
+    size,
+    unit: units[unitIndex],
+  });
+};

package/src/utils/ts/formatMoney.ts

@@ -1,16 +1,16 @@
-const formatMoney = (value?: number) => {
-  if (value === undefined) return '- 원';
-
-  let money = value;
-  const units = ['원', '만원', '억원', '조원', '경원', '해원'];
-  let unitIndex = 0;
-
-  while (money >= 10000 && unitIndex < units.length - 1) {
-    money /= 10000;
-    unitIndex += 1;
-  }
-  money = Math.round(money);
-  return [money, units[unitIndex]];
-};
-
-export default formatMoney;
+const formatMoney = (value?: number) => {
+  if (value === undefined) return '- 원';
+
+  let money = value;
+  const units = ['원', '만원', '억원', '조원', '경원', '해원'];
+  let unitIndex = 0;
+
+  while (money >= 10000 && unitIndex < units.length - 1) {
+    money /= 10000;
+    unitIndex += 1;
+  }
+  money = Math.round(money);
+  return [money, units[unitIndex]];
+};
+
+export default formatMoney;

package/src/utils/ts/gradientRatio.ts

@@ -1,61 +1,61 @@
-/**
- * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
- *
- * @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
- * @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
- * @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
- * @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
- * @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
- * @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
- * @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
- */
-const gradientRatio = ({
-  currPercent,
-  startPercent,
-  startColor,
-  endPercent,
-  endColor,
-}: {
-  currPercent: number;
-  startPercent: number;
-  startColor: string;
-  endPercent: number;
-  endColor: string;
-}) => {
-  if (currPercent < startPercent) return startColor;
-  if (currPercent > endPercent) return endColor;
-
-  const start = {
-    R: parseInt(startColor.substr(0, 2), 16),
-    G: parseInt(startColor.substr(2, 2), 16),
-    B: parseInt(startColor.substr(4, 2), 16),
-  };
-  const end = {
-    R: parseInt(endColor.substr(0, 2), 16),
-    G: parseInt(endColor.substr(2, 2), 16),
-    B: parseInt(endColor.substr(4, 2), 16),
-  };
-  const R = {
-    coefficient: (end.R - start.R) / (endPercent - startPercent),
-    intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
-    value: '',
-  };
-  const G = {
-    coefficient: (end.G - start.G) / (endPercent - startPercent),
-    intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
-    value: '',
-  };
-  const B = {
-    coefficient: (end.B - start.B) / (endPercent - startPercent),
-    intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
-    value: '',
-  };
-
-  R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
-  G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
-  B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
-
-  return (R.value + G.value + B.value);
-};
-
-export default gradientRatio;
+/**
+ * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
+ *
+ * @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
+ * @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
+ * @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
+ * @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
+ * @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
+ * @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
+ * @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
+ */
+const gradientRatio = ({
+  currPercent,
+  startPercent,
+  startColor,
+  endPercent,
+  endColor,
+}: {
+  currPercent: number;
+  startPercent: number;
+  startColor: string;
+  endPercent: number;
+  endColor: string;
+}) => {
+  if (currPercent < startPercent) return startColor;
+  if (currPercent > endPercent) return endColor;
+
+  const start = {
+    R: parseInt(startColor.substr(0, 2), 16),
+    G: parseInt(startColor.substr(2, 2), 16),
+    B: parseInt(startColor.substr(4, 2), 16),
+  };
+  const end = {
+    R: parseInt(endColor.substr(0, 2), 16),
+    G: parseInt(endColor.substr(2, 2), 16),
+    B: parseInt(endColor.substr(4, 2), 16),
+  };
+  const R = {
+    coefficient: (end.R - start.R) / (endPercent - startPercent),
+    intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
+    value: '',
+  };
+  const G = {
+    coefficient: (end.G - start.G) / (endPercent - startPercent),
+    intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
+    value: '',
+  };
+  const B = {
+    coefficient: (end.B - start.B) / (endPercent - startPercent),
+    intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
+    value: '',
+  };
+
+  R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
+  G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
+  B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
+
+  return (R.value + G.value + B.value);
+};
+
+export default gradientRatio;

package/src/utils/ts/kiloToMega.ts

@@ -1,30 +1,30 @@
-import { roundNum } from '@jk-core/utils';
-
-const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
-  const validAmount = amount ?? 0;
-
-  if (!isKilo) {
-    if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
-      return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
-    }
-    if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
-      return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
-    }
-    if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
-      return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
-    }
-
-    return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
-  }
-
-  if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
-    return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
-  }
-  if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
-    return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
-  }
-
-  return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
-};
-
-export default KiloToMega;
+import { roundNum } from '@jk-core/utils';
+
+const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
+  const validAmount = amount ?? 0;
+
+  if (!isKilo) {
+    if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
+      return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
+    }
+    if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
+      return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
+    }
+    if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
+      return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
+    }
+
+    return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
+  }
+
+  if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
+    return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
+  }
+  if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
+    return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
+  }
+
+  return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
+};
+
+export default KiloToMega;

package/src/utils/ts/maskingPhone.ts

@@ -1,9 +1,9 @@
-const maskingPhone = (phone: string = '') => {
-  const phoneArr = phone.split('-');
-  if (phoneArr.length === 3) {
-    return `${phoneArr[0]}-****-${phoneArr[2]}`;
-  }
-  return phone;
-};
-
+const maskingPhone = (phone: string = '') => {
+  const phoneArr = phone.split('-');
+  if (phoneArr.length === 3) {
+    return `${phoneArr[0]}-****-${phoneArr[2]}`;
+  }
+  return phone;
+};
+
 export default maskingPhone;

package/src/utils/ts/toQueryString.ts

@@ -1,7 +1,7 @@
-const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
-  `${path}?${Object.entries(data).reduce((acc, [key, value]) => {
-    acc.append(key, value);
-    return acc;
-  }, new URLSearchParams())}`;
-
-export default makeQueryString;
+const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
+  `${path}?${Object.entries(data).reduce((acc, [key, value]) => {
+    acc.append(key, value);
+    return acc;
+  }, new URLSearchParams())}`;
+
+export default makeQueryString;