作品作成画面の対応拡張子のポップアップ by yuki6ra · Pull Request #235 · Kyutech-C3/ToyBox_front_replace

yuki6ra · 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

        必須
      </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

        必須
      </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

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

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

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

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

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

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

        必須
      </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の内容と外れるので分けた方がいいとは思いますけどそこまで大きいタスクでもないのでやりやすい方で任せます

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

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

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

よろお願いします

yuki6ra · 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から生成するようにしてください

yuki6ra · 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

yuki6ra added 2 commits May 7, 2024 00:47

feat: information tool tip

f5c7684

feat: import InfoPopOver to AssetUpload, ThumbnailUpload

85b447e

yuki6ra added the priority low label May 6, 2024

yuki6ra self-assigned this May 6, 2024

yuki6ra requested review from K-Kizuku and tosaken1116 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

yuki6ra 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

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

tosaken1116 reviewed May 7, 2024

View reviewed changes

yuki6ra 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

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

tosaken1116 reviewed May 15, 2024

View reviewed changes

refactor: generate asset extensions

679563a

yuki6ra 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

yuki6ra 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

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

	{`対応形式:\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';

Comments

Conversation

yuki6ra commented May 6, 2024

issue番号

変更点概要

参考文献(あれば)

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

チェック項目

Uh oh!

vercel bot commented May 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuki6ra commented May 7, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuki6ra commented May 7, 2024

Uh oh!

yuki6ra commented May 15, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuki6ra commented Jun 7, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented May 6, 2024 •

edited

Loading