デザインを綺麗にする

[puripuri2100]

今のデザインはかなり野暮ったいので導線とかを意識して綺麗にすると良い

[Myxogastria0808]

現在のサイトの構成は、以下の1枚目の画像の図のような形になっていると思うのですが、
自分なりに構成図を書き直してみました。
書き直したのが、二枚目の画像になります。
現在のサイトは、トップにQRコードを読み込むためのコードが入っていると思いますが、
構成し直した図では、トップの画面に物品検索を行う機能を置くのが良いと考えました。
そのため、構成し直したサイトにした場合はトップ画面からはQRコードリーダーが消え、
登録のページ等のQRコードの機能を利用するブロックのみに配置する形としました。
練り直した構成でフロントを書いていこうと思うのですが、構成に問題がありましたら、
指摘していただけるとありがたいです。
[現在の構成]

[構成し直してみた図]

[Myxogastria0808]

トップ画面のイメージは、以下の画像のようなものを考えています。
その他のページについてもほぼ同じ構造にしようと考えています。

[Myxogastria0808]

サブページのイメージは、以下の画像のようなものを考えています。

QR起動時

[Myxogastria0808]

実際のQR起動時の雰囲気は、以下のようなものを想定しています。(スクショ画像は、適当に仮組みしてみたものです。)

[Myxogastria0808]

デザインに問題があれば、早めに回答をいただけるとありがたいです。
問題がないようでしたら、このデザインでやりたいです。

[Myxogastria0808]

#111 AppRouterへの移行 のissueでお伝えした通り、App Routerへの移行で詰まってしまいましたので、デザインの方は現状のPage Routerのまま作成いたします。

[Myxogastria0808]

AppRouterへの移行は、4点ほど解決できない問題が発生しましたので、PageRouterのままデザインを整えています。
ディレクトリの構造やファイル名は変えていないので、構造自体は変わっていないはずです。
以下、現在デザインの体裁を整えているものをプッシュしているブランチになります。
https://github.com/sohosai/qr-frontend/tree/fix/%23109-edit-site-design

[puripuri2100]

画面設計良いと思います
今までは機能追加優先でとりあえずTOPと各ページが1対1対応していただけなので、整理していただいて助かります
QRコードについても切り替えボタンの位置が上部中央で固定されるのが便利そう
後ろ側が透明だとわかりにくいので視認性については考慮する必要がありそうですね

[Myxogastria0808]

デザインの体裁を整える作業とルーティングのパスがだいたいできましたので、手書きの画像で申し訳ないのですが、現在作成しているデザインでのルーティングの図を共有させていただきます。
ルーティングは変更しましたが、コンポーネントの配置をこねくり回しただけなので、元から作成されているファイルやディレクトリ構造は変更していないはずです。
ルーティングとデザイン以外で変更したこと及び追加したことに関しては、以下に箇条書きで書いていますので、確認していただけると幸いです。
[変更点及び追加点]
・next.config.jsにstyled-componentに関する設定を追加
→styled-componentのstyleがサイトのリロードをすると適用されなくなるバグを修正しました。
・componentディレクトリにあったButtonという名前で定義されていたコンポーネントをSystemButtonという名前に変更
→MUIとコンポーネントの名前が被っていたので、一応変えておきました。　(デザインもついでに変更しています。)
・pages/spotディレクトリで定義されていたFixturesRegister関数の名前をSpotFixturesRegisterという名前に変更
→pages/itemディレクトリのregister.tsxで定義されていた関数名と被っていたため、一応変えておきました。
・component/subに各ページでレンダリングされるコンポーネントの要素を固めておくコードを格納
→各ページで異なる部分のコンポーネントを各ページごとに固めました。
・components/TopにHeader以下の各ページに共通するコンポーネントの要素を一つのコンポーネントに固めた
→components/TopにHeader以下の各ページに共通するコンポーネントの要素を一つのコンポーネントに固めたindex.tsxが入ってます。
・component/LinkButtonに自作のボタンコンポーネントを格納
→各リンクに飛ばすボタンのコンポーネントを格納しています。
・Headerコンポーネントの発火を明示的にするために、一部コードを変更
→Drawerのリンクの要素の発火が不安定だったので、明示的に発火するように変更しました。
・メインのファイルは、pagesディレクトリの直下に格納
→pageディレクトリの4つのファイルが各ページをレンダリングしているメインのファイルになります。
・一部、元からコードから書かれているコンポーネントのデザインを変更
→一部、元からコードから書かれているコンポーネントのデザインを変更している箇所があります。

[Myxogastria0808]

[Myxogastria0808]

ルーティングの図 (間違ってたら、すいません...)
以下、未解決の問題です。(画像の中にも書き込んでいるものになります。)
・各地点情報の削除を行っているコードを見つけられず、Redirectがかかるようにできていません。(Redirectをかけないと更新されないので、Redirectしようとしてます。)
・QRコード生成の箇所にあるダウンロードボタンのエラーハンドリングができていません。(技術力が足りず、直せていません。申し訳ございません...)

[puripuri2100]

#123 で解消