@jk-core/components 0.0.1

package/.eslintrc.json

@@ -0,0 +1,63 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": ["./tsconfig.json"]
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react"
+  ],
+  "rules": {
+    "import/prefer-default-export":"off",
+    "no-var": "error",
+    "jsx-a11y/control-has-associated-label":"off",
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      {
+        "labelAttributes": ["htmlFor"],
+        "depth": 3
+      }
+    ],    
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "implicit-arrow-linebreak": "off",
+    "linebreak-style" : "off",
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["../../../*"],
+            "message": "Please use absolute path."
+          }
+        ]
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ]
+  }
+}

package/.stylelintrc.json

@@ -0,0 +1,29 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
+  ],
+  "plugins": ["stylelint-scss","stylelint-selector-bem-pattern"],
+  "recommendations": ["stylelint.vscode-stylelint"],
+  "rules": {
+    "property-no-vendor-prefix":null,
+    "import-notation": "string",
+    "selector-class-pattern": null,
+    "color-hex-length": null,
+    "no-descending-specificity": null,
+    "color-function-notation":null,
+    "alpha-value-notation":null,
+    "scss/percent-placeholder-pattern":null,
+    "custom-property-pattern":null,
+    "declaration-empty-line-before":null,
+    "scss/at-mixin-pattern":null,
+    "plugin/selector-bem-pattern": {
+      "componentName": "[A-Z]+",
+      "componentSelectors": {
+        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
+        "combined": "^\\.combined-{componentName}-[a-z]+$"
+      },
+      "utilitySelectors": "^\\.util-[a-z]+$"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@jk-core/components",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "license": "MIT",
+  "description": "components for jk",
+  "author": "KimKyungYun <kky38225221@gmail.com>",
+  "homepage": "https://bitbucket.org/jkcore/frontend_library#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://KyungYun@bitbucket.org/jkcore/frontend_library.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/jkcore/frontend_library/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "keywords": [
+    "utils",
+    "kyungyun",
+    "jk",
+    "components",
+    "calendar"
+  ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "sass": "^1.79.4"
+  },
+  "scripts": {
+    "prepack": "yarn build",
+    "publish": "npm publish --access public",
+    "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"
+  },
+  "devDependencies": {
+    "@jk-core/utils": "workspace:*",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.11",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "eslint": "^8.57.0",
+    "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",
+    "optionator": "^0.9.4",
+    "postcss": "^8.4.38",
+    "stylelint": "^16.6.1",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.5.1",
+    "stylelint-selector-bem-pattern": "^4.0.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.8",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-dts": "^4.2.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1"
+  }
+}

package/src/Calendar/Calendar.module.scss

@@ -0,0 +1,129 @@
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--G-80);
+  background-color: var(--white);
+
+  &__close {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 5px 5px 0 0;
+
+    svg {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+  }
+}
+
+.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(--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(--G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--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(--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%;
+
+    &:active {
+      background-color: var(--G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      fill: var(--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-size: 1.2em;
+      font-weight: 400;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &--date-selected {
+      background-color: var(--S-10);
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+@use "../mixin.module.scss" as mixin;
+@use "../../../styles/mediaQuery.scss" as media;
+
+.body {
+  @include mixin.body;
+
+  &__tile {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 5px;
+  }
+
+  &__weeks {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 1em;
+
+    &--date {
+      flex: 1 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 40px;
+      padding: 5px 0;
+    }
+  }
+
+  &__week {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__day {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    min-width: 40px;
+    min-height: 40px;
+    border-radius: 100%;
+    padding: 5px;
+    border: none;
+    font-weight: 400;
+    font-size: 1em;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--G-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--G-10);
+    }
+
+    &--today {
+      color: var(--P-50);
+      font-weight: 600;
+    }
+
+    &--selected {
+      background-color: var(--P-50) !important;
+      color: var(--white) !important;
+      font-weight: 600;
+    }
+
+    &--before {
+      color: var(--G-40);
+    }
+
+    &--tile {
+      border-radius: 10px;
+      gap: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+/* eslint-disable max-len */
+/* eslint-disable react/no-array-index-key */
+import { cn } from '@jk-core/utils';
+import isSameDay from '../../utils/isSameDay';
+import styles from './DayTile.module.scss';
+
+const WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
+
+interface Props {
+  selectedDate?: Date;
+  weeksInMonth: {
+    thisMonth: boolean;
+    date: Date;
+  }[][];
+  tileContent?: () => React.ReactNode;
+  handleDayClick: (day: Date) => void;
+}
+export default function DayTile({
+  selectedDate, weeksInMonth, tileContent, handleDayClick,
+}: Props) {
+  return (
+    <div className={styles.body}>
+      <div className={styles.body__weeks}>
+        {WEEKS.map((week) => (<div className={styles['body__weeks--date']} key={week}>{week}</div>))}
+      </div>
+
+      <div className={styles.body__tile}>
+        {weeksInMonth.map((week, index) => (
+          <div key={index} className={styles.body__week}>
+            {week.map((day, idx) => (
+              <button
+                className={cn({
+                  [styles.body__day]: true,
+                  [styles['body__day--today']]: isSameDay(day.date, new Date()),
+                  [styles['body__day--selected']]: !!selectedDate && isSameDay(day.date, selectedDate),
+                  [styles['body__day--before']]: !day.thisMonth,
+                  [styles['body__day--tile']]: !!(tileContent && tileContent()),
+                })}
+                type="button"
+                key={idx}
+                onClick={() => handleDayClick(day.date)}
+              >
+                {day.date.getDate()}
+                {tileContent && tileContent()}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+@use "../mixin.module.scss" as mixin;
+
+.body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 5px;
+
+  @include mixin.body;
+
+  &__month {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-radius: 10px;
+
+    svg {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: var(--G-10);
+    }
+
+    &--selected {
+      background-color: var(--P-50) !important;
+      color: var(--white) !important;
+    }
+
+    &--today {
+      color: var(--P-50);
+      font-weight: 600;
+    }
+
+    &--tile {
+      justify-content: flex-start;
+      gap: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import { cn } from '@jk-core/utils';
+import styles from './MonthTile.module.scss';
+import isSameDay from '../../utils/isSameDay';
+import { CalendarView } from '../../type';
+
+const MONTHS = Array.from({ length: 12 }, (_, i) => i);
+
+interface Props {
+  selectedDate?: Date;
+  viewDate: Date;
+  handleMonthClick: (month: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+}
+export default function MonthTile({
+  selectedDate, viewDate, handleMonthClick, tileContent = () => false,
+}: Props) {
+  return (
+    <div className={styles.body}>
+      {MONTHS.map((month) => (
+        <button
+          className={cn({
+            [styles.body__month]: true,
+            [styles['body__month--selected']]: !!selectedDate && isSameDay(selectedDate, new Date(viewDate.getFullYear(), month), 'month'),
+            [styles['body__month--today']]: isSameDay(new Date(viewDate.getFullYear(), month), new Date(), 'month'),
+            [styles['body__month--tile']]: !!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month'),
+          })}
+          type="button"
+          key={month}
+          onClick={() => handleMonthClick(month)}
+        >
+          <span>{`${month + 1}월`}</span>
+          {!!tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')
+            && tileContent(new Date(viewDate.getFullYear(), month - 1, 1), 'month')}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+@use "../mixin.module.scss" as mixin;
+@use "../../../styles/mediaQuery.scss" as media;
+
+.body {
+  @include mixin.body;
+
+  position: relative;
+  height: 310px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  gap: 10px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__blank {
+    height: calc(50% - 40px);
+    flex-shrink: 0;
+
+    &:last-child {
+      height: 50%;
+    }
+  }
+
+  &__year {
+    min-width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    overflow: hidden;
+    font-weight: 400;
+    font-size: 1.2em;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--P-5);
+      }
+    }
+
+    &:active {
+      background-color: var(--P-10);
+    }
+
+    &--border {
+      border: 1px solid var(--G-30);
+      background-color: var(--P-5);
+
+      &:hover {
+        @include media.pc {
+          background-color: var(--P-10);
+        }
+      }
+    }
+
+    &--year {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--selected {
+      color: var(--white);
+      background-color: var(--P-50) !important;
+    }
+
+    &--tile {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      color: var(--G-80);
+      width: 100%;
+      background-color: var(--white);
+      border-top: var(--P-50);
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import { cn } from '@jk-core/utils';
+import { useEffect, useRef } from 'react';
+import styles from './YearTile.module.scss';
+import { CalendarView } from '../../type';
+
+interface Props {
+  selectedDate?: Date;
+  onClick: (year: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+}
+
+const YEARS = Array.from({ length: 100 }, (_, i) => i + 2000);
+
+export default function YearTile({
+  selectedDate, onClick,
+  tileContent = () => false,
+}: Props) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const selectedRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const selectedElement = selectedRef.current;
+    const wrapperElement = wrapperRef.current;
+    if (!selectedElement || !wrapperElement) return;
+
+    const { clientHeight } = wrapperElement;
+    const { offsetTop, clientHeight: selectedHeight } = selectedElement;
+
+    wrapperElement.scrollTo({
+      top: offsetTop - clientHeight / 2 + selectedHeight,
+    });
+  }, []);
+
+  return (
+    <div className={styles.body} ref={wrapperRef}>
+      <div className={styles.body__blank} />
+      {YEARS.map((year) => (
+        <button
+          className={cn({
+            [styles.body__year]: true,
+            [styles['body__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
+            [styles['body__year--border']]: !!tileContent(new Date(year, 1, 1), 'year'),
+          })}
+          key={year}
+          type="button"
+          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
+          onClick={() => onClick(year)}
+        >
+          <span className={styles['body__year--year']}>{year}</span>
+          {tileContent(new Date(year, 1, 1), 'year') && (
+          <div className={styles['body__year--tile']}>
+            {tileContent(new Date(year, 1, 1), 'year')}
+          </div>
+          )}
+        </button>
+      ))}
+      <div className={styles.body__blank} />
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+@mixin body {
+  min-height: 310px;
+  padding: 5px;
+  background-color: var(--white);
+}