From f07b491514d1b94397f6c00b2b4cebf2136ef1b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 01:52:39 +0900 Subject: [PATCH 01/11] Update CalendarPage.tsx : Fix date error --- src/components/Calendar/CalendarPage.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx index 88183317..d0030b45 100644 --- a/src/components/Calendar/CalendarPage.tsx +++ b/src/components/Calendar/CalendarPage.tsx @@ -6,9 +6,7 @@ import { formatToYYYYMM, formatToYYYYMMDD } from "../../utils/TimeFormatter"; import { FinalDiary } from "../../api/diary"; const CalendarPage: React.FC = () => { - const [date, setDate] = useState( - new Date(new Date().getTime() - 9 * 60 * 60 * 1000) - ); + const [date, setDate] = useState(new Date()); const [diaryDates, setDiaryDates] = useState([]); const [curDiary, setCurDiary] = useState(null); const [isLoading, setIsLoading] = useState(true); @@ -16,9 +14,9 @@ const CalendarPage: React.FC = () => { useEffect(() => { const loadInitialData = async () => { if (!date) return; - + const tempDate = new Date(date.getTime() - 9 * 60 * 60 * 1000); try { - const formattedMonth = formatToYYYYMM(date); + const formattedMonth = formatToYYYYMM(tempDate); const monthResponse = await API_CALENDAR.getMonthDiary( formattedMonth ); @@ -28,7 +26,7 @@ const CalendarPage: React.FC = () => { ); setDiaryDates(diaryDates); - const formattedDate = formatToYYYYMMDD(date); + const formattedDate = formatToYYYYMMDD(tempDate); if (diaryDates.includes(formattedDate)) { const dateResponse = await API_CALENDAR.getDateDiary( formattedDate @@ -49,8 +47,9 @@ const CalendarPage: React.FC = () => { useEffect(() => { const loadDateDiary = async () => { if (!date) return; + const tempDate = new Date(date.getTime() - 9 * 60 * 60 * 1000); - const formattedDate = formatToYYYYMMDD(date); + const formattedDate = formatToYYYYMMDD(tempDate); if (!diaryDates.includes(formattedDate)) { if (curDiary != null) setCurDiary(null); return; From d95b7cc166f5e377a0d72e221a4207306a9461a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 02:04:09 +0900 Subject: [PATCH 02/11] Update Card.tsx : Auto flip --- src/components/Calendar/Card.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Calendar/Card.tsx b/src/components/Calendar/Card.tsx index b0891245..b44b8499 100644 --- a/src/components/Calendar/Card.tsx +++ b/src/components/Calendar/Card.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { FinalDiary } from "../../api/diary"; import { format } from "date-fns"; import { ko } from "date-fns/locale"; @@ -15,6 +15,10 @@ const Card: React.FC = ({ curDiary }) => { setIsFlipped(!isFlipped); }; + useEffect(() => { + setIsFlipped(false); + }, [curDiary]); + if (curDiary === null) { return (
From f57e07654b5a26039c98ea840a1eeffa25d31d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 02:04:28 +0900 Subject: [PATCH 03/11] Update CalendarPage.tsx : Auto scroll smooth --- src/components/Calendar/CalendarPage.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx index d0030b45..6b7e1672 100644 --- a/src/components/Calendar/CalendarPage.tsx +++ b/src/components/Calendar/CalendarPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { WeeklyCalendar } from "./WeeklyCalendar"; import Card from "./Card"; import { API_CALENDAR } from "../../api/calendar"; @@ -11,6 +11,8 @@ const CalendarPage: React.FC = () => { const [curDiary, setCurDiary] = useState(null); const [isLoading, setIsLoading] = useState(true); + const containerRef = useRef(null); + useEffect(() => { const loadInitialData = async () => { if (!date) return; @@ -68,6 +70,15 @@ const CalendarPage: React.FC = () => { } }, [date, diaryDates]); + useEffect(() => { + if (containerRef.current) { + containerRef.current.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + }, [date]); + return (
@@ -79,7 +90,12 @@ const CalendarPage: React.FC = () => { diaryDates={diaryDates} />
-
+
+ {!isLoading && } + {!isLoading && }
From 14b9ebab4e66334d0d00125438bf3e1edde19fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 03:25:45 +0900 Subject: [PATCH 04/11] =?UTF-8?q?Update=20Chat/=20:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=84=A0=ED=83=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=80=EB=8A=94=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chat/ChatPage.tsx | 13 ++++++++++--- src/components/Chat/ChatPageContext.tsx | 13 +++++-------- src/components/Chat/SlideArea.tsx | 5 ++++- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/Chat/ChatPage.tsx b/src/components/Chat/ChatPage.tsx index f297ce92..77adcec4 100644 --- a/src/components/Chat/ChatPage.tsx +++ b/src/components/Chat/ChatPage.tsx @@ -24,12 +24,12 @@ const ChatPage: React.FC = () => { setIsGenAble, isGenStart, setIsGenStart, + isSlide, isGenComplete, setIsGenComplete, isEmotionSelectAble, setIsEmotionSelectAble, addMessage, - isLoading, setIsLoading, userImage, } = useChatPage(); @@ -50,10 +50,9 @@ const ChatPage: React.FC = () => { if (curChatId !== null) { const emotionData = await API_DIARY.getEmotions(curChatId); setEmotionData(emotionData); - console.log("gen complete"); } } catch (error) { - console.log("Error gen"); + console.error("Error get emotions: ", error); } setIsGenComplete(true); }; @@ -139,6 +138,14 @@ const ChatPage: React.FC = () => { } }, [isEmotionSelectAble]); + useEffect(() => { + if (userImage && isGenComplete && isSlide) { + setIsEmotionSelectAble(true); + } else { + setIsEmotionSelectAble(false); + } + }, [userImage, isGenComplete, isSlide]); + return (
diff --git a/src/components/Chat/ChatPageContext.tsx b/src/components/Chat/ChatPageContext.tsx index 6905ff96..ecaf74e3 100644 --- a/src/components/Chat/ChatPageContext.tsx +++ b/src/components/Chat/ChatPageContext.tsx @@ -17,6 +17,8 @@ interface ChatPageContextType { setIsGenAble: React.Dispatch>; isGenStart: boolean; setIsGenStart: React.Dispatch>; + isSlide: boolean; + setIsSlide: React.Dispatch>; isGenComplete: boolean; setIsGenComplete: React.Dispatch>; isEmotionSelectAble: boolean; @@ -57,6 +59,7 @@ export const ChatPageProvider: React.FC = ({ const [isGenAble, setIsGenAble] = useState(false); const [isGenStart, setIsGenStart] = useState(false); const [isGenComplete, setIsGenComplete] = useState(false); + const [isSlide, setIsSlide] = useState(false); const [isEmotionSelectAble, setIsEmotionSelectAble] = useState(false); const [userImage, setUserImage] = useState(null); const [isLoading, setIsLoading] = useState(false); @@ -87,14 +90,6 @@ export const ChatPageProvider: React.FC = ({ } }; - useEffect(() => { - if (userImage && isGenComplete) { - setIsEmotionSelectAble(true); - } else { - setIsEmotionSelectAble(false); - } - }, [userImage, isGenComplete]); - return ( = ({ setIsGenAble, isGenStart, setIsGenStart, + isSlide, + setIsSlide, isGenComplete, setIsGenComplete, isEmotionSelectAble, diff --git a/src/components/Chat/SlideArea.tsx b/src/components/Chat/SlideArea.tsx index 0a5d95c4..994ef808 100644 --- a/src/components/Chat/SlideArea.tsx +++ b/src/components/Chat/SlideArea.tsx @@ -7,7 +7,8 @@ const SlideArea: React.FC = () => { const sliderRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const [sliderPos, setSliderPos] = useState(0); - const { curChatId, userImage, isLoading, setIsLoading } = useChatPage(); + const { curChatId, userImage, setIsSlide, isLoading, setIsLoading } = + useChatPage(); const emojis = [ "🙂", @@ -79,6 +80,8 @@ const SlideArea: React.FC = () => { await API_CHAT.sendImage(curChatId!, userImage!); } catch (error) { console.error("Error sending image:", error); + } finally { + setIsSlide(true); } } else { setSliderPos(0); From e5e74c9c1deb3e5f8a5bf9f6940ff99055da5aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 03:36:33 +0900 Subject: [PATCH 05/11] Update CalendarPage.tsx : Add emotion labels --- src/components/Calendar/CalendarPage.tsx | 77 +++++++++++++++++++++++- 1 file changed, 75 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx index 6b7e1672..a1c71049 100644 --- a/src/components/Calendar/CalendarPage.tsx +++ b/src/components/Calendar/CalendarPage.tsx @@ -10,8 +10,12 @@ const CalendarPage: React.FC = () => { const [diaryDates, setDiaryDates] = useState([]); const [curDiary, setCurDiary] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [selectedEmotionId, setSelectedEmotionId] = useState( + null + ); const containerRef = useRef(null); + const descriptionRef = useRef(null); useEffect(() => { const loadInitialData = async () => { @@ -77,8 +81,32 @@ const CalendarPage: React.FC = () => { behavior: "smooth", }); } + setSelectedEmotionId(null); }, [date]); + useEffect(() => { + if ( + selectedEmotionId !== null && + descriptionRef.current && + containerRef.current + ) { + const descriptionPosition = descriptionRef.current.offsetTop; + const containerScrollPosition = containerRef.current.scrollTop; + + const extraScroll = 50; + + containerRef.current.scrollTo({ + top: + descriptionPosition - containerScrollPosition + extraScroll, + behavior: "smooth", + }); + } + }, [selectedEmotionId]); + + const handleEmotionClick = (id: number) => { + setSelectedEmotionId((prevId) => (prevId === id ? null : id)); + }; + return (
@@ -92,11 +120,56 @@ const CalendarPage: React.FC = () => {
{!isLoading && } - {!isLoading && } +
+ {curDiary && + curDiary.data.emotionList.map((emotion, index) => { + const isSelected = selectedEmotionId === emotion.id; + return ( +
+
+ handleEmotionClick(emotion.id) + } + className={`flex flex-row space-x-2 mr-2 mb-2 justify-start items-center py-0.5 pl-1 pr-2.5 bg-white text-black-aneuk border rounded-full cursor-pointer ${ + isSelected + ? "font-gowun-bold shadow-custom-strong h-12 text-2xl" + : "font-gowun-regular text-xl" + } transition-all duration-300 ease-in-out`} + > +
+
{emotion.title}
+
+ + {isSelected && ( +
+
+ {emotion.description} +
+
+ "{emotion.example}" +
+
+ )} +
+ ); + })} +
); From e7c8845841b99e15f3b3622f65a210445dad1e96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 03:57:18 +0900 Subject: [PATCH 06/11] Update tailwind.config.js : Extend emotion color --- tailwind.config.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 8c872a9d..96ef0ffe 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,17 @@ module.exports = { "white-aneuk": "#F7F4EE", "text-aneuk": "#2c3e50", "gray-aneuk": "#cccccc", + horror: "#AD89F0", + joy: "#F4ABE2", + surprise: "#F6B567", + anger: "#CD5D5D", + sadness: "#7D8FF1", + neutral: "#B0E0E6", + boredom: "#B08AF1", + pain: "#F08080", + disgust: "#6B8E23", + interest: "#FFEF93", + other: "#808080", }, keyframes: { "slide-up": { From 6de602092b0017aa2ad7c81d9c495045764c044b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 03:58:12 +0900 Subject: [PATCH 07/11] Added GetEmotionColor.tsx : Add function for get emotion color --- src/utils/GetEmotionColor.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/utils/GetEmotionColor.tsx diff --git a/src/utils/GetEmotionColor.tsx b/src/utils/GetEmotionColor.tsx new file mode 100644 index 00000000..4fba53c0 --- /dev/null +++ b/src/utils/GetEmotionColor.tsx @@ -0,0 +1,17 @@ +export function getEmotionColor(category: string): string { + const emotionColors: { [key: string]: string } = { + 공포: "bg-horror", + 기쁨: "bg-joy", + 놀람: "bg-surprise", + 분노: "bg-anger", + 슬픔: "bg-sadness", + 중성: "bg-neutral", + 지루: "bg-boredom", + 통증: "bg-pain", + 혐오: "bg-disgust", + 흥미: "bg-interest", + 기타: "bg-other", + }; + + return emotionColors[category] || "bg-gray-500"; +} From 00b49d9cbd7e2cbc6b36bf0543e1aec325991915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 03:58:37 +0900 Subject: [PATCH 08/11] Update CalendarPage.tsx : Apply emotion color to emotion label --- src/components/Calendar/CalendarPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx index a1c71049..d24d7c12 100644 --- a/src/components/Calendar/CalendarPage.tsx +++ b/src/components/Calendar/CalendarPage.tsx @@ -4,6 +4,7 @@ import Card from "./Card"; import { API_CALENDAR } from "../../api/calendar"; import { formatToYYYYMM, formatToYYYYMMDD } from "../../utils/TimeFormatter"; import { FinalDiary } from "../../api/diary"; +import { getEmotionColor } from "../../utils/GetEmotionColor"; const CalendarPage: React.FC = () => { const [date, setDate] = useState(new Date()); @@ -144,7 +145,9 @@ const CalendarPage: React.FC = () => { } transition-all duration-300 ease-in-out`} >
Date: Thu, 5 Dec 2024 04:10:58 +0900 Subject: [PATCH 09/11] Update Card.tsx : Add emotion caregory color --- src/components/Calendar/Card.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar/Card.tsx b/src/components/Calendar/Card.tsx index b44b8499..3be964c1 100644 --- a/src/components/Calendar/Card.tsx +++ b/src/components/Calendar/Card.tsx @@ -3,6 +3,7 @@ import { FinalDiary } from "../../api/diary"; import { format } from "date-fns"; import { ko } from "date-fns/locale"; import sampleImg from "/Users/minsik/Documents/Projects/A-Neuk-FE/src/assets/images/odocat.png"; +import { getEmotionColor } from "../../utils/GetEmotionColor"; interface CardProps { curDiary: FinalDiary | null; @@ -19,6 +20,15 @@ const Card: React.FC = ({ curDiary }) => { setIsFlipped(false); }, [curDiary]); + const categories = curDiary?.data.emotionList.map( + (emotion) => emotion.category + ); + const uniqueCategories = categories + ? categories.filter( + (value, index, self) => self.indexOf(value) === index + ) + : []; + if (curDiary === null) { return (
@@ -47,8 +57,14 @@ const Card: React.FC = ({ curDiary }) => { className="flex flex-col justify-center items-center w-[100%] h-[80%] rounded-[24px] object-cover" />
-
-
+ {uniqueCategories.map((category, index) => ( +
+ ))}
Date: Thu, 5 Dec 2024 04:52:41 +0900 Subject: [PATCH 10/11] Update Card.tsx : isFlipped to props --- src/components/Calendar/Card.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Calendar/Card.tsx b/src/components/Calendar/Card.tsx index 3be964c1..d20149ef 100644 --- a/src/components/Calendar/Card.tsx +++ b/src/components/Calendar/Card.tsx @@ -7,11 +7,11 @@ import { getEmotionColor } from "../../utils/GetEmotionColor"; interface CardProps { curDiary: FinalDiary | null; + isFlipped: boolean; + setIsFlipped: React.Dispatch>; } -const Card: React.FC = ({ curDiary }) => { - const [isFlipped, setIsFlipped] = useState(false); - +const Card: React.FC = ({ curDiary, isFlipped, setIsFlipped }) => { const handleCardClick = () => { setIsFlipped(!isFlipped); }; From 673d7628ffc7cc1c505f43d73694382c9ade9bbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= Date: Thu, 5 Dec 2024 04:53:58 +0900 Subject: [PATCH 11/11] =?UTF-8?q?Update=20Calendar.tsx=20,=20HomePage.tsx:?= =?UTF-8?q?=20Card=20=EC=88=98=EC=A0=95=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Calendar/CalendarPage.tsx | 103 +++++++++++--------- src/components/Home/HomePage.tsx | 117 ++++++++++++++++++++++- 2 files changed, 173 insertions(+), 47 deletions(-) diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx index d24d7c12..b9b61731 100644 --- a/src/components/Calendar/CalendarPage.tsx +++ b/src/components/Calendar/CalendarPage.tsx @@ -11,6 +11,7 @@ const CalendarPage: React.FC = () => { const [diaryDates, setDiaryDates] = useState([]); const [curDiary, setCurDiary] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [isFlipped, setIsFlipped] = useState(false); const [selectedEmotionId, setSelectedEmotionId] = useState( null ); @@ -85,6 +86,10 @@ const CalendarPage: React.FC = () => { setSelectedEmotionId(null); }, [date]); + useEffect(() => { + setSelectedEmotionId(null); + }, [isFlipped]); + useEffect(() => { if ( selectedEmotionId !== null && @@ -123,56 +128,66 @@ const CalendarPage: React.FC = () => { ref={containerRef} className="flex flex-col flex-grow justify-start items-center bg-white-aneuk pb-24 overflow-y-auto" > - {!isLoading && } - -
- {curDiary && - curDiary.data.emotionList.map((emotion, index) => { - const isSelected = selectedEmotionId === emotion.id; - return ( -
+ {!isLoading && ( + + )} + {isFlipped && ( +
+ {curDiary && + curDiary.data.emotionList.map((emotion) => { + const isSelected = + selectedEmotionId === emotion.id; + return (
- handleEmotionClick(emotion.id) - } - className={`flex flex-row space-x-2 mr-2 mb-2 justify-start items-center py-0.5 pl-1 pr-2.5 bg-white text-black-aneuk border rounded-full cursor-pointer ${ - isSelected - ? "font-gowun-bold shadow-custom-strong h-12 text-2xl" - : "font-gowun-regular text-xl" - } transition-all duration-300 ease-in-out`} + key={emotion.id} + className={`flex flex-col justify-start items-start ${ + isSelected && "w-full" + }`} >
+ handleEmotionClick(emotion.id) + } + className={`flex flex-row space-x-2 mr-2 mb-2 justify-start items-center py-0.5 pl-1 pr-2.5 bg-white text-black-aneuk border rounded-full cursor-pointer ${ isSelected - ? "w-9 h-9" - : "w-6 h-6" - }`} - /> -
{emotion.title}
-
- - {isSelected && ( -
-
- {emotion.description} -
-
- "{emotion.example}" -
+
+
{emotion.title}
- )} -
- ); - })} -
+ + {isSelected && ( +
+
+ {emotion.description} +
+
+ "{emotion.example}" +
+
+ )} +
+ ); + })} +
+ )}
); diff --git a/src/components/Home/HomePage.tsx b/src/components/Home/HomePage.tsx index b3da15c0..51dcd039 100644 --- a/src/components/Home/HomePage.tsx +++ b/src/components/Home/HomePage.tsx @@ -1,26 +1,137 @@ -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import apiClient from "../../api"; import { FinalDiary } from "../../api/diary"; import Card from "../Calendar/Card"; +import { getEmotionColor } from "../../utils/GetEmotionColor"; const HomePage: React.FC = () => { const [randomDiary, setRandomDiary] = useState(null); + const [date, setDate] = useState(new Date()); + const [isLoading, setIsLoading] = useState(true); + const [isFlipped, setIsFlipped] = useState(false); + const [selectedEmotionId, setSelectedEmotionId] = useState( + null + ); + + const containerRef = useRef(null); + const descriptionRef = useRef(null); + const handleRandomButton = () => { const getRandomDiary = async () => { try { const response = await apiClient.get("/home/random"); console.log(response); setRandomDiary(response.data); + setIsLoading(false); } catch (error: any) { console.error("Error getting random diary:", error.message); + setIsLoading(false); throw error; } }; getRandomDiary(); }; + + useEffect(() => { + if (containerRef.current) { + containerRef.current.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + setSelectedEmotionId(null); + }, [date]); + + useEffect(() => { + console.log(selectedEmotionId); + setSelectedEmotionId(null); + }, [isFlipped]); + + useEffect(() => { + if ( + selectedEmotionId !== null && + descriptionRef.current && + containerRef.current + ) { + const descriptionPosition = descriptionRef.current.offsetTop; + const containerScrollPosition = containerRef.current.scrollTop; + + const extraScroll = 50; + + containerRef.current.scrollTo({ + top: + descriptionPosition - containerScrollPosition + extraScroll, + behavior: "smooth", + }); + } + }, [selectedEmotionId]); + + const handleEmotionClick = (id: number) => { + setSelectedEmotionId((prevId) => (prevId === id ? null : id)); + }; + return ( -
- +
+ {!isLoading && ( + + )} + {isFlipped && ( +
+ {randomDiary && + randomDiary.data.emotionList.map((emotion, index) => { + const isSelected = selectedEmotionId === emotion.id; + return ( +
+
+ handleEmotionClick(emotion.id) + } + className={`flex flex-row space-x-2 mr-2 mb-2 justify-start items-center py-0.5 pl-1 pr-2.5 bg-white text-black-aneuk border rounded-full cursor-pointer ${ + isSelected + ? "font-gowun-bold shadow-custom-strong h-12 text-2xl" + : "font-gowun-regular text-xl" + } transition-all duration-300 ease-in-out`} + > +
+
{emotion.title}
+
+ + {isSelected && ( +
+
+ {emotion.description} +
+
+ "{emotion.example}" +
+
+ )} +
+ ); + })} +
+ )}