GreenMate

詳細内容

• チームでPL役割を担当し、プロジェクト構造および技術スタック設計、コードレビューを主導

  • プロジェクト全体の構造を設計し、React、Next.js、TypeScriptなどの技術スタックを選定しました。
  • コードレビューを主導し、チームメンバーと良いコーディングパターンを共有してコード品質向上を主導し、全体的な開発効率性を高めました。

• NextAuth.jsベースのソーシャルログインとJWTベースのメール/パスワードログインを実装

  •

  NextAuth.jsを使用してカカオ、ネイバーソーシャルログインを実装し、一般会員登録はJWT認証で一般ログインを実装して多様な認証方式をサポートする会員登録システムを開発しました。これにより安全で便利なユーザー認証フローを提供し、セッション管理とトークン検証ロジックを最適化しました。

• Zustandを活用したグローバルログイン状態管理でコンポーネント間の状態共有を最適化

  •

  ログイン状態を複数のコンポーネントで使用する必要がある状況でprops drilling問題を解決するためにZustandを導入しました。これによりすべてのコンポーネントでログイン情報に簡単にアクセスできるようになり、不要な再レンダリングを減らしてアプリケーションパフォーマンスを改善しました。

• React Hook Form + Zod組み合わせのMulti-Step Forms開発および状態管理連携

  •

  初期には単一ページですべての情報を入力する方式で開発しましたが、会員登録プロセスが長くなりユーザーの途中離脱リスクが高まり、全般的なUXが良くないと判断しました。

  これを改善するためにMulti-Step Form構造にリファクタリングし、ユーザーが一度に集中すべき入力項目を減らし、進行率を視覚的に確認できるように改善しました。

  各段階ではReact Hook Formでフォーム状態を効率的に管理し、Zodを活用したリアルタイム検証を適用しました。また、Zustandを通じて段階別入力データをグローバルに管理し、ページ間のデータ共有と離脱時の入力内容保存機能を実装しました。

• Middlewareを通じたページアクセス権限制御システム構築

  •

  Next.js Middlewareを活用してユーザー認証状態と権限に応じたページアクセス制御システムを構築しました。各ページで個別に権限を確認する代わりに中央集中式で管理してコードの一貫性を高め、開発効率性を向上させました。

• マイページ全般の開発（プロフィール照会・修正、パスワード変更、ブックマーク/注文履歴/マイプラント管理）

  •

  ユーザーマイページの全機能を開発しました。プロフィール情報照会・修正、パスワード変更、ブックマーク管理、注文履歴確認、ペットプラント作成/照会/修正/削除(CRUD)など必要なすべての機能を実装し、様々なデバイスで最適化されたユーザー体験を提供するためにレスポンシブデザインを適用しました。