Nature Excela
Corporate site | EC site
自然派化粧品の通販サイトを制作しました。 Dynamic Routesで動的に商品ページを作成しています。カートページを作成し、商品ごとの計、全ての合計金額も算出しています。
https://nature-excela.vercel.appDesign
Figma | Components
Figmaでコンポーネントを作っておくことで、Next.jsでどこをコンポーネントするのかやPropsがわかりやすくなりました。ECサイトのような似たようなページ構造を多く持つサイトで、Figmaで事前にバリアントなどを使用し、設計しておくことで実装しやすさを感じました。
Coding
Form | React Hook Form
React Hook Formを使用し、検証機能を取り入れています。送信ボタンをクリックすると確認メッセージが下に表示されます。今回は実際に送られることのないことをメッセージに入れています。
Cart | Recoil
ReactのライブラリRecoilを使用し、サイト全体で商品の情報を持てるようにし、クッキーでリロードしてもカート情報が保てるようにしています。RecoilのSelectorで合計金額を算出しています。