From f5c7684cc654a9b1bbc79d42473fcb6162042822 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 00:47:33 +0900
Subject: [PATCH 01/10] feat: information tool tip

---
 .../presentations/items/InfoToolTip.tsx       | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx b/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
new file mode 100644
index 0000000..29255aa
--- /dev/null
+++ b/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
@@ -0,0 +1,27 @@
+import type { FC, ReactNode } from 'react';
+
+import { Info } from 'lucide-react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const InfoToolTip: FC<Props> = ({ children }) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger>
+        <Info size={16} color="#757575" />
+      </TooltipTrigger>
+      <TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
+        <p className="whitespace-pre-wrap text-[10px] font-bold">{children}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);

From 85b447e0a71dce4ecfef8d17b06a49677bac00a3 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 01:04:47 +0900
Subject: [PATCH 02/10] feat: import InfoPopOver to AssetUpload,
 ThumbnailUpload

---
 .../presentations/items/AssetUpload.tsx       | 26 ++++---------------
 .../{InfoToolTip.tsx => InfoPopOver.tsx}      |  2 +-
 .../presentations/items/ThumbnailUpload.tsx   | 12 +++------
 3 files changed, 9 insertions(+), 31 deletions(-)
 rename src/domains/Work/components/WorkEdit/presentations/items/{InfoToolTip.tsx => InfoPopOver.tsx} (91%)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index 6877eae..a88e376 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -2,9 +2,10 @@ import type { FC } from 'react';
 
 import { AssetRender } from '../../../AssetList/assetRender';
 
+import { InfoPopOver } from './InfoPopOver';
+
 import type { Asset } from '@/domains/Work/types';
 
-import { Horizontal } from '@/components/Layout/Horizontal';
 import { Vertical } from '@/components/Layout/Vertical';
 import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
@@ -23,27 +24,10 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
+      <InfoPopOver>
+        {`対応形式:\n    画像[.png .jpg .jpeg .bmp .gif]\n    動画[.mp4 .mov]\n    音源[.mp3 .wav .m4a ]\n    モデル[.gltf .fbx]\n    zip[.zip]`}
+      </InfoPopOver>
     </Vertical>
-    <Horizontal className="gap-0 items-start -mt-4">
-      <Typography variant="body2" className="text-gray-500">
-        対応形式:
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        画像 [ .png .jpg .jpeg .bmp .gif ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        動画 [ .mp4 .mov ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        音源 [ .mp3 .wav .m4a ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        モデル [ .gltf .fbx ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        zip[ .zip ]
-      </Typography>
-    </Horizontal>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
     </Vertical>
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx b/src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
similarity index 91%
rename from src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
rename to src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
index 29255aa..be5e043 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
@@ -13,7 +13,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const InfoToolTip: FC<Props> = ({ children }) => (
+export const InfoPopOver: FC<Props> = ({ children }) => (
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger>
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index 5a8f76e..4e5aeb1 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 
-import { Horizontal } from '@/components/Layout/Horizontal';
+import { InfoPopOver } from './InfoPopOver';
+
 import { Vertical } from '@/components/Layout/Vertical';
 import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
@@ -24,15 +25,8 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
+      <InfoPopOver>{`対応形式:\n    画像 [ .png .jpg .jpeg .bmp .gif ]`}</InfoPopOver>
     </Vertical>
-    <Horizontal className="gap-0 items-start -mt-4">
-      <Typography variant="body2" className="text-gray-500">
-        対応形式:
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        画像 [ .png .jpg .jpeg .bmp .gif ]
-      </Typography>
-    </Horizontal>
     <DropImage
       onDrop={(e) => {
         if (e[0]) {

From 6e29f35c589464664b8fdb20591330e388e0f90d Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 14:27:47 +0900
Subject: [PATCH 03/10] style: change component Name

---
 .../WorkEdit/presentations/items/AssetUpload.tsx    | 13 +++++++++----
 .../{InfoPopOver.tsx => SupportExtPopOver.tsx}      |  2 +-
 .../presentations/items/ThumbnailUpload.tsx         |  7 +++++--
 3 files changed, 15 insertions(+), 7 deletions(-)
 rename src/domains/Work/components/WorkEdit/presentations/items/{InfoPopOver.tsx => SupportExtPopOver.tsx} (90%)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index a88e376..f57650b 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 
 import { AssetRender } from '../../../AssetList/assetRender';
 
-import { InfoPopOver } from './InfoPopOver';
+import { SupportExtPopOver } from './SupportExtPopOver';
 
 import type { Asset } from '@/domains/Work/types';
 
@@ -24,9 +24,14 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
-      <InfoPopOver>
-        {`対応形式:\n    画像[.png .jpg .jpeg .bmp .gif]\n    動画[.mp4 .mov]\n    音源[.mp3 .wav .m4a ]\n    モデル[.gltf .fbx]\n    zip[.zip]`}
-      </InfoPopOver>
+      <SupportExtPopOver>
+        <p>対応形式: </p>
+        <p className="indent-2">画像[.png .jpg .jpeg .bmp .gif]</p>
+        <p className="indent-2">動画[.mp4 .mov]</p>
+        <p className="indent-2">音源[.mp3 .wav .m4a]</p>
+        <p className="indent-2">モデル[.gltf .fbx]</p>
+        <p className="indent-2">zip[.zip]</p>
+      </SupportExtPopOver>
     </Vertical>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
similarity index 90%
rename from src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
rename to src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
index be5e043..8e2288a 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
@@ -13,7 +13,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const InfoPopOver: FC<Props> = ({ children }) => (
+export const SupportExtPopOver: FC<Props> = ({ children }) => (
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger>
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index 4e5aeb1..554abda 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { InfoPopOver } from './InfoPopOver';
+import { SupportExtPopOver } from './SupportExtPopOver';
 
 import { Vertical } from '@/components/Layout/Vertical';
 import { DropImage } from '@/components/functional/DropImage';
@@ -25,7 +25,10 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
-      <InfoPopOver>{`対応形式:\n    画像 [ .png .jpg .jpeg .bmp .gif ]`}</InfoPopOver>
+      <SupportExtPopOver>
+        <p>対応形式:</p>
+        <p className="indent-2">画像 [.png .jpg .jpeg .bmp .gif]</p>
+      </SupportExtPopOver>
     </Vertical>
     <DropImage
       onDrop={(e) => {

From 032d64d33caafdca3427de59e3632ea5b7508f82 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 16:11:47 +0900
Subject: [PATCH 04/10] refactor: interface

---
 .../presentations/items/AssetUpload.tsx       | 32 ++++++++++++++-----
 .../presentations/items/SupportExtPopOver.tsx | 32 ++++++++++++++++---
 .../presentations/items/ThumbnailUpload.tsx   | 12 ++++---
 3 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index f57650b..b26697c 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -24,14 +24,30 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
-      <SupportExtPopOver>
-        <p>対応形式: </p>
-        <p className="indent-2">画像[.png .jpg .jpeg .bmp .gif]</p>
-        <p className="indent-2">動画[.mp4 .mov]</p>
-        <p className="indent-2">音源[.mp3 .wav .m4a]</p>
-        <p className="indent-2">モデル[.gltf .fbx]</p>
-        <p className="indent-2">zip[.zip]</p>
-      </SupportExtPopOver>
+      <SupportExtPopOver
+        supportedExts={[
+          {
+            category: '画像',
+            exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+          },
+          {
+            category: '動画',
+            exts: ['mp4', 'mov'],
+          },
+          {
+            category: '音源',
+            exts: ['mp3', 'wav', 'm4a'],
+          },
+          {
+            category: 'モデル',
+            exts: ['gltf', 'fbx'],
+          },
+          {
+            category: 'zip',
+            exts: ['zip'],
+          },
+        ]}
+      />
     </Vertical>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
index 8e2288a..b65de15 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
@@ -1,26 +1,48 @@
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 
 import { Info } from 'lucide-react';
 
+import { Horizontal } from '@/components/Layout/Horizontal';
+import { Vertical } from '@/components/Layout/Vertical';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
+import { Typography } from '@/components/ui/Typography';
 
 type Props = {
-  children: ReactNode;
+  supportedExts: { category: string; exts: string[] }[];
 };
 
-export const SupportExtPopOver: FC<Props> = ({ children }) => (
+export const SupportExtPopOver: FC<Props> = ({ supportedExts }) => (
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger>
         <Info size={16} color="#757575" />
       </TooltipTrigger>
-      <TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
-        <p className="whitespace-pre-wrap text-[10px] font-bold">{children}</p>
+
+      <TooltipContent className="rounded-md relative border-2 bg-white border-orange-pop text-[10px]">
+        <Horizontal className="gap-1">
+          <Typography variant="strong">対応形式:</Typography>
+          {supportedExts.map(({ category, exts }) => (
+            <Vertical key={category} className="pl-4 gap-1">
+              <Typography variant="strong">{category}</Typography>
+              <Typography variant="strong">
+                <Vertical className="gap-1">
+                  [
+                  <Vertical className="gap-1">
+                    {exts.map((ext) => (
+                      <span key={ext}>.{ext}</span>
+                    ))}
+                  </Vertical>
+                  ]
+                </Vertical>
+              </Typography>
+            </Vertical>
+          ))}
+        </Horizontal>
       </TooltipContent>
     </Tooltip>
   </TooltipProvider>
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index 554abda..8c5f59b 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -25,10 +25,14 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
-      <SupportExtPopOver>
-        <p>対応形式:</p>
-        <p className="indent-2">画像 [.png .jpg .jpeg .bmp .gif]</p>
-      </SupportExtPopOver>
+      <SupportExtPopOver
+        supportedExts={[
+          {
+            category: '画像',
+            exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+          },
+        ]}
+      />
     </Vertical>
     <DropImage
       onDrop={(e) => {

From 611ecf8219568fa3df4b0ec47803239097b90b81 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 21:15:22 +0900
Subject: [PATCH 05/10] refactor: add supportExtension in constants

---
 src/constants/supportExtension/asset.ts     | 22 +++++++++++++++++++++
 src/constants/supportExtension/index.ts     |  3 +++
 src/constants/supportExtension/thumbnail.ts |  6 ++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/constants/supportExtension/asset.ts
 create mode 100644 src/constants/supportExtension/index.ts
 create mode 100644 src/constants/supportExtension/thumbnail.ts

diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts
new file mode 100644
index 0000000..bc206ce
--- /dev/null
+++ b/src/constants/supportExtension/asset.ts
@@ -0,0 +1,22 @@
+export const ASSET_EXTENSION = [
+  {
+    category: '画像',
+    exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+  },
+  {
+    category: '動画',
+    exts: ['mp4', 'mov'],
+  },
+  {
+    category: '音源',
+    exts: ['mp3', 'wav', 'm4a'],
+  },
+  {
+    category: 'モデル',
+    exts: ['gltf', 'fbx'],
+  },
+  {
+    category: 'zip',
+    exts: ['zip'],
+  },
+];
diff --git a/src/constants/supportExtension/index.ts b/src/constants/supportExtension/index.ts
new file mode 100644
index 0000000..bcce2e0
--- /dev/null
+++ b/src/constants/supportExtension/index.ts
@@ -0,0 +1,3 @@
+export * from './asset';
+
+export * from './thumbnail';
diff --git a/src/constants/supportExtension/thumbnail.ts b/src/constants/supportExtension/thumbnail.ts
new file mode 100644
index 0000000..b32334b
--- /dev/null
+++ b/src/constants/supportExtension/thumbnail.ts
@@ -0,0 +1,6 @@
+export const THUMBNAIL_EXTENSION = [
+  {
+    category: '画像',
+    exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+  },
+];

From 8afed667f800c56597a60bb1dd150b295bd5e037 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 21:18:44 +0900
Subject: [PATCH 06/10] refactor: import extensions

---
 .../presentations/items/AssetUpload.tsx       | 26 ++-----------------
 .../presentations/items/ThumbnailUpload.tsx   | 10 ++-----
 2 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index b26697c..bd249ce 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -11,6 +11,7 @@ import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
 import { Input } from '@/components/ui/Input';
 import { Typography } from '@/components/ui/Typography';
+import { ASSET_EXTENSION } from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 type Props = {
@@ -24,30 +25,7 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
-      <SupportExtPopOver
-        supportedExts={[
-          {
-            category: '画像',
-            exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
-          },
-          {
-            category: '動画',
-            exts: ['mp4', 'mov'],
-          },
-          {
-            category: '音源',
-            exts: ['mp3', 'wav', 'm4a'],
-          },
-          {
-            category: 'モデル',
-            exts: ['gltf', 'fbx'],
-          },
-          {
-            category: 'zip',
-            exts: ['zip'],
-          },
-        ]}
-      />
+      <SupportExtPopOver supportedExts={ASSET_EXTENSION} />
     </Vertical>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index 8c5f59b..cd84e12 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -7,6 +7,7 @@ import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
 import { Input } from '@/components/ui/Input';
 import { Typography } from '@/components/ui/Typography';
+import { THUMBNAIL_EXTENSION } from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 type Props = {
@@ -25,14 +26,7 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
-      <SupportExtPopOver
-        supportedExts={[
-          {
-            category: '画像',
-            exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
-          },
-        ]}
-      />
+      <SupportExtPopOver supportedExts={THUMBNAIL_EXTENSION} />
     </Vertical>
     <DropImage
       onDrop={(e) => {

From b6d7332e037534c8f08f62500a70593c9da39f54 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 21:25:30 +0900
Subject: [PATCH 07/10] refactor: add asset accept constants

---
 src/constants/supportExtension/asset.ts                  | 5 ++++-
 src/constants/supportExtension/thumbnail.ts              | 2 +-
 .../WorkEdit/presentations/items/AssetUpload.tsx         | 9 ++++++---
 .../WorkEdit/presentations/items/ThumbnailUpload.tsx     | 4 ++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts
index bc206ce..7c15a0c 100644
--- a/src/constants/supportExtension/asset.ts
+++ b/src/constants/supportExtension/asset.ts
@@ -1,4 +1,4 @@
-export const ASSET_EXTENSION = [
+export const ASSET_EXTENSIONS = [
   {
     category: '画像',
     exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
@@ -20,3 +20,6 @@ export const ASSET_EXTENSION = [
     exts: ['zip'],
   },
 ];
+
+export const ASSET_ACCEPT_EXTENSIONS =
+  'image/png, image/jpeg, image/jpg, image/bmp, image/gif, video/mp4, video/mov, audio/mp3, audio/wav, audio/m4a, model/gltf, model/fbx, application/zip';
diff --git a/src/constants/supportExtension/thumbnail.ts b/src/constants/supportExtension/thumbnail.ts
index b32334b..4385122 100644
--- a/src/constants/supportExtension/thumbnail.ts
+++ b/src/constants/supportExtension/thumbnail.ts
@@ -1,4 +1,4 @@
-export const THUMBNAIL_EXTENSION = [
+export const THUMBNAIL_EXTENSIONS = [
   {
     category: '画像',
     exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index bd249ce..4a5d098 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -11,7 +11,10 @@ import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
 import { Input } from '@/components/ui/Input';
 import { Typography } from '@/components/ui/Typography';
-import { ASSET_EXTENSION } from '@/constants/supportExtension';
+import {
+  ASSET_ACCEPT_EXTENSIONS,
+  ASSET_EXTENSIONS,
+} from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 type Props = {
@@ -25,7 +28,7 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
-      <SupportExtPopOver supportedExts={ASSET_EXTENSION} />
+      <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
     </Vertical>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
@@ -60,7 +63,7 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
           void handleUploadAssets(e.target.files);
         }}
         multiple
-        accept="image/png, image/jpeg, image/jpg, image/bmp, image/gif, video/mp4, video/mov, audio/mp3, audio/wav, audio/m4a, model/gltf, model/fbx, application/zip"
+        accept={ASSET_ACCEPT_EXTENSIONS}
         type="file"
       />
     </DropImage>
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index cd84e12..5ea09f4 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -7,7 +7,7 @@ import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
 import { Input } from '@/components/ui/Input';
 import { Typography } from '@/components/ui/Typography';
-import { THUMBNAIL_EXTENSION } from '@/constants/supportExtension';
+import { THUMBNAIL_EXTENSIONS } from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 type Props = {
@@ -26,7 +26,7 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
-      <SupportExtPopOver supportedExts={THUMBNAIL_EXTENSION} />
+      <SupportExtPopOver supportedExts={THUMBNAIL_EXTENSIONS} />
     </Vertical>
     <DropImage
       onDrop={(e) => {

From 679563a71a75db8b10d0e61fb436c633601e9ac2 Mon Sep 17 00:00:00 2001
From: Nakamura Yuki <111046707+powaaaaa@users.noreply.github.com>
Date: Fri, 7 Jun 2024 11:25:45 +0900
Subject: [PATCH 08/10] refactor: generate asset extensions

---
 src/constants/supportExtension/asset.ts       | 16 +++-
 .../presentations/items/AssetUpload.tsx       | 95 ++++++++++---------
 2 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts
index 7c15a0c..0e6f42b 100644
--- a/src/constants/supportExtension/asset.ts
+++ b/src/constants/supportExtension/asset.ts
@@ -21,5 +21,17 @@ export const ASSET_EXTENSIONS = [
   },
 ];
 
-export const ASSET_ACCEPT_EXTENSIONS =
-  'image/png, image/jpeg, image/jpg, image/bmp, image/gif, video/mp4, video/mov, audio/mp3, audio/wav, audio/m4a, model/gltf, model/fbx, application/zip';
+const categoryToPrefixMap: { [key: string]: string } = {
+  画像: 'image',
+  動画: 'video',
+  音源: 'audio',
+  モデル: 'model',
+  zip: 'application',
+};
+
+export const ASSET_ACCEPT_EXTENSIONS = ASSET_EXTENSIONS.flatMap((category) =>
+  category.exts.map((ext) => {
+    const prefix = categoryToPrefixMap[category.category];
+    return `${prefix}/${ext}`;
+  })
+).join(', ');
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index 4a5d098..107070f 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -21,51 +21,54 @@ type Props = {
   handleUploadAssets: (files: FileList) => Promise<void>;
   assets: Asset[];
 };
-export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
-  <>
-    <Vertical className="items-center">
-      <Typography className="text-lg font-bold">アセット</Typography>
-      <Typography className="text-red-500" variant="body2">
-        必須
-      </Typography>
-      <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
-    </Vertical>
-    <Vertical className="gap-2 w-full overflow-scroll">
-      {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
-    </Vertical>
-    <DropImage
-      onDrop={(e) => {
-        void handleUploadAssets(e);
-      }}
-      className="rounded-md relative w-full h-64 border-2 border-orange-pop"
-    >
-      <Center className="h-full -z-20 absolute flex flex-col">
-        <div
-          className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
-            'h-full': assets.length > 0,
-          })}
-        />
-        <Typography variant="body1">
-          クリック または ドラッグ&ドロップ
-        </Typography>
-        <Typography variant="body2" className="text-gray-500">
-          {assets.length > 0
-            ? `${assets.length}件のアセットをアップロード済み`
-            : 'アセットをアップロードしてください'}
+export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => {
+  console.log('asset: ', ASSET_ACCEPT_EXTENSIONS);
+  return (
+    <>
+      <Vertical className="items-center">
+        <Typography className="text-lg font-bold">アセット</Typography>
+        <Typography className="text-red-500" variant="body2">
+          必須
         </Typography>
-      </Center>
-      <Input
-        className="cursor-pointer opacity-0 h-full"
-        onChange={(e) => {
-          if (!e.target.files?.length || !e.target.files[0]) {
-            return;
-          }
-          void handleUploadAssets(e.target.files);
+        <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
+      </Vertical>
+      <Vertical className="gap-2 w-full overflow-scroll">
+        {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
+      </Vertical>
+      <DropImage
+        onDrop={(e) => {
+          void handleUploadAssets(e);
         }}
-        multiple
-        accept={ASSET_ACCEPT_EXTENSIONS}
-        type="file"
-      />
-    </DropImage>
-  </>
-);
+        className="rounded-md relative w-full h-64 border-2 border-orange-pop"
+      >
+        <Center className="h-full -z-20 absolute flex flex-col">
+          <div
+            className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
+              'h-full': assets.length > 0,
+            })}
+          />
+          <Typography variant="body1">
+            クリック または ドラッグ&ドロップ
+          </Typography>
+          <Typography variant="body2" className="text-gray-500">
+            {assets.length > 0
+              ? `${assets.length}件のアセットをアップロード済み`
+              : 'アセットをアップロードしてください'}
+          </Typography>
+        </Center>
+        <Input
+          className="cursor-pointer opacity-0 h-full"
+          onChange={(e) => {
+            if (!e.target.files?.length || !e.target.files[0]) {
+              return;
+            }
+            void handleUploadAssets(e.target.files);
+          }}
+          multiple
+          accept={ASSET_ACCEPT_EXTENSIONS}
+          type="file"
+        />
+      </DropImage>
+    </>
+  );
+};

From 4ae3a4510a5e413665073b8c4052cbac1854a1f2 Mon Sep 17 00:00:00 2001
From: Nakamura Yuki <111046707+powaaaaa@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:11:49 +0900
Subject: [PATCH 09/10] fix: console

---
 src/constants/supportExtension/asset.ts       |  2 +-
 src/constants/supportExtension/thumbnail.ts   |  2 +-
 .../presentations/items/AssetUpload.tsx       | 95 +++++++++----------
 3 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts
index 0e6f42b..022ac3c 100644
--- a/src/constants/supportExtension/asset.ts
+++ b/src/constants/supportExtension/asset.ts
@@ -19,7 +19,7 @@ export const ASSET_EXTENSIONS = [
     category: 'zip',
     exts: ['zip'],
   },
-];
+] as const;
 
 const categoryToPrefixMap: { [key: string]: string } = {
   画像: 'image',
diff --git a/src/constants/supportExtension/thumbnail.ts b/src/constants/supportExtension/thumbnail.ts
index 4385122..c116a77 100644
--- a/src/constants/supportExtension/thumbnail.ts
+++ b/src/constants/supportExtension/thumbnail.ts
@@ -3,4 +3,4 @@ export const THUMBNAIL_EXTENSIONS = [
     category: '画像',
     exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
   },
-];
+] as const;
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index 107070f..4a5d098 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -21,54 +21,51 @@ type Props = {
   handleUploadAssets: (files: FileList) => Promise<void>;
   assets: Asset[];
 };
-export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => {
-  console.log('asset: ', ASSET_ACCEPT_EXTENSIONS);
-  return (
-    <>
-      <Vertical className="items-center">
-        <Typography className="text-lg font-bold">アセット</Typography>
-        <Typography className="text-red-500" variant="body2">
-          必須
+export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
+  <>
+    <Vertical className="items-center">
+      <Typography className="text-lg font-bold">アセット</Typography>
+      <Typography className="text-red-500" variant="body2">
+        必須
+      </Typography>
+      <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
+    </Vertical>
+    <Vertical className="gap-2 w-full overflow-scroll">
+      {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
+    </Vertical>
+    <DropImage
+      onDrop={(e) => {
+        void handleUploadAssets(e);
+      }}
+      className="rounded-md relative w-full h-64 border-2 border-orange-pop"
+    >
+      <Center className="h-full -z-20 absolute flex flex-col">
+        <div
+          className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
+            'h-full': assets.length > 0,
+          })}
+        />
+        <Typography variant="body1">
+          クリック または ドラッグ&ドロップ
+        </Typography>
+        <Typography variant="body2" className="text-gray-500">
+          {assets.length > 0
+            ? `${assets.length}件のアセットをアップロード済み`
+            : 'アセットをアップロードしてください'}
         </Typography>
-        <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
-      </Vertical>
-      <Vertical className="gap-2 w-full overflow-scroll">
-        {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
-      </Vertical>
-      <DropImage
-        onDrop={(e) => {
-          void handleUploadAssets(e);
+      </Center>
+      <Input
+        className="cursor-pointer opacity-0 h-full"
+        onChange={(e) => {
+          if (!e.target.files?.length || !e.target.files[0]) {
+            return;
+          }
+          void handleUploadAssets(e.target.files);
         }}
-        className="rounded-md relative w-full h-64 border-2 border-orange-pop"
-      >
-        <Center className="h-full -z-20 absolute flex flex-col">
-          <div
-            className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
-              'h-full': assets.length > 0,
-            })}
-          />
-          <Typography variant="body1">
-            クリック または ドラッグ&ドロップ
-          </Typography>
-          <Typography variant="body2" className="text-gray-500">
-            {assets.length > 0
-              ? `${assets.length}件のアセットをアップロード済み`
-              : 'アセットをアップロードしてください'}
-          </Typography>
-        </Center>
-        <Input
-          className="cursor-pointer opacity-0 h-full"
-          onChange={(e) => {
-            if (!e.target.files?.length || !e.target.files[0]) {
-              return;
-            }
-            void handleUploadAssets(e.target.files);
-          }}
-          multiple
-          accept={ASSET_ACCEPT_EXTENSIONS}
-          type="file"
-        />
-      </DropImage>
-    </>
-  );
-};
+        multiple
+        accept={ASSET_ACCEPT_EXTENSIONS}
+        type="file"
+      />
+    </DropImage>
+  </>
+);

From a810fbdca3d2b2cd1526229c1f96a9ecfbdce2dc Mon Sep 17 00:00:00 2001
From: Nakamura Yuki <111046707+powaaaaa@users.noreply.github.com>
Date: Tue, 6 Aug 2024 17:32:37 +0900
Subject: [PATCH 10/10] refactor: update supportedExts type in
 SupportExtPopOver and ThumbnailUpload components

---
 .../WorkEdit/presentations/items/SupportExtPopOver.tsx       | 5 ++++-
 .../WorkEdit/presentations/items/ThumbnailUpload.tsx         | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
index b65de15..53a811c 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx
@@ -13,7 +13,10 @@ import {
 import { Typography } from '@/components/ui/Typography';
 
 type Props = {
-  supportedExts: { category: string; exts: string[] }[];
+  supportedExts: readonly {
+    category: string;
+    exts: readonly string[];
+  }[];
 };
 
 export const SupportExtPopOver: FC<Props> = ({ supportedExts }) => (
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
index 5ea09f4..6f90b63 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
+++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -39,14 +39,14 @@ export const ThumbnailUpload: FC<Props> = ({
       <Center className="h-full -z-20 absolute flex flex-col">
         <div
           className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
-            'h-full': thumbnailUrl != '',
+            'h-full': thumbnailUrl !== '',
           })}
         />
         <Typography variant="body1">
           クリック または ドラッグ&ドロップ
         </Typography>
         <Typography variant="body2" className="text-gray-400">
-          {thumbnailUrl != ''
+          {thumbnailUrl !== ''
             ? 'サムネイルをアップロード済み'
             : 'サムネイルをアップロードしてください'}
         </Typography>