diff --git a/src/api/apis/foods.ts b/src/api/apis/foods.ts index f4e22c3..8768550 100644 --- a/src/api/apis/foods.ts +++ b/src/api/apis/foods.ts @@ -11,7 +11,7 @@ export const postAllFoods = async () => { is_party: false, is_diet: false, }, - recommends_cnt: 5, + recommends_cnt: 100, }); return response.data; } catch (error) { diff --git a/src/api/apis/fti.ts b/src/api/apis/fti.ts index 4f46ba6..48bf7df 100644 --- a/src/api/apis/fti.ts +++ b/src/api/apis/fti.ts @@ -1,4 +1,5 @@ -import { baseInstance } from '../util/instance'; +import { baseInstance, authInstance } from '../util/instance'; +import { getCookie } from '../../utils/cookie'; export const getFtiQuestions = async () => { try { @@ -12,14 +13,16 @@ export const getFtiQuestions = async () => { export const sendFtiResult = async (result: string[]) => { try { - const response = await baseInstance.post('/api/ftitests/result/', { fti_style: result }); // 'results' 키로 전송 + const refreshToken = getCookie('refresh'); // 쿠키에서 리프레시 토큰 가져오기 + const instance = refreshToken ? authInstance : baseInstance; // 리프레시 토큰이 있으면 authInstance 사용, 없으면 baseInstance 사용 + + const response = await instance.post('/api/ftitests/result/', { fti_style: result }); return response.data; } catch (error) { console.error('Failed to send FTI result:', error); throw error; } }; - export const getFtiType = async (uuid: string) => { try { const response = await baseInstance.get(`/api/ftitests/result/${uuid}`); diff --git a/src/pages/foods/Foods.tsx b/src/pages/foods/Foods.tsx index 468b7f9..5e676ee 100644 --- a/src/pages/foods/Foods.tsx +++ b/src/pages/foods/Foods.tsx @@ -1,7 +1,6 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import Tag from '../../components/common/Tag'; import FoodCard from '../../components/foods/FoodCard'; -import { useFoodStore } from '../../store/foodStore'; import { FoodsList } from '../../types/types'; import { getItem } from '../../utils/storage'; import { postAllFoods } from '../../api/apis/foods'; @@ -11,7 +10,8 @@ const filter: string[] = ['기본', '점심', '저녁', '간식', '데이트', ' const Foods = () => { const [selectedTag, setSelectedTag] = useState('기본'); const [filteredFoods, setFilteredFoods] = useState([]); - const { foodsList, setFoodsList } = useFoodStore(); + const [sessionFoods, setSessionFoods] = useState([]); + const [apiFoods, setApiFoods] = useState([]); const handleTagClick = (tag: string) => { setSelectedTag(tag); @@ -28,33 +28,35 @@ const Foods = () => { return tags; }; - const filterFoods = (tag: string): FoodsList[] => { - if (tag === '기본') { - return foodsList; - } - return foodsList.filter((food) => mapTags(food).includes(tag)); - }; + const filterFoods = useCallback( + (tag: string): FoodsList[] => { + const combinedFoods = [...sessionFoods, ...apiFoods]; + if (tag === '기본') { + return combinedFoods; + } + return combinedFoods.filter((food) => mapTags(food).includes(tag)); + }, + [sessionFoods, apiFoods], + ); const getAllFoods = async () => { const response = await postAllFoods(); - console.log('All foods fetched:', response.data); + console.log('All foods fetched:', response.recommendations); + setApiFoods(response.recommendations); }; useEffect(() => { const recommendedFoods = getItem('foodsList-storage'); if (recommendedFoods) { const parsedFoods = JSON.parse(recommendedFoods).state.foodsList; - setFoodsList(parsedFoods); + setSessionFoods(parsedFoods); } - }, [setFoodsList]); + getAllFoods(); // API 호출 + }, []); useEffect(() => { setFilteredFoods(filterFoods(selectedTag)); - }, [selectedTag, foodsList]); - - useEffect(() => { - getAllFoods(); - }, []); + }, [selectedTag, sessionFoods, apiFoods, filterFoods]); return (
@@ -75,9 +77,9 @@ const Foods = () => {
{Array.isArray(filteredFoods) && - filteredFoods.map((item) => ( + filteredFoods.map((item, index) => ( { }; return (
- -

숨은 식탐 DNA 분석해볼래? 🧬🍕

+ +

숨은 식탐 DNA 분석해볼래? 🧬🍕

3분만 투자하면 너의 진짜 맛잘알 지수가 나온다고!
이 초간단 테스트로 알아보자!

-

솔직하게 답하고 너의 숨겨진 식욕 본능을 깨워봐! 🍽️💥

-
diff --git a/src/pages/fti/FtiResultId.tsx b/src/pages/fti/FtiResultId.tsx index 87091cb..525326b 100644 --- a/src/pages/fti/FtiResultId.tsx +++ b/src/pages/fti/FtiResultId.tsx @@ -1,108 +1,124 @@ +import { useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import Button from '../../components/common/Button'; -import { getFtiType } from '../../api/apis/fti'; -import { useEffect } from 'react'; +import { shareWeb, shareKakao } from '../../utils/shareUtils'; +import { getCookie } from '../../utils/cookie'; + +declare global { + interface Window { + Kakao: any; + } +} + +interface Description { + start: { text: string; people: string }; + typeDescription: string; + characteristics: string[]; + title: { title: string; text: string }; +} const { Kakao } = window; const FtiResultId = () => { const navigate = useNavigate(); const location = useLocation(); - const { ftiType, uuid } = location.state || {}; + const { ftiType, ftiImage, description } = location.state || {}; + + const [parsedDescription, setParsedDescription] = useState(null); const realUrl = 'https://www.babpiens.com/fti'; - const getFtiData = async () => { - try { - const data = await getFtiType(uuid); - console.log('FTI type:', data); - } catch (error) { - console.error('Failed to get FTI type:', error); - } - }; + const parseDescription = (desc: { [key: string]: string }[]): Description => { + const startText = desc[0]['시작']; + const parts = startText.split('\n').map((str) => str.trim()); + const text = parts.slice(0, -1).join('\n'); + const people = parts[parts.length - 1]; - const shareWeb = () => { - if (navigator.share) { - navigator - .share({ - title: 'FTI검사 너도 받아볼래?', - text: 'FTI검사하고 음식 추천까지! 완전 럭키비키잖아~🍀', - url: 'https://www.babpiens.com/fti', - }) - .then(() => console.log('Successful share')) - .catch((error) => console.log('Error sharing', error)); - } else { - alert('Web Share API is not supported in your browser.'); - } - }; + const typeDescription = desc[1]['유형설명'] || desc[1]['유형 설명']; - const shareKakao = () => { - if (Kakao) { - Kakao.Share.sendDefault({ - objectType: 'feed', - content: { - title: 'FTI검사 너도 받아볼래?', - description: 'FTI검사하고 음식 추천까지! 완전 럭키비키잖아~🍀', - imageUrl: '/images/babpience_logo2.png', - link: { - mobileWebUrl: realUrl, - }, - }, - buttons: [ - { - title: '나도 테스트 하러가기', - link: { - mobileWebUrl: realUrl, - }, - }, - ], - }); - } else { - console.error('Kakao object is not available.'); - } + const characteristicsText = desc[2]['특징']; + const characteristics = characteristicsText.split('\n').map((str) => str.trim().replace('- ', '')); + + const titleKey = Object.keys(desc[3])[0]; + const titleText = desc[3][titleKey]; + + return { + start: { text, people }, + typeDescription, + characteristics, + title: { title: titleKey, text: titleText }, + }; }; useEffect(() => { + console.log('FTI type:', ftiType); + if (description) { + const parsed = parseDescription(description); + setParsedDescription(parsed); + console.log('Parsed description:', parsed); + } if (Kakao) { Kakao.cleanup(); Kakao.init(import.meta.env.VITE_APP_KAKAO_MAP_KEY); - console.log(Kakao.isInitialized()); } else { console.error('Kakao object is not available.'); } - getFtiData(); - }, []); + console.log(ftiImage); + }, [description]); + + const handleButtonClick = () => { + const refreshToken = getCookie('refresh'); + if (refreshToken) { + navigate('/flavor'); + } else { + navigate('/signin'); + } + }; return (
-
-

당신의 음식 유형

-

걸어다니는 생생 정보통

+
+ FTI Result +

길게 눌러서 이미지를 저장해주세요.

-
이미지
-
텍스트
-
+ + {parsedDescription && ( +
+

{parsedDescription.start.text}

+

{parsedDescription.start.people}

+ +

{parsedDescription.typeDescription}

+ +

특징

+
    + {parsedDescription.characteristics.map((char, index) => ( +
  • + - {char} +
    • + ))} +
+

{`(${parsedDescription.title.title})`}

+

{parsedDescription.title.text}

+
+ )} +

공유하기

- 카카오톡 공유 - 인스타그램 공유 - X 공유 - 일반 공유 -
-

음식 탐색 궁합

-
-
-
최고
-

인간 리트리버/수정

- -
-
-
최악
-

나사빠진 도라에몽/수정

- -
+ 카카오톡 공유 shareKakao(Kakao, realUrl)} /> + 인스타그램 공유 shareWeb(realUrl)} + className="cursor-pointer" + /> + X 공유 shareWeb(realUrl)} className="cursor-pointer" /> + 일반 공유 shareWeb(realUrl)} className="cursor-pointer" />
-
diff --git a/src/pages/fti/FtiTest.tsx b/src/pages/fti/FtiTest.tsx index 187cfd5..96486e2 100644 --- a/src/pages/fti/FtiTest.tsx +++ b/src/pages/fti/FtiTest.tsx @@ -6,6 +6,7 @@ import Button from '../../components/common/Button'; import ProgressBar from '../../components/flavor/ProgressBar'; import { useNavigate } from 'react-router-dom'; import { sendFtiResult } from '../../api/apis/fti'; +import { localsetItem } from '../../utils/storage'; const FtiTest = () => { const [questions, setQuestions] = useState([]); @@ -32,7 +33,6 @@ const FtiTest = () => { }, []); const handleAnswer = (result: string) => { - console.log('Selected result:', result); // 각 답변의 result 출력 setResults((prevResults) => { const newResults = [...prevResults, result]; if (number < questions.length - 1) { @@ -44,14 +44,38 @@ const FtiTest = () => { }); }; + const parseDescription = (desc: string) => { + const sections = desc.split(/\n\n/); + const result: { [key: string]: string }[] = []; + + sections.forEach((section) => { + const match = section.match(/^\(([^)]+)\)\n([\s\S]*)$/); + if (match) { + const key = match[1].trim(); + const value = match[2].trim(); + result.push({ [key]: value }); + } + }); + + return result; + }; + const calculateResult = async (finalResults: string[]) => { - console.log('All results:', finalResults); - setIsSubmitting(true); // 제출 시작 + setIsSubmitting(true); try { const ftiResult = await sendFtiResult(finalResults); - console.log('Result ID:', ftiResult); // resultId.uuid로 FTI 결과 ID 출력 - console.log(ftiResult.description); - navigate(`/fti/${ftiResult.uuid}`, { state: { ftiType: ftiResult.fti_type, uuid: ftiResult.uuid } }); // ftiType과 uuid를 state로 전달 + localsetItem('FtiResults', ftiResult.fti_type); + const description = parseDescription(ftiResult.description); + console.log('FTI result:', ftiResult.description); + console.log('FTI description:', description); + navigate(`/fti/${ftiResult.uuid}`, { + state: { + ftiType: ftiResult.fti_type, + uuid: ftiResult.uuid, + ftiImage: ftiResult.fti_image, + description: description, + }, + }); // ftiType과 uuid를 state로 전달 } catch (error) { console.error('Failed to send FTI result:', error); setIsSubmitting(true); // 제출 실패 시 다시 활성화 @@ -61,7 +85,9 @@ const FtiTest = () => {
- {questions.length > 0 &&
{questions[number]}
} + {questions.length > 0 && ( +
{questions[number]}
+ )}
@@ -73,7 +99,7 @@ const FtiTest = () => {