[0421] Modal

[GleamingStar]

구성 (디자인 피그마)

• 썸네일
• 상세정보
• 주문 개수 / 금액
• 버튼
• 카드 리스트 (나중에 구현할 것)

기능

• 썸네일 전환
• 주어진 데이터에 따른 렌더링
• 수량 편집

데이터 형태

{
	hash: "H8CD0",
	data: {
		top_image:
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/4e96f386d5a5c4459bc0ac6ffd0c1fce.jpg",
		thumb_images: [
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/4e96f386d5a5c4459bc0ac6ffd0c1fce.jpg",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/00327d0df92e29bad02e7387349bed53.jpg",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/781fea32c56eb102429902a2f62cbaf3.jpg",
		],
		product_description:
			"칼칼한 국물이 속 풀기에 딱 좋은 동태탕",
		point: "140원",
		delivery_info:
			"서울 경기 새벽배송 / 전국택배 (제주 및 도서산간 불가) [화 · 수 · 목 · 금 · 토] 수령 가능한 상품입니다.",
		delivery_fee:
			"2,500원 (40,000원 이상 구매 시 무료)",
		prices: ["14,000원"],
		detail_section: [
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/829c8a3fb87d98ef42ae449215d4c8b7.jpg",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/25900d6f62866f25c024105e10907f43.png",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/e52f3fbd48fbe9ff2ac99759cacd0042.png",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/edd7a54096d6df1b8bc8b318cea0191c.jpg",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/fb8e6e21faa8284021c1b1c7a1ae1281.jpg",
			"http://public.codesquad.kr/jk/storeapp/data/detail/HAA47/36a0566d2fb69a4bcea946727181836d.jpg",
		],
	},
};

추가구현필요

• Modal이 visible일 때 modal제외한 전체 filter:brightness(40%) 하기
• 현재 API가 미작동일때 그냥 modal을 안띄워주는데 오류가있다는 안내메세지창 띄워주기
• 추천메뉴? 가칭 WithYummy 컴포넌트 구현
  • 현재 정보가 없으므로 공지사항오면 그때 추가구현
• 현재 스크롤 정도에 따른 top값 동적 변화