@jk-core/components 1.1.11 → 1.1.13

package/src/styles/font-face.scss

@@ -1,18 +1,18 @@
-@use "sass:string";
-
-@mixin font-face($font-name, $src, $weight: normal, $style: normal) {
-  @font-face {
-    font-family: $font-name;
-    src: url($src);
-    font-style: $style;
-    font-weight: $weight;
-    font-display: swap;
-  }
-}
-
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Regular.woff2", 400);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Medium.woff2", 500);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-SemiBold.woff2", 600);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Bold.woff2", 700);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-ExtraBold.woff2", 800);
-@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Black.woff2", 900);
+@use "sass:string";
+
+@mixin font-face($font-name, $src, $weight: normal, $style: normal) {
+  @font-face {
+    font-family: $font-name;
+    src: url($src);
+    font-style: $style;
+    font-weight: $weight;
+    font-display: swap;
+  }
+}
+
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Regular.woff2", 400);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Medium.woff2", 500);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-SemiBold.woff2", 600);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Bold.woff2", 700);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-ExtraBold.woff2", 800);
+@include font-face("Pretendard", "/fonts/Pretendard/Pretendard-Black.woff2", 900);

package/src/styles/font.scss

@@ -1,49 +1,49 @@
-@use "/src/utils/styles/mediaQuery.scss" as media;
-@use "sass:math";
-
-@mixin font($weight, $size) {
-  font-weight: $weight;
-  font-size: $size;
-}
-
-// 반응형 폰트 mixin
-// nesting 규칙에 의해 폰트는 항상 코드의 가장 마지막에 위치해야 한다.
-
-@mixin B-($i) {
-  font-weight: 700;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
-
-@mixin Semi-($i) {
-  font-weight: 600;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
-
-@mixin R-($i) {
-  font-weight: 400;
-  font-size: #{$i}rem;
-
-  @include media.tablet {
-    font-size: #{math.round($i * 0.9)}px;
-  }
-
-  @include media.mobile {
-    font-size: #{math.round($i * 0.8)}px;
-  }
-}
+@use "/src/utils/styles/mediaQuery.scss" as media;
+@use "sass:math";
+
+@mixin font($weight, $size) {
+  font-weight: $weight;
+  font-size: $size;
+}
+
+// 반응형 폰트 mixin
+// nesting 규칙에 의해 폰트는 항상 코드의 가장 마지막에 위치해야 한다.
+
+@mixin B-($i) {
+  font-weight: 700;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}
+
+@mixin Semi-($i) {
+  font-weight: 600;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}
+
+@mixin R-($i) {
+  font-weight: 400;
+  font-size: #{$i}rem;
+
+  @include media.tablet {
+    font-size: #{math.round($i * 0.9)}px;
+  }
+
+  @include media.mobile {
+    font-size: #{math.round($i * 0.8)}px;
+  }
+}

package/src/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/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;