[KaKaoVillains]Category Page制作プロセス

Category_Character/Subject

UIが似ているので、一緒に仕事をしているとき、機能が実現しているときに条件付きのレンダリング部分が多すぎるので、サブコンポーネントのみを共有して仕事をします.
->最終的に再結合して作成しますが、エラーのためsubjectカテゴリは発光しません.
未発光のコードをジャンプ

ショッピングモールで分類サイトを見ると、こんな形になっているので、同じ順番でAPIを受信することにしました.

Category_Character category/character?categorySeq=id&sort=createDatetime,desc

Category_Subject category/subject?categorySeq=id&subcategorySeq=id&characterSeq=id&sort=createDatetime,desc

Character

Option

キャラクターを選択すると、上端イメージ、下端カタログが変更されます.
->JSXでbackground-imageを変更する方法は?!
->異なるclassNameを指定し、scss効果を異なる方法で与えます.

Filter

フィルタを選択すると、モードウィンドウが表示されます.->自動販売機で代わりました.

ルータ機能とクエリーパラメータを使用して、/category/character?characterSeq=${categoryId}&sort=createDatetime,descソートデータを取得します.

新製品の順序/低価格の順序/高価の順序でソートできます.&sort=createDatetime,desc &sort=salePrice,desc &sort=salePrice,asc

Products

オプション/フィルタに従って商品をソートします.
->バックエンドを使用してデータをフィルタするAPIを要求します.

데이터형식
"result":{
	"product":[
		{
        	"product_id":1,
		"image_url": "url 1 of product 1",
		"name": "라이언텀블러",
		"price": 20000.00",
		"discount_rate":"0.0"
		}
		]
	}

ショッピングバスケットをクリックすると、アイコンの色が変わり、ショッピングバスケットに商品が表示されます.
->カートページがないため、後続作業は行われていません.

割引中の商品(割引率>0)割引率と割引価格がハイライトで、元の価格は中間線です.
->千単位でtoLocaleString()

をどのように表示するか

Subject

Option

SubCategory

でもう一度分類できます.

このカテゴリにboldとborder-bottom効果を追加します.

데이터 형식
"result":{
	"category_name":"리빙",
	"category_id": 1,
	"sub_categories":[
			{
			"sub_category_id: 1,
			"name":"컵/텀블러"
			},
			{
			"sub_category_id: 1,
			"name":"주방용품"
			}
			],
		"product":[
			{
			"product_id":1,
			"image_url": "url 1 of product 1",
			"name": "라이언텀블러",
			"price": 20000.00",
			"discount_rate":"0.0"
			}
			]
	}

Filter

アナログで歌う->選択ボックスで代用します.

Reference

カテゴリ

PR

Category PR