From 447c12dbefebab0bc5eb6b79e6e7d342eb6991f6 Mon Sep 17 00:00:00 2001 From: ssuebin Date: Mon, 7 Apr 2025 19:31:29 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 302 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/App.jsx | 60 ++++++++++- 2 files changed, 360 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index e69de29..e380619 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,302 @@ +* { + 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..e98a89d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,63 @@ import "./App.css"; +const RestaurantBox = ({ category, restaurantName, src, restaurantdescription }) => { + return ( +
  • +
    + {category} +
    +
    +

    {restaurantName}

    +

    {restaurantdescription}

    +
    +
    • + ) +} + +const RESTAURANTLIST = [ + {id: "1", category : "한식", restaurantName : "피양콩할마니", src : "./category-korean.png", restaurantdescription : "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, '피양'은 평안도 사투리로 '평양'을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다."}, + {id: "2", category : "중식", restaurantName : "친친", src : "./category-chinese.png", restaurantdescription : "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다"}, + {id: "3", category: "일식", restaurantName: "잇쇼우", src : "./category-japanese.png", restaurantdescription: "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다."}, + {id: "4", category: "양식", restaurantName: "이태리키친", src : "./category-western.png", restaurantdescription: "늘 변화를 추구하는 이태리키친입니다."}, + {id: "5", category: "아시안", restaurantName: "호아빈 삼성점",src : "./category-asian.png", restaurantdescription: "푸짐한 양에 국물이 일품인 쌀국수"}, + {id: "6", category: "기타", restaurantName: "도스타코스 선릉점", src : "./category-etc.png", restaurantdescription: "멕시칸 캐주얼 그릴"}, + {id: "7", category: "기타", restaurantName: "aa", src : "./category-etc.png", restaurantdescription: "멕시칸 캐주얼 그릴"} +]; function App() { - return

    Self-Paced React

    ; + return
    +
    +

    점심 뭐 먹지

    + +
    + +
    +
    + +
    + +
    + {RESTAURANTLIST.map((restaurant) => ( + + ))} +
    +
    +
    ; } -export default App; +export default App; \ No newline at end of file From 1db37c1869f87bfadf2015c3e3ccba22225477da Mon Sep 17 00:00:00 2001 From: ssuebin Date: Tue, 8 Apr 2025 01:23:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=99=84=EC=84=B1=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 57 ++------------- src/components/CategoryFilter.jsx | 17 +++++ src/components/RestaurantList.jsx | 112 ++++++++++++++++++++++++++++++ src/components/header.jsx | 14 ++++ 4 files changed, 149 insertions(+), 51 deletions(-) create mode 100644 src/components/CategoryFilter.jsx create mode 100644 src/components/RestaurantList.jsx create mode 100644 src/components/header.jsx diff --git a/src/App.jsx b/src/App.jsx index e98a89d..dbaba06 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,61 +1,16 @@ import "./App.css"; -const RestaurantBox = ({ category, restaurantName, src, restaurantdescription }) => { - return ( -
  • -
    - {category} -
    -
    -

    {restaurantName}

    -

    {restaurantdescription}

    -
    -
    • - ) -} +import Header from "./components/header"; +import CategoryFilter from "./components/CategoryFilter"; +import RestaurantList from "./components/RestaurantList"; -const RESTAURANTLIST = [ - {id: "1", category : "한식", restaurantName : "피양콩할마니", src : "./category-korean.png", restaurantdescription : "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, '피양'은 평안도 사투리로 '평양'을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다."}, - {id: "2", category : "중식", restaurantName : "친친", src : "./category-chinese.png", restaurantdescription : "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다"}, - {id: "3", category: "일식", restaurantName: "잇쇼우", src : "./category-japanese.png", restaurantdescription: "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다."}, - {id: "4", category: "양식", restaurantName: "이태리키친", src : "./category-western.png", restaurantdescription: "늘 변화를 추구하는 이태리키친입니다."}, - {id: "5", category: "아시안", restaurantName: "호아빈 삼성점",src : "./category-asian.png", restaurantdescription: "푸짐한 양에 국물이 일품인 쌀국수"}, - {id: "6", category: "기타", restaurantName: "도스타코스 선릉점", src : "./category-etc.png", restaurantdescription: "멕시칸 캐주얼 그릴"}, - {id: "7", category: "기타", restaurantName: "aa", src : "./category-etc.png", restaurantdescription: "멕시칸 캐주얼 그릴"} -]; function App() { return
    -
    -

    점심 뭐 먹지

    - -
    +
    -
    - -
    - -
    - {RESTAURANTLIST.map((restaurant) => ( - - ))} -
    + +
    ; } diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx new file mode 100644 index 0000000..7fb7ff1 --- /dev/null +++ b/src/components/CategoryFilter.jsx @@ -0,0 +1,17 @@ +function CategoryFilter(){ + return ( +
    + +
    + ); +} + +export default CategoryFilter; \ No newline at end of file diff --git a/src/components/RestaurantList.jsx b/src/components/RestaurantList.jsx new file mode 100644 index 0000000..61a31a3 --- /dev/null +++ b/src/components/RestaurantList.jsx @@ -0,0 +1,112 @@ +function RestaurantList(){ + return ( +
    +
      +
    • +
      + 한식 +
      +
      +

      피양콩할마니

      +

      + 평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. + 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 + 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 + 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 + 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 + 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 + 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 + 있게 준비돼 있다. +

      +
      +
      • +
    • +
      + 중식 +
      +
      +

      친친

      +

      + Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 + 정통 중식의 세계를 펼쳐갑니다 +

      +
      +
      • + +
    • +
      + 일식 +
      +
      +

      잇쇼우

      +

      + 잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 + 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 + 한분 한분께 최선을 다하겠습니다 +

      +
      +
      • + +
    • +
      + 양식 +
      +
      +

      이태리키친

      +

      + 늘 변화를 추구하는 이태리키친입니다. +

      +
      +
      • + +
    • +
      + 아시안 +
      +
      +

      호아빈 삼성점

      +

      + 푸짐한 양에 국물이 일품인 쌀국수 +

      +
      +
      • + +
    • +
      + 기타 +
      +
      +

      + 도스타코스 선릉점 +

      +

      + 멕시칸 캐주얼 그릴 +

      +
      +
      • +
    +
    + ); +} + +export default RestaurantList; \ No newline at end of file diff --git a/src/components/header.jsx b/src/components/header.jsx new file mode 100644 index 0000000..74a5b73 --- /dev/null +++ b/src/components/header.jsx @@ -0,0 +1,14 @@ +function Header(){ + return ( +
    +
    +

    점심 뭐 먹지

    + +
    +
    + ); +} + +export default Header; \ No newline at end of file