CASE STUDY / 銀行Webサービス
IBK企業銀行 Paygos
IBK企業銀行Paygosで、Spring Boot REST APIと連携するReactフロントエンドを開発。金融Webサービスのユーザー・管理者画面、認証後の導線、外部OAuth接続UIを担当しました。
金融Webサービスのフロントエンド開発
한국디지털수출나라に所属し、IBK企業銀行（Industrial Bank of Korea）のPaygos WebサービスでReactフロントエンド開発を担当しました。ユーザー向けサービスと管理者向け画面を実装しています。
担当範囲はFrontend Development
React・JavaScriptを用いたUI、ルーティング、共通コンポーネント、REST API連携を担当しました。認証状態やオンボーディングを考慮した画面の導線、外部サービスの接続UIも実装しています。
バックエンドはJava・Spring BootのREST APIと連携する環境です。サーバー実装やデータベースの開発を担当したという意味ではありません。
USER WEB
ユーザーが利用するサービス画面
Dashboard / My Service
ダッシュボードとMy Serviceのフロントエンドを実装しました。
会員登録・利用規約
会員登録と規約画面を構築し、サービス利用までの画面フローを扱いました。
情報案内・サービス接続
掲示板、FAQ、利用案内、バナー、外部サービス接続UIを実装しました。
ADMIN WEB
運営者向けの管理UI
会員関連UI
管理者向けの会員関連画面を実装しました。
掲示板・FAQ・利用案内
情報更新のための管理画面を構築し、REST APIと連携しました。
バナー・コンテンツ管理
バナーやコンテンツを管理するフロントエンドUIを実装しました。
認証状態とオンボーディングを画面につなぐ
認証フローとフロントエンドを連携し、ユーザーの認証状態を考慮した画面制御を実装しました。
認証後の導線では、オンボーディングの分岐を扱い、サービス利用につながるフロントエンドの流れを構成しました。
EXTERNAL OAUTH INTEGRATION
外部サービスとの接続をUIで支える
PayPal
OAuth接続UIとフロントエンド側のサービス連携を担当しました。
Shopee
OAuthを利用するサービス接続画面とフロントエンド連携を実装しました。
Amazon
外部サービス接続のためのOAuth UIとフロントエンド連携を担当しました。
REUSABLE UI
複数画面で使う共通コンポーネント
Pagination
一覧画面で使うページ切り替えUIを共通コンポーネントとして実装しました。
Modal
モーダルUIを共通化し、各画面で再利用できる形にしました。
DatePicker
日付選択UIを共通コンポーネントとして実装しました。
TECH CONTEXT
React UIとREST APIをつなぐ技術
- React / JavaScript
- React・JavaScriptによるUser / Adminフロントエンド
- React Router v6 / Tailwind CSS 4.1.10
- React Router v6による画面遷移とTailwind CSSによるUI実装
- Axios / REST API
- Axiosを用いたSpring Boot REST APIとのフロントエンド連携
- Git
- Gitによるバージョン管理
画面単体ではなく、利用の流れを実装する
金融WebサービスでUser / Admin双方のReactフロントエンドを開発し、REST API・認証・外部OAuth接続を画面の流れに組み込む経験を得ました。
複数画面で使う共通UIを実装し、APIとの接点とユーザーの状態を踏まえて画面を構成する重要性を学びました。