[2단계 미션] 배강현 미션 제출합니다

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "start": "react-scripts start",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
@@ -12,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

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;
+}

src/App.jsx

@@ -1,7 +1,39 @@
 import "./App.css";
+import Header from "./header/Header.jsx";
+import CategoryFilter from "./mainbody/CategoryFilter.jsx";
+import RestaurantList from "./mainbody/RestaurantList.jsx";
+import RestaurantDetailModal from "./aside/RestaurantDetailModal.jsx";
+import AddRestaurantModal from "./aside/AddRestaurantModal.jsx";
+import { useState } from "react";
+import { restaurants } from "./datas/RestaurantData";
 
 function App() {
-  return <h1>Self-Paced React</h1>;
+  const [category,setCategory] = useState("전체");
+
+  const filteredRestaurants= category==="전체" ? restaurants : restaurants.filter((restaurant)=>restaurant.category===category);
+
+  const handleCategoryChange = (newCategory) => {
+    console.log("Selected category:", newCategory); // 카테고리가 변경될 때 출력
+    setCategory(newCategory); // 실제 카테고리 상태 변경
+  };
+
+  console.log(filteredRestaurants);
+  return (
+    <>
+      <Header />
+      <main>
+
+        <CategoryFilter category={category} onChangeCategory={handleCategoryChange} />
+        <RestaurantList restaurants={filteredRestaurants} />
+
+      </main>
+      <aside>
+        <RestaurantDetailModal />
+        <AddRestaurantModal />
+      </aside>
+    </>
+  );
 }
 
+
 export default App;

src/aside/AddRestaurantModal.jsx

@@ -0,0 +1,47 @@
+import styles from "../css/RestaurantDetailModal.module.css";
+import { options } from "../datas/RestaurantData";
+function AddRestaurantModal() {
+  return (
+    <div className={`${styles.modal} ${styles.modalOpen}`}>
+      <div className={styles.modalBackdrop}></div>
+      <div className={styles.modalContainer}>
+        <h2 className={`${styles.modalTitle} text-title`}>새로운 음식점</h2>
+        <form>
+          {/* <!-- 카테고리 --> */}
+          <div className={`${styles.formItem} ${styles.formItemRequired}`}>
+            <label htmlFor="category" className="text-caption">카테고리</label>
+            <select name="category" id="category" required>
+            {options.map((option, index) => (
+              <option key={index} value={option}>
+            {option}
+          </option>
+        ))}
+            </select>
+          </div>
+
+          {/* <!-- 음식점 이름 --> */}
+          <div className={`${styles.formItem} ${styles.formItemRequired}`}>
+            <label htmlFor="name" className="text-caption">이름</label>
+            <input type="text" name="name" id="name" required />
+          </div>
+
+          {/* <!-- 설명 --> */}
+          <div className={styles.formItem}>
+            <label htmlFor="description" className="text-caption">설명</label>
+            <textarea name="description" id="description" cols="30" rows="5"></textarea>
+            <span className="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
+          </div>
+
+          {/* <!-- 추가 버튼 --> */}
+          <div className={styles.buttonContainer}>
+            <button className={`${styles.button} ${styles.buttonPrimary} text-caption`}>
+              추가하기
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default AddRestaurantModal;

src/aside/RestaurantDetailModal.jsx

@@ -0,0 +1,25 @@
+import styles from "../css/RestaurantDetailModal.module.css";
+
+function RestaurantDetailModal() {
+  return (
+    <div className={`${styles.modal} ${styles["modal--open"]}`}>
+      <div className={styles["modal-backdrop"]}></div>
+      <div className={styles["modal-container"]}>
+        <h2 className={`${styles["modal-title"]} 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 RestaurantDetailModal;

src/css/CategoryFilter.module.css

@@ -0,0 +1,22 @@
+.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;
+}

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;
+}

src/css/RestaurantDetailModal.module.css

@@ -0,0 +1,125 @@
+.modal {
+  display: none;
+}
+
+.modal--open {
+  display: none;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.modal-container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  padding: 32px 16px;
+
+  border-radius: 8px 8px 0px 0px;
+  background: var(--grey-100);
+}
+
+.modal-title {
+  margin-bottom: 36px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+
+  margin-bottom: 36px;
+}
+
+.form-item label {
+  color: var(--grey-400);
+  font-size: 14px;
+}
+
+.form-item--required label::after {
+  padding-left: 4px;
+
+  color: var(--primary-color);
+  content: "*";
+}
+
+.form-item .help-text {
+  color: var(--grey-300);
+}
+
+.form-item input,
+.form-item textarea,
+.form-item select {
+  padding: 8px;
+  margin: 6px 0;
+
+  border: 1px solid var(--grey-200);
+  border-radius: 8px;
+
+  font-size: 16px;
+}
+
+.form-item textarea {
+  resize: none;
+}
+
+.form-item select {
+  height: 44px;
+
+  padding: 8px;
+
+  border: 1px solid var(--grey-200);
+  border-radius: 8px;
+
+  color: var(--grey-300);
+}
+
+input[name="name"],
+input[name="link"] {
+  height: 44px;
+}
+
+.button-container {
+  display: flex;
+}
+
+.button {
+  width: 100%;
+  height: 44px;
+
+  margin-right: 16px;
+
+  border: none;
+  border-radius: 8px;
+
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.button:last-child {
+  margin-right: 0;
+}
+
+.button--secondary {
+  border: 1px solid var(--grey-300);
+  background: transparent;
+
+  color: var(--grey-300);
+}
+
+.button--primary {
+  background: var(--primary-color);
+
+  color: var(--grey-100);
+}
+
+.restaurant-info {
+  margin-bottom: 24px;
+}