cho-log · boorownie · Apr 1, 2025 · Mar 26, 2025 · Mar 27, 2025 · Mar 27, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.2.0"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,52 @@
+* {
+  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;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,16 @@
 import "./App.css";
+import Aside from "./pages/Aside";
+import Body from "./pages/Body";
+import Header from "./pages/Header";
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  return(
+    <>
+      <Header></Header>
+      <Body></Body>
+      <Aside></Aside>
+    </>
+  )
 }
 
 export default App;
diff --git a/src/component/aside/AddRestaurantModal.tsx b/src/component/aside/AddRestaurantModal.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import styles from "../../css/Modal.module.css";
+
+const AddRestaurantModal = () => {
+    return (
+        <div className={`${styles["modal"]} ${styles["modal--open"]}`}>
+          <div className={styles["modal-backdrop"]}></div>
+          <div className={styles["modal-container"]}>
+            <h2 className={`${styles["modal-title"]} ${styles["text-title"]}`}>새로운 음식점</h2>
+            <form>
+              <div className={`${styles["form-item"]} ${styles["form-item--required"]}`}>
+                <label htmlFor={`${styles["category"]} ${styles["text-caption"]}`}>카테고리</label>
+                <select className={styles["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={`${styles["form-item"]} ${styles["form-item--required"]}`}>
+                <label htmlFor="name text-caption">이름</label>
+                <input type="text" name="name" id="name" required />
+              </div>
+
+              <div className={styles["form-item"]}>
+                <label htmlFor="description text-caption">설명</label>
+                <textarea name="description" id="description" cols={30} rows={5}></textarea>
+                <span className={`${styles["help-text"]} text-caption`}>메뉴 등 추가 정보를 입력해 주세요.</span>
+              </div>
+
+              <div className={styles["button-container"]}>
+                <button className={`${styles["button"]} ${styles["button--primary"]} text-caption`}>추가하기</button>
+              </div>
+            </form>
+          </div>
+        </div>
+    )
+}
+
+export default AddRestaurantModal;
diff --git a/src/component/aside/RestaurantInfoModal.tsx b/src/component/aside/RestaurantInfoModal.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "../../css/Modal.module.css";
+
+const RestaurantInfoModal = () => {
+    return (
+        <div className={`${styles["modal"]} ${styles["modal--open"]}`}>
+          <div className={styles["modal-backdrop"]}></div>
+          <div className={styles["modal-container"]}>
+            <h2 className={`${styles["modal-title"]} ${styles["text-title"]}`}>음식점 이름</h2>
+            <div className={styles["restaurant-info"]}>
+              <p className={`${styles["restaurant-info__description"]} text-body`}>음식점 소개 문구</p>
+            </div>
+            <div className={styles["button-container"]}>
+              <button className={`${styles["button"]} ${styles["button--primary"]} text-caption`}>닫기</button>
+            </div>
+          </div>
+        </div>
+    )
+}
+
+export default RestaurantInfoModal;
diff --git a/src/component/body/CategorySortFilter.jsx b/src/component/body/CategorySortFilter.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "../../css/Body.module.css";
+
+const CategorySortFilter = () => {
+    return (
+        <section className={styles["restaurant-filter-container"]}>
+          <select name="category" id="category-filter" className={`${styles["restaurant-filter"]} ${styles["restaurant-filter-container-select"]}`} 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 CategorySortFilter;
diff --git a/src/component/body/RestaurantList.jsx b/src/component/body/RestaurantList.jsx
@@ -0,0 +1,77 @@
+import React from "react";
+import styles from "../../css/Body.module.css";
+
+const RestaurantList = () => {
+    return (
+        <section className={styles["restaurant-list-container"]}>
+            <ul className={styles["restaurant-list"]}>
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-korean.png" alt="한식" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>피양콩할마니</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는
+                            곳으로,
+                            ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표
+                            메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.</p>
+                    </div>
+                </li>
+
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-chinese.png" alt="중식" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>친친</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다</p>
+                    </div>
+                </li>
+
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-japanese.png" alt="일식" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>잇쇼우</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을
+                            다하는 잇쇼우는
+                            고객 한분 한분께 최선을 다하겠습니다</p>
+                    </div>
+                </li>
+
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-western.png" alt="양식" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>이태리키친</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>늘 변화를 추구하는 이태리키친입니다.</p>
+                    </div>
+                </li>
+
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-asian.png" alt="아시안" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>호아빈 삼성점</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>푸짐한 양에 국물이 일품인 쌀국수</p>
+                    </div>
+                </li>
+
+                <li className={styles["restaurant"]}>
+                    <div className={styles["restaurant__category"]}>
+                        <img src="../../../templates/category-etc.png" alt="기타" className={styles["category-icon"]} />
+                    </div>
+                    <div className={styles["restaurant__info"]}>
+                        <h3 className={`${styles["restaurant__name"]} text-subtitle`}>도스타코스 선릉점</h3>
+                        <p className={`${styles["restaurant__description"]} text-body`}>멕시칸 캐주얼 그릴</p>
+                    </div>
+                </li>
+            </ul>
+        </section>
+    );
+};
+
+export default RestaurantList;
diff --git a/src/css/Body.module.css b/src/css/Body.module.css
@@ -0,0 +1,86 @@
+/* 카테고리/정렬 필터 */
+.restaurant-filter-container {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 0 16px;
+    margin-top: 24px;
+}
+
+.restaurant-filter-container-select {
+    height: 44px;
+    min-width: 125px;
+
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: transparent;
+
+    font-size: 16px;
+}
+
+.restaurant-filter {
+    padding: 8px;
+}
+
+/* 음식점 목록 */
+.restaurant-list-container {
+    display: flex;
+    flex-direction: column;
+
+    padding: 0 16px;
+    margin: 16px 0;
+}
+
+.restaurant {
+    display: flex;
+    align-items: flex-start;
+
+    padding: 16px 8px;
+
+    border-bottom: 1px solid #e9eaed;
+}
+
+.restaurant__category {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 64px;
+    height: 64px;
+    min-width: 64px;
+    min-height: 64px;
+
+    margin-right: 16px;
+
+    border-radius: 50%;
+    background: var(--lighten-color);
+}
+
+.category-icon {
+    width: 36px;
+    height: 36px;
+}
+
+.restaurant__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.restaurant__name {
+    margin: 0;
+}
+
+.restaurant__distance {
+    color: var(--primary-color);
+}
+
+.restaurant__description {
+    display: -webkit-box;
+
+    padding-top: 8px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
diff --git a/src/css/Header.module.css b/src/css/Header.module.css
@@ -0,0 +1,32 @@
+.gnb {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+
+    padding: 0 16px;
+
+    background-color: var(--primary-color);
+}
+
+.gnb__title {
+    color: #fcfcfd;
+}
+
+.gnb__button {
+    height: 40px;
+
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.gnb__button__img {
+    display: block;
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+}