[Feature] - 여행기 등록 페이지에 필요한 공통 컴포넌트 구현(리버)

frontend/src/assets/svg/index.ts

@@ -7,6 +7,8 @@ export { default as DownArrow } from "./down-arrow.svg";
 export { default as Marker } from "./marker.svg";
 export { default as markerUrl } from "./marker.svg?url";
 export { default as EmptyHeart } from "./empty-heart.svg";
+export { default as PictureIcon } from "./picture-icon.svg";
+export { default as XIcon } from "./x-icon.svg";
 export { default as Tturi } from "./tturi.svg";
 export { default as RecycleBin } from "./recycle-bin.svg";
 export { default as ChevronsRight } from "./chevrons-right.svg";

frontend/src/components/common/MultiImageUpload/MultiImageUpload.stories.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import MultiImageUpload from "./MultiImageUpload";
+
+const meta = {
+  title: "common/MultiImageUpload",
+  component: MultiImageUpload,
+  decorators: [
+    (Story, context) => {
+      return (
+        <div style={{ width: "48rem" }}>
+          <Story args={{ ...context.args }} />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof MultiImageUpload>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithImages: Story = {
+  decorators: [
+    (Story) => {
+      React.useEffect(() => {
+        const fetchAndCreateFile = async () => {
+          const imageUrl =
+            "https://api.allorigins.win/raw?url=https://i.pinimg.com/474x/df/6d/1a/df6d1a665685af3c0eb7e4c6a0c40169.jpg";
+          const file = new File([await fetch(imageUrl).then((r) => r.blob())], "example.png", {
+            type: "image/png",
+          });
+
+          const files = Array(3).fill(file);
+
+          const dataTransfer = new DataTransfer();
+
+          files.map((file) => dataTransfer.items.add(file));
+
+          const inputElement = document.querySelector('input[type="file"]') as HTMLInputElement;
+          if (inputElement) {
+            Object.defineProperty(inputElement, "files", {
+              value: dataTransfer.files,
+            });
+
+            const event = new Event("change", { bubbles: true });
+            inputElement.dispatchEvent(event);
+          }
+        };
+
+        fetchAndCreateFile();
+      }, []);
+
+      return <Story />;
+    },
+  ],
+};
+
+export const WithManyImages: Story = {
+  decorators: [
+    (Story) => {
+      React.useEffect(() => {
+        const fetchAndCreateFile = async () => {
+          const imageUrl =
+            "https://api.allorigins.win/raw?url=https://i.pinimg.com/474x/df/6d/1a/df6d1a665685af3c0eb7e4c6a0c40169.jpg";
+          const file = new File([await fetch(imageUrl).then((r) => r.blob())], "example.png", {
+            type: "image/png",
+          });
+
+          const files = Array(7).fill(file);
+
+          const dataTransfer = new DataTransfer();
+
+          files.map((file) => dataTransfer.items.add(file));
+
+          const inputElement = document.querySelector('input[type="file"]') as HTMLInputElement;
+          if (inputElement) {
+            Object.defineProperty(inputElement, "files", {
+              value: dataTransfer.files,
+            });
+
+            const event = new Event("change", { bubbles: true });
+            inputElement.dispatchEvent(event);
+          }
+        };
+
+        fetchAndCreateFile();
+      }, []);
+
+      return <Story />;
+    },
+  ],
+};

frontend/src/components/common/MultiImageUpload/MultiImageUpload.styled.ts

@@ -0,0 +1,138 @@
+import styled from "@emotion/styled";
+
+export const MultiImageUploadContainer = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.m};
+`;
+
+export const MultiImageUploadButton = styled.button`
+  display: flex;
+  width: 100%;
+  padding: ${(props) => props.theme.spacing.s};
+  border: 1px solid ${(props) => props.theme.colors.border};
+  justify-content: center;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.xs};
+
+  ${(props) => props.theme.typography.mobile.detailBold};
+  color: ${(props) => props.theme.colors.text.secondary};
+  border-radius: 0.4rem;
+`;
+
+export const MultiImageUploadPictureContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  overflow-x: auto-scroll;
+  justify-content: flex-start;
+  gap: ${(props) => props.theme.spacing.m};
+`;
+
+export const MultiImageUploadPictureWrapper = styled.div`
+  display: flex;
+  position: relative;
+
+  justify-content: flex-start;
+  gap: ${(props) => props.theme.spacing.m};
+`;
+
+export const MultiImageUploadPicture = styled.img`
+  width: 6rem;
+  height: 6rem;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 0.4rem;
+`;
+
+export const MultiImageUploadPicturesInfo = styled.div`
+  display: flex;
+  width: 6rem;
+  height: 6rem;
+  border-radius: 0.4rem;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid ${(props) => props.theme.colors.border};
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.s};
+
+  p {
+    ${(props) => props.theme.typography.mobile.detailBold}
+    color: ${(props) => props.theme.colors.text.secondary}
+  }
+`;
+
+export const MultiImageUploadPictureAddButton = styled.button<{ $hasPicture: boolean }>`
+  display: flex;
+  width: 6rem;
+  height: 6rem;
+  margin-top: ${({ $hasPicture }) => ($hasPicture ? "0" : "0.5rem")};
+  border-radius: 0.4rem;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid ${(props) => props.theme.colors.border};
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.s};
+
+  p {
+    ${(props) => props.theme.typography.mobile.detailBold}
+    color: ${(props) => props.theme.colors.text.secondary}
+  }
+
+  svg {
+    width: 2rem;
+  }
+`;
+
+export const MultiImageUploadDeleteButton = styled.button`
+  display: flex;
+  position: absolute;
+  top: -1rem;
+  right: -1rem;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid ${(props) => props.theme.colors.border};
+
+  background-color: #fff;
+  border-radius: 50%;
+
+  svg {
+    width: 0.8rem;
+  }
+`;
+
+export const MultiImageUploadHiddenInput = styled.input`
+  display: none;
+`;
+
+export const ImageScrollContainer = styled.div<{ $isDragging: boolean }>`
+  display: flex;
+  overflow: auto hidden;
+  width: 100%;
+  height: 7rem;
+  padding: 1rem 1rem 0 0;
+  padding-bottom: ${(props) => props.theme.spacing.s};
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.m};
+  scrollbar-width: none;
+  cursor: ${({ $isDragging }) => ($isDragging ? "grab" : "pointer")};
+`;
+
+export const MultiImageUploadSVGWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+
+  svg {
+    width: 2rem;
+  }
+`;