diff --git a/src/App.css b/src/App.css index e69de29..4405ff7 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,303 @@ +* { + 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 ********************************************/ + .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; + } + + /* 음식점 목록 *****************************************/ + + /* 카테고리/정렬 필터 */ + .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; + } + + /* 음식점 정보/추가 모달 *****************************************/ + .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; + } + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 0f5bcc1..4c99020 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,23 @@ import "./App.css"; - +import Header from "./assets/components/Header.jsx"; +import CategoryFilter from "./assets/components/CategoryFilter.jsx"; +import RestaurantList from "./assets/components/RestaurantList.jsx"; function App() { - return

Self-Paced React

; + return ( +
+ {/* GNB */} +
+ +
+ {/* 카테고리/정렬 필터 */} + + + {/* 음식점 목록 */} + +
+ +
+ ); } export default App; diff --git a/src/assets/components/AddRestaurantModal.jsx b/src/assets/components/AddRestaurantModal.jsx new file mode 100644 index 0000000..526628c --- /dev/null +++ b/src/assets/components/AddRestaurantModal.jsx @@ -0,0 +1,55 @@ +{/* 음식점 정보 모달 */} +
+
+
+

음식점 이름

+
+

음식점 소개 문구

+
+ {/* 닫기 버튼 */} +
+ +
+
+
+ +{/* 음식점 추가 모달 */} +
+
+
+

새로운 음식점

+
+ {/* 카테고리 */} +
+ + +
+ + {/* 음식점 이름 */} +
+ + +
+ + {/* 설명 */} +
+ + + 메뉴 등 추가 정보를 입력해 주세요. +
+ + {/* 추가 버튼 */} +
+ +
+
+
+
\ No newline at end of file diff --git a/src/assets/components/CategoryFilter.jsx b/src/assets/components/CategoryFilter.jsx new file mode 100644 index 0000000..f1d0d97 --- /dev/null +++ b/src/assets/components/CategoryFilter.jsx @@ -0,0 +1,18 @@ +const CategoryFilter = () => { + return( +
+ +
+ + ) +} + +export default CategoryFilter; diff --git a/src/assets/components/Header.jsx b/src/assets/components/Header.jsx new file mode 100644 index 0000000..d2731e1 --- /dev/null +++ b/src/assets/components/Header.jsx @@ -0,0 +1,14 @@ +const Header = () => { + return( +
+

점심 뭐 먹지

+ +
+ ) +} + + + +export default Header; diff --git a/src/assets/components/RestaurantDetailModal.jsx b/src/assets/components/RestaurantDetailModal.jsx new file mode 100644 index 0000000..aa2d04f --- /dev/null +++ b/src/assets/components/RestaurantDetailModal.jsx @@ -0,0 +1,72 @@ +
+ +
+ +export default RestaurantDetailModal; + diff --git a/src/assets/components/RestaurantList.jsx b/src/assets/components/RestaurantList.jsx new file mode 100644 index 0000000..666ced0 --- /dev/null +++ b/src/assets/components/RestaurantList.jsx @@ -0,0 +1,75 @@ +const RestaurantList = () => { + return( +
+ +
+ ) +} + +export default RestaurantList;