@jk-core/components 1.0.2 → 1.1.0

package/src/common/SegmentButton/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './SegmentButton.module.scss';
+
+interface SegmentButtonProps {
+  /**
+   * 세그먼트 버튼의 너비를 지정합니다. 기본값은 'auto'입니다.
+   * 만약 stretch가 true로 설정되면, 너비는 'auto'로 설정됩니다.
+   */
+  width?: string;
+  /**
+   * 세그먼트 버튼이 전체 너비를 차지하도록 설정합니다.
+   * true로 설정하면 버튼이 부모 요소의 너비를 채웁니다.
+   */
+  stretch?: boolean;
+  /**
+   * 세그먼트 버튼의 옵션을 설정합니다.
+   * 각 옵션은 텍스트와 클릭 이벤트 핸들러를 포함합니다.
+   */
+  option:Array<{ text: string; onClick: () => void }>;
+}
+
+/**
+ * 세그먼트 버튼 컴포넌트는 여러 개의 버튼을 세그먼트 형태로 표시합니다.
+ * 각 버튼은 클릭 시 지정된 함수를 실행합니다.
+ */
+export default function SegmentButton({ width, stretch, option }: SegmentButtonProps) {
+  const [selected, setSelected] = useState(0);
+
+  return (
+    <div
+      className={styles.segment}
+      style={{
+        width: stretch ? '100%' : undefined,
+        gridTemplateColumns: `repeat(${option.length},1fr)`,
+      }}
+    >
+      <div
+        className={styles['segment--selector']}
+        style={{
+          width: `${100 / option.length}%`,
+          left: `${(selected * 100) / option.length}%`,
+        }}
+      />
+      {option.map((item, index) => (
+        <button
+          className={cn({
+            [styles.button]: true,
+            [styles['button--selected']]: index === selected,
+          })}
+          key={item.text}
+          type="button"
+          style={{ width: stretch ? 'auto' : (width || 'auto') }}
+          onClick={() => {
+            setSelected(index);
+            item.onClick();
+          }}
+        >
+          <div>
+            {item.text}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/common/Skeleton/Skeleton.module.scss

@@ -0,0 +1,80 @@
+$color: #eeeeee;
+$shadow: #e5e5e5;
+
+@keyframes skeleton-blink {
+  0% {
+    left: -100%;
+  }
+  99.9% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes skeleton-glow {
+  0% {
+    background-color: $color;
+  }
+  50% {
+    background-color: $shadow;
+  }
+  100% {
+    background-color: $color;
+  }
+}
+
+.skeleton-circle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  border-radius: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.skeleton-round {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.skeleton-rectangle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.skeleton--glow {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    animation: skeleton-glow 2s infinite;
+  }
+}
+
+.skeleton--blink {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, transparent, $shadow, transparent);
+    animation: skeleton-blink 3s infinite;
+  }
+}

package/src/common/Skeleton/index.tsx

@@ -0,0 +1,48 @@
+import styles from './Skeleton.module.scss';
+
+interface SkeletonProps {
+  /**
+   * 스켈레톤의 모양을 지정합니다. 'circle', 'rectangle', 'round' 중 하나를 선택할 수 있습니다.
+   * 기본값은 'rectangle'입니다.
+   */
+  shape?: 'circle' | 'rectangle' | 'round';
+  /**
+   * 스켈레톤의 너비를 지정합니다. 기본값은 '100%'입니다.
+   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
+   */
+  width?: string | number;
+  /**
+   * 스켈레톤의 높이를 지정합니다. 기본값은 '20px'입니다.
+   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
+   */
+  height?: string | number;
+  /**
+   * 스켈레톤 애니메이션 효과를 지정합니다. 'glow' 또는 'blink' 중 하나를 선택할 수 있습니다.
+   * 기본값은 'glow'입니다.
+   */
+  animation?: 'glow' | 'blink';
+}
+
+/**
+ * 스켈레톤 컴포넌트는 로딩 상태를 나타내기 위해 사용됩니다.
+ * 다양한 모양과 크기를 지원하며, 애니메이션 효과를 적용할 수 있습니다.
+ */
+export default function Skeleton({ shape, width, height, animation = 'glow' }: SkeletonProps) {
+  const animationClass = animation === 'glow' ? styles['skeleton--glow'] : styles['skeleton--blink'];
+
+  if (shape === 'circle') {
+    return (
+      <div className={`${styles['skeleton-circle']} ${animationClass}`} style={{ width, height }} />
+    );
+  }
+
+  if (shape === 'round') {
+    return (
+      <div className={`${styles['skeleton-round']} ${animationClass}`} style={{ width, height }} />
+    );
+  }
+
+  return (
+    <div className={`${styles['skeleton-rectangle']} ${animationClass}`} style={{ width, height }} />
+  );
+}

package/src/common/SwitchButton/SwitchButton.module.scss

@@ -0,0 +1,65 @@
+$main: #246beb;
+$main-shadow: #113475;
+$background: #eeeeee;
+$shadow: #bcbcbc;
+
+.button {
+	display: flex;
+	align-items: center;
+	height: 20px;
+	border: none;
+	background-color: transparent;
+	margin: 0 5px;
+	cursor: pointer;
+}
+
+.switch {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 50px;
+	height: 25px;
+	border-radius: 100px;
+	background-color: $background;
+	box-shadow: inset 0 0 3px 1px $shadow;
+	transition: background-color 0.2s;
+
+	&__off {
+		background-color: $main;
+		border-color: $main;
+		box-shadow: inset 0 0 3px 1px $main-shadow;
+	}
+
+	&__button {
+		position: absolute;
+		width: 25px;
+		height: 25px;
+		border-radius: 100px;
+		transition: 0.2s;
+		padding: 2px;
+		overflow: hidden;
+
+		&--circle {
+			width: 100%;
+			height: 100%;
+			background-color: #ffffff;
+			border-radius: 100%;
+			box-shadow: 0 0 5px 1px $shadow;
+		}
+
+		&--circle-on {
+			box-shadow: none;
+		}
+
+		&--off {
+			left: 0px;
+			transition: 0.2s;
+		}
+
+		&--on {
+			left: 25px;
+			transition: 0.2s;
+			border-color: $main;
+		}
+	}
+}

package/src/common/SwitchButton/index.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './SwitchButton.module.scss';
+
+interface SwitchButtonProps {
+  /**
+   * 스위치 버튼의 상태를 나타냅니다.
+   * true이면 스위치가 켜진 상태, false이면 꺼진 상태입니다.
+   * 기본값은 false로 설정되어 있습니다.
+   */
+  checked?: boolean,
+  /**
+   * 스위치 버튼의 상태가 변경될 때 호출되는 함수입니다.
+   */
+  onChange?: (value: boolean) => void
+}
+
+/**
+ * SwitchButton 컴포넌트
+ * 스위치 버튼을 표시하며, 클릭 시 상태가 변경됩니다.
+ * checked 속성으로 초기 상태를 설정할 수 있으며, onChange 함수를 통해 상태 변경을 처리할 수 있습니다.
+ */
+export default function SwitchButton({ checked = false, onChange = () => { } }: SwitchButtonProps) {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  return (
+    <button
+      className={styles.button}
+      type="button"
+      onClick={() => {
+        setIsChecked(!isChecked);
+        onChange(!isChecked);
+      }}
+    >
+      <div
+        className={cn({
+          [styles.switch]: true,
+          [styles.switch__off]: checked,
+        })}
+      >
+        <div className={cn({
+          [styles.switch__button]: true,
+          [styles['switch__button--off']]: !checked,
+          [styles['switch__button--on']]: checked,
+        })}
+        >
+          <div className={cn({
+            [styles['switch__button--circle']]: true,
+            [styles['switch__button--circle-on']]: checked,
+          })}
+          />
+        </div>
+      </div>
+    </button>
+  );
+}

package/src/index.scss

@@ -0,0 +1 @@
+@forward "@/styles/color";

package/src/index.tsx

@@ -1,5 +1,21 @@
+import Breadcrumbs, { BreadcrumbsItem } from '@/common/Breadcrumbs';
+import { Button } from '@/common/Button';
+import Pagination from '@/common/Pagination';
+import Skeleton from '@/common/Skeleton';
+import SwitchButton from '@/common/SwitchButton';
 import Calendar from './Calendar';
 import { CalendarRange, CalendarView } from './Calendar/type';
+import Accordion from './common/Accordion';
+import Card from './common/Card';
+import DropDown from './common/DropDown';
+import SegmentButton from './common/SegmentButton';
+
+export {
+  Calendar, Accordion, Breadcrumbs, Button,
+  Pagination, Skeleton, SwitchButton,
+  Card, DropDown, SegmentButton, BreadcrumbsItem,
+};
 
-export { Calendar };
 export type { CalendarView, CalendarRange };
+
+import './index.scss';

package/src/styles/color.scss

@@ -0,0 +1,94 @@
+:root {
+  --white: #ffffff;
+  --black: #000000;
+  --P-5: #eff5ff;
+  --P-10: #d3e1fb;
+  --P-20: #a7c4f7;
+  --P-30: #7ca6f3;
+  --P-40: #5089ef;
+  --P-50: #246beb;
+  --P-60: #1d56bc;
+  --P-70: #16408d;
+  --P-90: #07152f;
+  --P-100: #000000;
+  --S-5: #edf1f5;
+  --S-10: #cdd7e4;
+  --S-20: #b4c4d6;
+  --S-30: #99b0cb;
+  --S-40: #6B96C7;
+  --S-50: #346FB2;
+  --S-60: #1C589C;
+  --S-70: #063a74;
+  --S-80: #00162f;
+  --S-90: #000b17;
+  --G-5: #f8f8f8;
+  --G-10: #f0f0f0;
+  --G-20: #e4e4e4;
+  --G-30: #d8d8d8;
+  --G-40: #c6c6c6;
+  --G-50: #8e8e8e;
+  --G-60: #717171;
+  --G-70: #555555;
+  --G-80: #2d2d2d;
+  --G-90: #1d1d1d;
+  --Point-5: #fdf2f3;
+  --Point-10: #f8d6d8;
+  --Point-20: #f5a3a8;
+  --Point-30: #f1747c;
+  --Point-40: #ec4651;
+  --Point-50: #e71825;
+  --Point-60: #b9131e;
+  --Point-70: #8b0e16;
+  --Point-80: #5c0a0f;
+  --Point-90: #2e0507;
+  --Warning-5: #fff8e9;
+  --Warning-10: #ffeac1;
+  --Warning-20: #ffe2a7;
+  --Warning-30: #ffd47c;
+  --Warning-40: #ffc550;
+  --Warning-50: #ffb724;
+  --Warning-60: #98690a;
+  --Warning-70: #66490e;
+  --Warning-80: #4d370b;
+  --Warning-90: #332507;
+  --Success-5: #eef7f0;
+  --Success-10: #cee9d4;
+  --Success-20: #b2dcbb;
+  --Success-30: #8cca99;
+  --Success-40: #33a14b;
+  --Success-50: #008a1e;
+  --Success-60: #006e18;
+  --Success-70: #005312;
+  --Success-80: #00370c;
+  --Success-90: #002207;
+  --Info-5: #e9f0ff;
+  --Info-10: #d4e1ff;
+  --Info-20: #a9c3ff;
+  --Info-30: #7da4ff;
+  --Info-40: #5286ff;
+  --Info-50: #2768ff;
+  --Info-60: #1f53cc;
+  --Info-70: #173e99;
+  --Info-80: #0c1f4d;
+  --Info-90: #040a1a;
+  --Red: #e40000;
+  --Red2: #ffe4e4;
+  --Green: #2fb400;
+  --Green-2: #d7ffe0;
+  --Orange: #ff8800;
+  --Orange-5: #ffead1;
+  --Orange-10: #ffdacc;
+  --Orange-30: #ff8f66;
+  --Orange-40: #ff6a33;
+  --Orange-50: #ff4500;
+  --Orange-60: #d53209;
+  --Orange-70: #992900;
+  --Orange-80: #661c00;
+  --Orange-90: #330e00;
+  --Modal-Shadow: #0000005a;
+  --Modal-Background: #6666663a;
+  --loading: #6666663a;
+  --loading-color: #ffffff;
+  --loading-shadow: #00000033;
+  --loading-spinner: #222222;
+}

package/src/styles/font-face.scss

@@ -0,0 +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);

package/src/styles/font.scss

@@ -0,0 +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;
+  }
+}

package/src/styles/scrollbar.scss

@@ -0,0 +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);
+  }
+}

package/src/svg.d.ts

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

package/src/utils/styles/mediaQuery.scss

@@ -0,0 +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;
+  }
+}

package/src/utils/ts/allowDecimal.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +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('-'));
+}

package/src/utils/ts/calculateMax.ts

@@ -0,0 +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;
+};

package/src/utils/ts/checkIsMobilePlatform.ts

@@ -0,0 +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;