feat: refine setting page

src/components/atoms/Button/index.tsx

@@ -106,7 +106,7 @@ const StyledButton = styled.button<ButtonProps>`
     large
       ? `${metricsSizes["s"]}px ${metricsSizes["2xl"]}px`
       : `${metricsSizes["xs"]}px ${metricsSizes["xl"]}px`};
-  margin: ${({ margin }) => margin || "10px"};
+  margin: ${({ margin }) => margin || "12px"};
   user-select: none;
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   justify-content: center;

src/components/atoms/Icon/icons.ts

@@ -104,6 +104,7 @@ import Scale from "./Icons/scale.svg";
 import MapIcon from "./Icons/map.svg";
 import NoProjects from "./Icons/noProjects.svg";
 import TopPage from "./Icons/topPage.svg";
+import MenuForDevice from "./Icons/menuForDevice.svg";
 
 // Plugi-ins
 import UploadZipPlugin from "./Icons/uploadZipPlugin.svg";
@@ -203,4 +204,5 @@ export default {
   uploadZipPlugin: UploadZipPlugin,
   privateGitHubRepo: PrivateGitHubRepo,
   publicGitHubRepo: PublicGitHubRepo,
+  menuForDevice: MenuForDevice,
 };

src/components/atoms/Icon/index.stories.tsx

@@ -11,5 +11,5 @@ export default {
 } as Meta;
 
 export const Default = () => <Icon icon="layer" alt="icon" size={20} />;
-export const Image = () => <Icon icon="/sample.svg" alt="icon" size={20} />;
+export const Image = () => <Icon icon="textIcon.png" alt="icon" size={20} />;
 export const Svg = () => <Icon icon={icon} alt="icon" size={20} />;

src/components/atoms/PublicationStatus/index.tsx

@@ -23,6 +23,7 @@ const PublicationStatus: React.FC<PublishStatusProps> = ({
   url,
   alias,
   size,
+  color,
 }) => {
   const intl = useIntl();
   const text =
@@ -36,7 +37,7 @@ const PublicationStatus: React.FC<PublishStatusProps> = ({
       <Text
         size={size === "lg" ? "m" : size === "md" ? "s" : "xs"}
         otherProperties={{ userSelect: "none" }}
-        customColor>
+        color={color}>
         {status === "published" && alias ? (
           <PublishLink href={`${url?.[0] ?? ""}/${alias}${url?.[1]}`} target="blank">
             {status && text}
@@ -52,7 +53,6 @@ const PublicationStatus: React.FC<PublishStatusProps> = ({
 const StyledStatus = styled.div`
   display: flex;
   align-items: center;
-  line-height: 0;
 `;
 
 const StatusCircle = styled.div<PublishStatusProps>`
@@ -67,7 +67,7 @@ const StatusCircle = styled.div<PublishStatusProps>`
       ? props.theme.publishStatus.building
       : null};
   border-radius: 50px;
-  margin-right: ${metricsSizes["s"]}px;
+  margin: auto ${metricsSizes["s"]}px auto 0;
 `;
 
 const PublishLink = styled.a`

src/components/molecules/Common/AssetModal/AssetCard/index.tsx

@@ -11,7 +11,6 @@ export type Props = {
   className?: string;
   name: string;
   url: string;
-  isImage?: boolean;
   cardSize?: CardSize;
   checked?: boolean;
   selected?: boolean;
@@ -22,7 +21,6 @@ const AssetCard: React.FC<Props> = ({
   className,
   name,
   url,
-  isImage,
   cardSize,
   checked,
   selected,
@@ -35,8 +33,12 @@ const AssetCard: React.FC<Props> = ({
       selected={selected}
       cardSize={cardSize}
       onClick={() => onCheck?.(!check)}>
-      <ImgWrapper cardSize={cardSize} url={url}>
-        {!isImage && <Icon icon="file" />}
+      <ImgWrapper cardSize={cardSize}>
+        {/\.(jpg|jpeg|png|gif|GIF|JPG|PNG)$/.test(url) ? (
+          <PreviewImage url={url}></PreviewImage>
+        ) : (
+          <Icon icon="file"></Icon>
+        )}
       </ImgWrapper>
       <FileName size={cardSize === "large" ? "m" : "xs"} cardSize={cardSize} customColor>
         {name}
@@ -57,16 +59,18 @@ const Wrapper = styled(Flex)<{ selected?: boolean; cardSize?: CardSize }>`
   box-shadow: 0 6px 6px -6px ${props => props.theme.colors.other.black};
   border: 1px solid
     ${props => (props.selected ? `${props.theme.assetCard.highlight}` : "transparent")};
-  margin: ${({ cardSize }) => (cardSize === "small" ? "5px" : "10px")};
+  /* margin: ${({ cardSize }) => (cardSize === "small" ? "5px" : "10px")}; */
+  margin: 12px;
   padding: ${({ cardSize }) =>
     cardSize === "small" ? "8px" : cardSize === "medium" ? "12px" : "20px"};
   width: ${({ cardSize }) =>
-    cardSize === "small" ? "104px" : cardSize === "medium" ? "163px" : "218px"};
+    cardSize === "small" ? "104px" : cardSize === "medium" ? "192px" : "274px"};
   height: ${({ cardSize }) =>
-    cardSize === "small" ? "104px" : cardSize === "medium" ? "168px" : "234px"};
+    cardSize === "small" ? "104px" : cardSize === "medium" ? "186px" : "257px"};
   position: relative;
   cursor: pointer;
   color: ${({ theme }) => theme.assetCard.text};
+  box-sizing: border-box;
 
   &:hover {
     background: ${({ theme }) => theme.assetCard.bgHover};
@@ -81,6 +85,11 @@ const ImgWrapper = styled.div<{ cardSize?: CardSize; url?: string }>`
   justify-content: center;
   height: ${({ cardSize }) =>
     cardSize === "small" ? "77px" : cardSize === "medium" ? "126px" : "175px"};
+`;
+
+const PreviewImage = styled.div<{ url?: string }>`
+  width: 100%;
+  height: 100%;
   background-image: ${props => `url(${props.url})`};
   background-size: cover;
   background-position: center;

src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts

@@ -26,7 +26,7 @@ export default ({
   assets?: Asset[];
   isMultipleSelectable?: boolean;
   accept?: string;
-  onCreateAsset?: (file: File) => void;
+  onCreateAsset?: (files: FileList) => void;
   initialAsset?: Asset;
   selectAsset?: (assets: Asset[]) => void;
   selectedAssets?: Asset[];
@@ -89,7 +89,7 @@ export default ({
         );
   };
 
-  const handleFileSelect = useFileInput(files => onCreateAsset?.(files[0]), {
+  const handleFileSelect = useFileInput(files => onCreateAsset?.(files), {
     accept,
     multiple: isMultipleSelectable,
   });

src/components/molecules/Common/AssetModal/AssetContainer/index.tsx

@@ -13,8 +13,10 @@ import { styled } from "@reearth/theme";
 import AssetCard from "../AssetCard";
 import AssetListItem from "../AssetListItem";
 import AssetSelect from "../AssetSelect";
+import VirtualAssetCard from "../VirtualAssetCard";
 
 import useHooks, { Asset as AssetType, LayoutTypes, FilterTypes } from "./hooks";
+import { useCallback, useRef, useState, useEffect } from "react";
 
 export type Asset = AssetType;
 
@@ -23,22 +25,26 @@ export type Props = {
   assets?: Asset[];
   isMultipleSelectable?: boolean;
   accept?: string;
-  onCreateAsset?: (file: File) => void;
+  onCreateAsset?: (files: FileList) => void;
+  onRemove?: (assets: AssetType[]) => void;
   initialAsset?: Asset;
   selectedAssets?: Asset[];
   selectAsset?: (assets: Asset[]) => void;
   fileType?: "image" | "video" | "file";
+  isSettingPage?: boolean;
 };
 
 const AssetContainer: React.FC<Props> = ({
   assets,
   isMultipleSelectable = false,
   accept,
   onCreateAsset,
+  onRemove,
   initialAsset,
   selectedAssets,
   selectAsset,
   fileType,
+  isSettingPage,
 }) => {
   const intl = useIntl();
   const {
@@ -70,20 +76,55 @@ const AssetContainer: React.FC<Props> = ({
     { key: "name", label: intl.formatMessage({ defaultMessage: "Alphabetical" }) },
   ];
 
+  const handleRemove = useCallback(() => {
+    if (selectedAssets?.length) {
+      onRemove?.(selectedAssets);
+    }
+  }, [onRemove, selectedAssets]);
+
+  const listRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(() => {
+    if (listRef.current?.offsetWidth) {
+      setContainerWidth(listRef.current?.offsetWidth);
+    }
+  }, [containerWidth]);
+
+  const handleResize = () => {
+    if (listRef.current?.offsetWidth) {
+      setContainerWidth(listRef.current?.offsetWidth);
+    }
+  };
+
+  window.addEventListener("resize", handleResize);
+
   return (
     <Wrapper>
-      <StyledUploadButton
-        large
-        text={
-          fileType === "image"
-            ? intl.formatMessage({ defaultMessage: "Upload image" })
-            : intl.formatMessage({ defaultMessage: "Upload file" })
-        }
-        icon="upload"
-        type="button"
-        buttonType="primary"
-        onClick={handleUploadToAsset}
-      />
+      <ButtonWrapper onRemove={onRemove}>
+        <Button
+          large
+          text={
+            fileType === "image"
+              ? intl.formatMessage({ defaultMessage: "Upload image" })
+              : intl.formatMessage({ defaultMessage: "Upload file" })
+          }
+          icon="upload"
+          type="button"
+          buttonType={onRemove ? "secondary" : "primary"}
+          onClick={handleUploadToAsset}
+        />
+        {onRemove && (
+          <Button
+            large
+            text={intl.formatMessage({ defaultMessage: "Delete" })}
+            icon="bin"
+            type="button"
+            buttonType="secondary"
+            onClick={handleRemove}
+          />
+        )}
+      </ButtonWrapper>
       <Divider margin="0" />
       <NavBar align="center" justify="space-between">
         <SelectWrapper direction="row" justify="space-between" align="center">
@@ -95,7 +136,7 @@ const AssetContainer: React.FC<Props> = ({
           <StyledIcon icon={iconChoice} onClick={handleReverse} />
         </SelectWrapper>
 
-        <LayoutButtons justify="center">
+        <LayoutButtons justify="left">
           <StyledIcon
             icon="assetList"
             onClick={() => setLayoutType("list")}
@@ -114,7 +155,7 @@ const AssetContainer: React.FC<Props> = ({
         </LayoutButtons>
         <SearchBar onChange={handleSearch} />
       </NavBar>
-      <AssetWrapper direction="column" justify="space-between">
+      <AssetWrapper ref={listRef} isSettingPage={isSettingPage}>
         {!filteredAssets || filteredAssets.length < 1 ? (
           <Template align="center" justify="center">
             <TemplateText size="m">
@@ -139,7 +180,6 @@ const AssetContainer: React.FC<Props> = ({
                   <AssetListItem
                     key={a.id}
                     asset={a}
-                    isImage={fileType === "image"}
                     onCheck={() => handleAssetsSelect(a)}
                     selected={selectedAssets?.includes(a)}
                     checked={currentSaved === a}
@@ -151,12 +191,16 @@ const AssetContainer: React.FC<Props> = ({
                     name={a.name}
                     cardSize={layoutType}
                     url={a.url}
-                    isImage={fileType === "image"}
                     onCheck={() => handleAssetsSelect(a)}
                     selected={selectedAssets?.includes(a)}
                     checked={currentSaved === a}
                   />
                 ))}
+            <VirtualAssetCard
+              containerWidth={containerWidth}
+              cardSize={layoutType}
+              assetsLength={assets?.length}
+            />
           </AssetList>
         )}
         <Divider margin="0" />
@@ -166,35 +210,35 @@ const AssetContainer: React.FC<Props> = ({
 };
 
 const Wrapper = styled.div`
-  height: 558px;
   width: 100%;
 `;
 
-const AssetWrapper = styled(Flex)`
-  height: 425px;
+const AssetWrapper = styled.div<{ isSettingPage?: boolean }>`
+  height: ${({ isSettingPage }) => (isSettingPage ? "" : "425px")};
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const ButtonWrapper = styled.div<{ onRemove?: (assets: AssetType[]) => void }>`
+  display: flex;
+  justify-content: ${({ onRemove }) => (onRemove ? "flex-end" : "center")};
 `;
 
 const AssetList = styled(Flex)<{ layoutType?: LayoutTypes }>`
-  ${({ layoutType }) => layoutType === "list" && "flex-direction: column;"}
-  max-height: 458px;
+  ${({ layoutType }) => layoutType === "list" && "flex-direction: column;"};
+  // max-height: 458px;
+
   overflow-y: scroll;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
   }
-
-  &::after {
-    content: "";
-    flex: ${({ layoutType }) => (layoutType === "medium" ? "0 33%" : "auto")};
-  }
-`;
-
-const StyledUploadButton = styled(Button)`
-  margin: ${metricsSizes["m"]}px auto ${metricsSizes["2xl"]}px auto;
 `;
 
 const NavBar = styled(Flex)`
-  margin: ${metricsSizes["s"]}px;
+  margin: ${metricsSizes["m"]}px;
   flex: 1;
 `;
 
@@ -203,11 +247,12 @@ const SelectWrapper = styled(Flex)`
 `;
 
 const LayoutButtons = styled(Flex)`
+  margin-left: ${metricsSizes["l"]}px;
   flex: 3;
 `;
 
 const StyledIcon = styled(Icon)<{ selected?: boolean }>`
-  margin-left: ${metricsSizes["s"]}px;
+  margin-left: ${metricsSizes["m"]}px;
   border-radius: 5px;
   padding: ${metricsSizes["2xs"]}px;
   color: ${({ theme }) => theme.colors.text.main};

src/components/molecules/Common/AssetModal/AssetListItem/index.tsx

@@ -25,12 +25,18 @@ export type Props = {
   onCheck?: (checked: boolean) => void;
 };
 
-const AssetListItem: React.FC<Props> = ({ asset, selected, checked, isImage, onCheck }) => {
+const AssetListItem: React.FC<Props> = ({ asset, selected, checked, onCheck }) => {
   const theme = useTheme();
   return (
     <ListItem key={asset.id} align="center" selected={selected} onClick={() => onCheck?.(!check)}>
       <Icon
-        icon={checked ? "checkCircle" : isImage ? "image" : "file"}
+        icon={
+          checked
+            ? "checkCircle"
+            : /\.(jpg|jpeg|png|gif|GIF|JPG|PNG)$/.test(asset.url)
+            ? "image"
+            : "file"
+        }
         size={16}
         color={checked ? theme.assetCard.highlight : theme.assetCard.text}
       />
@@ -52,7 +58,7 @@ const ListItem = styled(Flex)<{ selected?: boolean }>`
   border: 1px solid
     ${({ selected, theme }) => (selected ? `${theme.assetCard.highlight}` : "transparent")};
   padding: ${metricsSizes["m"]}px ${metricsSizes["xl"]}px;
-  margin-bottom: ${metricsSizes["l"]}px;
+  margin: ${metricsSizes["s"]}px ${metricsSizes["m"]}px;
   cursor: pointer;
   color: ${({ theme }) => theme.colors.text.main};