From cf0b930e75e78a8e455b2541f5330242e45a139e Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:58:08 +0900
Subject: [PATCH 1/6] Chore(web): Add ImageBlock

---
 .../Blocks/ImageBlock/index.stories.tsx       | 100 ++++++++++++++++++
 .../components/Blocks/ImageBlock/index.tsx    |  76 +++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
 create mode 100644 web/src/beta/components/Blocks/ImageBlock/index.tsx

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
new file mode 100644
index 0000000000..52ed61aff7
--- /dev/null
+++ b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
@@ -0,0 +1,100 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ImageBlock from ".";
+
+export default {
+  component: ImageBlock,
+} as Meta;
+
+type Story = StoryObj<typeof ImageBlock>;
+
+export const Default: Story = {
+  render: () => <ImageBlock src={"http://placehold.it/150X150"} />,
+};
+export const Width200Cover: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200px"}
+      height={"150px"}
+      fit={"cover"}
+    />
+  ),
+};
+export const Height200Cover: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"150px"}
+      height={"200px"}
+      fit={"cover"}
+    />
+  ),
+};
+export const Width200ContainLeft: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200"}
+      height={"150px"}
+      fit={"contain"}
+      align="left"
+    />
+  ),
+};
+export const Height200Contain: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"150px"}
+      height={"200px"}
+      fit={"contain"}
+    />
+  ),
+};
+
+export const Size200Cover: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200px"}
+      height={"200px"}
+      fit={"cover"}
+    />
+  ),
+};
+
+export const Size200Contain: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200px"}
+      height={"200px"}
+      fit={"contain"}
+    />
+  ),
+};
+
+export const Size200MaxHeight150Cover: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200px"}
+      height={"200px"}
+      maxHeight={"150px"}
+      fit={"cover"}
+    />
+  ),
+};
+
+export const Size200MaxHeight150Contain: Story = {
+  render: () => (
+    <ImageBlock
+      src={"http://placehold.it/150X150"}
+      width={"200px"}
+      height={"200px"}
+      maxHeight={"150px"}
+      fit={"contain"}
+    />
+  ),
+};
diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
new file mode 100644
index 0000000000..1ed594b7c0
--- /dev/null
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -0,0 +1,76 @@
+import { CSSProperties, FC, ImgHTMLAttributes } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  src: NonNullable<ImgHTMLAttributes<HTMLImageElement>["src"]>;
+  align?: "left" | "center" | "right"; // default center
+  fit?: "contain" | "cover"; // default cover
+  maxHeight?: CSSProperties["maxHeight"];
+  alt?: ImgHTMLAttributes<HTMLImageElement>["alt"];
+  height?: CSSProperties["width"];
+  width?: CSSProperties["height"];
+};
+
+const ImageBlock: FC<Props> = ({ src, align, fit, maxHeight, alt, width, height }) => {
+  return (
+    <Wrapper>
+      <SettingsWrapper className={"SETTINGS_BUTTONS_WRAPPER"}>
+        <TestBox />
+      </SettingsWrapper>
+      <ImageBox
+        src={src}
+        fit={fit}
+        alt={alt}
+        maxHeight={maxHeight}
+        width={width}
+        height={height}
+        align={align}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 20px;
+  display: flex;
+  border: 0.5px solid ${props => props.theme.main.deepBg};
+  &:hover {
+    border: 0.5px solid ${props => props.theme.main.select};
+    transition: border 0.5s ease;
+  }
+  &:hover .SETTINGS_BUTTONS_WRAPPER {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
+`;
+
+const SettingsWrapper = styled.div`
+  position: absolute;
+  right: 0px;
+  top: -20px;
+  opacity: 0;
+`;
+
+const TestBox = styled.div`
+  width: 97px;
+  height: 20px;
+  display: flex;
+  background: #3b3cd0;
+`;
+
+const ImageBox = styled.img<{
+  fit?: "contain" | "cover";
+  maxHeight?: CSSProperties["maxHeight"];
+  align?: "left" | "center" | "right";
+}>`
+  display: flex;
+  object-fit: ${props => (props.fit ? props.fit : "cover")};
+  width: ${props => (props.width ? props.width : undefined)};
+  height: ${props => (props.height ? props.height : "200px")};
+  max-height: ${props => (props.maxHeight ? props.maxHeight : undefined)};
+  object-position: ${props => (props.align ? props.align : "center")};
+`;
+
+export default ImageBlock;

From 1b6109046badf518483fc577ea2ed26243412497 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Wed, 14 Jun 2023 13:00:30 +0900
Subject: [PATCH 2/6] Fix(web): Delete unnecessary parts

---
 .../components/Blocks/ImageBlock/index.tsx    | 27 -------------------
 1 file changed, 27 deletions(-)

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
index 1ed594b7c0..6b9b9f9698 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -15,9 +15,6 @@ type Props = {
 const ImageBlock: FC<Props> = ({ src, align, fit, maxHeight, alt, width, height }) => {
   return (
     <Wrapper>
-      <SettingsWrapper className={"SETTINGS_BUTTONS_WRAPPER"}>
-        <TestBox />
-      </SettingsWrapper>
       <ImageBox
         src={src}
         fit={fit}
@@ -33,31 +30,7 @@ const ImageBlock: FC<Props> = ({ src, align, fit, maxHeight, alt, width, height
 
 const Wrapper = styled.div`
   position: absolute;
-  top: 20px;
   display: flex;
-  border: 0.5px solid ${props => props.theme.main.deepBg};
-  &:hover {
-    border: 0.5px solid ${props => props.theme.main.select};
-    transition: border 0.5s ease;
-  }
-  &:hover .SETTINGS_BUTTONS_WRAPPER {
-    opacity: 1;
-    transition: opacity 0.5s ease;
-  }
-`;
-
-const SettingsWrapper = styled.div`
-  position: absolute;
-  right: 0px;
-  top: -20px;
-  opacity: 0;
-`;
-
-const TestBox = styled.div`
-  width: 97px;
-  height: 20px;
-  display: flex;
-  background: #3b3cd0;
 `;
 
 const ImageBox = styled.img<{

From c8dcf8a0bb18e7a529c35b578c2e9aa86de16a87 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Wed, 14 Jun 2023 14:48:59 +0900
Subject: [PATCH 3/6] Fix(web): render to args

---
 .../Blocks/ImageBlock/index.stories.tsx       | 91 +------------------
 1 file changed, 3 insertions(+), 88 deletions(-)

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
index 52ed61aff7..c36c6be17f 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
@@ -9,92 +9,7 @@ export default {
 type Story = StoryObj<typeof ImageBlock>;
 
 export const Default: Story = {
-  render: () => <ImageBlock src={"http://placehold.it/150X150"} />,
-};
-export const Width200Cover: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200px"}
-      height={"150px"}
-      fit={"cover"}
-    />
-  ),
-};
-export const Height200Cover: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"150px"}
-      height={"200px"}
-      fit={"cover"}
-    />
-  ),
-};
-export const Width200ContainLeft: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200"}
-      height={"150px"}
-      fit={"contain"}
-      align="left"
-    />
-  ),
-};
-export const Height200Contain: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"150px"}
-      height={"200px"}
-      fit={"contain"}
-    />
-  ),
-};
-
-export const Size200Cover: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200px"}
-      height={"200px"}
-      fit={"cover"}
-    />
-  ),
-};
-
-export const Size200Contain: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200px"}
-      height={"200px"}
-      fit={"contain"}
-    />
-  ),
-};
-
-export const Size200MaxHeight150Cover: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200px"}
-      height={"200px"}
-      maxHeight={"150px"}
-      fit={"cover"}
-    />
-  ),
-};
-
-export const Size200MaxHeight150Contain: Story = {
-  render: () => (
-    <ImageBlock
-      src={"http://placehold.it/150X150"}
-      width={"200px"}
-      height={"200px"}
-      maxHeight={"150px"}
-      fit={"contain"}
-    />
-  ),
+  args: {
+    src: "http://placehold.it/150X150",
+  },
 };

From 0b87da1ad01d2dd532ac25ab5a2a196d52e80bfe Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Tue, 20 Jun 2023 10:25:51 +0900
Subject: [PATCH 4/6] Fix(web): Modification by feedback

---
 web/src/beta/components/Blocks/ImageBlock/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
index 6b9b9f9698..0b915f314d 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -41,7 +41,7 @@ const ImageBox = styled.img<{
   display: flex;
   object-fit: ${props => (props.fit ? props.fit : "cover")};
   width: ${props => (props.width ? props.width : undefined)};
-  height: ${props => (props.height ? props.height : "200px")};
+  height: ${props => (props.height ? props.height : undefined)};
   max-height: ${props => (props.maxHeight ? props.maxHeight : undefined)};
   object-position: ${props => (props.align ? props.align : "center")};
 `;

From 867c5359b0fe9cb70d31ab60319564fc790573b8 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Mon, 26 Jun 2023 15:47:05 +0900
Subject: [PATCH 5/6] Chore(web): Add ImageBlock Component

---
 .../Blocks/ImageBlock/index.stories.tsx       | 26 ++++++++-
 .../components/Blocks/ImageBlock/index.tsx    | 56 +++++++++----------
 web/src/beta/components/Icon/Icons/image.svg  |  3 +
 web/src/beta/components/Icon/icons.ts         |  3 +
 4 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 web/src/beta/components/Icon/Icons/image.svg

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
index c36c6be17f..c4aae8964e 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.stories.tsx
@@ -6,10 +6,34 @@ export default {
   component: ImageBlock,
 } as Meta;
 
+const Container: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div style={{ width: "430px" }}>{children}</div>
+);
+
 type Story = StoryObj<typeof ImageBlock>;
 
 export const Default: Story = {
   args: {
-    src: "http://placehold.it/150X150",
+    src: "http://placehold.it/430X260",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
+  },
+};
+
+export const Blank: Story = {
+  args: {
+    src: "",
+  },
+  render: args => {
+    return (
+      <Container>
+        <ImageBlock {...args} />
+      </Container>
+    );
   },
 };
diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
index 0b915f314d..373812ccc3 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -1,49 +1,43 @@
-import { CSSProperties, FC, ImgHTMLAttributes } from "react";
-
+import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  src: NonNullable<ImgHTMLAttributes<HTMLImageElement>["src"]>;
-  align?: "left" | "center" | "right"; // default center
-  fit?: "contain" | "cover"; // default cover
-  maxHeight?: CSSProperties["maxHeight"];
-  alt?: ImgHTMLAttributes<HTMLImageElement>["alt"];
-  height?: CSSProperties["width"];
-  width?: CSSProperties["height"];
+  src: NonNullable<React.ImgHTMLAttributes<HTMLImageElement>["src"]>;
+  alt?: React.ImgHTMLAttributes<HTMLImageElement>["alt"];
 };
 
-const ImageBlock: FC<Props> = ({ src, align, fit, maxHeight, alt, width, height }) => {
+const ImageBlock: React.FC<Props> = ({ src, alt }) => {
+  if (src) {
+    return (
+      <Wrapper>
+        <ImageBox src={src} alt={alt} />
+      </Wrapper>
+    );
+  }
   return (
-    <Wrapper>
-      <ImageBox
-        src={src}
-        fit={fit}
-        alt={alt}
-        maxHeight={maxHeight}
-        width={width}
-        height={height}
-        align={align}
-      />
-    </Wrapper>
+    <BlankImageBox>
+      <Icon icon={"image"} color={"#2e2e2e"} size={32} />
+    </BlankImageBox>
   );
 };
 
 const Wrapper = styled.div`
   position: absolute;
+  width: inherit;
+`;
+
+const ImageBox = styled.img`
   display: flex;
+  object-fit: cover;
+  width: 100%;
 `;
 
-const ImageBox = styled.img<{
-  fit?: "contain" | "cover";
-  maxHeight?: CSSProperties["maxHeight"];
-  align?: "left" | "center" | "right";
-}>`
+const BlankImageBox = styled.div`
   display: flex;
-  object-fit: ${props => (props.fit ? props.fit : "cover")};
-  width: ${props => (props.width ? props.width : undefined)};
-  height: ${props => (props.height ? props.height : undefined)};
-  max-height: ${props => (props.maxHeight ? props.maxHeight : undefined)};
-  object-position: ${props => (props.align ? props.align : "center")};
+  aspect-ratio: 43/26;
+  background: #f1f1f1;
+  align-items: center;
+  justify-content: center;
 `;
 
 export default ImageBlock;
diff --git a/web/src/beta/components/Icon/Icons/image.svg b/web/src/beta/components/Icon/Icons/image.svg
new file mode 100644
index 0000000000..1a5a9e43f8
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/image.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0001 12.5V12.5004C21.0001 12.8983 20.842 13.2799 20.5606 13.5612C20.2792 13.8425 19.8977 14.0005 19.4998 14.0005C19.1019 14.0004 18.7204 13.8424 18.4391 13.561C18.1577 13.2797 17.9997 12.8981 17.9997 12.5002C17.9997 12.1024 18.1577 11.7208 18.4391 11.4395C18.7204 11.1581 19.1019 11 19.4998 11C19.8977 11 20.2792 11.158 20.5606 11.4393C20.842 11.7206 21.0001 12.1022 21.0001 12.5ZM29 7V25C28.9994 25.5302 28.7885 26.0386 28.4135 26.4135C28.0386 26.7885 27.5302 26.9994 27 27H5C4.46975 26.9994 3.9614 26.7885 3.58646 26.4135C3.21152 26.0386 3.00061 25.5302 3 25V7C3.00061 6.46975 3.21152 5.9614 3.58646 5.58646C3.9614 5.21152 4.46975 5.00061 5 5H27C27.5302 5.00061 28.0386 5.21152 28.4135 5.58646C28.7885 5.9614 28.9994 6.46975 29 7ZM27.001 20.5867L27 7H5V18.5857L9.58582 14C9.9612 13.6255 10.4698 13.4152 11.0001 13.4152C11.5303 13.4152 12.0389 13.6255 12.4143 14L18.0001 19.5859L20.5858 17C20.9612 16.6255 21.4698 16.4152 22.0001 16.4152C22.5303 16.4152 23.0389 16.6255 23.4143 17L27.001 20.5867Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index 0834260599..d31021fdc4 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -49,6 +49,8 @@ import Workspaces from "./Icons/workspaces.svg";
 // Square
 import Square from "./Icons/square.svg";
 import TwoRectangle from "./Icons/two-rectangle.svg";
+// image
+import Image from "./Icons/image.svg";
 
 export default {
   file: File,
@@ -81,4 +83,5 @@ export default {
   logout: Logout,
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
+  image: Image,
 };

From e914ffee58fecb0589b51c448f7e06aec9c626f7 Mon Sep 17 00:00:00 2001
From: JAESUNG_PARK <131335554+FabPARKJAESUNG@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:20:40 +0900
Subject: [PATCH 6/6] Fix(web): Modification by feedback

---
 .../components/Blocks/ImageBlock/index.tsx    | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/web/src/beta/components/Blocks/ImageBlock/index.tsx b/web/src/beta/components/Blocks/ImageBlock/index.tsx
index 373812ccc3..a2aef4e426 100644
--- a/web/src/beta/components/Blocks/ImageBlock/index.tsx
+++ b/web/src/beta/components/Blocks/ImageBlock/index.tsx
@@ -2,27 +2,23 @@ import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  src: NonNullable<React.ImgHTMLAttributes<HTMLImageElement>["src"]>;
-  alt?: React.ImgHTMLAttributes<HTMLImageElement>["alt"];
+  src: string;
+  alt?: string;
 };
 
 const ImageBlock: React.FC<Props> = ({ src, alt }) => {
-  if (src) {
-    return (
-      <Wrapper>
-        <ImageBox src={src} alt={alt} />
-      </Wrapper>
-    );
-  }
-  return (
+  return src ? (
+    <Wrapper>
+      <ImageBox src={src} alt={alt} />
+    </Wrapper>
+  ) : (
     <BlankImageBox>
-      <Icon icon={"image"} color={"#2e2e2e"} size={32} />
+      <Icon icon="image" color="#2e2e2e" size={32} />
     </BlankImageBox>
   );
 };
 
 const Wrapper = styled.div`
-  position: absolute;
   width: inherit;
 `;