@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Popup/Popup.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { PopupContext, PopupContextType } from "./Popup.context";
+import styles from "./Popup.module.scss";
+import cn from "classnames/bind";
+
+const cx = cn.bind(styles);
+
+const usePopup = () => {
+  const id = React.useId();
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const createAttr = (
+    action: React.JSX.IntrinsicElements["div"]["popoverTargetAction"]
+  ) =>
+    ({
+      popoverTargetAction: action,
+      popoverTarget: id,
+    } as const);
+
+  const controlAttr = {
+    hide: createAttr("hide"),
+    toggle: createAttr("toggle"),
+    show: createAttr("show"),
+  };
+
+  const show = React.useCallback(() => ref.current?.showPopover(), []);
+  const hide = React.useCallback(() => ref.current?.hidePopover(), []);
+  const toggle = React.useCallback(() => ref.current?.togglePopover(), []);
+
+  return { id, controlAttr, ref, show, hide, toggle };
+};
+
+type PopupDimmedProps = React.JSX.IntrinsicElements["button"];
+const Dimmed = (props: PopupDimmedProps) => {
+  const { onClick, ...rest } = props;
+  const { id, dimmedDisabled } = React.useContext(PopupContext);
+
+  return (
+    <button
+      {...rest}
+      className={cx("Dimmed", rest.className)}
+      {...(!dimmedDisabled && {
+        onClick,
+        popoverTargetAction: "hide",
+        popoverTarget: id,
+      })}
+    />
+  );
+};
+
+type PopupContentsProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["div"]
+>;
+const Contents = (props: PopupContentsProps) => {
+  const { children, ...rest } = props;
+
+  return (
+    <div {...rest} className={cx("Contents", rest.className)}>
+      {children}
+    </div>
+  );
+};
+
+type PopupLayerProps = React.PropsWithChildren<
+  Omit<React.JSX.IntrinsicElements["div"], "id" | "popover">
+>;
+const Layer = (props: PopupLayerProps) => {
+  const { children, ...rest } = props;
+
+  const { id, bodyScroll } = React.useContext(PopupContext);
+
+  return (
+    <div
+      {...rest}
+      id={id}
+      popover="manual"
+      className={cx("Layer", rest.className, {
+        bodyScroll,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+type PopupRootProps = React.PropsWithChildren<PopupContextType>;
+const Root = (props: PopupRootProps) => {
+  const { children, dimmedDisabled = false, ...rest } = props;
+
+  const contextValue = {
+    ...rest,
+    dimmedDisabled,
+  };
+
+  return <PopupContext value={contextValue}>{children}</PopupContext>;
+};
+
+interface IPopup {
+  Root: typeof Root;
+  Layer: typeof Layer;
+  Dimmed: typeof Dimmed;
+  Contents: typeof Contents;
+  usePopup: typeof usePopup;
+}
+
+const Popup = {
+  Root,
+  Layer,
+  Dimmed,
+  Contents,
+  usePopup,
+} as IPopup;
+
+export type { PopupRootProps };
+
+export default Popup;

package/src/components/Popup/README.md

@@ -0,0 +1,170 @@
+# Popup UI
+
+팝업 오버레이를 구현하기 위한 컴포넌트입니다.
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```tsx
+import { Popup } from "@weing-dev/ui-kit-primitive";
+
+const Component = () => {
+  const { id, controlAttr } = Popup.usePopup();
+
+  return (
+    <Popup.Root id={id}>
+      <Button.Root {...controlAttr.toggle}>
+        <Button.Text>열기</Button.Text>
+      </Button.Root>
+      <Popup.Layer>
+        <Popup.Dimmed />
+        <Popup.Contents>
+          <div>팝업 내용</div>
+          <Button.Root {...controlAttr.hide}>
+            <Button.Text>확인</Button.Text>
+          </Button.Root>
+        </Popup.Contents>
+      </Popup.Layer>
+    </Popup.Root>
+  );
+};
+```
+
+## Reference
+
+### Root
+
+`Popup.Root`는 Popup UI의 Context를 관리하고 기본 설정을 제공합니다. 팝업의 최상위 컴포넌트로, 팝업의 동작과 관련된 설정을 제어합니다.
+
+| Prop           | Type    | Required | Default Value | Description                            |
+| :------------- | :------ | :------: | :-----------: | :------------------------------------- |
+| id             | string  |    ✓     |       -       | 팝업의 고유 식별자                     |
+| bodyScroll     | boolean |    -     |     false     | 팝업 오픈 시 body 스크롤 허용 여부     |
+| dimmedDisabled | boolean |    -     |     false     | Dimmed 영역 클릭 시 팝업 닫기 비활성화 |
+
+#### id
+
+팝업의 고유 식별자입니다. usePopup 훅에서 반환되는 id를 사용해야 합니다.
+
+```tsx
+const { id } = Popup.usePopup();
+<Popup.Root id={id}>{/* id는 팝업 제어를 위해 필수입니다 */}</Popup.Root>;
+```
+
+#### bodyScroll
+
+팝업이 열렸을 때 body의 스크롤을 허용할지 설정합니다. 기본값은 `false`로, 팝업이 열리면 body 스크롤이 잠깁니다.
+
+```tsx
+<Popup.Root bodyScroll={true}>
+  {/* 팝업이 열려도 body 스크롤이 가능합니다 */}
+</Popup.Root>
+```
+
+#### dimmedDisabled
+
+Dimmed 영역 클릭 시 팝업 닫기 기능을 비활성화합니다. 기본값은 `false`입니다.
+
+```tsx
+<Popup.Root dimmedDisabled={true}>
+  {/* Dimmed 영역을 클릭해도 팝업이 닫히지 않습니다 */}
+</Popup.Root>
+```
+
+### usePopup
+
+팝업을 제어하기 위한 커스텀 훅입니다. 팝업의 상태 관리와 제어에 필요한 값들을 제공합니다.
+
+```tsx
+const { id, controlAttr, ref, show, hide, toggle } = Popup.usePopup();
+```
+
+#### 반환값 상세 설명
+
+- `id`: 팝업의 고유 식별자. 여러 팝업을 사용할 때 각각을 구분하기 위해 사용됩니다.
+- `controlAttr`: 팝업 제어를 위한 속성 객체
+  - `hide`: 팝업을 닫기 위한 속성
+  - `show`: 팝업을 열기 위한 속성
+  - `toggle`: 팝업을 토글하기 위한 속성
+  ```tsx
+  <Button.Root {...controlAttr.toggle}>
+    <Button.Text>팝업 토글</Button.Text>
+  </Button.Root>
+  ```
+- `ref`: 팝업 레이어의 참조. 프로그래매틱 제어 시 필요합니다.
+- `show`: 프로그래매틱하게 팝업을 여는 함수
+- `hide`: 프로그래매틱하게 팝업을 닫는 함수
+- `toggle`: 프로그래매틱하게 팝업을 토글하는 함수
+  ```tsx
+  // 프로그래매틱 제어 예시
+  const handleClick = () => {
+    if (condition) {
+      show();
+    } else {
+      hide();
+    }
+  };
+  ```
+
+### Layer
+
+`Popup.Layer`는 팝업의 컨테이너 역할을 하는 컴포넌트입니다. 팝업의 위치와 레이어 관리를 담당합니다.
+모든 div 요소의 HTML 속성을 지원합니다.
+
+```tsx
+<Popup.Layer
+  ref={ref}
+  className="custom-layer"
+  style={{ padding: "20px" }}
+  data-testid="popup-layer"
+>
+  <Popup.Dimmed />
+  <Popup.Contents>{children}</Popup.Contents>
+</Popup.Layer>
+```
+
+### Contents
+
+`Popup.Contents`는 팝업의 실제 내용을 담는 컨테이너입니다. 스타일링과 레이아웃을 관리합니다.
+모든 div 요소의 HTML 속성을 지원합니다.
+
+```tsx
+<Popup.Contents
+  className="custom-contents"
+  style={{ maxWidth: "500px" }}
+  onClick={handleContentClick}
+  data-testid="popup-contents"
+>
+  <div>팝업 제목</div>
+  <div>팝업 내용</div>
+  <div>
+    <Button.Root {...controlAttr.hide}>
+      <Button.Text>닫기</Button.Text>
+    </Button.Root>
+  </div>
+</Popup.Contents>
+```
+
+### Dimmed
+
+`Popup.Dimmed`는 팝업이 열렸을 때 배경을 어둡게 처리하는 오버레이 컴포넌트입니다.
+팝업의 포커스를 강조하고, 클릭 시 팝업을 닫는 기능을 제공합니다.
+모든 button 요소의 HTML 속성을 지원합니다.
+
+```tsx
+<Popup.Dimmed
+  onClick={handleClose} // 커스텀 닫기 핸들러
+  className="custom-dimmed" // 커스텀 스타일
+  style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
+  data-testid="popup-dimmed"
+/>
+```
+
+## Example
+
+더 많은 예시는 프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/popup)에서 확인할 수 있습니다.

package/src/components/QRCode/QRCode.module.scss

@@ -0,0 +1,2 @@
+.Wrapper {
+}

package/src/components/QRCode/QRCode.tsx

@@ -0,0 +1,61 @@
+import React, { useImperativeHandle } from "react";
+import styles from "./QRCode.module.scss";
+import cn from "classnames/bind";
+import { QRCodeCanvas } from "qrcode.react";
+
+const cx = cn.bind(styles);
+
+type QRCodeProps = {
+  link: string;
+  className?: string;
+  ref?: React.Ref<QRCodeRef>;
+};
+
+export type QRCodeRef = {
+  copy: () => Promise<void>;
+};
+
+const QRCode = (props: QRCodeProps) => {
+  const { link, className, ref } = props;
+
+  const _qr = React.useRef<HTMLDivElement>(null);
+
+  const handleCopy = React.useCallback(async () => {
+    try {
+      const canvas = _qr.current?.querySelector("canvas");
+      if (!canvas) return;
+
+      canvas.toBlob(async (blob) => {
+        if (!blob) {
+          return;
+        }
+
+        // 클립보드에 이미지 쓰기
+        const item = new ClipboardItem({ "image/png": blob });
+        await navigator.clipboard.write([item]);
+      }, "image/png");
+    } catch (error) {
+      console.error("복사 실패:", error);
+    }
+  }, [_qr]);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        copy: handleCopy,
+      };
+    },
+    [handleCopy]
+  );
+
+  return (
+    <div className={cx("Wrapper", className)}>
+      <div ref={_qr}>
+        <QRCodeCanvas value={link} size={256} />
+      </div>
+    </div>
+  );
+};
+
+export default QRCode;

package/src/components/ScrollCalendar/ScrollCalendar.context.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ScrollCalendarContextType {
+  isDragging: boolean;
+  hasMoved: boolean;
+  startX: number;
+  setIsDragging: (isDragging: boolean) => void;
+  setHasMoved: (hasMoved: boolean) => void;
+  setStartX: (startX: number) => void;
+  columnWidth?: number;
+  bodyRef?: React.RefObject<HTMLDivElement | null>;
+  columnWrapRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+const initialState = {
+  columnWidth: 48,
+  isDragging: false,
+  hasMoved: false,
+  startX: 0,
+  setIsDragging: () => {},
+  setHasMoved: () => {},
+  setStartX: () => {},
+};
+
+export const ScrollCalendarContext =
+  React.createContext<ScrollCalendarContextType>(initialState);

package/src/components/ScrollCalendar/ScrollCalendar.module.scss

@@ -0,0 +1,42 @@
+@layer ScrollCalendar {
+  .Body {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .ColumnWrap {
+      display: flex;
+    }
+  }
+
+  .Column {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    color: #637381;
+    font-weight: 400;
+    font-size: 14px;
+
+    &.visible {
+      display: flex;
+    }
+
+    &.selected {
+      color: #00a76f;
+    }
+
+    .Date {
+      line-height: 24px;
+    }
+
+    .Text {
+      line-height: 24px;
+    }
+  }
+}