์ค๋ ๋ถํฐ header
, footer
, ๊ฐ๊ฐ์ ์ํ ์ปดํฌ๋๋, ๋ชจ๋ฌ์ฐฝ ์ ๋์ ์์
๋ง ์งํํ๋ค.
header
, footer
๋ ์ค๋ ๊ฑธ๋ฆฌ์ง ์์๋ค. ๊ฐ๊ฐ์ ์ํ ์ปดํฌ๋ํธ ์์
ํ๋๊ฒ ์ค๋ ๊ฑธ๋ฆด ๊ฒ ๊ฐ๋ค.
position:sticky
์ฃผ๊ธฐhover
์ ๋ฉ๋ด ๋์ค๋๋ก ์์
ํ๊ธฐLink
์์
ํด ์ฃผ๊ธฐheader์ ๊ฒฝ์ฐ ๋ค๋ฅธ ์์
์ ๋ค์ ๊ฐ๋จํ์ง๋ง
ํ๋ฒ๊ฑฐ ๋ฉ๋ด ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ ํ ๊ฒ์ธ์ง์ ์๊ฐ์ด ๊ฑธ๋ ธ๋ ๊ฑฐ ๊ฐ๋ค.
ํ๋ฒ๊ฑฐ ๋ฉ๋ด๋ฅผ hoverํ๋ ค๊ณ ํ๊ณ ์ด๋ฐ ๊ตฌ์ฑ์ ๊ฐ๊ฐ ๋ฐ๋ก ์์ ํด ์ฃผ์๋ค.
return(
<BurgerBtn>
<AiOutlineMenu />
</BurgerBtn>
<nav>
<ul>
<li>
<span>OOO๋, ์๋
ํ์ธ์!</span>
</li>
<li>
<Link to="/pages/Products"><AiOutlineGift className="icon" />์ํ๋ฆฌ์คํธ ํ์ด์ง</Link>
</li>
<li>
<Link to="/pages/Bookmark"><AiOutlineStar className="icon" />๋ถ๋งํฌ ํ์ด์ง</Link>
</li>
</ul>
</nav>
)
๊ทผ๋ฐ ๊ณฐ๊ณฐํ ์๊ฐํด ๋ณด๋ hover๋ฅผ ์ฃผ๋ ค๋ฉด ๊ฐ์ด ๋ฌถ์ฌ ์์ด์ผ ํ๋ค.
์ด๋ ๊ฒ ๋ฌถ์ด ์ฃผ๊ณ hover๋ฅผ ๋ฃ์ด์ฃผ๋ ์ ํ์ ๋๋ค.
๋๋ฒ์งธ๋ก ๋งํ๋๊ฒ
ํด๋น ์์ญ์ ๋ฒํผ์ด ์๋๊ธฐ ๋๋ฌธ์ ๋ง์ฐ์ค hover์ ์ปค์๊ฐ ํฌ์ธํฐ๋ก ๋์ค๋ฉด ์ ๋์๋ค.
ํ์ง๋ง <BurgerBtn>
๋ผ๋ ๋ฒํผ ์ปดํฌ๋ํธ์ ๊ฐ์ด ๋ฃ์ด์ฃผ๋ ์ ๋ถ
์ปค์๊ฐ ํฌ์ธํฐ๋ก ๋ณ๊ฒฝ ๋์ด์์๋ค. ์ด๊ฑด ๋คํํ ์ฝ๋์คํ
์ด์ธ ๋ฉ๋ด์ ๋์ผํ๊ฒ ๊ฐ์ ธ์จ ๊ฑฐ ๊ฐ์ ํด๋น ์คํ์ผ์ ๋ถ์ํด ์์ ํด ์ฃผ์๋ค.
<BurgerBtn>
๋ผ๋ ๋ฒํผ ์ปดํฌ๋ํธ์๋ cursor:pointer
๋ฅผ ์ฃผ๊ณ
<nav>
์ธ ๋ฉ๋ด ์์ญ์ cursor:auto
๋ก ๋ณ๊ฒฝํด ํด๊ฒฐํด ์ฃผ์๋ค!
๊ทธ๋ ๊ฒ ์์ฑ๋ header
footer์ ๊ฒฝ์ฐ๋ ๊ฐ๋จํด์ ๊ธ๋ฐฉ ๋๋ฌ๋ค.
๋์ ๊ฐ์ธ์ ๋ณด ์ฒ๋ฆฌ๋ฐฉ์นจ, ์ด์ฉ ์ฝ๊ด์ ๊ฒฝ์ฐ ํผ๊ทธ๋ง๋ ์๊ตฌ์ฌํญ์ ์ ํ ์์ง๋ ์์ง๋ง ๊ฑฐ์ ๋ฉ๋ด๋ก ์๊ณ ์์ด
p, div, span ํ๊ทธ๊ฐ ์๋ a
ํ๊ทธ๋ก ์์
ํด ์ฃผ์๋ค.
header, footer๋ ํญ์ ๋ฐ๋ผ ๋ค๋๋ ์์ญ์ด๋ค.
์ด์ ์ค๊ฐ์ ๋ค์ด๊ฐ ์ปจํ
์ธ ๋ฅผ ์์
ํด ์ฃผ์๋ค.
์๊ตฌ์ฌํญ์
์ฌ์ค main list๋ ๊ทธ๋ ๊ณ ์ํ๋ฆฌ์คํธ, ๋ถ๋งํฌ๋ฆฌ์คํธ๋
์ํ 4๊ฐ์ ํ์
๋ง ์ ์์
ํด ์ฃผ๋ฉด ๋๋จธ์ง๋ ๋ณด์ฌ์ฃผ๊ธฐ๋ง ํ๋๊ฑฐ๋ผ ์ค๋๊ฑธ๋ฆฌ์ง ์์ ๋ฏ ์ถ๋ค.
๋ํ main list์ ๋ฆฌ์คํธ๋ฅผ ๋ณด์ฌ์ค๋ ค๋ฉด ๊ฒฐ๊ตญ ์ํ 4๊ฐ๋ฅผ ์์ ํด ์ฃผ์ด์ผํ๋ค.
์๋ง ์ด๋ถ๋ถ์์ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ์ง ์์๊น ์ถ๋ค.
์ฐ์ ๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ๊ฐ๊ฐ์ ํ์
์ ๋ง๋ค์ด ์ฃผ๊ณ
<CardItem>
์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด 4๊ฐ์ ์ํ์ ๊ด๋ฆฌํ๊ณ
map
๋ฉ์๋๋ฅผ ์ฌ์ฉํด ํ๋์ฉ ๋ณด์ด๋๋ก ํด์ฃผ์๋ค.
์ฌ๊ธฐ ๊น์ง๋ ์์ํ๋ ๊ฑฐ ๊ฐ๋ค...
๊ฐ type๋ง๋ค ์ด๋ฏธ์ง, ์ด๋ฆ ๋ฑ์ ๋ณด์ฌ์ค๋ค.
๋๋ฏธ ๋ฐ์ดํฐ์ image_url๊ฐ ์์ด์ "์ ์ด๊ฒ ์ด๋ฏธ์ง ์ฃผ์๊ตฌ๋"ํ๊ณ ์ฐ๊ฒฐ์ ํ๋๋ type์ด Brand์ธ ๊ฒฝ์ฐ๋ ์๋ฐ์ด ๋ด๋ค.
์๊ณ ๋ณด๋ Brand๋ brand_image_url๋ผ๋ ๋ฐ์ดํฐ๊ฐ ๋ฐ๋ก ์กด์ฌํ๋ค. ์ด๋ถ๋ถ์ ํ์ด๋ถ์ ๋์์ผ๋ก ํํธ๋ฅผ ์ป์ด ํด๊ฒฐํ๋ค.
<img
src={dummyData.type === "Brand" ? dummyData.brand_image_url : dummyData.image_url}
alt={dummyData.type === "Brand" ? dummyData.brand_name : dummyData.title}
/>
์กฐ๊ฑด๋ฌธ dummyData.type === "Brand"
์ผ๋ก ์ฃผ์ด
type
์ด "Brand"
๊ฐ ์๋๊ฒฝ์ฐ์ ๊ทธ๋ฐ ๊ฒฝ์ฐ๋ก ๋๋์ด ์ฃผ์๋ค.
Product, Category, Exhibition, Brand ์ด 4๊ฐ์ง ํ์
์ด ์๋ค.
Product, Brand์ ๊ฐ๊ฐ ํ ์ธ์จ, ๊ด์ฌ๊ณ ๊ฐ์๊ฐ ๋ค์ด๊ฐ๋๋ฐ
Category, Exhibition ๋ ๊ฐ๋ ํด๋น ๋ด์ฉ์ด ๋
ธ์ถ๋์ง ์๋๋ค.
if๋ฌธ์ผ๋ก ํ ๊น ํ์ง๋ง ์๊ฐ๋๋ก ๋์ง ์์ ๊ฐ๊ฐ ๋ฐ๋ก ์ผํญ ์ฐ์ฐ์๋ฅผ ์ค์ ์์ ํ๋ค.
<div className="right-area">
{/* Category, Exhibition */}
{!dummyData.discountPercentage && null}
{/* Brand */}
{dummyData.type !== "Brand" || <strong>๊ด์ฌ๊ณ ๊ฐ์</strong>}
{/* Product*/}
{dummyData.type !== "Product" ||
<strong className="product">
{`${dummyData.discountPercentage}%`}</strong>}
<span>{!dummyData.price ? priceComma(dummyData.follower) : priceComma(dummyData.price)}</span>
</div>
์ผํญ์ฐ์ฐ์๋ if๋ฌธ๊ณผ ๋ค๋ฅด๊ฒ ๊ฒฐ๊ณผ๊ฐ ๊ฐ์ด ๋ ์ ์๋ ์ ์ ์ด์ฉํ๋ค.
const [isModal, setIsModal] = useState(false)
const showModal = () => {
setIsModal(!isModal)
}
.
.
.
<div className="img-box" onClick={showModal}>
<img
src={dummyData.type === "Brand" ? dummyData.brand_image_url : dummyData.image_url}
alt={dummyData.type === "Brand" ? dummyData.brand_name : dummyData.title}/>
<BookMark />
</div>
๋ชจ๋ฌ์ฐฝ์ useState() ์ฌ์ฉํด ์กฐ๊ฑด๋ฌธ์ผ๋ก ์ฒ๋ฆฌํด ์ฃผ์๋ค.
๋ชจ๋ฌ ์ฐฝ์ ๋ค์ ๊ฐ๋จํ๋๊ฑฐ ๊ฐ๋ค.
์์ง ์ ๋ถ ๊ตฌํํ๊ฑด ์๋๋ผ ํ๋จ ์ข์ธก์ด๋ ๋ถ๋งํฌ ๋ฒํผ ์ด ๋จ์ ์๋ค.
.
.
.
๊ทธ๋ ๊ฒ ์์ ๋ (๊ณ์ ์์
์ค)
ํ์ด ๋ถ๊ณผ ๊ฐ์ด ๊ทธ๋์ ํ ์์ ๋ฌผ์ git์ PRํด ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ์งํํ๋ค.
์๋ก ํ๋ก์ ํธ๋ ์ฒ์ ๋ถํฐ ๋๊น์ง ์ค์ค๋ก ์งํ ํ๋ ๊ฑฐ๋ผ ์ ๋ต์ ์๋๊ฑฐ ๊ฐ๋ค.
์ด๋ฒ ๊ธฐํ๋ก git ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๊ณผ branch๋ฅผ ์์ฑํด ๋ฐ๋ก main์ pushํ์ง ์๊ณ
prํ ํ์ ๋ ๋ main์ผ๋ก mergeํด ์ฃผ๋ ์ฐ์ตํ ์ ์๋ ๊ธฐํ์๋ค.
๋ํ ์ปดํฌ๋ํธ๋ฅผ ์ด๋ป๊ฒ ์ชผ๊ฐ์ผํ ์ง ๊ตฌ์กฐ๋ ์ด๋ป๊ฒ ๊ตฌ์ํด์ผํ์ง๋ ๊ณ ๋ฏผํ ์ ์๋์ง ์ ์ ์๋ ๋ป ๊น์ ์๊ฐ์ด ๋ ๊ฒ ๊ฐ๋ค.