全体目次

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

プロジェクト概要

• プロジェクト名: 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 / 在庫管理機能　/　会員カート機能　/　非会員カート機能　/　非会員注文機能　
    
    

プロジェクト説明

※プロジェクトの詳しい説明と過程につきましてはこちらより

ページの日本語はGoogle翻訳を使って臨時的に翻訳しております。

フロントエンド

• 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が１になるように調節しました。
     
     

• 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を追加し、フロントエンドからもバリデーションチェックを追加 - ページ処理のバグを改善する予定 ## 参考資料 - 商品写真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/ - SVGおよびフォント: https://fonts.google.com/