chore: template 코드 및 이미지 assets 추가

woowapark · Apr 2, 2024 · 5a174e9 · 5a174e9
1 parent d92efec
commit 5a174e9
Show file tree

Hide file tree

Showing 11 changed files with 465 additions and 0 deletions.
diff --git a/templates/add-button.png b/templates/add-button.png
diff --git a/templates/category-asian.png b/templates/category-asian.png
diff --git a/templates/category-chinese.png b/templates/category-chinese.png
diff --git a/templates/category-etc.png b/templates/category-etc.png
diff --git a/templates/category-japanese.png b/templates/category-japanese.png
diff --git a/templates/category-korean.png b/templates/category-korean.png
diff --git a/templates/category-western.png b/templates/category-western.png
diff --git a/templates/favorite-icon-filled.png b/templates/favorite-icon-filled.png
diff --git a/templates/favorite-icon-lined.png b/templates/favorite-icon-lined.png
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="utf-8">
+  <title>점심 뭐 먹지</title>
+  <link rel="stylesheet" href="style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <!-- GNB -->
+  <header class="gnb">
+    <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
+    <button type="button" class="gnb__button" aria-label="음식점 추가">
+      <img src="./add-button.png" alt="음식점 추가">
+    </button>
+  </header>
+
+  <main>
+    <!-- 카테고리/정렬 필터 -->
+    <section class="restaurant-filter-container">
+      <select name="category" id="category-filter" class="restaurant-filter">
+        <option value="전체">전체</option>
+        <option value="한식">한식</option>
+        <option value="중식">중식</option>
+        <option value="일식">일식</option>
+        <option value="양식">양식</option>
+        <option value="아시안">아시안</option>
+        <option value="기타">기타</option>
+      </select>
+    </section>
+
+    <!-- 음식점 목록 -->
+    <section class="restaurant-list-container">
+      <ul class="restaurant-list">
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-korean.png" alt="한식" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">피양콩할마니</h3>
+            <p class="restaurant__description text-body">평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는
+              곳으로,
+              ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표
+              메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.</p>
+          </div>
+        </li>
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-chinese.png" alt="중식" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">친친</h3>
+            <p class="restaurant__description text-body">Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다</p>
+          </div>
+        </li>
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-japanese.png" alt="일식" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">잇쇼우</h3>
+            <p class="restaurant__description text-body">잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을
+              다하는 잇쇼우는
+              고객 한분 한분께 최선을 다하겠습니다</p>
+          </div>
+        </li>
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-western.png" alt="양식" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">이태리키친</h3>
+            <p class="restaurant__description text-body">늘 변화를 추구하는 이태리키친입니다.</p>
+          </div>
+        </li>
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-asian.png" alt="아시안" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">호아빈 삼성점</h3>
+            <p class="restaurant__description text-body">푸짐한 양에 국물이 일품인 쌀국수</p>
+          </div>
+        </li>
+
+        <li class="restaurant">
+          <div class="restaurant__category">
+            <img src="./category-etc.png" alt="기타" class="category-icon">
+          </div>
+          <div class="restaurant__info">
+            <h3 class="restaurant__name text-subtitle">도스타코스 선릉점</h3>
+            <p class="restaurant__description text-body">멕시칸 캐주얼 그릴</p>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <!-- 음식점 정보 모달 -->
+    <div class="modal modal--open">
+      <div class="modal-backdrop"></div>
+      <div class="modal-container">
+        <h2 class="modal-title text-title">음식점 이름</h2>
+        <div class="restaurant-info">
+          <p class="restaurant-info__description text-body">음식점 소개 문구</p>
+        </div>
+        <!-- 닫기 버튼 -->
+        <div class="button-container">
+          <button class="button button--primary text-caption">닫기</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 음식점 추가 모달 -->
+    <div class="modal modal--open">
+      <div class="modal-backdrop"></div>
+      <div class="modal-container">
+        <h2 class="modal-title text-title">새로운 음식점</h2>
+        <form>
+          <!-- 카테고리 -->
+          <div class="form-item form-item--required">
+            <label for="category text-caption">카테고리</label>
+            <select name="category" id="category" required>
+              <option value="">선택해 주세요</option>
+              <option value="한식">한식</option>
+              <option value="중식">중식</option>
+              <option value="일식">일식</option>
+              <option value="양식">양식</option>
+              <option value="아시안">아시안</option>
+              <option value="기타">기타</option>
+            </select>
+          </div>
+
+          <!-- 음식점 이름 -->
+          <div class="form-item form-item--required">
+            <label for="name text-caption">이름</label>
+            <input type="text" name="name" id="name" required>
+          </div>
+
+          <!-- 설명 -->
+          <div class="form-item">
+            <label for="description text-caption">설명</label>
+            <textarea name="description" id="description" cols="30" rows="5"></textarea>
+            <span class="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
+          </div>
+
+          <!-- 추가 버튼 -->
+          <div class="button-container">
+            <button class="button button--primary text-caption">추가하기</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</body>
+
+</html>