[1단계 미션] 정태웅 미션 제출합니다.

src/App.css

@@ -0,0 +1,62 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+html,
+body {
+  font-family: sans-serif;
+  font-size: 16px;
+}
+
+/* Colors *****************************************/
+:root {
+  --primary-color: #ec4a0a;
+  --lighten-color: #f6a88a;
+  --grey-100: #ffffff;
+  --grey-200: #d0d5dd;
+  --grey-300: #667085;
+  --grey-400: #344054;
+  --grey-500: #000000;
+}
+
+/* Typography *************************************/
+.text-title {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.text-subtitle {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+}
+
+.text-body {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.text-caption {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+/* Header ********************************************/
+
+/* 음식점 목록 *****************************************/
+
+/* 카테고리/정렬 필터 */
+
+/* 음식점 목록 */
+
+/* 음식점 정보/추가 모달 *****************************************/

src/App.jsx

@@ -1,7 +1,26 @@
 import "./App.css";
+import AddRestaurantModal from "./components/AddRestaurantModal";
+import CategoryFilter from "./components/CategoryFilter";
+import Header from "./components/Header";
+import RestaurantList from "./components/RestaurantList";
+import RestaurantName from "./components/RestaurantName";
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  return (
+    <div>
+      <Header />
+
+      <main>
+        <CategoryFilter />
+        <RestaurantList />
+      </main>
+
+      <aside>
+        <RestaurantName />
+        <AddRestaurantModal />
+      </aside>
+    </div>
+  );
 }
 
 export default App;

src/assets/App.css

@@ -0,0 +1,62 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+html,
+body {
+  font-family: sans-serif;
+  font-size: 16px;
+}
+
+/* Colors *****************************************/
+:root {
+  --primary-color: #ec4a0a;
+  --lighten-color: #f6a88a;
+  --grey-100: #ffffff;
+  --grey-200: #d0d5dd;
+  --grey-300: #667085;
+  --grey-400: #344054;
+  --grey-500: #000000;
+}
+
+/* Typography *************************************/
+.text-title {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.text-subtitle {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+}
+
+.text-body {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.text-caption {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+/* Header ********************************************/
+
+/* 음식점 목록 *****************************************/
+
+/* 카테고리/정렬 필터 */
+
+/* 음식점 목록 */
+
+/* 음식점 정보/추가 모달 *****************************************/

src/components/AddRestaurantModal.jsx

@@ -0,0 +1,54 @@
+import "./../css/AddRestaurant.css";
+
+const AddRestaurantModal = () => {
+  return (
+    <>
+      <div className="modal ">
+        <div className="modal-backdrop"></div>
+        <div className="modal-container">
+          <h2 className="modal-title text-title">새로운 음식점</h2>
+          <form>
+            <div className="form-item form-item--required">
+              <label htmlFor="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 className="form-item form-item--required">
+              <label htmlFor="name text-caption">이름</label>
+              <input type="text" name="name" id="name" required />
+            </div>
+
+            <div className="form-item">
+              <label htmlFor="description text-caption">설명</label>
+              <textarea
+                name="description"
+                id="description"
+                cols="30"
+                rows="5"
+              ></textarea>
+              <span className="help-text text-caption">
+                메뉴 등 추가 정보를 입력해 주세요.
+              </span>
+            </div>
+
+            <div className="button-container">
+              <button className="button button--primary text-caption">
+                추가하기
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AddRestaurantModal;

src/components/CategoryFilter.jsx

@@ -0,0 +1,26 @@
+import "./../css/CategoryFilter.module.css";
+
+const CategoryFilter = () => {
+  return (
+    <>
+      <section className="restaurant-filter-container">
+        <select
+          name="category"
+          id="category-filter"
+          className="restaurant-filter"
+          aria-label="음식점 카테고리 필터"
+        >
+          <option value="전체">전체</option>
+          <option value="한식">한식</option>
+          <option value="중식">중식</option>
+          <option value="일식">일식</option>
+          <option value="양식">양식</option>
+          <option value="아시안">아시안</option>
+          <option value="기타">기타</option>
+        </select>
+      </section>
+    </>
+  );
+};
+
+export default CategoryFilter;

src/components/Header.jsx

@@ -0,0 +1,21 @@
+import "./../css/Header.css";
+
+const Header = () => {
+  return (
+    <>
+      <header className="gnb">
+        <h1 className="gnb__title">점심 뭐 먹지</h1>
+        <button type="button" className="gnb__button" aria-label="음식점 추가">
+          <img
+            className="gnb__button img"
+            src="./add-button.png"
+            alt="음식점 추가"
+          />
+        </button>
+      </header>
+      ;
+    </>
+  );
+};
+
+export default Header;

src/components/RestaurantList.jsx

@@ -0,0 +1,121 @@
+import "./../css/RestaurantList.css";
+
+const RestaurantList = () => {
+  return (
+    <>
+      <section className="restaurant-list-container">
+        <ul className="restaurant-list">
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-korean.png"
+                alt="한식"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">피양콩할마니</h3>
+              <p className="restaurant__description text-body">
+                평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩
+                할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은
+                평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선
+                맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은
+                건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만,
+                할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의
+                역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은
+                만큼 덜어 먹을 수 있게 준비돼 있다.
+              </p>
+            </div>
+          </li>
+
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-chinese.png"
+                alt="중식"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">친친</h3>
+              <p className="restaurant__description text-body">
+                Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과
+                정성으로 정통 중식의 세계를 펼쳐갑니다
+              </p>
+            </div>
+          </li>
+
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-japanese.png"
+                alt="일식"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">잇쇼우</h3>
+              <p className="restaurant__description text-body">
+                잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은
+                정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는
+                잇쇼우는 고객 한분 한분께 최선을 다하겠습니다
+              </p>
+            </div>
+          </li>
+
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-western.png"
+                alt="양식"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">이태리키친</h3>
+              <p className="restaurant__description text-body">
+                늘 변화를 추구하는 이태리키친입니다.
+              </p>
+            </div>
+          </li>
+
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-asian.png"
+                alt="아시안"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">호아빈 삼성점</h3>
+              <p className="restaurant__description text-body">
+                푸짐한 양에 국물이 일품인 쌀국수
+              </p>
+            </div>
+          </li>
+
+          <li className="restaurant">
+            <div className="restaurant__category">
+              <img
+                src="./category-etc.png"
+                alt="기타"
+                className="category-icon"
+              />
+            </div>
+            <div className="restaurant__info">
+              <h3 className="restaurant__name text-subtitle">
+                도스타코스 선릉점
+              </h3>
+              <p className="restaurant__description text-body">
+                멕시칸 캐주얼 그릴
+              </p>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </>
+  );
+};
+
+export default RestaurantList;