Feat : 기온에 따른 음식 추천

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "proxy": "https://openapi.naver.com",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,6 +14,7 @@
   "dependencies": {
     "axios": "^1.7.6",
     "normalize.css": "^8.0.1",
+    "prpo-types": "^0.0.1-security",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.jsx

@@ -1,9 +1,11 @@
 import Header from '@components/Header/Header'
+import Food from '@/Components/Food/Food'
 
 const App = () => {
   return (
     <>
       <Header />
+      <Food />
     </>
   )
 }

src/Components/Food/Food.css

@@ -0,0 +1,51 @@
+.container{
+  width: 95%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 15px;
+  overflow-x: auto;
+}
+.container::-webkit-scrollbar{
+  display: none;
+}
+
+.container div {
+  border-radius: 20px;
+  width: 250px;
+  height: 180px;
+  background-color: #FFF;
+  display: flex;
+  flex-direction: column;
+  flex:0 0 auto;
+  margin-bottom: 20px;
+  text-align: center;
+  align-items: center;
+  justify-content: space-around;
+  padding-bottom: 10px;
+
+}
+
+.recommendation {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.recommendation p {
+  color: #000;
+  font-weight: bold;
+}
+
+.main_container {
+  width:90%;
+  height: 270px;
+  background-color:rgba(233, 216, 225, 0.3);
+  margin: 0 auto;
+  border-radius: 20px;
+
+}

src/Components/Food/Food.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react'
+import ListArea from './ListArea'
+import GetCurrentTemperature from './GetCurrentTemperature'
+import './Food.css'
+
+function Food() {
+  const [search, setSearch] = useState('')
+  const [temperature, setTemperature] = useState(null)
+  const [recommendation, setRecommendation] = useState(null)
+
+  const food = {
+    cold: ['찌개', '떡볶이', '국밥', '라면', '백반', '전골', '해장국'],
+    hot: ['냉면', '메밀', '초계국수', '물회', '삼계탕'],
+    normal: ['치킨', '삼겹살', '찌개', '비빔밥', '회', '갈비', '카레', '덮밥', '짜장면', '찜닭'],
+  }
+
+  // 기온에 따라 cold, hot, normal로 분할
+  const getRandomRecommendation = (temp) => {
+    let recommendations
+    if (temp <= 20) {
+      recommendations = food.cold
+    } else if (temp >= 21 && temp <= 27) {
+      recommendations = food.normal
+    } else if (temp >= 28) {
+      recommendations = food.hot
+    } else {
+      return ''
+    }
+    return recommendations[Math.floor(Math.random() * recommendations.length)]
+  }
+
+  //기온 업데이트
+  const handleTemperatureUpdate = (temp) => {
+    setTemperature(temp)
+    if (recommendation === null) {
+      setRecommendation(getRandomRecommendation(temp))
+    }
+  }
+
+  // 다른 음식 추천이 가능하도록 함
+  const handleRefresh = () => {
+    if (temperature !== null) {
+      setRecommendation(getRandomRecommendation(temperature))
+    }
+  }
+
+  // 검색 내용으로 쓰임
+  useEffect(() => {
+    if (recommendation) {
+      setSearch('강남' + recommendation)
+    }
+  }, [recommendation])
+
+  return (
+    <div className='main_container'>
+      <div>
+        {recommendation && (
+          <div className='recommendation'>
+            <div>
+              <p>오늘은 {recommendation} 어떠세요?</p>
+            </div>
+            <p onClick={handleRefresh}>다른 음식 볼래요!</p>
+          </div>
+        )}
+      </div>
+      <ListArea search={search} />
+      <GetCurrentTemperature onTemperatureUpdate={handleTemperatureUpdate} />
+    </div>
+  )
+}
+
+export default Food

src/Components/Food/GetCurrentTemperature.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import { 단기예보조회 } from '../../apis/apis.js'
+
+const GetCurrentTemperature = ({ onTemperatureUpdate }) => {
+  const [temperature, setTemperature] = useState(null)
+  const NX = 61
+  const NY = 126
+
+  const filterByCategory = (category) => (data) => data.category === category
+  const formatForecastTime = (time) => time.slice(0, 2)
+  const foramtValueName = ({ fcstTime, fcstValue, ...rest }) => ({
+    시간: formatForecastTime(fcstTime),
+    온도: fcstValue,
+    ...rest,
+  })
+  const getLatestItem = (items) => {
+    if (items.length === 0) return null
+    const sortedItems = items.sort((a, b) => new Date(`${a.날짜} ${a.시간}`) - new Date(`${b.날짜} ${b.시간}`))
+    return sortedItems[sortedItems.length - 1]
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await 단기예보조회(NX, NY)
+        console.log('API 응답:', response)
+
+        if (response.data.response.body.items) {
+          const items = response.data.response.body.items.item.filter(filterByCategory('TMP')).map(foramtValueName)
+          const latestItem = getLatestItem(items)
+          if (latestItem) {
+            setTemperature(latestItem.온도)
+            onTemperatureUpdate(latestItem.온도)
+          } else {
+            throw new Error('데이터가 없습니다.')
+          }
+        } else {
+          throw new Error('API 응답 형식이 잘못되었습니다.')
+        }
+      } catch (err) {
+        setError('온도 조회 중 오류 발생: ' + err.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+  }, [onTemperatureUpdate])
+}
+
+export default GetCurrentTemperature

src/Components/Food/ListArea.jsx

@@ -0,0 +1,38 @@
+import searchFood from '../../apis/naverApi'
+import './Food.css'
+
+const ListArea = ({ search }) => {
+  const { loading, data, error } = searchFood(search)
+
+  if (loading) {
+    return <p>로딩중...</p>
+  }
+
+  if (error) {
+    return <p>에러가 발생했습니다</p>
+  }
+
+  if (!data || data.length === 0) {
+    return <p>데이터를 불러오지 못했습니다.</p>
+  }
+
+  return (
+    <div className='container'>
+      {data.map((item) => (
+        <div key={item.link}>
+          <h3>{item.title.split('<b>').join('').split('</b>').join('')}</h3>
+          <p>{item.address}</p>
+          <a
+            href={item.link}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            음식점 보러 가기
+          </a>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ListArea

src/apis/naverApi.js

@@ -0,0 +1,54 @@
+import { useReducer, useEffect } from 'react';
+import axios from 'axios';
+
+const NAVER_ID = import.meta.env.VITE_NAVER_ID;
+const NAVER_SECRET = import.meta.env.VITE_NAVER_SECRET;
+
+//reducer 함수로 action 타입에 따라 상태 업데이트
+const reducer = (state, action) => {
+    switch(action.type) {
+        case 'LOADING':
+            return { loading: true, data: null, error: null };
+        case 'SUCCESS':
+            return { loading: false, data: action.data, error: null };
+        case 'ERROR':
+            return { loading: false, data: null, error: action.error };
+        default:
+            return state;
+    }
+}
+
+//검색 결과 가져오기
+const searchFood = (search) => {
+    const [state, dispatch] = useReducer(reducer, {
+        loading: false,
+        data: null,
+        error: null
+    });
+
+    const fetchData = async () => {
+        try {
+            dispatch({ type: 'LOADING' });
+            const { data: { items } } = await axios.get(
+                'api/v1/search/local.json', {
+                params: { query: search + '맛집', display: 5 },
+                headers: {
+                    'X-Naver-Client-Id': NAVER_ID,
+                    'X-Naver-Client-Secret': NAVER_SECRET
+                },
+            });
+            dispatch({ type: 'SUCCESS', data: items });
+        } catch (err) {
+            console.error('API Error:', err);
+            dispatch({ type: 'ERROR', error: err });
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, [search]);
+
+    return state;
+}
+
+export default searchFood;

vite.config.js

@@ -14,4 +14,13 @@ export default defineConfig({
     },
     extensions: ['.js', '.jsx'],
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://openapi.naver.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })