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

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'],
+  },
+] as const;
+
+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'],
+  },
+] as const;

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

@@ -2,14 +2,19 @@ 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 = {
@@ -23,27 +28,8 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
+      <SupportExtPopOver supportedExts={ASSET_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>
-      <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>
@@ -77,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>

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

@@ -0,0 +1,52 @@
+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: readonly {
+    category: string;
+    exts: readonly 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]) {
@@ -44,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>