Merge pull request #77 from COW-dev/feat/#46-image

[FEAT] MediaUpload, ImageGallery 컴포넌트 제작

Author: yougyung

src/shared/ui/ImageGallery/ImageGallery.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ImageGallery } from './ImageGallery';
+
+const meta = {
+  title: 'components/ImageGallery',
+  component: ImageGallery,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ImageGallery>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SAMPLE_IMAGE = [
+  {
+    url: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample1',
+  },
+  {
+    url: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample2',
+  },
+  {
+    url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample3',
+  },
+  {
+    url: 'https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample4',
+  },
+  {
+    url: 'https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample5',
+  },
+  {
+    url: 'https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=80&w=1200&auto=format&fit=crop',
+    name: 'ImageGalleryExample6',
+  },
+];
+
+export const Basic: Story = {
+  args: {
+    images: SAMPLE_IMAGE,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  render: (args) => <ImageGallery {...args} />,
+};

src/shared/ui/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,105 @@
+import { cn } from '@/shared/lib/core';
+
+import { ImageGalleryProvider, useImageGallery } from './ImageGalleryContext';
+
+import { Flex } from '../Flex';
+import { Icon } from '../Icon';
+
+export type ImageGalleryItem = { url: string; name?: string };
+type Props = {
+  /**
+   * List of image name and url
+   */
+  images: ImageGalleryItem[];
+
+  /**
+   * Additional class for container
+   */
+  className?: string;
+};
+
+export function ImageGallery({ images, className }: Props) {
+  return (
+    <ImageGalleryProvider images={images}>
+      <ImageGalleryContent className={className} />
+    </ImageGalleryProvider>
+  );
+}
+
+function ImageGalleryContent({ className }: { className?: string }) {
+  const { images, current, total, firstImage } = useImageGallery();
+  const loading = firstImage ? 'eager' : 'lazy';
+
+  return (
+    <Flex dir="col" alignItems="center" className={cn('w-full max-w-[500px]', className)}>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        className="relative aspect-square w-full overflow-hidden bg-gray-50"
+      >
+        <img
+          src={images[current].url}
+          loading={loading}
+          alt={images[current].name}
+          width={500}
+          height={500}
+          className="h-full w-full object-contain"
+        />
+        {total > 1 && (
+          <>
+            <ImageGalleryArrow direction="prev" />
+            <ImageGalleryArrow direction="next" />
+          </>
+        )}
+      </Flex>
+      <Flex justifyContent="center" className="mt-2">
+        <ImageGalleryDots />
+      </Flex>
+    </Flex>
+  );
+}
+
+function ImageGalleryDots() {
+  const { images, current, goToIndex } = useImageGallery();
+  return (
+    <Flex alignItems="center" className="gap-2">
+      {images.map((_, index) => {
+        const isActive = index === current;
+        return (
+          <button
+            key={index}
+            type="button"
+            aria-label={`Image ${index + 1}`}
+            onClick={() => goToIndex(index)}
+            className={cn('h-2 w-2 rounded-full', isActive ? 'bg-primary-300' : 'bg-gray-200')}
+          />
+        );
+      })}
+    </Flex>
+  );
+}
+
+type ImageGalleryArrowProps = {
+  direction: 'prev' | 'next';
+};
+function ImageGalleryArrow({ direction }: ImageGalleryArrowProps) {
+  const { firstImage, lastImage, goPrev, goNext } = useImageGallery();
+  const isPrev = direction === 'prev';
+  const isHidden = isPrev ? firstImage : lastImage;
+  const onClick = isPrev ? goPrev : goNext;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/75 p-1 shadow-sm transition-opacity hover:bg-white md:p-1.5',
+        isPrev ? 'left-4' : 'right-4',
+        isHidden && 'hidden'
+      )}
+      aria-label={`${direction} image button`}
+    >
+      <Icon name={isPrev ? 'arrowLeft' : 'arrowRight'} className="h-5 w-5 md:h-6 md:w-6" />
+    </button>
+  );
+}

src/shared/ui/ImageGallery/ImageGalleryContext.tsx

@@ -0,0 +1,60 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+
+import { ImageGalleryItem } from './ImageGallery';
+
+type ImageGalleryContextType = {
+  images: ImageGalleryItem[];
+  current: number;
+  total: number;
+  firstImage: boolean;
+  lastImage: boolean;
+  goPrev: () => void;
+  goNext: () => void;
+  goToIndex: (index: number) => void;
+};
+const initImageGalleryContext: ImageGalleryContextType = {
+  images: [],
+  current: 0,
+  total: 0,
+  firstImage: true,
+  lastImage: false,
+  goPrev: () => {},
+  goNext: () => {},
+  goToIndex: () => {},
+};
+const ImageGalleryContext = createContext<ImageGalleryContextType>(initImageGalleryContext);
+
+/* eslint-disable react-refresh/only-export-components */
+export const useImageGallery = () => {
+  return useContext(ImageGalleryContext);
+};
+
+type ProviderProps = {
+  images: ImageGalleryItem[];
+  children: React.ReactNode;
+};
+
+export function ImageGalleryProvider({ images, children }: ProviderProps) {
+  const [current, setCurrent] = useState(0);
+  const total = images.length;
+
+  const goPrev = useCallback(() => setCurrent((c) => Math.max(0, c - 1)), []);
+  const goNext = useCallback(() => setCurrent((c) => Math.min(total - 1, c + 1)), [total]);
+  const goToIndex = useCallback(
+    (index: number) => setCurrent(Math.max(0, Math.min(total - 1, index))),
+    [total]
+  );
+
+  const value: ImageGalleryContextType = {
+    images,
+    current,
+    total,
+    firstImage: current === 0,
+    lastImage: current === total - 1,
+    goPrev,
+    goNext,
+    goToIndex,
+  };
+
+  return <ImageGalleryContext.Provider value={value}>{children}</ImageGalleryContext.Provider>;
+}

src/shared/ui/ImageGallery/index.ts

@@ -0,0 +1 @@
+export { ImageGallery } from './ImageGallery';

src/shared/ui/MediaUpload/MediaUpload.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MediaUpload, Props } from './MediaUpload';
+
+const meta = {
+  title: 'components/MediaUpload',
+  component: MediaUpload,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MediaUpload>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+export const Basic: Story = {
+  argTypes: {
+    label: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    topAffix: { control: 'text' },
+    maxSize: { control: { type: 'number', min: 1, step: 1 } },
+    acceptedFormats: { control: 'text' },
+  },
+  render: (args) => <MediaUpload {...args} />,
+};
+
+export const UploadFormats: Story = {
+  args: {
+    label: '이미지와 비디오를 업로드 할 수 있어요.',
+    description: '3GB까지 업로드 가능해요.',
+    maxSize: 3,
+    acceptedFormats: ['image/*', 'video/*'],
+  },
+};
+
+export const WithTopAffix: Story = {
+  args: {
+    topAffix: '제목처럼 추가할 수 있어요',
+  },
+};
+
+export const MultipleMode: Story = {
+  args: {
+    multiple: true,
+  },
+};