@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/src/components/Thumbnail/README.md

@@ -1,302 +0,0 @@
-# Thumbnail UI
-
-이미지 썸네일을 표시하고 관리하기 위한 컴포넌트입니다.
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```tsx
-import { Thumbnail } from "@weing-dev/ui-kit-primitive";
-
-const Component = () => {
-  const [src, setSrc] = React.useState<string>("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setSrc(URL.createObjectURL(file));
-    }
-  };
-
-  const handleRemove = () => {
-    setSrc("");
-  };
-
-  return (
-    <Thumbnail.Root onUpload={handleUpload} onRemove={handleRemove}>
-      {!src ? (
-        <Thumbnail.Upload id="upload">
-          <Thumbnail.EmptyImage />
-        </Thumbnail.Upload>
-      ) : (
-        <Thumbnail.Image src={src} />
-      )}
-    </Thumbnail.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-`Thumbnail.Root`는 Thumbnail UI의 Context를 관리하고 기본 설정을 제공합니다.
-
-| Prop        | Type                                                       | Required | Default Value | Description               |
-| :---------- | :--------------------------------------------------------- | :------: | :-----------: | :------------------------ |
-| size        | ThumbnailSize                                              |    -     |      "m"      | 썸네일 크기               |
-| aspectRatio | string                                                     |    -     |     "1/1"     | 썸네일 비율               |
-| variant     | "square" \| "circle"                                       |    -     |   "square"    | 썸네일 모양               |
-| objectFit   | "cover" \| "contain"                                       |    -     |    "cover"    | 이미지 맞춤 방식          |
-| isReload    | boolean                                                    |    -     |     false     | 에러시 이미지 리로드 여부 |
-| onUpload    | (e: ChangeEvent<HTMLInputElement>) => void                 |    -     |       -       | 이미지 업로드 핸들러      |
-| onEdit      | (e: ChangeEvent<HTMLInputElement>, index?: number) => void |    -     |       -       | 이미지 수정 핸들러        |
-| onRemove    | (index?: number) => void                                   |    -     |       -       | 이미지 삭제 핸들러        |
-
-#### size
-
-썸네일의 크기를 지정합니다. 미리 정의된 크기 또는 숫자 값을 사용할 수 있습니다.
-
-```tsx
-// 미리 정의된 크기 사용
-<Thumbnail.Root size="xl">
-  {/* xl = 160px */}
-</Thumbnail.Root>
-
-// 커스텀 크기 사용
-<Thumbnail.Root size={200}>
-  {/* 200px */}
-</Thumbnail.Root>
-```
-
-사전 정의된 크기:
-
-- xxs: 40px
-- xs: 48px
-- sm: 56px
-- s: 72px
-- m: 96px
-- l: 120px
-- xl: 160px
-- xxl: 192px
-
-### Image
-
-`Thumbnail.Image`는 실제 이미지를 표시하는 컴포넌트입니다.
-모든 img 요소의 HTML 속성을 지원하며, Root에 onEdit 또는 onRemove가 있는 경우 자동으로 EditButton과 RemoveButton이 표시됩니다.
-children으로 EditButton과 RemoveButton을 직접 전달할 수도 있습니다.
-
-| Prop  | Type   | Required | Description   |
-| :---- | :----- | :------: | :------------ |
-| index | number |    -     | 이미지 인덱스 |
-
-### Upload
-
-`Thumbnail.Upload`는 이미지 업로드를 위한 input[type="file"] 컴포넌트입니다.
-
-| Prop     | Type    | Required | Description           |
-| :------- | :------ | :------: | :-------------------- |
-| id       | string  |    ✓     | input의 고유 식별자   |
-| multiple | boolean |    -     | 다중 파일 업로드 허용 |
-
-### EmptyImage
-
-`Thumbnail.EmptyImage`는 이미지가 없을 때 표시되는 placeholder 컴포넌트입니다.
-
-| Prop     | Type   | Required | Default Value | Description |
-| :------- | :----- | :------: | :-----------: | :---------- |
-| iconName | string |    -     |  "AddAPhoto"  | 아이콘 이름 |
-| iconSize | number |    -     |       -       | 아이콘 크기 |
-
-### EditButton & RemoveButton
-
-이미지 편집 및 삭제를 위한 버튼 컴포넌트입니다.
-
-| Prop     | Type   | Required | Description   |
-| :------- | :----- | :------: | :------------ |
-| index    | number |    -     | 이미지 인덱스 |
-| iconSize | number |    -     | 아이콘 크기   |
-
-## Example
-
-더 자세한 사용 예시는 Storybook에서 확인할 수 있습니다.
-
-### 단일 이미지 업로드
-
-```tsx
-const SingleUpload = () => {
-  const [src, setSrc] = React.useState<string>("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setSrc(URL.createObjectURL(file));
-    }
-  };
-
-  const handleRemove = () => {
-    setSrc("");
-  };
-
-  return (
-    <Thumbnail.Root onUpload={handleUpload} onRemove={handleRemove}>
-      {!src ? (
-        <Thumbnail.Upload id="single-upload">
-          <Thumbnail.EmptyImage />
-        </Thumbnail.Upload>
-      ) : (
-        <Thumbnail.Image src={src} />
-      )}
-    </Thumbnail.Root>
-  );
-};
-```
-
-### 다중 이미지 업로드
-
-```tsx
-const MultipleUpload = () => {
-  const [images, setImages] = React.useState<string[]>([]);
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files) {
-      setImages(Array.from(files).map((file) => URL.createObjectURL(file)));
-    }
-  };
-
-  const handleEdit = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    index?: number
-  ) => {
-    const file = e.target.files?.[0];
-    if (file && typeof index === "number") {
-      setImages(
-        images.map((src, i) => (i === index ? URL.createObjectURL(file) : src))
-      );
-    }
-  };
-
-  const handleRemove = (index?: number) => {
-    if (typeof index === "number") {
-      setImages(images.filter((_, i) => i !== index));
-    }
-  };
-
-  return (
-    <Thumbnail.Root
-      onUpload={handleUpload}
-      onEdit={handleEdit}
-      onRemove={handleRemove}
-    >
-      {images.length === 0 ? (
-        <Thumbnail.Upload id="multiple-upload" multiple>
-          <Thumbnail.EmptyImage />
-        </Thumbnail.Upload>
-      ) : (
-        images.map((src, index) => (
-          <Thumbnail.Image key={index} src={src} index={index} />
-        ))
-      )}
-    </Thumbnail.Root>
-  );
-};
-```
-
-### AWS S3 파일 업로드 후 이미지 표시
-
-1. `AWSUtil` 클래스를 통해 `uploadUtill` 객체를 생성합니다. (AWSUtil은 제공 예정)
-
-   ```ts
-   const uploadUtil = new AWSUtil({
-     region: "region",
-     accessKeyId: "accessKeyId",
-     secretAccessKey: "secretAccessKey",
-     bucketName: "bucketName",
-     secretId: "secretId",
-   });
-   ```
-
-2. 업로드할 파일 객체를 생성합니다.
-
-   ```ts
-   const fileChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-     const file = e.target.files?.[0];
-     if (!file) return;
-
-     const fileItem: FileItem = {
-       name: file.name,
-       uri: URL.createObjectURL(file),
-       file: file,
-       id: "550e8400-e29b-41d4-a716-446655440000",
-     };
-   };
-   ```
-
-3. `uploadUtil` 객체를 통해 파일을 업로드합니다.
-
-   ```ts
-   const fileURL = await uploadUtil.handleUpload(fileItem, "폴더명");
-   ```
-
-4. 업로드된 파일의 URL을 이미지 썸네일로 표시합니다.
-
-5. 전체코드
-
-   ```tsx
-   import { Thumbnail } from "@weing-dev/ui-kit-primitive";
-   import { AWSUtil } from "@/utils/aws.util";
-
-   interface FileItem {
-     name: string;
-     uri: string;
-     file: File;
-     id: string;
-   }
-
-   const uploadUtil = new AWSUtil({
-     region: "region",
-     accessKeyId: "accessKeyId",
-     secretAccessKey: "secretAccessKey",
-     bucketName: "bucketName",
-     secretId: "secretId",
-   });
-
-   const Component = () => {
-     const [fileURL, setFileURL] = React.useState<string>("");
-
-     const id = React.useId();
-
-     const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-       const file = e.target.files?.[0];
-       if (!file) return;
-
-       const fileItem: FileItem = {
-         name: file.name,
-         uri: URL.createObjectURL(file),
-         file: file,
-         id: "550e8400-e29b-41d4-a716-446655440000",
-       };
-
-       const fileURL = await uploadUtil.handleUpload(fileItem, "폴더명");
-       setFileURL(fileURL);
-     };
-
-     return (
-       <Thumbnail.Root onUpload={handleUpload}>
-         {!fileURL ? (
-           <Thumbnail.Upload id={id}>
-             <Thumbnail.EmptyImage />
-           </Thumbnail.Upload>
-         ) : (
-           <Thumbnail.Image key={index} src={fileURL} index={index} />)
-         )}
-       </Thumbnail.Root>
-     );
-   };
-   ```

package/src/components/Thumbnail/Thumbnail.context.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-
-export const THUMBNAIL_SIZES = {
-  xxs: 40,
-  xs: 48,
-  sm: 56,
-  s: 72,
-  m: 96,
-  l: 120,
-  xl: 160,
-  xxl: 192,
-} as const;
-
-export type ThumbnailSize = keyof typeof THUMBNAIL_SIZES | number;
-
-export interface ThumbnailContextType {
-  size?: ThumbnailSize;
-  aspectRatio?: string;
-  variant?: "square" | "circle";
-  objectFit?: "cover" | "contain";
-  isReload?: boolean;
-  onUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onEdit?: (e: React.ChangeEvent<HTMLInputElement>, index?: number) => void;
-  onRemove?: (index?: number) => void;
-}
-
-export const initialState: ThumbnailContextType = {
-  size: "m",
-  aspectRatio: "1/1",
-  variant: "square",
-  objectFit: "cover",
-  isReload: false,
-};
-
-export const ThumbnailContext =
-  React.createContext<ThumbnailContextType>(initialState);
-
-export type ThumbnailProviderProps = React.PropsWithChildren<
-  ThumbnailContextType & {
-    className?: string;
-  }
->;

package/src/components/Thumbnail/Thumbnail.module.scss

@@ -1,149 +0,0 @@
-@layer Thumbnail {
-  .Wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    height: auto;
-    position: relative;
-    gap: 8px;
-    user-select: none;
-  }
-
-  .ImageWrapper {
-    position: relative;
-  }
-
-  .Image {
-    aspect-ratio: var(--aspectRatio);
-    background-color: #fff;
-    position: relative;
-    display: block;
-
-    &.isLoading {
-      animation: skeleton-loading 1s infinite alternate;
-    }
-
-    &.square {
-      border-radius: 8px;
-    }
-
-    &.circle {
-      border-radius: 50%;
-    }
-
-    &.cover {
-      object-fit: cover;
-    }
-
-    &.contain {
-      object-fit: contain;
-    }
-  }
-
-  .UploadInput {
-    display: none;
-  }
-
-  .EmptyImage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    flex-shrink: 0;
-    aspect-ratio: var(--aspectRatio);
-    background-color: var(--greyGrey3, #f4f6f8);
-    cursor: pointer;
-    &.square {
-      border-radius: 8px;
-    }
-
-    &.circle {
-      border-radius: 50%;
-    }
-
-    .Text {
-      @include captionRegularSmall;
-      color: var(--textTertiary, #919eab);
-    }
-  }
-
-  .ErrorImage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    flex-shrink: 0;
-    aspect-ratio: var(--aspectRatio);
-    background-color: var(--greyGrey3, #f4f6f8);
-    position: relative;
-    &.square {
-      border-radius: 8px;
-    }
-
-    &.circle {
-      border-radius: 50%;
-    }
-  }
-
-  .EditButton {
-    width: var(--exactSize);
-    height: var(--exactSize);
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    border-radius: 50%;
-    background-color: var(--greyGrey7, #637381);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: var(--borderWidth) solid #fff;
-    cursor: pointer;
-
-    &.square {
-      transform: translate(var(--translate), var(--translate));
-    }
-
-    &.circle {
-      transform: translate(4px, 0);
-    }
-  }
-
-  .FileInput {
-    display: none;
-  }
-
-  .RemoveButton {
-    width: var(--exactSize);
-    height: var(--exactSize);
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    &.square {
-      border-radius: 0 8px 0 0;
-      background: var(--black32, #00000052);
-      box-shadow: var(--z8x, 0) var(--z8y, 8px) var(--z8blur, 16px) var(--z8spread, 0px) var(--shadow12, #919eab);
-    }
-
-    &.circle {
-      border-radius: 50%;
-      background-color: var(--greyGrey7, #637381);
-      border: var(--borderWidth) solid #fff;
-      transform: translate(4px, 0);
-    }
-  }
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-color: rgba(220, 220, 220, 0.6);
-  }
-  100% {
-    background-color: rgba(244, 246, 248, 0.6);
-  }
-}