코드 리팩토링및 RTK Query 수정

.eslintrc.js

@@ -42,6 +42,6 @@ module.exports = {
     'react/function-component-definition': 'off',
     'react/require-default-props': 'off',
     'no-plusplus': 'off',
-    'no-param-reassign': 'off,',
+    'no-param-reassign': 'off',
   },
 };

package.json

@@ -19,6 +19,7 @@
     "@svgr/webpack": "^5.5.0",
     "@types/react-redux": "^7.1.23",
     "@types/yup": "^0.29.13",
+    "axios": "^0.26.1",
     "emotion-normalize": "^11.0.1",
     "firebase": "^9.6.8",
     "formik": "^2.2.9",

src/api/requestData.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const apiUrl = 'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/';
+
+export const getRandomRecipe = async (number = 1) => {
+  try {
+    const { data } = await axios.get(`${apiUrl}/recipes/random`, {
+      headers: {
+        'content-type': 'application/json',
+        'x-rapidapi-host': `${process.env.NEXT_PUBLIC_RAPID_API_HOST}`,
+        'x-rapidapi-key': `${process.env.NEXT_PUBLIC_RAPID_API_KEY}`,
+      },
+      params: { number },
+    });
+    return data;
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      throw new Error(e.message);
+    } else {
+      throw new Error('different error than axios');
+    }
+  }
+};

src/components/Card/Card.stories.tsx

@@ -8,9 +8,10 @@ export default {
     id: 1,
     type: 'wide',
     background: 'white',
-    hasSummary: true,
+    hasSummary: false,
     headingPosition: 'bottomLeft',
-    title: 'hi',
+    title: 'image',
+    // imgSrc: 'https://spoonacular.com/recipeImages/Chopped-Kale-Salad-with-Pomegranate---Avocado-584495.jpg',
   },
   parameters: {
     nextRouter: {

src/components/Card/Card.styled.tsx

@@ -96,6 +96,8 @@ export const CardContainer = styled.div<CardContainerProps>`
 `;
 
 export const CardFigureImgContainer = styled.div<CardFigureImgProps>`
+  position: relative;
+
   ${({ $type }) => typeCss[$type]}
 `;
 

src/components/Card/Card.tsx

@@ -1,7 +1,5 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useState } from 'react';
 import { HiCursorClick } from 'react-icons/hi';
 import { excludeTags } from 'utils';
 import {
@@ -21,7 +19,6 @@ export const Card = ({
   background,
   hasSummary,
   headingPosition,
-  // image,
   imgSrc = '/images/no-image.jpg',
   title,
   summary = '',
@@ -42,7 +39,7 @@ export const Card = ({
                 {excludeTags(summary)
                   .split('. ')
                   .map((text, index, texts) => (
-                    <CardSummaryText key={text + index}>{text + (index < texts.length - 1 ? '.' : '')}</CardSummaryText>
+                    <CardSummaryText key={text}>{text + (index < texts.length - 1 ? '.' : '')}</CardSummaryText>
                   ))}
               </CardSummary>
               <CardButton>

src/components/CookingInfo/CookingInfo.styled.tsx

@@ -5,9 +5,12 @@ import { pxToRem } from 'utils';
 
 export const StyledDL = styled.dl`
   color: #cbcbcb;
-  font-size: ${pxToRem(24)};
+  font-size: ${pxToRem(18)};
   padding: ${pxToRem(10)} 0;
   width: 100%;
+
+  /* @media (min-width: 380ㅔ) {}
+  } */
 `;
 
 export const StyledDiv = styled.div`

src/components/HotRecipes/HotRecipes.styled.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { Heading } from '..';
 import { media, pxToRem } from 'utils';
+import { Heading } from '..';
 
 export const HotRecipesSection = styled.section`
   ${media.desktop} {

src/components/HotRecipes/HotRecipes.tsx

@@ -1,27 +1,26 @@
-import { SkeletonCard, Card } from '..';
 import { useHotRecipes } from 'hooks';
+import { SkeletonCard, Card } from '..';
 import { HotRecipesCardItem, HotRecipesCardList, HotRecipesHeader, HotRecipesSection } from './HotRecipes.styled';
 
 export const HotRecipes = () => {
   const { hotRecipes, loading } = useHotRecipes();
 
-  //TODO: customAPi 완료후 여기에 타입 달아주기
+  // TODO: customAPi 완료후 여기에 타입 달아주기
   const renderCards = ({ recipeId, image, title }) => {
     if (loading) {
       return <SkeletonCard type="square" background="none" hasSummary={false} headingPosition="bottomCenter" />;
-    } else {
-      return (
-        <Card
-          id={recipeId}
-          type="square"
-          background="none"
-          hasSummary={false}
-          headingPosition="bottomCenter"
-          imgSrc={image}
-          title={title}
-        />
-      );
     }
+    return (
+      <Card
+        id={recipeId}
+        type="square"
+        background="none"
+        hasSummary={false}
+        headingPosition="bottomCenter"
+        imgSrc={image}
+        title={title}
+      />
+    );
   };
 
   return (

src/components/Loading/Loading.tsx

@@ -8,17 +8,21 @@ const loadingEndNode = $<HTMLDivElement>('#loading-end');
 
 export const Loading = ({ message, showBackground }: LoadingProps) => {
   useEffect(() => {
-    loadingStartNode.setAttribute('role', 'alert');
-    loadingStartNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">${message}</span>`);
+    if (loadingStartNode && loadingEndNode) {
+      loadingStartNode.setAttribute('role', 'alert');
+      loadingStartNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">${message}</span>`);
+    }
 
     return () => {
-      loadingStartNode.removeAttribute('role');
-      loadingStartNode.innerHTML = '';
+      if (loadingStartNode && loadingEndNode) {
+        loadingStartNode.removeAttribute('role');
+        loadingStartNode.innerHTML = '';
 
-      loadingEndNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">Finished Loading.</span>`);
-      setTimeout(() => {
-        loadingEndNode.innerHTML = '';
-      }, 800);
+        loadingEndNode.insertAdjacentHTML('beforeend', `<span class="a11yHidden">Finished Loading.</span>`);
+        setTimeout(() => {
+          loadingEndNode.innerHTML = '';
+        }, 800);
+      }
     };
   }, [message]);
 

src/components/RandomRecipe/RandomRecipe.styled.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { Button } from '../';
 import { media, pxToRem } from 'utils';
 import { GiPerspectiveDiceSixFacesRandom } from 'react-icons/gi';
+import { Button } from '..';
 
 export const RandomRecipeSection = styled.section`
   flex-grow: 1;
@@ -18,24 +18,22 @@ export const RandomRecipeSection = styled.section`
 `;
 
 export const RandomRecipeButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: ${pxToRem(16)};
-
   ${media.mobile} {
     margin: ${pxToRem(8)} 0 ${pxToRem(16)} ${pxToRem(16)};
     font-size: ${pxToRem(12)};
-    padding: ${pxToRem(1)} ${pxToRem(6)};
   }
 
   ${media.desktop} {
     margin: ${pxToRem(36)} 0 ${pxToRem(36)} ${pxToRem(36)};
-    padding: ${pxToRem(6)} ${pxToRem(18)};
   }
+
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: ${pxToRem(16)};
 `;
 
 export const RandomDiceIcon = styled(GiPerspectiveDiceSixFacesRandom)`

src/components/RandomRecipe/RandomRecipe.tsx

@@ -1,5 +1,4 @@
 import { useRandomRecipe } from 'hooks';
-import { RandomRecipe as RandomRecipeType } from 'store/services/types/queries';
 import { Heading, SkeletonCard, Card } from '..';
 import {
   RandomDiceIcon,
@@ -9,29 +8,26 @@ import {
 } from './RandomRecipe.styled';
 
 export const RandomRecipe = (): JSX.Element => {
-  const { recipe, error, isLoading, handleClick } = useRandomRecipe();
-
-  console.log(recipe);
-  console.log(error);
+  const { recipe, isLoading, handleClick } = useRandomRecipe();
 
   const renderCard = () => {
     if (isLoading) {
-      return <SkeletonCard type="wide" background="white" hasSummary={true} headingPosition="bottomLeft" />;
-    } else {
-      const { id, title, summary, image } = recipe as RandomRecipeType;
-      return (
-        <Card
-          id={id}
-          type="wide"
-          background="white"
-          hasSummary={true}
-          headingPosition="bottomLeft"
-          imgSrc={image}
-          title={title}
-          summary={summary}
-        />
-      );
+      return <SkeletonCard type="wide" background="white" hasSummary headingPosition="bottomLeft" />;
     }
+    const { id, title, summary, image } = recipe;
+
+    return (
+      <Card
+        id={id}
+        type="wide"
+        background="white"
+        hasSummary
+        headingPosition="bottomLeft"
+        imgSrc={image}
+        title={title}
+        summary={summary}
+      />
+    );
   };
 
   return (

src/hooks/useRandomRecipe.ts

@@ -1,36 +1,31 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useGetRandomRecipeQuery } from 'store/services';
 import _ from 'lodash';
 import { RandomRecipe } from 'store/services/types/queries';
+import { getRandomRecipe } from 'api/requestData';
 
 export const useRandomRecipe = () => {
-  const [savedRecipe, setSavedRecipe] = useState<RandomRecipe | {}>({});
-  const [recipe, setRecipe] = useState<RandomRecipe | {}>({});
-
-  const { data, error, isLoading } = useGetRandomRecipeQuery(2);
+  const [savedRecipe, setSavedRecipe] = useState<RandomRecipe>({} as RandomRecipe);
+  const [recipe, setRecipe] = useState<RandomRecipe>({} as RandomRecipe);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (data) {
-      const { recipes } = data;
+    (async () => {
+      const { recipes } = await getRandomRecipe(2);
+
       setRecipe(recipes[0]);
       setSavedRecipe(recipes[1]);
-    }
-  }, []);
 
-  const getRecipe = useCallback(() => {
-    setRecipe(savedRecipe);
-    const { data } = useGetRandomRecipeQuery(1);
-    if (data) {
-      const { recipes } = data;
-      setSavedRecipe(recipes[0]);
-    }
+      setIsLoading(false);
+    })();
   }, []);
 
-  const handleClick = () => {
-    _.throttle(() => {
-      getRecipe();
-    }, 300);
+  const getRecipe = async () => {
+    setRecipe(savedRecipe);
+    const { recipes } = await getRandomRecipe();
+    setSavedRecipe(recipes[0]);
   };
 
-  return { recipe, error, isLoading, handleClick };
+  const handleClick = _.throttle(getRecipe, 300);
+
+  return { recipe, isLoading, handleClick };
 };