From fb7e9fa7c980fd5d864c955b2689186ee85d0c1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EC=9B=85?= Date: Mon, 7 Apr 2025 19:29:38 +0900 Subject: [PATCH] refactor : seperate component --- src/App.css | 62 +++++++++++++ src/App.jsx | 21 ++++- src/assets/App.css | 62 +++++++++++++ src/components/AddRestaurantModal.jsx | 54 +++++++++++ src/components/CategoryFilter.jsx | 26 ++++++ src/components/Header.jsx | 21 +++++ src/components/RestaurantList.jsx | 121 +++++++++++++++++++++++++ src/components/RestaurantName.jsx | 27 ++++++ src/css/AddRestaurant.css | 125 ++++++++++++++++++++++++++ src/css/CategoryFilter.module.css | 22 +++++ src/css/Header.css | 32 +++++++ src/css/RestaurantList.css | 61 +++++++++++++ 12 files changed, 633 insertions(+), 1 deletion(-) create mode 100644 src/assets/App.css create mode 100644 src/components/AddRestaurantModal.jsx create mode 100644 src/components/CategoryFilter.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/RestaurantList.jsx create mode 100644 src/components/RestaurantName.jsx create mode 100644 src/css/AddRestaurant.css create mode 100644 src/css/CategoryFilter.module.css create mode 100644 src/css/Header.css create mode 100644 src/css/RestaurantList.css diff --git a/src/App.css b/src/App.css index e69de29..2a0d5c0 100644 --- a/src/App.css +++ b/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 ********************************************/ + +/* 음식점 목록 *****************************************/ + +/* 카테고리/정렬 필터 */ + +/* 음식점 목록 */ + +/* 음식점 정보/추가 모달 *****************************************/ diff --git a/src/App.jsx b/src/App.jsx index 0f5bcc1..b3dd4b1 100644 --- a/src/App.jsx +++ b/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

Self-Paced React

; + return ( +
+
+ +
+ + +
+ + +
+ ); } export default App; diff --git a/src/assets/App.css b/src/assets/App.css new file mode 100644 index 0000000..2a0d5c0 --- /dev/null +++ b/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 ********************************************/ + +/* 음식점 목록 *****************************************/ + +/* 카테고리/정렬 필터 */ + +/* 음식점 목록 */ + +/* 음식점 정보/추가 모달 *****************************************/ diff --git a/src/components/AddRestaurantModal.jsx b/src/components/AddRestaurantModal.jsx new file mode 100644 index 0000000..f876f72 --- /dev/null +++ b/src/components/AddRestaurantModal.jsx @@ -0,0 +1,54 @@ +import "./../css/AddRestaurant.css"; + +const AddRestaurantModal = () => { + return ( + <> +
+
+
+

새로운 음식점

+
+
+ + +
+ +
+ + +
+ +
+ + + + 메뉴 등 추가 정보를 입력해 주세요. + +
+ +
+ +
+
+
+
+ + ); +}; + +export default AddRestaurantModal; diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx new file mode 100644 index 0000000..a3901f3 --- /dev/null +++ b/src/components/CategoryFilter.jsx @@ -0,0 +1,26 @@ +import "./../css/CategoryFilter.module.css"; + +const CategoryFilter = () => { + return ( + <> +
+ +
+ + ); +}; + +export default CategoryFilter; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..394d3c0 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,21 @@ +import "./../css/Header.css"; + +const Header = () => { + return ( + <> +
+

점심 뭐 먹지

+ +
+ ; + + ); +}; + +export default Header; diff --git a/src/components/RestaurantList.jsx b/src/components/RestaurantList.jsx new file mode 100644 index 0000000..21cb5cd --- /dev/null +++ b/src/components/RestaurantList.jsx @@ -0,0 +1,121 @@ +import "./../css/RestaurantList.css"; + +const RestaurantList = () => { + return ( + <> +
+ +
+ + ); +}; + +export default RestaurantList; diff --git a/src/components/RestaurantName.jsx b/src/components/RestaurantName.jsx new file mode 100644 index 0000000..45aea42 --- /dev/null +++ b/src/components/RestaurantName.jsx @@ -0,0 +1,27 @@ +import "./../css/AddRestaurant.css"; + +const RestaurantName = () => { + return ( + <> +
+
+
+

음식점 이름

+
+

+ 음식점 소개 문구 +

+
+ +
+ +
+
+
+ + ); +}; + +export default RestaurantName; diff --git a/src/css/AddRestaurant.css b/src/css/AddRestaurant.css new file mode 100644 index 0000000..a7e0aab --- /dev/null +++ b/src/css/AddRestaurant.css @@ -0,0 +1,125 @@ +.modal { + display: none; +} + +.modal--open { + display: block; +} + +.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; +} diff --git a/src/css/CategoryFilter.module.css b/src/css/CategoryFilter.module.css new file mode 100644 index 0000000..4c3ac4d --- /dev/null +++ b/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; +} diff --git a/src/css/Header.css b/src/css/Header.css new file mode 100644 index 0000000..32df2e1 --- /dev/null +++ b/src/css/Header.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; +} diff --git a/src/css/RestaurantList.css b/src/css/RestaurantList.css new file mode 100644 index 0000000..296f812 --- /dev/null +++ b/src/css/RestaurantList.css @@ -0,0 +1,61 @@ +.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; +}