Merge pull request #140 from prgrms-web-devcourse-final-project/feature/

#32

feat: PostImageManager 컴포넌트 개발

src/components/molecules/index.ts

@@ -11,3 +11,4 @@ export { TabItem } from "./TabItem";
 export { TabMenu } from "./TabMenu";
 export { TextDividerList } from "./TextDividerList";
 export { TextWithImage } from "./TextWithImage";
+export { UploadedImageCounter } from "./UploadedImageCounter";

src/components/organisms/PostImageManager/index.tsx

@@ -0,0 +1,64 @@
+import { Fragment, useCallback, useEffect } from "react";
+import { UploadedImageCounter } from "components/molecules";
+import { PostImageItem } from "components/organisms";
+
+import { PostImageManagerWrapper, PostImageListWrapper } from "./styled";
+import { ImageInfo } from "types";
+
+interface IPostImageManagerProps {
+  /** ImageInfo 배열 (url: S3에 업로드 된 이미지 url, base64Url: 아직 S3에 올라가지 않아서 미리보기만 제공되는 url, file: 아직 안올라간 이미지들을 나중에 S3에 올리기 위해 필요한 file)*/
+  imageInfos: ImageInfo[];
+  /** imageInfos를 설정하는 함수 */
+  setImageInfos: React.Dispatch<React.SetStateAction<ImageInfo[]>>;
+}
+
+export const PostImageManager = ({
+  imageInfos,
+  setImageInfos
+}: IPostImageManagerProps) => {
+  const onChange = useCallback(
+    (file: File) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const base64Url = e.target?.result as string;
+        const newImgData: ImageInfo = {
+          url: "",
+          base64Url,
+          file
+        };
+        setImageInfos((prev) => [...prev, newImgData]);
+      };
+      reader.readAsDataURL(file);
+    },
+    [setImageInfos]
+  );
+
+  const handleRemoveImage = useCallback(
+    (index: number) => {
+      setImageInfos((prev) => prev.filter((_, i) => i !== index));
+    },
+    [setImageInfos]
+  );
+
+  return (
+    <PostImageManagerWrapper>
+      <UploadedImageCounter
+        text="사진 등록"
+        currentCount={imageInfos.length}
+        onChange={onChange}
+      />
+      <PostImageListWrapper>
+        {imageInfos.map((info, index) => (
+          <Fragment key={index}>
+            <PostImageItem
+              imgUrl={(info.url || info.base64Url) as string}
+              isThumbnail={index === 0}
+              onClick={() => handleRemoveImage(index)}
+            />
+          </Fragment>
+        ))}
+      </PostImageListWrapper>
+    </PostImageManagerWrapper>
+  );
+};
+

src/components/organisms/PostImageManager/stories.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PostImageManager } from ".";
+import { ImageInfo } from "types";
+
+const meta: Meta<typeof PostImageManager> = {
+  title: "Organisms/PostImageManager",
+  component: PostImageManager,
+  tags: ["autodocs"],
+  argTypes: {
+    imageInfos: {
+      control: {
+        type: "object"
+      },
+      description:
+        "ImageInfo 배열 (url: S3에 업로드 된 이미지 url, base64Url: 아직 S3에 올라가지 않아서 미리보기만 제공되는 url, file: 아직 안올라간 이미지들을 나중에 S3에 올리기 위해 필요한 file)"
+    },
+    setImageInfos: {
+      action: "setImageInfos",
+      description: "imageInfos를 설정하는 함수"
+    }
+  }
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const Component = () => {
+      const [imageInfos, setImageInfos] = useState<ImageInfo[]>([]);
+      return (
+        <PostImageManager
+          imageInfos={imageInfos}
+          setImageInfos={setImageInfos}
+        />
+      );
+    };
+    return <Component />;
+  }
+};
+
+export const ImageExist: Story = {
+  args: {
+    imageInfos: [
+      { url: "https://github.com/moypp.png", base64Url: "", file: undefined },
+      { url: "https://github.com/ppyom.png", base64Url: "", file: undefined },
+      { url: "https://github.com/moypp.png", base64Url: "", file: undefined },
+      { url: "https://github.com/ppyom.png", base64Url: "", file: undefined }
+    ]
+  },
+  render: (args) => {
+    const Component = () => {
+      const [imageInfos, setImageInfos] = useState<ImageInfo[]>(
+        args.imageInfos
+      );
+      return (
+        <PostImageManager
+          imageInfos={imageInfos}
+          setImageInfos={setImageInfos}
+        />
+      );
+    };
+    return <Component />;
+  }
+};
+
+export default meta;
+

src/components/organisms/PostImageManager/styled.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const PostImageManagerWrapper: ReturnType<
+  typeof styled.div
+> = styled.div`
+  display: flex;
+`;
+
+export const PostImageListWrapper: ReturnType<typeof styled.div> = styled.div`
+  display: flex;
+`;
+

src/components/organisms/index.ts

@@ -1,2 +1,3 @@
 export { Map } from "./Map";
+export { PostImageItem } from "./PostImageItem";
 export { SearchHistoryItem } from "./SearchHistoryItem";

src/types/image.d.ts

@@ -0,0 +1,5 @@
+export interface ImageInfo {
+  url?: string;
+  base64Url?: string;
+  file?: File;
+}

src/types/index.ts

@@ -1,4 +1,5 @@
 export * from "./icon";
+export * from "./image";
 export * from "./map";
 export * from "./selectOption";
 export * from "./navMenu";