2022.01.03 - 2022.01.08
네이버 주문하기 클론코딩
| 장소 : 양양 장가네칼국수 / 강원 양양군 양양읍 남문5길 11-10 1층 장가네칼국수
내가 제일 좋아하는 식당으로 예제로 만들었다. 해당 html은 캡처 이미지로만 보는게 한계가 있는 것 같다고 느꼈다. 그래서 테스트 화면의 화면녹화를 진행하고 글 맨 하단에 넣어놨다. +++ 이번 게시글엔 작성한 코드를 같이 올렸다. (아주 조금)
클론코딩 : 인스타그램, 카카오톡, 네이버 등 실제 구현된 서비스를 따라 만들면서 배우는 공부 방식이다. 실제 웹
내가 index.html을 실행하면 가장 먼저 보이는 화면이다. 이에 대한 코드는 밑에서 확인할 수 있다.
<div class="dimmed-layer hidden"></div>
<div class="order-type-popup hidden">
<p class="title">어디서 드시나요?</p>
<div class="type-list">
<a href="#" class="type-item" onClick="popupClose()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<path fill="currentColor"
d="M232,359.6V264a8,8,0,0,0-8-8c-48.86,0-55.71,83.833-55.978,87.4a8,8,0,0,0,4.4,7.754L184,356.944v2.66l-6.2,62.008A24,24,0,0,0,201.68,448h12.64A24,24,0,0,0,238.2,421.612ZM184.549,339.33a175.605,175.605,0,0,1,7.365-33.019c6.148-18.091,14.226-29.1,24.086-32.853V352H200a8,8,0,0,0-4.422-7.155Zm35.7,90.038A7.91,7.91,0,0,1,214.32,432H201.68a8,8,0,0,1-7.961-8.8L199.24,368h17.52l5.521,55.2A7.908,7.908,0,0,1,220.252,429.368Z" />
<path fill="currentColor"
d="M488,8H424a8,8,0,0,0-8,8v8H248.982a43.35,43.35,0,0,0-20.7,5.278L149.959,72H56c-13.458,0-24,14.056-24,32,0,16.748,9.185,30.1,21.351,31.811l-36.068,122.1c-.032.109-.062.219-.09.328a40.073,40.073,0,0,0-1.193,9.7V496a8,8,0,0,0,8,8H384a8,8,0,0,0,8-8V268.608a39.933,39.933,0,0,0-1.626-11.287L357.042,143.993A43.281,43.281,0,0,0,399.881,104H416v16a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V16A8,8,0,0,0,488,8ZM48,104c0-9.767,4.738-16,8-16H284.687l-32,32H56C52.738,120,48,113.767,48,104ZM297.193,258.24a40.073,40.073,0,0,0-1.193,9.7V488H32V267.939a24.077,24.077,0,0,1,.679-5.668L69.978,136H238.213a35.245,35.245,0,0,0,51.9,45.826L328.6,151.889,297.283,257.912C297.251,258.021,297.221,258.131,297.193,258.24ZM344,467.314,364.686,488H323.314Zm31.025-205.475a23.947,23.947,0,0,1,.975,6.769V476.686l-24-24V280a8,8,0,0,0-16,0V452.687l-24,24V267.939a24.077,24.077,0,0,1,.679-5.668l31.3-105.976ZM416,88H396.773A12.788,12.788,0,0,0,384,100.773,27.258,27.258,0,0,1,356.773,128H337.107a11.282,11.282,0,0,0-6.892,2.365L280.288,169.2a19.226,19.226,0,0,1-25.4-28.771l54.768-54.769A8,8,0,0,0,304,72H183.374l52.571-28.676A27.3,27.3,0,0,1,248.982,40H416Zm64,24H432V24h48Z" />
<path fill="currentColor"
d="M160,264a8,8,0,0,0-16,0v24H128V264a8,8,0,0,0-16,0v24H96V264a8,8,0,0,0-16,0v32h.015a7.974,7.974,0,0,0,.83,3.578l15.019,30.039L89.245,422.29A24,24,0,0,0,113.184,448h13.632a24,24,0,0,0,23.939-25.71l-6.619-92.673,15.019-30.039a7.974,7.974,0,0,0,.83-3.578H160Zm-20.944,40-8,16H108.944l-8-16Zm-6.384,125.451A7.919,7.919,0,0,1,126.816,432H113.184a8,8,0,0,1-7.98-8.569L111.449,336h17.1l6.245,87.431A7.919,7.919,0,0,1,132.672,429.451Z" />
</svg>
<p class="desc">포장해서 가져갈게요</p>
<span class="btn-selection">선택</span>
</a>
<a href="#" class="type-item" onClick="popupClose()">
<svg class="icon" height="637pt" viewBox="-20 -46 637.33396 637" width="637pt"
xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="m587.648438 98.503906c-6.167969-.769531-11.789063 3.605469-12.558594 9.765625l-23.769532 190.148438h-87.714843l-11.589844-65.710938c-.945313-5.375-5.617187-9.296875-11.078125-9.296875h-283.75c-5.449219 0-10.117188 3.90625-11.074219 9.273438l-11.738281 65.726562h-88.191406l-23.769532-190.140625c-.769531-6.164062-6.394531-10.535156-12.558593-9.765625-6.164063.769532-10.539063 6.394532-9.7656252 12.558594l25.0000002 200c.703125 5.628906 5.488281 9.855469 11.160156 9.855469h20.054688l-23.652344 141.898437c-1.019532 6.128906 3.121094 11.921875 9.246094 12.949219 6.132812 1.019531 11.929687-3.121094 12.949218-9.25l24.269532-145.597656h51.25l-34.253907 191.769531c-.765625 4.269531.996094 8.601562 4.515625 11.125l.265625.191406c33.007813 23.65625 77.019531 25.097656 111.503907 3.644532 45.183593 21.308593 97.554687 21.207031 142.660156-.28125 20.160156 10.535156 42.503906 16.226562 65.25 16.621093.800781.015625 1.597656.019531 2.398437.019531 24.015625-.015624 47.660157-5.9375 68.847657-17.25l4.054687-2.167968c4.289063-2.296875 6.617187-7.085938 5.773437-11.875l-33.8125-191.796875h50.820313l24.265625 145.597656c.621094 4 3.34375 7.359375 7.128906 8.796875 3.789063 1.429688 8.050782.722656 11.167969-1.867188 3.113281-2.582031 4.605469-6.640624 3.894531-10.628906l-23.652344-141.898437h20.054688c5.675781 0 10.460938-4.226563 11.164062-9.855469l25-200c.769532-6.164062-3.605468-11.785156-9.765624-12.558594zm-221.085938 409.46875v-144.554687c0-6.210938-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.039062-11.25 11.25v144.238281c-38.445312 17.84375-82.800781 17.84375-121.25 0v-100.488281c0-6.210938-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.039062-11.25 11.25v101.488281c-24.6875 15.257812-55.804688 15.523438-80.746094.6875l47.039063-263.425781h264.894531l46.3125 262.625c-35.039062 17.617187-76.390625 17.40625-111.25-.570313zm0 0" />
<path fill="currentColor"
d="m217.5 208.914062h150c6.214844 0 11.25-5.035156 11.25-11.25-.058594-43.257812-32.113281-79.796874-75-85.488281v-10.507812c0-6.214844-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.035156-11.25 11.25v10.507812c-42.878906 5.691407-74.941406 42.230469-75 85.488281 0 6.214844 5.039062 11.25 11.25 11.25zm75-75c30.855469.046876 57.265625 22.140626 62.75 52.5h-125.5c5.488281-30.359374 31.894531-52.453124 62.75-52.5zm0 0" />
<path fill="currentColor"
d="m330 87.167969c6.214844 0 11.25-5.039063 11.25-11.25v-28.75c0-6.210938-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.039062-11.25 11.25v28.75c0 6.210937 5.039062 11.25 11.25 11.25zm0 0" />
<path fill="currentColor"
d="m278.75 65.917969c6.214844 0 11.25-5.039063 11.25-11.25v-45c0-6.210938-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.039062-11.25 11.25v45c0 6.210937 5.039062 11.25 11.25 11.25zm0 0" />
<path fill="currentColor"
d="m231.25 95.917969c6.214844 0 11.25-5.039063 11.25-11.25v-23.75c0-6.210938-5.035156-11.25-11.25-11.25-6.210938 0-11.25 5.039062-11.25 11.25v23.75c0 6.210937 5.039062 11.25 11.25 11.25zm0 0" />
</svg>
<p class="desc">매장에서 먹고 갈게요</p>
<span class="btn-selection">선택</span>
</a>
</div>
</div>
위 화면은 '포장해서 가져갈게요'를 선택했을 때 볼 수 있는 화면이다.
포장 | 매장 | 배달 섹션이 나누어져 있고, 최근 주문 내역을 확인할 수 있는 박스, 아래로 스크롤을 내리면 대표 메뉴, 사이드 메뉴, 주류 등의 섹션이 구현되는 것을 볼 수 있다. 그리고 장바구니에 담은 상품들과 주문하기 버튼이 활성화된다. 밑에서는 헤더 영역의 코드를 확인할 수 있다.
<header class="header-area">
<div class="place-header" role="banner">
<h1 class="title">
<a href="#" class="link-back">
<img src="../assets/images/ico-back.svg" alt="뒤로가기">
</a>
장가네칼국수
</h1>
<a href="#" class="my-orders">주문내역</a>
</div>
<div class="place-tab scroll-x" role="tablist">
<div class="tab-inner">
<a href="#" class="tab" role="tab"><span class="txt">홈</span></a>
<a href="#" class="tab is-active" role="tab"><span class="txt">메뉴</span></a>
<a href="#" class="tab" role="tab"><span class="txt">리뷰</span></a>
<a href="#" class="tab" role="tab"><span class="txt">사진</span></a>
<a href="#" class="tab" role="tab"><span class="txt">지도</span></a>
<a href="#" class="tab" role="tab"><span class="txt">주변</span></a>
</div>
</div>
</header>
이건 주문서 화면이다. '주문하기' 버튼을 누르면 주문서로 넘어와지면서, 장바구니에 담았던 음식들을 확인할 수 있다. 이 화면에서 음식의 개수 조절, 삭제가 가능하다. 스크롤을 내리면 주문하는 가게의 지도, 개인정보 수집, 제공 등 유의사항을 볼 수 있다. 맨 위로 쉽게 올라갈 수 있는 TOP 버튼도 구현했다. 아래에서 주문서 상단의 코드를 볼 수 있다.
<div class="container order">
<div class="order-form-area">
<div class="page-title-area">
<p class="title">주문서</p>
<button class="btn-close">
<img src="../assets/images/ico-close-white.svg" alt="닫기" class="ico-close">
</button>
</div>
<div class="order-content">
<div class="common-inner">
<div class="order-content-top">
<p class="title">포장할게요
<svg width="18" height="18" viewBox="0 0 12 12" class="ico-takeout">
<path fill="currentColor" fill-rule="evenodd"
d="M3.558 3.997a21.21 21.21 0 00-.014.682 1.194 1.194 0 101.495 1.155c0-.42-.223-.811-.582-1.025.005-.372.012-.645.018-.77.01-.186.022-.37.037-.548h2.976c.016.175.028.358.038.546.006.125.013.398.018.772a1.194 1.194 0 00.611 2.218 1.194 1.194 0 00.304-2.348c-.003-.218-.007-.49-.01-.573-.011-.228-.024-.43-.039-.615h2.102c.346 0 .629.275.629.612a.628.628 0 01-.01.102l-.782 6.443a.623.623 0 01-.62.512H2.3a.622.622 0 01-.619-.51L.869 4.203a.595.595 0 01.104-.449.627.627 0 01.516-.263h2.102c-.013.153-.023.32-.033.506zm1.058-1.345C4.774 1.708 5.057.844 6 .844c.942 0 1.226.864 1.384 1.808h-2.77zm5.896 0H8.314C8.03.768 7.357 0 6.001 0 4.64 0 3.969.768 3.686 2.652H1.489c-.081 0-.164.006-.244.02-.4.065-.746.278-.978.602-.223.313-.31.691-.246 1.066l.811 6.447C.952 11.49 1.57 12 2.3 12h7.43c.73 0 1.346-.509 1.467-1.214l.782-6.443c.015-.078.021-.159.021-.24 0-.8-.667-1.45-1.488-1.45z">
</path>
</svg>
</p>
<p class="desc">가지고 가실 수 있게 준비됩니다.</p>
<p class="count">담은 메뉴: 3개</p>
</div>
아무래도 네이버 주문하기 서비스 자체가 모바일에서만 가능한 서비스이기 때문에 detail.html 화면에 들어오면 PC에서 볼 때 사진의 화질이 깨지는게 거슬려서, 크롬의 디바이스 툴바를 이용했다. 밑에서는 주문타입 영역에 대한 코드를 확인할 수 있다.
<div class="order-type-area">
<div class="type-select">
<div class="title">
<svg viewBox="0 0 18 18" class="ico-n-logo">
<path fill-rule="evenodd" fill="currentColor"
d="M18 0v18H0V0h18zM7.255 4.582H4.473v9.054h2.915V8.79l3.357 4.846h2.782V4.582h-2.915v4.846L7.255 4.582z">
</path>
</svg>
주문
</div>
<div class="tab-switch-box" role="tablist">
<a href="#" class="tab-switch is-active" role="tab">🛍 포장</a>
<a href="#" class="tab-switch" role="tab">🍽 매장</a>
</div>
</div>
<div class="type-amount">
<div class="title">수량</div>
<div class="amount-select">
<button class="btn-minus" aira-label="빼기" disabled></button>
<span class="amount disabled">1</span>
<button class="btn-plus" aria-label="더하기"></button>
</div>
</div>
<button class="btn-order" onClick="popupOpen()">1개 담기 7,000원</button>
+) VSC (비주얼 스튜디오 코드) 기본 세팅
1. Node.js를 설치한다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
해당 링크로 접속하고 Node.js를 다운 받는다. (본인은 최신 버전이 아닌 안정적, 신뢰도 높음 버전을 다운 받았다.)
다운 받은 후 VSC에 접속해서 터미널을 열고 아래 명령어(node -v)를 입력하면 다운 받은 Node.js 버전을 확인할 수 있다.
node -v
2. Sass 설치 후 버전 확인
| Sass는 스타일시트 언어다. Sass는 .sass 파일을 모니터링하다가 파일이 저장될 때마다 .css 파일로 변환, 출력할 수 있다.
Node.js를 설치해야 npm을 사용할 수 있다.
npm install sass -g <!--sass 설치 -->
npm sass -version // <!-- sass 버전 확인 -->
3. 확장(마켓 플레이스)에서 Live Server와 Live Sass Compiler를 설치한다.
'개발.ZIP > Web.ZIP' 카테고리의 다른 글
| [#3] 넷플릭스 클론코딩.ZIP | Banner & Nav 완성하기 | With React.js (0) | 2022.01.16 |
|---|---|
| [#2] 넷플릭스 클론코딩.ZIP | 넷플릭스 오리지널, 실시간 트렌드 | With React.js (0) | 2022.01.15 |
| [#1] 넷플릭스 클론코딩.ZIP | API KEY 발급 | With React.js (0) | 2022.01.15 |
| [VS CODE] HTML로 간단한 MBTI 테스트 만들기 +++ 현재진행형 (0) | 2021.12.30 |
| 기말 대체과제로 만든 웹페이지 HTML과 CSS.Zip (0) | 2021.12.13 |