@jk-core/components 1.0.1 → 1.1.0

package/dist/src/common/Button/index.d.ts

@@ -0,0 +1,27 @@
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 내용 */
+    text: string;
+    /** 버튼 등급 (Primary, Secondary, Tertiary, Cancel) */
+    grade?: 'tertiary' | 'secondary' | 'primary' | 'cancel';
+    /** 버튼 비활성화 여부 */
+    disabled?: boolean;
+    /** 버튼 클래스 */
+    className?: string;
+    /** 로딩 중 여부, 버튼 내부 스피너 표시 */
+    isLoading?: boolean;
+    /** 버튼 클릭 이벤트 핸들러 */
+    onClick?: () => void;
+}
+/**
+ * 공용 버튼 컴포넌트입니다.
+ *
+ * 다양한 등급(grade)과 상태(로딩, 비활성화 등)를 지원하며, 텍스트와 클릭 이벤트를 전달할 수 있습니다.
+ *
+ * - `grade` prop을 통해 버튼의 스타일(Primary, Secondary, Tertiary, Cancel)을 지정할 수 있습니다.
+ * - `isLoading`이 true일 때 로딩 애니메이션이 표시됩니다.
+ * - `disabled`가 true이면 버튼이 비활성화됩니다.
+ * - `text` prop으로 버튼에 표시할 텍스트를 지정합니다.
+ * - 추가적으로 button의 모든 기본 속성(React.)을 지원합니다.
+ */
+export declare function Button({ text, grade, disabled, onClick, className, isLoading, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/Card/index.d.ts

@@ -0,0 +1,6 @@
+interface CardProps {
+    title: string | React.ReactNode;
+    children?: React.ReactNode;
+}
+export default function Card({ title, children }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/DropDown/List.d.ts

@@ -0,0 +1,10 @@
+interface ListProps {
+    selectedItem?: string;
+    list: string[];
+    filteredList: string[];
+    parent: React.RefObject<HTMLDivElement | null>;
+    onSelect: (item: string, index: number) => void;
+    setFilteredList?: React.Dispatch<React.SetStateAction<string[]>>;
+}
+export default function List({ parent, selectedItem, list, filteredList, onSelect, setFilteredList }: ListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/DropDown/index.d.ts

@@ -0,0 +1,29 @@
+interface DropDownProps {
+    /**
+     * 드롭다운 목록
+     */
+    list: string[];
+    /**
+     * 선택된 아이템을 처리하는 함수
+     */
+    onSelect: (item: string, index: number) => void;
+    /**
+     * 필터링 기능 활성화 여부
+     */
+    filter?: boolean;
+    /**
+     * 드롭다운의 플레이스홀더 텍스트
+     */
+    placeholder?: string;
+    /**
+     * 드롭다운의 스타일
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 드롭다운 컴포넌트
+ * 사용자가 선택할 수 있는 목록을 제공하며, 선택된 아이템을 표시합니다.
+ * 필터링 기능을 활성화할 수 있으며, 플레이스홀더 텍스트를 설정할 수 있습니다.
+ */
+export default function DropDown({ list, onSelect, filter, placeholder, style }: DropDownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/Pagination/index.d.ts

@@ -0,0 +1,16 @@
+interface PaginationProps {
+    /**
+     * 총 페이지 수
+     */
+    totalPage: number;
+    /**
+     * 현재 페이지
+     */
+    currentPage: number;
+    /**
+     * 페이지 클릭 핸들러
+     */
+    onPageClick: (page: number) => void;
+}
+export default function Pagination({ totalPage, currentPage, onPageClick }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/SegmentButton/index.d.ts

@@ -0,0 +1,26 @@
+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): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/Skeleton/index.d.ts

@@ -0,0 +1,28 @@
+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 }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/SwitchButton/index.d.ts

@@ -0,0 +1,19 @@
+interface SwitchButtonProps {
+    /**
+     * 스위치 버튼의 상태를 나타냅니다.
+     * true이면 스위치가 켜진 상태, false이면 꺼진 상태입니다.
+     * 기본값은 false로 설정되어 있습니다.
+     */
+    checked?: boolean;
+    /**
+     * 스위치 버튼의 상태가 변경될 때 호출되는 함수입니다.
+     */
+    onChange?: (value: boolean) => void;
+}
+/**
+ * SwitchButton 컴포넌트
+ * 스위치 버튼을 표시하며, 클릭 시 상태가 변경됩니다.
+ * checked 속성으로 초기 상태를 설정할 수 있으며, onChange 함수를 통해 상태 변경을 처리할 수 있습니다.
+ */
+export default function SwitchButton({ checked, onChange }: SwitchButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/index.d.ts

@@ -1,4 +1,13 @@
+import { default as Breadcrumbs, BreadcrumbsItem } from './common/Breadcrumbs';
+import { Button } from './common/Button';
+import { default as Pagination } from './common/Pagination';
+import { default as Skeleton } from './common/Skeleton';
+import { default as SwitchButton } from './common/SwitchButton';
 import { default as Calendar } from './Calendar';
 import { CalendarRange, CalendarView } from './Calendar/type';
-export { Calendar };
+import { default as Accordion } from './common/Accordion';
+import { default as Card } from './common/Card';
+import { default as DropDown } from './common/DropDown';
+import { default as SegmentButton } from './common/SegmentButton';
+export { Calendar, Accordion, Breadcrumbs, Button, Pagination, Skeleton, SwitchButton, Card, DropDown, SegmentButton, BreadcrumbsItem, };
 export type { CalendarView, CalendarRange };

package/dist/src/utils/ts/allowDecimal.d.ts

@@ -0,0 +1 @@
+export declare const allowDecimal: (val: number) => boolean;

package/dist/src/utils/ts/autoHypen.d.ts

@@ -0,0 +1 @@
+export default function AutoHypen(input: string): string;

package/dist/src/utils/ts/calculateMax.d.ts

@@ -0,0 +1,9 @@
+/**
+ * unit으로 나누어떨어지면서,
+ * a가 양수라면, a보다 크되 가장 작은 정수.
+ * a가 음수라면, a보다 작되 가장 큰 정수를 반환.
+ * 절댓값이 threshold에 미치지못한다면, 그대로 반환.
+ * @param {*} value
+ * @param {*} unit
+ */
+export declare const calculateMax: (value?: number, threshold?: number, unit?: number) => number | undefined;

package/dist/src/utils/ts/checkIsMobilePlatform.d.ts

@@ -0,0 +1,2 @@
+declare const checkIsMobile: () => boolean;
+export default checkIsMobile;

package/dist/src/utils/ts/formatFileSize.d.ts

@@ -0,0 +1,4 @@
+export declare const formatFileSize: (bytes: number, unit?: "KB" | "MB" | "GB" | "TB") => {
+    size: number;
+    unit: string;
+};

package/dist/src/utils/ts/formatMoney.d.ts

@@ -0,0 +1,2 @@
+declare const formatMoney: (value?: number) => "- 원" | (string | number)[];
+export default formatMoney;

package/dist/src/utils/ts/gradientRatio.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
+ *
+ * @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진수 형식(앞에 # 없이)으로 반환됩니다.
+ */
+declare const gradientRatio: ({ currPercent, startPercent, startColor, endPercent, endColor, }: {
+    currPercent: number;
+    startPercent: number;
+    startColor: string;
+    endPercent: number;
+    endColor: string;
+}) => string;
+export default gradientRatio;

package/dist/src/utils/ts/kiloToMega.d.ts

@@ -0,0 +1,6 @@
+declare const KiloToMega: (amount: number | null | undefined, unit?: string, scale?: number, isKilo?: boolean) => {
+    generation: number;
+    unit: string;
+    total: string;
+};
+export default KiloToMega;

package/dist/src/utils/ts/maskingPhone.d.ts

@@ -0,0 +1,2 @@
+declare const maskingPhone: (phone?: string) => string;
+export default maskingPhone;

package/dist/src/utils/ts/toQueryString.d.ts

@@ -0,0 +1,5 @@
+declare const makeQueryString: ({ path, data }: {
+    path: string;
+    data: object;
+}) => string;
+export default makeQueryString;

package/dist/src/utils/ts/valueAsNumber.d.ts

@@ -0,0 +1,12 @@
+/**
+ * useForm의 register option중
+ * valueAsNumber: true인 경우에
+ * input 필드가 비어있는 경우 (즉, ''인 경우)
+ * 필드값이 NaN으로 할당되어 이를 대체하기위한 함수
+ *
+ * e.g.) ...register('calibrationFactor', valueAsNumber()),
+ * e.g.) ...register('vltMp', { required: true, ...valueAsNumber() }),
+ */
+export declare const valueAsNumber: () => {
+    setValueAs: (v: string) => undefined | string | number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",
@@ -44,8 +44,9 @@
     "build": "yarn clean && vite build",
     "clean": "rm -rf dist",
     "lint": "yarn lint:eslint && yarn lint:stylelint",
-    "lint:eslint": "eslint ./src/ --ext .tsx,.ts",
-    "lint:stylelint": "stylelint \"./src/**/*.scss\" --config .stylelintrc.json"
+    "lint:fix": "yarn lint:eslint --fix && yarn lint:stylelint --fix",
+    "lint:eslint": "eslint src",
+    "lint:stylelint": "stylelint \"./src/**/*.scss\" --config ../../.stylelintrc.json"
   },
   "dependencies": {
     "@jk-core/hooks": "^1.0.0",
@@ -54,34 +55,41 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@types/node": "^22.14.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^8.57.0",
+    "@eslint/js": "^9.30.1",
+    "@stylistic/eslint-plugin": "^5.1.0",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/node": "^24.0.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "code-inspector-plugin": "^0.20.15",
+    "eslint": "^9.30.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "globals": "^15.15.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
     "optionator": "^0.9.4",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.6",
+    "postcss-scss": "^4.0.9",
     "sass": "^1.80.0",
     "sass-loader": "^16.0.2",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-scss": "^6.8.0",
-    "stylelint-selector-bem-pattern": "^4.0.0",
-    "typescript": "~5.7.2",
-    "vite": "^6.2.0",
-    "vite-plugin-checker": "^0.9.1",
+    "stylelint": "^16.21.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "stylelint-selector-bem-pattern": "^4.0.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.36.0",
+    "vite": "^7.0.2",
+    "vite-plugin-checker": "^0.10.0",
     "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-css-modules": "^0.0.1",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-sass-dts": "^1.3.31",
     "vite-plugin-svgr": "^4.3.0",

package/src/Calendar/RangeCalendar.tsx

@@ -1,12 +1,12 @@
-/* eslint-disable react/no-array-index-key */
-import { cn } from '@jk-core/utils';
+
 import { useEffect, useState } from 'react';
-import CloseIcon from '../assets/close.svg';
-import DayTile from './components/DayTile';
+import { cn } from '@jk-core/utils';
+import CloseIcon from '@/assets/close.svg';
 import styles from './Calendar.module.scss';
-import { CalendarRange } from './type';
 import DateLabel from './components/DateLabel';
+import DayTile from './components/DayTile';
 import useCalendarNav from './hooks/useCalendarNav';
+import { CalendarRange } from './type';
 import getWeeksInMonth from './utils/getWeeksInMonth';
 
 interface CalendarProps {

package/src/Calendar/ScrollCalendar.tsx

@@ -1,11 +1,11 @@
-import { cn } from '@jk-core/utils';
 import { useEffect, useRef, useState } from 'react';
 import { useIntersectionObserver } from '@jk-core/hooks';
-import DayTile from './components/DayTile';
+import { cn } from '@jk-core/utils';
 import styles from './Calendar.module.scss';
 import DateLabel from './components/DateLabel';
-import getWeeksInMonth from './utils/getWeeksInMonth';
+import DayTile from './components/DayTile';
 import { CalendarRange } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
 
 interface CalendarProps {
   className?: string;

package/src/Calendar/SingleCalendar.tsx

@@ -1,18 +1,18 @@
-/* eslint-disable react/no-array-index-key */
+
 import { useEffect, useState } from 'react';
 import { cn } from '@jk-core/utils';
-import CloseIcon from '../assets/close.svg';
-import { CalendarView } from './type';
-import getWeeksInMonth from './utils/getWeeksInMonth';
+import CloseIcon from '@/assets/close.svg';
+import styles from './Calendar.module.scss';
+import DateLabel from './components/DateLabel';
 import DayTile from './components/DayTile';
 import MonthTile from './components/MonthTile';
+import ViewSelector from './components/ViewSelector';
 import YearTile from './components/YearTile';
 import useCalendarNav from './hooks/useCalendarNav';
 import useDateSelect from './hooks/useDateSelect';
-import styles from './Calendar.module.scss';
-import ViewSelector from './components/ViewSelector';
+import { CalendarView } from './type';
+import getWeeksInMonth from './utils/getWeeksInMonth';
 import './index.scss';
-import DateLabel from './components/DateLabel';
 
 interface CalendarProps {
   className?: string;
@@ -86,14 +86,14 @@ export default function SingleCalendar({
       />
 
       {(method === 'day' && selectMode === 'day') && (
-      <DayTile
-        selectedDate={[selectedDate, null]}
-        weeksInMonth={weeksInMonth}
-        handleDayClick={onDayClick}
-        tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
-        max={max}
-        min={min}
-      />
+        <DayTile
+          selectedDate={[selectedDate, null]}
+          weeksInMonth={weeksInMonth}
+          handleDayClick={onDayClick}
+          tileContent={() => (tileContent ? tileContent(selectedDate, method) : null)}
+          max={max}
+          min={min}
+        />
       )}
 
       {((method === 'month' || selectMode === 'month') && selectMode !== 'year') && (

package/src/Calendar/components/DateLabel/index.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@jk-core/utils';
-import { CalendarView } from 'Calendar/type';
-import ArrowIcon from 'assets/arrow.svg';
-import DropIcon from 'assets/drop-arrow.svg';
+import ArrowIcon from '@/assets/arrow.svg';
+import DropIcon from '@/assets/drop-arrow.svg';
+import { CalendarView } from '@/Calendar/type';
 import styles from './DateLabel.module.scss';
 
 interface DateLabelProps {
@@ -26,14 +26,14 @@ export default function DateLabel({
     })}
     >
       {hideArrow !== 'all' && (
-      <button
-        className={styles.nav__button}
-        type="button"
-        onClick={() => onArrowClick('prev')}
-        disabled={disabled('prev') || hideArrow === 'prev'}
-      >
-        {hideArrow !== 'prev' && <ArrowIcon />}
-      </button>
+        <button
+          className={styles.nav__button}
+          type="button"
+          onClick={() => onArrowClick('prev')}
+          disabled={disabled('prev') || hideArrow === 'prev'}
+        >
+          {hideArrow !== 'prev' && <ArrowIcon />}
+        </button>
       )}
       {range ? (
         <div className={cn({
@@ -77,14 +77,14 @@ export default function DateLabel({
         </div>
       )}
       {hideArrow !== 'all' && (
-      <button
-        className={styles.nav__button}
-        type="button"
-        onClick={() => onArrowClick('next')}
-        disabled={disabled('next') || hideArrow === 'next'}
-      >
-        {hideArrow !== 'next' && <ArrowIcon style={{ transform: 'rotate(180deg)' }} />}
-      </button>
+        <button
+          className={styles.nav__button}
+          type="button"
+          onClick={() => onArrowClick('next')}
+          disabled={disabled('next') || hideArrow === 'next'}
+        >
+          {hideArrow !== 'next' && <ArrowIcon style={{ transform: 'rotate(180deg)' }} />}
+        </button>
       )}
     </div>
   );

package/src/Calendar/components/DayTile/index.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable react/no-array-index-key */
-import isSameDay from 'Calendar/utils/isSameDay';
+
 import { cn } from '@jk-core/utils';
-import { CalendarRange } from 'Calendar/type';
-import isInRange from 'Calendar/utils/isInRange';
+import { CalendarRange } from '@/Calendar/type';
+import isInRange from '@/Calendar/utils/isInRange';
+import isSameDay from '@/Calendar/utils/isSameDay';
 import styles from './DayTile.module.scss';
 
 const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
@@ -30,6 +30,14 @@ export default function DayTile({
   max, min, hideBefore = false, hideAfter = false, style, scroll,
   hoverDate, setHoverDate = () => { },
 }: Props) {
+  const handleDisabled = (date: Date): boolean => {
+    const compareDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const compareMin = min ? new Date(min.getFullYear(), min.getMonth(), min.getDate()) : null;
+    const compareMax = max ? new Date(max.getFullYear(), max.getMonth(), max.getDate()) : null;
+
+    return !!((compareMin && compareDate < compareMin) || (compareMax && compareDate > compareMax));
+  };
+
   return (
     <div className={styles['day-tile']} style={style}>
       <div className={styles['day-tile__weeks']}>
@@ -57,7 +65,7 @@ export default function DayTile({
                   [styles['day-tile__day--range']]: isInRange(day.date, selectedDate) || (!!selectedDate?.[0] && (isInRange(day.date, [selectedDate[0], hoverDate]))),
                 })}
                 type="button"
-                disabled={(min && day.date < min) || (max && day.date > max)}
+                disabled={handleDisabled(day.date)}
                 key={idx}
                 onMouseOver={() => {
                   if (!selectedDate?.[1] && !((min && day.date < min) || (max && day.date > max))) {

package/src/Calendar/components/MonthTile/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@jk-core/utils';
-import isSameDay from '../../utils/isSameDay';
-import { CalendarView } from '../../type';
+import { CalendarView } from '@/Calendar/type';
+import isSameDay from '@/Calendar/utils/isSameDay';
 import styles from './MonthTile.module.scss';
 
 const MONTHS = Array.from({ length: 12 }, (_, i) => i);

package/src/Calendar/components/ViewSelector/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@jk-core/utils';
-import { CalendarView } from 'Calendar/type';
+import { CalendarView } from '@/Calendar/type';
 import styles from './ViewSelector.module.scss';
 
 interface ViewSelectorProps {
@@ -10,12 +10,12 @@ export default function ViewSelector({ method, selectView }:ViewSelectorProps) {
   return (
     <div className={styles.view}>
       <div className={
-            cn({
-              [styles.view__block]: true,
-              [styles['view__block--second']]: method === 'month',
-              [styles['view__block--last']]: method === 'year',
-            })
-          }
+        cn({
+          [styles.view__block]: true,
+          [styles['view__block--second']]: method === 'month',
+          [styles['view__block--last']]: method === 'year',
+        })
+      }
       />
       <button
         className={cn({

package/src/Calendar/components/YearTile/YearTile.module.scss

@@ -1,7 +1,6 @@
 @use "../../../styles/mediaQuery.scss" as media;
 
 .year-tile {
-  position: relative;
   min-height: 310px;
   padding: 5px;
   position: relative;

package/src/Calendar/components/YearTile/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { cn } from '@jk-core/utils';
-import { CalendarView } from '../../type';
+import { CalendarView } from '@/Calendar/type';
 import styles from './YearTile.module.scss';
 
 interface Props {

package/src/Calendar/hooks/useCalendarNav.ts

@@ -17,7 +17,10 @@ const useCalendarNav = ({
     if (method === 'day') {
       if (direction === 'prev') {
         const prevMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
-        return prevMonth < min;
+        const isPrevMonthBeforeMin = prevMonth.getFullYear() < min.getFullYear()
+          || (prevMonth.getFullYear() === min.getFullYear()
+            && prevMonth.getMonth() < min.getMonth());
+        return isPrevMonthBeforeMin;
       }
       const nextMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
       return nextMonth > max;

package/src/Calendar/index.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable react/no-array-index-key */
-import { CalendarRange, CalendarView } from './type';
+
 import RangeCalendar from './RangeCalendar';
-import SingleCalendar from './SingleCalendar';
 import ScrollCalendar from './ScrollCalendar';
+import SingleCalendar from './SingleCalendar';
+import { CalendarRange, CalendarView } from './type';
 
 import './index.scss';
 

package/src/Calendar/utils/isInRange.ts

@@ -1,4 +1,4 @@
-import { CalendarRange } from '../type';
+import { CalendarRange } from '@/Calendar/type';
 
 const isInRange = (day: Date, range?:CalendarRange) => {
   if (!range?.[0] || !range?.[1]) return false;