Project PERION

当プロジェクトは「PERION」といったメンズファッション通販サイトです。
通販サイトを選定した理由としては、CRUD, session, ファイル処理、マークアップなどITスクールで学習したものを活かすことができ、
「基本に充実する」といった共通の目的に一致したためです。
　PERIONは韓国のMMORPGに登場する戦士の村で、「戦士のように、強い気持ちで生きていきたい」といった気持ちを込め、名付けました。

使用方法

管理者ページの場合、/admins/loginをURLを追加すれば、移動することが可能ですが、 データーの保存のため、ID,PWは公開しております。 気になる方はぜひご連絡ください。

※カードの場合、選択商品除去の機能が未完成です。 ※韓国語を日本語で翻訳した結果、一部のレイアウトが不自然になっている点、ご了承くださいませ。

全体目次

• プロジェクト概要
• プロジェクト説明(フロントエンド・バックエンド)
• リファクタリング
• 参考資料

プロジェクト概要

• プロジェクト名: Perion
• プロジェクト期間: 2023.12.05-2024.01.08 （約1か月）
• プロジェクト技術：

  • Backend
    

  • Frontend
    

  • Environment
    

※プロジェクトの技術選定理由はこちらを

• チームメンバー:
  • クォン・ヒョンモ（PM/BE/FE）@HyonHyonKOR
    
    UX/UIデザイン総括 / クライアントページマークアップ・FE / サーバーアーキテクチャ / 会員機能全般 / バリデーションチェック / 認証（Spring Interceptor）
    
    
  • キム・チャンヒョク(BE/FE) @swaeluu
    
    UX/UIデザイン / 管理者ページマークアップ・FE / Q&A機能　/　カスタマーレビュー機能　/　ページング処理
    
    
  • パク・ヨンム(BE/FE)　@VoiceofSiren
    
    AJAX / 商品関連機能　/　在庫管理機能　/　会員カート機能　/　会員注文機能　/　DBA
    
    
  • イ・ボムソン(BE/FE) @Titan153　
    
    お知らせ機能　/　ID・PW再設定機能　/ マークアップ補助　/ 外部API　/　参考資料整理　
    
    
  • チャン・ミョンソン(BE/FE)　@Ainchel　
    
    AJAX / 在庫管理機能　/　会員カート機能　/　非会員カート機能　/　非会員注文機能　
    
    

プロジェクト説明

フロントエンド

• Responsive WEB

Desktop	tablet	mobile

最初のページは、viewportのサイズによって、レイアウトが変更されるレスポンシブWEBを具象しました。
今後、indexページのみならず、他のページもmedia queryを活用して、レスポンシブWEBにしたいと思います。

• UX/UI

Navigation	Side bar	login(未入力)	login(入力後)

1. Navigationからカテゴリーをすぐ選択できるようにし、ページDEPTHを減らすことでCPRの向上を目指しました。
   
2. 縦が長いページであるため、ユーザーが欲しい情報をすぐ確認できるよう、サイドバーを具象しました。
   
3. より直感的にログインができるよう、IDとパスワードの最低文字数を超えれば、ログインボターンのOpacityが１になるように調節しました。
   
   

※UX/UIに関する詳しい説明はこちらを

• AJAX

　

商品詳細	カート

JavaScriptのfetch、JSON、SpringBootの＠ResponseBodyアノテーションなどを活用し、カートを具象しました。
カートページは翻訳機を使う場合、レイアウトが崩れたため、そのまま展示しました。ご了承いただければと思います。

• Rendering

1. Indexの5000x3000、4mb以上のJPEG画像を約1900x1000までリサイズし、webpに変換することでレンダリング速度を改善しました。
   
2. 通販サイトの場合、SEO対策が重要であるため、Metaタグを活用しました。
   
3. 一部のscriptにdeferを適用し、htmlのparsingを改善する努力をしました。
   
4. 一部のjsにEvent Delegation通して、不要なEvent Handlerを減らす努力をしました。
   

バックエンド

• 商品関連

商品登録（管理者）	商品詳細・修正・削除（管理者）	商品リスト一覧（ユーザー）	商品詳細（ユーザー）

管理者ページから商品・写真・在庫などをDB、resourceフォルダーに登録し、クライアントページからそのデーターを読む形です。

• 注文

会員注文ページ	会員注文ページ	会員注文ページ	会員注文完了ページ

• 管理者ページ

管理者ページ	会員リスト	Q&A

　売上はペンディング、非会員注文一覧はまだ、バグの問題で紹介することはできませんでした。まだ原因が分からないため、後ほど解決したいと思います。

• 認証(Spring Interceptor)

User1の会員情報ページ	権限外の要請	ログ

未認証ユーザーの要請は会員ログインページに、権限があい会員の要請は404エラーページをリターンして、認証を強化しました。
権限外の要請がある場合は、log4jを通して、WARNログを残すようにコードを作成しました。

解決できなかった点：一部のページではInterceptorが適用されない現象があるので、今後改善してみたいと思います。

リファクタリング

• AWSへのdeployを完了
• 会員登録機能にAJAX,debouce機能を追加し、フロントエンドからもバリデーションチェックを追加
• ページ処理のバグを改善する予定

参考資料

• 商品写真360枚: https://www.coor.kr/
• インデックスページのイメージ: https://unsplash.com/ko
• ロゴ: https://www.figma.com/
• Kakao Map API, Kakao アドレスAPI : https://developers.kakao.com/
• Sweetalert2: https://sweetalert2.github.io/
• lodash: https://lodash.com/docs/4.17.15#debounce
• SVGおよびフォント: https://fonts.google.com/