@jk-core/components 0.1.16 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "0.1.16",
+  "version": "1.0.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",
@@ -27,7 +27,7 @@
   },
   "files": [
     "./dist",
-    "./`src"
+    "./src"
   ],
   "keywords": [
     "utils",
@@ -36,9 +36,9 @@
     "components",
     "calendar"
   ],
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "scripts": {
     "build": "yarn clean && vite build",
@@ -47,15 +47,18 @@
     "lint:eslint": "eslint ./src/ --ext .tsx,.ts",
     "lint:stylelint": "stylelint \"./src/**/*.scss\" --config .stylelintrc.json"
   },
+  "dependencies": {
+    "@jk-core/hooks": "workspace:^",
+    "@jk-core/utils": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
-    "@jk-core/hooks": "workspace:*",
-    "@jk-core/utils": "workspace:*",
-    "@types/node": "^22.7.4",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@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-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -65,9 +68,9 @@
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "globals": "^15.15.0",
     "optionator": "^0.9.4",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.3",
     "sass": "^1.80.0",
     "sass-loader": "^16.0.2",
     "stylelint": "^16.6.1",
@@ -75,13 +78,13 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-scss": "^6.8.0",
     "stylelint-selector-bem-pattern": "^4.0.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.8",
-    "vite-plugin-checker": "^0.8.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-checker": "^0.9.1",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.2.3",
-    "vite-plugin-sass-dts": "^1.3.29",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-sass-dts": "^1.3.31",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

package/src/Calendar/Calendar.module.scss

@@ -0,0 +1,213 @@
+@use "../styles/mediaQuery.scss" as media;
+
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+}
+
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--calendar-G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--calendar-G-80);
+  background-color: var(--calendar-white);
+
+  &--range {
+    box-sizing: border-box;
+  }
+
+  &--scroll {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  &__scroll {
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    box-sizing: border-box;
+    gap: 10px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &--wrapper {
+      flex: 1 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &--button {
+      width: 95%;
+      margin: 5px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background-color: var(--calendar-white);
+      border: 2px solid var(--calendar-G-50);
+      padding: 15px 0;
+      transition: 0.2s;
+      font-size: 1.2em;
+
+      &:active {
+        scale: 0.98;
+        background-color: var(--calendar-G-5);
+      }
+    }
+  }
+
+  &__close {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 7px 10px 7px 0;
+    box-sizing: border-box;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+  }
+
+  &__range-tile {
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__wrapper {
+    flex: 1 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f3f4f8;
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    height: 100%;
+    border: 2px solid var(--calendar-G-30);
+    width: 33.3%;
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &--second {
+      left: 33%;
+    }
+
+    &--last {
+      left: 66.6%;
+    }
+  }
+
+  &__selector {
+    position: relative;
+    height: 40px;
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--calendar-G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--calendar-G-80);
+      font-size: 1em;
+      font-weight: 600;
+    }
+  }
+}
+
+.nav {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  border-bottom: 1px solid var(--calendar-G-30);
+  font-size: 1.3em;
+  font-weight: 400;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border-radius: 100%;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-10);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      fill: var(--calendar-G-40);
+      background-color: transparent;
+    }
+  }
+
+  &__label {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 1.1em;
+    font-weight: 400;
+
+    &--date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      padding: 5px 10px;
+      font-weight: 400;
+      font-size: 1em;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &--date-selected {
+      background-color: var(--calendar-S-10);
+    }
+  }
+}

package/src/Calendar/RangeCalendar.tsx

@@ -0,0 +1,125 @@
+/* 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 styles from './Calendar.module.scss';
+import { CalendarRange } from './type';
+import DateLabel from './components/DateLabel';
+import useCalendarNav from './hooks/useCalendarNav';
+import getWeeksInMonth from './utils/getWeeksInMonth';
+
+interface CalendarProps {
+  className?: string;
+  date: CalendarRange;
+  onChange:(date:CalendarRange)=>void;
+  min: Date;
+  max: Date;
+  onClose?: () => void;
+}
+
+export default function RangeCalendar({
+  className = '', date: selectedDate = [null, null], onChange, onClose,
+  min, max,
+}: CalendarProps) {
+  const method = 'day';
+  const [viewDate, setViewDate] = useState<Date>(selectedDate?.[0] || new Date());
+  const [hoverDate, setHoverDate] = useState<Date | null>(null);
+  const weeksInMonth = getWeeksInMonth(viewDate);
+
+  const onDayClick = (day: Date, maintenance = false) => {
+    if (!maintenance) setViewDate(day);
+    if (!selectedDate[0] || (!!selectedDate[0] && !!selectedDate[1])) {
+      onChange([day, null]);
+    }
+    if (!!selectedDate[0] && !selectedDate[1]) {
+      if (day < selectedDate[0]) {
+        onChange([day, null]);
+      } else {
+        onChange([selectedDate[0], day]);
+      }
+    }
+  };
+
+  const { disabled, onArrowClick } = useCalendarNav({
+    method, selectMode: 'day', viewDate, setDate: setViewDate, min, max,
+  });
+
+  useEffect(() => {
+    if (viewDate > max) {
+      setViewDate(max);
+    }
+    if (viewDate < min) {
+      setViewDate(min);
+    }
+  }, [viewDate, max, min]);
+
+  return (
+    <div className={cn({
+      [styles.calendar]: true,
+      [styles['calendar--range']]: true,
+      [className]: !!className,
+    })}
+    >
+      <div className={styles.calendar__close}>
+        {onClose && (
+          <CloseIcon onClick={onClose} />
+        )}
+      </div>
+      {/* 일/월/년 선택 버튼 */}
+      <div className={styles['calendar__range-tile']}>
+        <div className={styles.calendar__wrapper}>
+          <DateLabel
+            viewDate={viewDate}
+            method="day"
+            onArrowClick={onArrowClick}
+            disabled={disabled}
+            hideArrow="next"
+            range
+          />
+          <DayTile
+            hoverDate={hoverDate}
+            setHoverDate={(day) => setHoverDate(day)}
+            selectedDate={selectedDate}
+            weeksInMonth={weeksInMonth}
+            handleDayClick={onDayClick}
+            hideAfter
+            max={max}
+            min={min}
+            range
+          />
+        </div>
+        <div className={styles.calendar__wrapper}>
+          <DateLabel
+            viewDate={new Date(
+              viewDate.getFullYear(),
+              viewDate.getMonth() + 1,
+              1,
+            )}
+            method="day"
+            onArrowClick={onArrowClick}
+            disabled={disabled}
+            hideArrow="prev"
+            range
+          />
+          <DayTile
+            hoverDate={hoverDate}
+            setHoverDate={(day) => setHoverDate(day)}
+            selectedDate={selectedDate}
+            weeksInMonth={getWeeksInMonth(new Date(
+              viewDate.getFullYear(),
+              viewDate.getMonth() + 1,
+              1,
+            ))}
+            handleDayClick={(day) => onDayClick(day, true)}
+            hideBefore
+            hideAfter
+            max={max}
+            min={min}
+            range
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/Calendar/ScrollCalendar.module.scss

@@ -0,0 +1,214 @@
+@use "../styles/mediaQuery.scss" as media;
+
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // 모바일 터치 하이라이트 색상 제거
+}
+
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--calendar-G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--calendar-G-80);
+  background-color: var(--calendar-white);
+
+  &--range {
+    box-sizing: border-box;
+  }
+
+  &--scroll {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  &__scroll {
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    box-sizing: border-box;
+    gap: 10px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &--wrapper {
+      flex: 1 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &--button {
+      width: 95%;
+      margin: 5px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background-color: var(--calendar-white);
+      border: 2px solid var(--calendar-G-50);
+      padding: 15px 0;
+      transition: 0.2s;
+      font-size: 1.2em;
+
+      &:active {
+        scale: 0.98;
+        background-color: var(--calendar-G-5);
+      }
+    }
+  }
+
+  &__close {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 7px 10px 7px 0;
+    box-sizing: border-box;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+  }
+
+  &__range-tile {
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__wrapper {
+    flex: 1 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f3f4f8;
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    height: 100%;
+    border: 2px solid var(--calendar-G-30);
+    width: 33.3%;
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &--second {
+      left: 33%;
+    }
+
+    &--last {
+      left: 66.6%;
+    }
+  }
+
+  &__selector {
+    position: relative;
+    height: 40px;
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--calendar-G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--calendar-G-80);
+      font-size: 1em;
+      font-weight: 600;
+    }
+  }
+}
+
+.nav {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  border-bottom: 1px solid var(--calendar-G-30);
+  font-size: 1.3em;
+  font-weight: 400;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border-radius: 100%;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-10);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      fill: var(--calendar-G-40);
+      background-color: transparent;
+    }
+  }
+
+  &__label {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 1.1em;
+    font-weight: 400;
+
+    &--date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      padding: 5px 10px;
+      font-weight: 400;
+      font-size: 1em;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &--date-selected {
+      background-color: var(--calendar-S-10);
+    }
+  }
+}