写真登録時、サムネ表示機能を追加する

[shhwan]

やること

Posting登録画面の写真登録部分に写真を洗濯するとサムネイルが見えるようにする。

参考URL

https://www.figma.com/file/vw9gaVxUBOjA63xEJKhLtU/whereareyou?node-id=243%3A2

[copetit]

やったこと

• 四角をクリックすると写真がアップロードできます。
• アップロードしたらその写真が見えます。
• デザインを軽く入れましたが。tailwindも使ってないところが残っています。他のデザインチケットがあるのでそこで詳しく(四角の中にプラスsvgとか)やりたいため、最小限にしました。写真が潰れたりするのも、ちょっと調べましたが簡単にはできそうになりのでそのままにします。

確認方法

http://localhost:3000/wau/posting

• [ ] 写真を全部入れてみてサムネイルが表示されるか確認
• [ ] 登録したときに入れた写真がちゃんと反映されていること(Slide詳細ページで確認可)

残念な点

写真関連のコードが膨大になりリファクタリングが必要ですね。今回入れた、以下の部分を関数化でもしたかったんですが、

      const reader = new FileReader();
      reader.onload = (e: any) => {
        SetImgTextOne(e.target.result);
      };
      reader.readAsDataURL(event.currentTarget.files[0]);

SetImgTextOne()が入っているため、やりづらくなってやってません。。

参考

参考したリンクはこちらに書いておきました。

[shhwan]

確認しました

動作確認

• 写真を全部入れてみてサムネイルが表示されるか確認
• 登録したときに入れた写真がちゃんと反映されていること(Slide詳細ページで確認可) 両方問題ありませんでした。

残念な点について

同じく思ったのは、これちょっと改善できそうだけど Clenup Issueでやるのがいいか？とちょっと思ってました。 これ簡単にできそうな気がしますね、、

IMO一つつけましたのでご確認だけお願いします。 https://github.com/copetit/whereareyou/pull/103#pullrequestreview-872519338

[copetit]

バグがあったので追加修正しました。申し訳ないです。 複数のイメージを登録、複数のpostingを入れてみて、ちゃんと登録した写真だけが表示されるかご確認お願いします。 Slideを閉じずに別のpinを押しても正しく情報が表示されるはずです。

やったこと

• map.tsxに書いてある<detailPage / >のコンポーネント位置が間違ったので、外出ししました。 今のままだと、pinの数だけdetailPageのdomが作られます。危ない。 cssの修正は外出しによって親の要素が変わったのでサイズを合わせるため変更しただけです。

• detailPage.tsxのimgのkeyをindexを利用しました。

[shhwan]

再確認しました

ちゃんと登録した写真だけが表示されるかご確認(Slideを閉じずに別のpinを押しても正しく情報が表示されるはず)

お、問題ないこと確認しました。 のpinを押しても正しく情報が表示されること確認しました。

他気になる点

はコメントしましたが、実装とは関係ないもの（？）余談みたいなものです。

修正ありがとうございます。