@musecat/uikit 0.1.1

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import NextImage from "next/image";
+import type {
+  ImageItem,
+  ImageOverlay,
+} from "@/packages/Frameworks/View/ImageView/Image.types";
+import {
+  resolveImageSrc,
+  resolveOverlay,
+} from "@/packages/Frameworks/View/ImageView/Image.utils";
+import View from "@/packages/Frameworks/View/View";
+
+export interface DialogImageSlideProps {
+  item: ImageItem;
+  index: number;
+  initialIndex: number;
+  priority?: boolean;
+  dialogOverlay?: ImageOverlay;
+  className?: string;
+}
+
+export function DialogImageSlide({
+  item,
+  index,
+  initialIndex,
+  priority,
+  dialogOverlay,
+  className,
+}: DialogImageSlideProps) {
+  return (
+    <View
+      alignItems="center"
+      justifyContent="center"
+      style={{
+        flex: "0 0 100%",
+        height: "100%",
+        minWidth: 0,
+        minHeight: 0,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <NextImage
+        fill
+        sizes="auto"
+        priority={priority && index === initialIndex}
+        src={resolveImageSrc(item, "dialog")}
+        alt={item.alt}
+        draggable={false}
+        className={className}
+        style={{
+          objectFit: "contain",
+          objectPosition: "center",
+          userSelect: "none",
+        }}
+      />
+      {resolveOverlay(dialogOverlay, index) && (
+        <View
+          style={{
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+          }}
+        >
+          {resolveOverlay(dialogOverlay, index)}
+        </View>
+      )}
+    </View>
+  );
+}

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { DialogImageFooter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer";
+import { DialogImageHeader } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header";
+import { DialogImageSlide } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide";
+import {
+  ImageLeftControl,
+  ImageRightControl,
+} from "@/packages/Frameworks/View/ImageView/Image.controls";
+import { useImageDialog } from "@/packages/Frameworks/View/ImageView/Image.hooks";
+import type {
+  ImageItem,
+  ImageProps,
+} from "@/packages/Frameworks/View/ImageView/Image.types";
+import View from "@/packages/Frameworks/View/View";
+
+export type ImageDialogProps = {
+  items: ImageItem[];
+  initialIndex: number;
+  dialog: NonNullable<ImageProps["dialog"]>;
+  priority?: boolean;
+  className?: string;
+  onClose: () => void;
+};
+
+export default function ImageDialog({
+  items,
+  initialIndex,
+  dialog,
+  priority,
+  className,
+  onClose,
+}: ImageDialogProps) {
+  const {
+    galleryRef,
+    selectedIndex,
+    scrollTo,
+    scrollPrev,
+    scrollNext,
+    canScrollPrev,
+    canScrollNext,
+  } = useImageDialog(initialIndex);
+
+  const thumbnailRefs = useRef<(HTMLElement | null)[]>([]);
+
+  useEffect(() => {
+    thumbnailRefs.current[selectedIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }, [selectedIndex]);
+
+  return (
+    <View
+      column
+      width="100%"
+      height="100%"
+      background="BaseDark1"
+      className={dialog.className}
+      style={{
+        position: "relative",
+        minWidth: 0,
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      <DialogImageHeader config={dialog.header} onClose={onClose} />
+
+      {dialog.control &&
+        (() => {
+          const control = dialog.control;
+          const renderLeft =
+            typeof control === "boolean"
+              ? control
+              : control.left !== false && control.left !== undefined;
+          const renderRight =
+            typeof control === "boolean"
+              ? control
+              : control.right !== false && control.right !== undefined;
+          const leftSlot =
+            typeof control === "object" && typeof control.left === "object"
+              ? control.left
+              : {};
+          const rightSlot =
+            typeof control === "object" && typeof control.right === "object"
+              ? control.right
+              : {};
+          return (
+            <View
+              data-color-mode="dark"
+              style={{
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                zIndex: 2,
+              }}
+            >
+              {renderLeft && (
+                <ImageLeftControl
+                  onClick={scrollPrev}
+                  disabled={!canScrollPrev}
+                  className={leftSlot.className}
+                  style={{
+                    position: "absolute",
+                    left: "1.6rem",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    pointerEvents: "auto",
+                    ...leftSlot.style,
+                  }}
+                />
+              )}
+              {renderRight && (
+                <ImageRightControl
+                  onClick={scrollNext}
+                  disabled={!canScrollNext}
+                  className={rightSlot.className}
+                  style={{
+                    position: "absolute",
+                    right: "1.6rem",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    pointerEvents: "auto",
+                    ...rightSlot.style,
+                  }}
+                />
+              )}
+            </View>
+          );
+        })()}
+
+      <View
+        ref={galleryRef}
+        fullWidth
+        padding={32}
+        style={{ height: "100%", minHeight: 0, overflow: "hidden" }}
+      >
+        <View
+          fullWidth
+          style={{
+            display: "flex",
+            height: "100%",
+            touchAction: "pan-y pinch-zoom",
+          }}
+        >
+          {items.map((item, index) => (
+            <DialogImageSlide
+              key={item.id}
+              item={item}
+              index={index}
+              initialIndex={initialIndex}
+              priority={priority}
+              dialogOverlay={dialog.overlay}
+              className={className}
+            />
+          ))}
+        </View>
+      </View>
+
+      <DialogImageFooter
+        dialog={dialog}
+        items={items}
+        selectedIndex={selectedIndex}
+        thumbnailRefs={thumbnailRefs}
+        scrollTo={scrollTo}
+        scrollPrev={scrollPrev}
+        scrollNext={scrollNext}
+        canScrollPrev={canScrollPrev}
+        canScrollNext={canScrollNext}
+      />
+    </View>
+  );
+}

package/packages/Frameworks/View/ImageView/Image.controls.tsx

@@ -0,0 +1,39 @@
+import type { CSSProperties } from "react";
+import Icon from "@/packages/Components/Icon/Icon";
+
+export type ImageControlProps = {
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+
+function ImageControl({
+  icon,
+  onClick,
+  disabled,
+  className,
+  style,
+}: ImageControlProps & { icon: string }) {
+  return (
+    <Icon
+      themePreset="BaseSoft"
+      icon={icon}
+      className={className}
+      backgroundBlur="ExtraLight"
+      shadow="Regular"
+      size={20}
+      box
+      boxOptions={{ padding: 6, style }}
+      pressable={{ onClick, disabled }}
+    />
+  );
+}
+
+export function ImageLeftControl(props: ImageControlProps) {
+  return <ImageControl {...props} icon="iArrowLeft" />;
+}
+
+export function ImageRightControl(props: ImageControlProps) {
+  return <ImageControl {...props} icon="iArrowRight" />;
+}

package/packages/Frameworks/View/ImageView/Image.hooks.ts

@@ -0,0 +1,82 @@
+"use client";
+
+import type { EmblaOptionsType } from "embla-carousel";
+import useEmblaCarousel from "embla-carousel-react";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import { useEffect, useMemo, useState } from "react";
+
+export function useImageDialog(initialIndex: number) {
+  const wheelPlugin = useMemo(() => WheelGesturesPlugin(), []);
+
+  const options = useMemo<EmblaOptionsType>(
+    () => ({
+      align: "center",
+      containScroll: "keepSnaps",
+      dragFree: false,
+      startIndex: initialIndex,
+    }),
+
+    [initialIndex],
+  );
+
+  const [galleryRef, galleryApi] = useEmblaCarousel(options, [wheelPlugin]);
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  useEffect(() => {
+    if (!galleryApi) return;
+
+    const sync = () => {
+      setSelectedIndex(galleryApi.selectedScrollSnap());
+      setCanScrollPrev(galleryApi.canScrollPrev());
+      setCanScrollNext(galleryApi.canScrollNext());
+    };
+
+    sync();
+    galleryApi.on("select", sync);
+    galleryApi.on("reInit", sync);
+    galleryApi.on("resize", sync);
+
+    return () => {
+      galleryApi.off("select", sync);
+      galleryApi.off("reInit", sync);
+      galleryApi.off("resize", sync);
+    };
+  }, [galleryApi]);
+
+  useEffect(() => {
+    if (!galleryApi) return;
+    const frame = window.requestAnimationFrame(() => {
+      galleryApi.reInit();
+      galleryApi.scrollTo(initialIndex, true);
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [galleryApi, initialIndex]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        galleryApi?.scrollPrev();
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        galleryApi?.scrollNext();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [galleryApi]);
+
+  return {
+    galleryRef,
+    selectedIndex,
+    scrollTo: (index: number) => galleryApi?.scrollTo(index),
+    scrollPrev: () => galleryApi?.scrollPrev(),
+    scrollNext: () => galleryApi?.scrollNext(),
+    canScrollPrev,
+    canScrollNext,
+  };
+}

package/packages/Frameworks/View/ImageView/Image.module.scss

@@ -0,0 +1,7 @@
+/* 썸네일 버튼 — 기본 스타일 + data-active 활성 상태 */
+.ThumbnailButton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+}