作品作成画面の対応拡張子のポップアップ

src/constants/supportExtension/asset.ts

@@ -0,0 +1,37 @@
+export const ASSET_EXTENSIONS = [
+  {
+    category: '画像',
+    exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+  },
+  {
+    category: '動画',
+    exts: ['mp4', 'mov'],
+  },
+  {
+    category: '音源',
+    exts: ['mp3', 'wav', 'm4a'],
+  },
+  {
+    category: 'モデル',
+    exts: ['gltf', 'fbx'],
+  },
+  {
+    category: 'zip',
+    exts: ['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(', ');

src/constants/supportExtension/index.ts

@@ -0,0 +1,3 @@
+export * from './asset';
+
+export * from './thumbnail';

src/constants/supportExtension/thumbnail.ts

@@ -0,0 +1,6 @@
+export const THUMBNAIL_EXTENSIONS = [
+  {
+    category: '画像',
+    exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+  },
+];

src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx

@@ -2,84 +2,73 @@ import type { FC } from 'react';
 
 import { AssetRender } from '../../../AssetList/assetRender';
 
+import { SupportExtPopOver } from './SupportExtPopOver';
+
 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';
 import { Input } from '@/components/ui/Input';
 import { Typography } from '@/components/ui/Typography';
+import {
+  ASSET_ACCEPT_EXTENSIONS,
+  ASSET_EXTENSIONS,
+} from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 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>
-    </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>
-    <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="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"
-        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>
+    </>
+  );
+};

src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx

@@ -0,0 +1,49 @@
+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 = {
+  supportedExts: { category: string; exts: string[] }[];
+};
+
+export const SupportExtPopOver: FC<Props> = ({ supportedExts }) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger>
+        <Info size={16} color="#757575" />
+      </TooltipTrigger>
+
+      <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>
+);

src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx

@@ -1,11 +1,13 @@
 import type { FC } from 'react';
 
-import { Horizontal } from '@/components/Layout/Horizontal';
+import { SupportExtPopOver } from './SupportExtPopOver';
+
 import { Vertical } from '@/components/Layout/Vertical';
 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_EXTENSIONS } from '@/constants/supportExtension';
 import { cn } from '@/libs/utils';
 
 type Props = {
@@ -24,15 +26,8 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
+      <SupportExtPopOver supportedExts={THUMBNAIL_EXTENSIONS} />
     </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]) {