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

powaaaaa · 2024-05-06T16:22:07Z

issue番号

closes #212

変更点概要

itemsの中にInfoPopOverを作成しました
AssetUpload.tsxとThumbnailUpload.tsxに追加しました

参考文献(あれば)

infoアイコン
https://lucide.dev/icons/info

スクリーンショット(必要であれば)

チェック項目

テストが通ったか
ビルドが通ったか
self assignしたか
レビュー優先度のラベルをつけたか

vercel · 2024-05-06T16:22:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
toy-box-front-replace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2024 8:36am

K-Kizuku · 2024-05-06T16:34:06Z

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

@@ -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]`}


文字の前後の空白を入れるか入れないかで統一してほしいです
[.xxx] or [ .xxx ]
前者なら以下の修正

Suggested change

{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}

{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a]\n モデル[.gltf .fbx]\n zip[.zip]`}

K-Kizuku · 2024-05-06T16:37:22Z

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

@@ -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]`}


 じゃだめ？(特に要件とか仕様は確認してないので，何か理由があるなら無視してOK．)

Suggested change

{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}

対応形式:

 

画像[.png .jpg .jpeg .bmp .gif]

 

動画[.mp4 .mov]

 

音源[.mp3 .wav .m4a ]

 

モデル[.gltf .fbx]

 

zip[.zip]

tosaken1116 · 2024-05-07T01:20:41Z

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

+  children: ReactNode;
+};
+
+export const InfoPopOver: FC<Props> = ({ children }) => (


Infoだと情報が薄くて何の情報なのかわかりづらいからSupportExtPopOverとかにしてもいいかも

tosaken1116 · 2024-05-07T01:22:01Z

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

@@ -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]`}


拡張子情報は親要素から受け取るわけじゃないからpopoverの中に隠蔽しちゃっていいと思う

って思ったけどこれアセットとサムネイルで違うのか

tosaken1116 · 2024-05-07T01:41:42Z

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

+      <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>


Suggested change

<TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">

{children}

</TooltipContent>

<TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">

{

supportedExts.map(({category,exts})=>(

<Vertical>

<Typography>

{category}

</Typography>



[

<Vertical>

{

exts.map((ext)=>(



.{ext}



))

}

<Vertical>

]

</Vertical>

))

}

</TooltipContent>

冗長ではあると思うけど私だったらこういうふうに書くかも(動くかどうかは確かめてない、あくまでイメージ)

supportedExtっていうpropsを取ってそれを元にPopoverがレンダリングする

supportedExtはcategoryとextsをkeyに持つ構造体の配列

で親からsupportedExtを渡すだけでpopoverが統一されたスタイルでレンダリングをしてくれる

親が渡すsupportedExtは固定値で持っておけば何か変更があったとしても構造体を変えるだけでそれまでと同様のスタイルが保てる(文字列だと開発者がスタイルを気にして開発しなきゃいけなくなる(ドットだったりスペースだったり))

ありがとうございます勉強になりま
そんな感じにしてみます

powaaaaa · 2024-05-07T07:15:32Z

こんな感じになりました。よろしくお願いしますす

tosaken1116 · 2024-05-07T08:05:19Z

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

@@ -23,27 +24,31 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
      <Typography className="text-red-500" variant="body2">
        必須
      </Typography>
+      <SupportExtPopOver
+        supportedExts={[


supportedExtsは別で変数化して渡すだけにする
src/contstantsに記述する
Thumbnailも同様の変更が必要

メリット
対応拡張子が増えたときに編集する箇所がconstantsだけになりuiファイルに変更が起きないため意図しない変更が起きづらい

もし可能であればinputのaccept fileもsupportedExtsを参照するようにしたい(これは別issueに切り出しても良き)

https://github.com/Kyutech-C3/ToyBox_front_replace/blob/d0bb9a5915eb678c6c15ddaddc7f6861686ad48b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx#L70C4-L82C9

了解です
とりあえずsupportedExtsはやります
inputの方はついででできる感じならしますけどissue切り出す？

個人的にはissueの内容と外れるので分けた方がいいとは思いますけどそこまで大きいタスクでもないのでやりやすい方で任せます

powaaaaa · 2024-05-07T12:29:44Z

assetのaccept fileもできました
constantsのファイルの作り方よくわからんかったのでダメやったら教えてください。
ポップオーバーのところはちゃんと動いてました

acceptのとこはどう確認したらいいかわからんかったけど、ぱっと見gifは良くてpdfだめってなってるからちゃんと動いてそうと思いました

よろお願いします

powaaaaa · 2024-05-15T09:55:07Z

@K-Kizuku @tosaken1116

tosaken1116 · 2024-05-15T10:17:31Z

src/constants/supportExtension/asset.ts

+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';


ここは静的なものではなくASSET_EXTENSIONSから生成するようにしてください

powaaaaa · 2024-06-07T02:29:09Z

お願いします
@K-Kizuku @tosaken1116

tosaken1116 · 2024-06-07T03:22:08Z

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

-            ? `${assets.length}件のアセットをアップロード済み`
-            : 'アセットをアップロードしてください'}
+export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => {
+  console.log('asset: ', ASSET_ACCEPT_EXTENSIONS);


console.logは消してください

ごめんなさい

tosaken1116 · 2024-06-07T03:24:26Z

src/constants/supportExtension/asset.ts

+    category: 'zip',
+    exts: ['zip'],
+  },
+];


as constをつけてください

as constをつける理由
https://typescriptbook.jp/reference/values-types-variables/const-assertion

tosaken1116 · 2024-06-07T03:25:17Z

src/constants/supportExtension/thumbnail.ts

+    category: '画像',
+    exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
+  },
+];


…lUpload components

powaaaaa added 2 commits May 7, 2024 00:47

feat: information tool tip

f5c7684

feat: import InfoPopOver to AssetUpload, ThumbnailUpload

85b447e

powaaaaa added the priority low label May 6, 2024

powaaaaa self-assigned this May 6, 2024

powaaaaa requested review from tosaken1116 and K-Kizuku as code owners May 6, 2024 16:22

K-Kizuku reviewed May 6, 2024

View reviewed changes

tosaken1116 reviewed May 7, 2024

View reviewed changes

powaaaaa added 2 commits May 7, 2024 14:27

style: change component Name

6e29f35

refactor: interface

032d64d

vercel bot deployed to Preview May 7, 2024 07:15 View deployment

powaaaaa requested review from tosaken1116 and K-Kizuku May 7, 2024 07:16

tosaken1116 reviewed May 7, 2024

View reviewed changes

powaaaaa added 3 commits May 7, 2024 21:15

refactor: add supportExtension in constants

611ecf8

refactor: import extensions

8afed66

refactor: add asset accept constants

b6d7332

vercel bot deployed to Preview May 7, 2024 12:28 View deployment

powaaaaa requested a review from tosaken1116 May 7, 2024 12:29

tosaken1116 reviewed May 15, 2024

View reviewed changes

refactor: generate asset extensions

679563a

powaaaaa requested a review from tosaken1116 June 7, 2024 02:27

vercel bot deployed to Preview June 7, 2024 02:29 View deployment

tosaken1116 reviewed Jun 7, 2024

View reviewed changes

powaaaaa added 2 commits June 7, 2024 13:11

fix: console

4ae3a45

refactor: update supportedExts type in SupportExtPopOver and Thumbnai…

a810fbd

…lUpload components

vercel bot deployed to Preview August 6, 2024 08:36 View deployment

powaaaaa requested a review from tosaken1116 August 6, 2024 08:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

powaaaaa commented May 6, 2024

vercel bot commented May 6, 2024 •

edited

Loading

K-Kizuku May 6, 2024

K-Kizuku May 6, 2024

tosaken1116 May 7, 2024

tosaken1116 May 7, 2024

tosaken1116 May 7, 2024

tosaken1116 May 7, 2024

powaaaaa May 7, 2024

powaaaaa commented May 7, 2024

tosaken1116 May 7, 2024

powaaaaa May 7, 2024

tosaken1116 May 7, 2024

powaaaaa commented May 7, 2024

powaaaaa commented May 15, 2024

tosaken1116 May 15, 2024

powaaaaa commented Jun 7, 2024

tosaken1116 Jun 7, 2024

powaaaaa Jun 7, 2024

tosaken1116 Jun 7, 2024

tosaken1116 Jun 7, 2024

tosaken1116 Jun 7, 2024

	{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a ]\n モデル[.gltf .fbx]\n zip[.zip]`}
	{`対応形式:\n 画像[.png .jpg .jpeg .bmp .gif]\n 動画[.mp4 .mov]\n 音源[.mp3 .wav .m4a]\n モデル[.gltf .fbx]\n zip[.zip]`}

-      <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>
+      <TooltipContent className="rounded-md relative text-xl border-2 bg-white border-orange-pop">
+      {
+          supportedExts.map(({category,exts})=>(
+              <Vertical>
+                 <Typography>
+                     {category}
+                 </Typography>
+                 <span>
+                 [
+                 <Vertical>
+                 {
+                    exts.map((ext)=>(
+                    <p>
+                        .{ext}
+                    </p>
+                    ))
+                 }
+                 <Vertical>
+                 ]
+              </Vertical>
+          ))
+      }
+      </TooltipContent>

		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';

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

Are you sure you want to change the base?

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

Conversation

powaaaaa commented May 6, 2024

issue番号

変更点概要

参考文献(あれば)

スクリーンショット(必要であれば)

チェック項目

vercel bot commented May 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

powaaaaa commented May 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

powaaaaa commented May 7, 2024

powaaaaa commented May 15, 2024

Choose a reason for hiding this comment

powaaaaa commented Jun 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented May 6, 2024 •

edited

Loading