qux팀 요리퀴즈

package.json

@@ -6,6 +6,7 @@
     "axios": "0.21.0",
     "classnames": "2.2.6",
     "cross-env": "7.0.2",
+    "express": "4.17.1",
     "fontfaceobserver": "2.1.0",
     "husky": "4.3.0",
     "lodash": "4.17.20",
@@ -63,6 +64,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:server": "node server.ts",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -124,5 +126,5 @@
       }
     }
   },
-  "proxy":"https://openapi.naver.com"
+  "proxy": "http://localhost:4000"
 }

server.ts

@@ -0,0 +1,23 @@
+const express = require('express');
+const http = require('http');
+const axios = require('axios');
+
+const app = express();
+
+app.get('/api/getRecipe/:recipeId', async (req, res) => {
+  const { recipeId } = req.params;
+
+  try {
+    const result = await axios.get(
+      `http://211.237.50.150:7080/openapi/f272a304bf6f5c342cd55e3630601b0e1dddd251d5d5f35823136edab357a410/json/Grid_20150827000000000227_1/1/1000?RECIPE_ID=${recipeId}`,
+    );
+
+    res.send(result.data);
+  } catch (error) {
+    res.status(error.status || 500).send(error);
+  }
+});
+
+http.createServer(app).listen(4000, () => {
+  console.log('Server is running');
+});

src/App.tsx

@@ -1,8 +1,193 @@
 /* External dependencies */
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import axios from 'axios';
+import _ from 'lodash';
+
+/* Internal dependencies */
+import Quiz from 'components/Quiz';
+import Result from 'components/Result';
+import LoadingResult from 'components/LoadingResult';
+import recipesJSON from 'constants/recipes.json';
+
+const QUIZ_COUNT = 10;
+
+//난이도 하
+const QUIZ_SELECT_COUNT = 4;
+export const IMAGE_WIDTH = 600;
+
+// 난이도 중
+// const QUIZ_SELECT_COUNT = 5;
+// export const IMAGE_WIDTH = 400;
+
+// 난이도 상
+// const QUIZ_SELECT_COUNT = 6;
+// export const IMAGE_WIDTH = 200;
+
+// 난이도 특상
+// const QUIZ_SELECT_COUNT = 10;
+// export const IMAGE_WIDTH = 80;
+
+const recipes = recipesJSON.Grid_20150827000000000226_1.row;
+
+function getRandomNumbers(
+  startIndex: number,
+  endIndex: number,
+  amount: number,
+) {
+  const tempArr: number[] = [];
+  if (startIndex > endIndex) {
+    let temp = startIndex;
+    startIndex = endIndex;
+    endIndex = temp;
+  }
+  if (endIndex - startIndex + 1 < amount) {
+    amount = endIndex - startIndex + 1;
+  }
+
+  while (tempArr.length < amount) {
+    const randomIndex =
+      Math.floor(Math.random() * endIndex - startIndex + 1) + startIndex;
+
+    if (!tempArr.includes(randomIndex)) {
+      tempArr.push(randomIndex);
+    }
+  }
+
+  return tempArr;
+}
 
 function App() {
-  return <div>Hello World!</div>;
+  const [answerCount, setAnswerCount] = useState(0);
+  const [currentQuizIndex, setCurrentQuizIndex] = useState(1);
+  const [isLoading, setLoading] = useState(false);
+  const [corrected, setCorrected] = useState(false);
+  const [isFinished, setFinished] = useState(false);
+  const [recipeName, setRecipeName] = useState('');
+  const [recipeUrl, setRecipeUrl] = useState('');
+  const [answer, setAnswer] = useState('');
+  const [ingredients, setIngredients] = useState<string[]>([]);
+
+  const handleQuiz = useCallback(async () => {
+    try {
+      const quizIndex = Math.floor(Math.random() * recipes.length);
+      const { RECIPE_ID, RECIPE_NM_KO, IMG_URL } = recipes[quizIndex];
+
+      const result = await axios.get(`/api/getRecipe/${RECIPE_ID}`);
+      const resultRow = _.get(result, 'data.Grid_20150827000000000227_1.row');
+
+      if (resultRow.length < QUIZ_SELECT_COUNT) {
+        handleQuiz();
+        return;
+      }
+
+      let answerQuizIndex = -1;
+
+      while (answerQuizIndex === -1) {
+        const tempIndex = Math.floor(Math.random() * recipes.length);
+
+        if (tempIndex !== quizIndex) {
+          answerQuizIndex = tempIndex;
+        }
+      }
+
+      const { RECIPE_ID: answerRecipeId } = recipes[answerQuizIndex];
+
+      const answerResult = await axios.get(`/api/getRecipe/${answerRecipeId}`);
+      const answerResultRow = _.get(
+        answerResult,
+        'data.Grid_20150827000000000227_1.row',
+      );
+
+      if (!_.isArray(resultRow) || !_.isArray(answerResultRow)) {
+        throw new Error();
+      }
+
+      const allIngredients: string[] = resultRow.map(row => row.IRDNT_NM);
+      const allAnswerIngredients: string[] = answerResultRow.map(
+        row => row.IRDNT_NM,
+      );
+
+      let answerIngredient = '';
+
+      while (_.isEmpty(answerIngredient)) {
+        const answerIngredientIndex = Math.floor(
+          Math.random() * allAnswerIngredients.length,
+        );
+        const tempAnswerIngredient =
+          allAnswerIngredients[answerIngredientIndex];
+
+        if (!allIngredients.includes(tempAnswerIngredient)) {
+          answerIngredient = tempAnswerIngredient;
+        }
+      }
+
+      const quizIngredients: string[] = [];
+      const quizIngredientIndexes = getRandomNumbers(
+        0,
+        allIngredients.length - 1,
+        QUIZ_SELECT_COUNT - 1,
+      );
+
+      for (let i = 0; i < quizIngredientIndexes.length; i++) {
+        quizIngredients.push(allIngredients[quizIngredientIndexes[i]]);
+      }
+
+      const answerIndex = Math.floor(Math.random() * QUIZ_SELECT_COUNT);
+      const ingredientsList = [
+        ...quizIngredients.slice(0, answerIndex),
+        answerIngredient,
+        ...quizIngredients.slice(answerIndex),
+      ];
+
+      setRecipeName(RECIPE_NM_KO);
+      setRecipeUrl(IMG_URL);
+      setAnswer(answerIngredient);
+      setIngredients(ingredientsList);
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+
+  const handleAnswer = useCallback(
+    (selectedAnswer: string) => {
+      setLoading(true);
+
+      if (answer === selectedAnswer) {
+        setAnswerCount(prev => prev + 1);
+        setCorrected(true);
+      } else {
+        setCorrected(false);
+      }
+
+      setTimeout(() => {
+        if (currentQuizIndex >= QUIZ_COUNT) {
+          setFinished(true);
+        }
+
+        setLoading(false);
+        setCurrentQuizIndex(prev => prev + 1);
+        handleQuiz();
+      }, 2000);
+    },
+    [answer, currentQuizIndex, handleQuiz],
+  );
+
+  useEffect(() => {
+    handleQuiz();
+  }, [handleQuiz]);
+
+  return (
+    <>
+      <Quiz
+        recipeName={recipeName}
+        recipeUrl={recipeUrl}
+        ingredients={ingredients}
+        onAnswer={handleAnswer}
+      />
+      {isFinished && <Result answerCount={answerCount} />}
+      {isLoading && <LoadingResult corrected={corrected} answer={answer} />}
+    </>
+  );
 }
 
 export default App;

src/components/FoodCard/FoodCard.styled.ts

@@ -0,0 +1,14 @@
+/* External dependencies */
+import styled from 'styled-components';
+
+export const FoodCardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const RecipeName = styled.p`
+  margin-top: 0;
+  font-size: 32px;
+  font-weight: bolder;
+`;

src/components/FoodCard/FoodCard.tsx

@@ -0,0 +1,22 @@
+/* External dependencies */
+import React from 'react';
+
+/* Internal dependencies */
+import { IMAGE_WIDTH } from 'App';
+import * as Styled from './FoodCard.styled';
+
+interface FoodCardProps {
+  recipeName: string;
+  recipeUrl: string;
+}
+
+const FoodCard = ({ recipeName, recipeUrl }: FoodCardProps) => {
+  return (
+    <Styled.FoodCardWrapper>
+      <Styled.RecipeName>{recipeName}</Styled.RecipeName>
+      <img src={recipeUrl} width={IMAGE_WIDTH} alt="" />
+    </Styled.FoodCardWrapper>
+  );
+};
+
+export default FoodCard;

src/components/FoodCard/index.ts

@@ -0,0 +1 @@
+export { default } from './FoodCard';

src/components/Ingredients/Ingredients.styled.ts

@@ -0,0 +1,29 @@
+/* External dependencies */
+import styled from 'styled-components';
+
+export const IngredientItem = styled.div`
+  padding: 12px 30px;
+  font-size: 24px;
+  font-weight: bolder;
+  background-color: #fcfcfc;
+  border: 2px solid #d2d2d2;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f2f2f2;
+  }
+`;
+
+export const IngredientList = styled.div`
+  displat: flex;
+  flex-direction: column;
+
+  ${IngredientItem} + ${IngredientItem} {
+    margin-top: 20px;
+  }
+`;
+
+export const ItemNumber = styled.span`
+  margin-right: 10px;
+`;

src/components/Ingredients/Ingredients.tsx

@@ -0,0 +1,37 @@
+/* External dependencies */
+import React, { useCallback } from 'react';
+
+/* Internal dependencies */
+import * as Styled from './Ingredients.styled';
+
+interface IngredientsProps {
+  ingredients: string[];
+  onAnswer: (selectedAnswer: string) => void;
+}
+
+const Ingredients = ({ ingredients, onAnswer }: IngredientsProps) => {
+  const handleAnswer = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const { ingredient } = event.currentTarget.dataset;
+      onAnswer(ingredient as string);
+    },
+    [onAnswer],
+  );
+
+  return (
+    <Styled.IngredientList>
+      {ingredients.map((ingredient, index) => (
+        <Styled.IngredientItem
+          key={`${ingredient}-${index}`}
+          data-ingredient={ingredient}
+          onClick={handleAnswer}
+        >
+          <Styled.ItemNumber>{index + 1}</Styled.ItemNumber>
+          {ingredient}
+        </Styled.IngredientItem>
+      ))}
+    </Styled.IngredientList>
+  );
+};
+
+export default Ingredients;

src/components/Ingredients/index.ts

@@ -0,0 +1 @@
+export { default } from './Ingredients';

src/components/LoadingResult/LoadingResult.styled.ts

@@ -0,0 +1,37 @@
+/* External dependencies */
+import styled from 'styled-components';
+
+interface CorrectedProps {
+  corrected: boolean;
+}
+
+export const ResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.95;
+  background-color: #ffffff;
+  z-index: 99999999;
+`;
+
+export const Corrected = styled.div<CorrectedProps>`
+  font-size: 60px;
+  font-weight: bolder;
+  color: ${({ corrected }) => (corrected ? 'green' : 'red')};
+`;
+
+export const Answer = styled.div`
+  font-size: 28px;
+
+  span {
+    color: blue;
+  }
+`;