[adv-1단계] 송혜정 미션 제출합니다.

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.css

@@ -0,0 +1,27 @@
+* {
+  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;
+}

src/App.jsx

@@ -1,12 +1,40 @@
-
-import './App.css'
+import './App.css';
+import { useState, useEffect } from 'react';
+import Main from './components/main/main/Main';
+import Aside from './components/aside/Aside';
+import { getRestaurant } from './api/restaurant';
 
 function App() {
+  const [isModalOpen, setIsModalOpen] = useState();
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [selectedRestaurant, setSelectedRestaurant] = useState({
+    name: '',
+    description: '',
+  });
+  const [restaurantsList, setRestaurantsList] = useState([]);
+
+  useEffect(() => {
+    getRestaurant(setRestaurantsList);
+  }, []);
+
   return (
-    <>
-        Code It..
-    </>
-  )
+    <div>
+      <Main
+        restaurantsList={restaurantsList}
+        setIsModalOpen={setIsModalOpen}
+        setSelectedRestaurant={setSelectedRestaurant}
+        setIsAddModalOpen={setIsAddModalOpen}
+      />
+      <Aside
+        isModalOpen={isModalOpen}
+        isAddModalOpen={isAddModalOpen}
+        selectedRestaurant={selectedRestaurant}
+        setIsModalOpen={setIsModalOpen}
+        setIsAddModalOpen={setIsAddModalOpen}
+        setRestaurantsList={setRestaurantsList}
+      />
+    </div>
+  );
 }
 
-export default App
+export default App;

src/api/restaurant.jsx

@@ -0,0 +1,26 @@
+export const getRestaurant = async (setRestaurantsList) => {
+  try {
+    const response = await fetch('http://localhost:3000/restaurants');
+    const jsonData = await response.json();
+
+    if (response.ok) {
+      setRestaurantsList(jsonData);
+    } else {
+      console.error('Failed to fetch restaurants:', response.statusText);
+    }
+  } catch (error) {
+    console.error('Error fetching restaurants:', error);
+  }
+};
+
+export const postRestaurant = async (newRestaurant) => {
+  const response = await fetch('http://localhost:3000/restaurants', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(newRestaurant),
+  });
+
+  return response;
+};