Merge pull request #29 from youngwan2/filter

식품영양조회 페이지의 다중 필터 기능

src/atom/NutritionsAtom.ts

@@ -4,3 +4,11 @@ export const NutritionPageNumber = atom({
   key: 'pageNumber',
   default: 1,
 });
+
+export const nutritionKcalFilter = atom({
+  key:'kcal',
+  default: {
+    min:0,
+    max:0
+  }
+})

src/components/Common/Search/SearchForm.tsx

@@ -21,7 +21,6 @@ interface PropsType {
     }
 }
 
-
 export default function SearchForm({ action, onSearch, inputOptions, buttonOptions }: PropsType) {
     return (
         <form className={styles.search_container} onSubmit={action}>
@@ -30,7 +29,7 @@ export default function SearchForm({ action, onSearch, inputOptions, buttonOptio
                 inputOptions={inputOptions}
             />
             {/* 조회 버튼 */}
-            <SearchButton onSearch={onSearch} buttonOptions={buttonOptions} />
+            <SearchButton onSearch={onSearch} buttonOptions={buttonOptions}/>
         </form>
     )
 }

src/data.ts

@@ -76,6 +76,116 @@ export const koreanProvinces:KoreanProvincesType[] = [
 
 ];
 
+// 식품영양조회 식당 이름
+export const restaurants = [
+  { id: 1, name: "해당없음" },
+  { id: 2, name: "배스킨라빈스" },
+  { id: 3, name: "GS 리테일 심플리쿡" },
+  { id: 4, name: "할리스" },
+  { id: 5, name: "굽네치킨" },
+  { id: 6, name: "교촌치킨" },
+  { id: 7, name: "이디야" },
+  { id: 8, name: "파리바게뜨" },
+  { id: 9, name: "송사부수제쌀고로케" },
+  { id: 10, name: "못난이꽈배기" },
+  { id: 11, name: "더벤티" },
+  { id: 12, name: "뚜레쥬르" },
+  { id: 13, name: "따삐오" },
+  { id: 14, name: "롤링핀" },
+  { id: 15, name: "메가커피" },
+  { id: 16, name: "블루샥" },
+  { id: 17, name: "크리스피크림도넛" },
+  { id: 18, name: "던킨도너츠" },
+  { id: 19, name: "파스쿠찌" },
+  { id: 20, name: "스타벅스" },
+  { id: 21, name: "달콤" },
+  { id: 22, name: "바나프레소" },
+  { id: 23, name: "커피에반하다" },
+  { id: 24, name: "탐앤탐스" },
+  { id: 25, name: "카페띠아모" },
+  { id: 26, name: "공차" },
+  { id: 27, name: "커피:니" },
+  { id: 28, name: "KFC" },
+  { id: 29, name: "디저트39" },
+  { id: 30, name: "마리웨일237" },
+  { id: 31, name: "요거프레소" },
+  { id: 32, name: "토프레소" },
+  { id: 33, name: "투썸플레이스" },
+  { id: 34, name: "카페베네" },
+  { id: 35, name: "커피빈" },
+  { id: 36, name: "드롭탑" },
+  { id: 37, name: "청자다방" },
+  { id: 38, name: "카페게이트" },
+  { id: 39, name: "더리터" },
+  { id: 40, name: "커피마마" },
+  { id: 41, name: "카페루앤비" },
+  { id: 42, name: "크로플덕오리아가씨" },
+  { id: 43, name: "커피베이" },
+  { id: 44, name: "맥도날드" },
+  { id: 45, name: "노브랜드버거" },
+  { id: 46, name: "맘스터치" },
+  { id: 47, name: "버거킹" },
+  { id: 48, name: "뉴욕버거" },
+  { id: 49, name: "버거앤프라이즈" },
+  { id: 50, name: "롯데리아" },
+  { id: 51, name: "프랭크버거" },
+  { id: 52, name: "666버거" },
+  { id: 53, name: "비비큐" },
+  { id: 54, name: "팔공티" },
+  { id: 55, name: "로띠번" },
+  { id: 56, name: "엔제리너스" },
+  { id: 57, name: "빽다방" },
+  { id: 58, name: "와플대학" },
+  { id: 59, name: "와플칸" },
+  { id: 60, name: "베러댄와플" },
+  { id: 61, name: "스트릿츄러스" },
+  { id: 62, name: "츄러스1500" },
+  { id: 63, name: "망원동티라미수" },
+  { id: 64, name: "호밀호두" },
+  { id: 65, name: "크라상점" },
+  { id: 66, name: "코코호도" },
+  { id: 67, name: "앤티앤스" },
+  { id: 68, name: "7번가피자" },
+  { id: 69, name: "피자헤븐" },
+  { id: 70, name: "업텐브로피자" },
+  { id: 71, name: "임실N치즈피자" },
+  { id: 72, name: "비토랩" },
+  { id: 73, name: "비스트로피자" },
+  { id: 74, name: "피자마루" },
+  { id: 75, name: "피자헛" },
+  { id: 76, name: "파파존스" },
+  { id: 77, name: "오르새피자" },
+  { id: 78, name: "피제이피자" },
+  { id: 79, name: "킹스타피자" },
+  { id: 80, name: "피자탑" },
+  { id: 81, name: "미스터피자" },
+  { id: 82, name: "서오릉피자" },
+  { id: 83, name: "피자스톰" },
+  { id: 84, name: "프레드피자" },
+  { id: 85, name: "피자플래넷" },
+  { id: 86, name: "선명희피자" },
+  { id: 87, name: "또래오래" },
+  { id: 88, name: "피자는치즈빨" },
+  { id: 89, name: "치킨플러스" },
+  { id: 90, name: "자담치킨" },
+  { id: 91, name: "빽보이피자" },
+  { id: 92, name: "호식이두마리치킨" },
+  { id: 93, name: "아임일리터" },
+  { id: 94, name: "크로플각" },
+  { id: 95, name: "멕시카나" },
+  { id: 96, name: "카페봄봄" },
+  { id: 97, name: "요거트아이스크림의 정석" },
+  { id: 98, name: "마이요거트립" },
+  { id: 99, name: "스무디킹" },
+  { id: 100, name: "매머드 익스프레스" },
+  { id: 101, name: "HY 잇츠온" },
+  { id: 102, name: "프레시지" },
+  { id: 103, name: "신세계푸드 피코크" }
+];
+
+
+
+
 //  홈 네비게이션 기능
 export const features = [
   {  

src/pages/Home/Home.module.scss

@@ -138,7 +138,7 @@
   left: 50%;
   z-index: 10;
   transform: translate(-50%);
-  bottom: 4%;
+  bottom: -2em;
   .home_feature_card_control_button {
     font-size: 1.5em;
     cursor: pointer;
@@ -257,24 +257,82 @@
     transform: translate(-50%, -50%) scale(0.9);
     z-index: 0;
   }
+}
+
+
+@media screen and (max-width:512px) {
+  .feature_card {
+    h2 {
+      padding-top: 1em;
+      color: #303030;
+      letter-spacing: 2px;
+      font-size: 1.15em;
+      font-family: 'TTHakgyoansimJiugaeR';
+    }
+    p {
+      padding: 0.20em 0 1em 0;
+      border-bottom: 1px solid rgb(194, 193, 193);
+    }
 
-  // .feature_card:nth-of-type(5) {
-  //   z-index: 0;
-  //   opacity: 0.3;
-  //   top: -9em;
-  //   transform: translate(-18%, var(--y)) scale(0.15);
-  // }
+    a {
+      margin-top: 1em;
+      display: inline-block;
+      color: black;
+      border: 1px solid rgb(93, 91, 91);
+      padding: 3px;
+    }
+
+    a:hover {
+      background: rgb(246, 246, 246);
+    }
+
+    .img_wrapper {
+      width: 100%;
+      max-height: 300px;
+      text-align: center;
+    }
+
+    img {
+      box-shadow: 0 0 0 1px rgb(235, 232, 232);
+      max-width: 768px;
+      height: 100px;
+      width: 100%;
+    }
+  }
+
+  .feature_card:nth-of-type(1),.feature_card:nth-of-type(2) {
+    z-index: 2;
+    box-shadow: inset -3px -3px 5px rgb(178, 176, 176), inset 1px 1px 5px gray;
+  }
+
+  .feature_card:nth-of-type(3) {
+    top: -9em;
+    z-index: 3;
+    opacity: 0.95;
+    transform: translate(-79%, var(--y)) scale(0.22) scaleY(0.7);
+  }
+
+  .feature_card:nth-of-type(4) {
+    top: -9em;
+    z-index: 1;
+    opacity: 0.7;
+    transform: translate(-50.5%, var(--y)) scale(0.2)  scaleY(0.7);
+  }
+  .feature_card:nth-of-type(5) {
+    transform: translate(-50%, -50%) scale(0.9);
+    z-index: 0;
+  }
+
 
   .home_feature_card_control_button_container {
-    position: absolute;
     display: flex;
     align-items: center;
     padding: 10px;
     border-radius: 5px;
     left: 50%;
     z-index: 10;
+    bottom: -2em;
     transform: translate(-50%);
-    bottom: 4%;
     .home_feature_card_control_button {
       font-size: 1.5em;
       cursor: pointer;
@@ -294,6 +352,4 @@
     }
   }
 
-
-
 }

src/pages/Home/components/FeatureCard.tsx

@@ -22,6 +22,7 @@ export default function FeatureCard({ feature }: PropsType) {
             <h2>{feature.title}</h2>
             <p>{feature.description}</p>
             <a href={feature.link}>더보기</a>
+
         </div>
     )
 }

src/pages/Nutrition/Nutrition.module.scss

@@ -33,11 +33,9 @@
 
   // 메인 페이지의 프리뷰 아이템 리스트
 
-
   .product_list_container:has(.product_list_loading_message) {
     display: flex;
     justify-content: center;
-
   }
 
   .product_list_container {
@@ -66,49 +64,53 @@
       left: 0.5em;
     }
 
-
     // 카드 컨테이너 컨트롤 버튼
     .product_card_control_btn_container {
       display: flex;
-      align-items: center;
-      .product_card_control_button {
-        background: transparent;
-        border: 1px solid gray;
-        border-radius: 5px;
-        padding: 3px;
-        margin: 0 3px 0 0.5em;
-        flex-grow: 1;
+      width: 100%;
+      align-items:  stretch;
+      flex-direction: column;
+      .product_card_control_btn_inner_wrapper {
+        display: flex;
+        justify-content: flex-end;
+        .product_card_control_button {
+          background: transparent;
+          border: none;
+          padding: 5px 20px;
+          font-size: 1.15em;
+          border: 1px solid #3f83cb;
+        }
+
+        .product_card_control_button:hover{
+          background-color: #3f83cb;
+          color:white;
+          cursor: pointer;
+
+        }
+
+        .product_card_control_button:active {
+          background-color: #3f83cb;
+        }
       }
       p {
-        border-radius: 5px;
+        border: 2px solid #3f83cb;
+        width: 100%;
+        margin-left: 0.2em;
+        min-height: 50px;
+        padding: 3px 0px;
+        text-align: center;
         flex-grow: 2;
-        padding-right: 0.7em;
         color: white;
         background-color: #2968ac;
-        text-align: end;
       }
     }
 
-    .product_card_control_button:nth-of-type(2) {
-      margin-left: 1px;
-    }
-
-    .product_card_control_button:hover {
-      background-color: #5696da;
-      color: white;
-      cursor: pointer;
-    }
-
-    .product_card_control_button:active {
-      background-color: #3f83cb;
-    }
-
     // 카드 컨테이너
     .product_card_container {
       --page-number: 1;
       font-family: sans-serif;
       min-width: 280px;
-      height: 350px;
+      height: 430px;
       border: none;
       margin: 10px 10px 30px 10px;
       width: 100%;
@@ -124,10 +126,9 @@
 
       .product_card {
         border: 1px solid #2d65a1;
-        border-radius: 10px;
         height: 100%;
         box-sizing: border-box;
-        max-height: 350px;
+        max-height: 400px;
         padding: 6px 0.5em;
         width: 100%;
         height: 100%;
@@ -184,7 +185,7 @@
         .product_card_content {
           h3 {
             border-bottom: none;
-            color:white;
+            color: white;
             background: #2968ac;
           }
         }