Merge pull request #21 from NewMillenniumWorkout/dev/CalendarPage

[DEV] CalendarPage UI 개선, 코드 정리
NewMillenniumWorkout · Dec 5, 2024 · 5a92d3a · 5a92d3a
2 parents 7913e7c + 3f00c30
commit 5a92d3a
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 57 deletions.
diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx
@@ -4,7 +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";
+import { EmotionLabels } from "./EmotionLabels";
 
 const CalendarPage: React.FC = () => {
 	const [date, setDate] = useState<Date | undefined>(new Date());
@@ -109,10 +109,6 @@ const CalendarPage: React.FC = () => {
 		}
 	}, [selectedEmotionId]);
 
-	const handleEmotionClick = (id: number) => {
-		setSelectedEmotionId((prevId) => (prevId === id ? null : id));
-	};
-
 	return (
 		<div className="flex flex-col w-full h-full bg-white-aneuk">
 			<div className="flex-shrink-0 w-full px-4 pt-4 pb-6 z-20 rounded-b-xl bg-white shadow-md">
@@ -136,57 +132,12 @@ const CalendarPage: React.FC = () => {
 					/>
 				)}
 				{isFlipped && (
-					<div className="flex flex-row flex-wrap justify-start items-start px-11 pt-6 w-full duration-500 ease-in-out animate-slide-up">
-						{curDiary &&
-							curDiary.data.emotionList.map((emotion) => {
-								const isSelected =
-									selectedEmotionId === emotion.id;
-								return (
-									<div
-										key={emotion.id}
-										className={`flex flex-col justify-start items-start ${
-											isSelected && "w-full"
-										}`}
-									>
-										<div
-											onClick={() =>
-												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`}
-										>
-											<div
-												className={`${getEmotionColor(
-													emotion.category
-												)} rounded-full ${
-													isSelected
-														? "w-9 h-9"
-														: "w-6 h-6"
-												}`}
-											/>
-											<div>{emotion.title}</div>
-										</div>
-
-										{isSelected && (
-											<div
-												ref={descriptionRef}
-												className="flex flex-col justify-center items-center w-full mt-2 mb-4 text-black-aneuk"
-											>
-												<div className="font-pretendard-regular text-lg text-black-aneuk mb-2 text-center">
-													{emotion.description}
-												</div>
-												<div className="font-pretendard text-base text-zinc-400 text-center">
-													"{emotion.example}"
-												</div>
-											</div>
-										)}
-									</div>
-								);
-							})}
-					</div>
+					<EmotionLabels
+						curDiary={curDiary}
+						selectedEmotionId={selectedEmotionId}
+						setSelectedEmotionId={setSelectedEmotionId}
+						descriptionRef={descriptionRef}
+					/>
 				)}
 			</div>
 		</div>

diff --git a/src/components/Calendar/Card.tsx b/src/components/Calendar/Card.tsx
@@ -41,7 +41,7 @@ const Card: React.FC<CardProps> = ({ curDiary, isFlipped, setIsFlipped }) => {
 
 	return (
 		<div
-			className="group flex flex-col w-[90%] aspect-[2/2.8] mt-[5%] [perspective:1000px]"
+			className="group flex flex-col w-[90%] aspect-[2/2.8] mt-[5%] [perspective:1000px] animate-slide-up cursor-pointer"
 			onClick={handleCardClick}
 		>
 			<div

diff --git a/src/components/Calendar/EmotionLabels.tsx b/src/components/Calendar/EmotionLabels.tsx
@@ -0,0 +1,69 @@
+import { FinalDiary } from "../../api/diary";
+import { getEmotionColor } from "../../utils/GetEmotionColor";
+
+interface EmotionLabelsProps {
+	curDiary: FinalDiary | null;
+	selectedEmotionId: number | null;
+	setSelectedEmotionId: React.Dispatch<React.SetStateAction<number | null>>;
+	descriptionRef: React.RefObject<HTMLDivElement>;
+}
+
+export const EmotionLabels: React.FC<EmotionLabelsProps> = ({
+	curDiary,
+	selectedEmotionId,
+	setSelectedEmotionId,
+	descriptionRef,
+}) => {
+	const handleEmotionClick = (id: number) => {
+		setSelectedEmotionId((prevId) => (prevId === id ? null : id));
+	};
+
+	return (
+		<div className="flex flex-row flex-wrap justify-start items-start px-11 pt-6 w-full duration-500 ease-in-out animate-slide-up">
+			{curDiary &&
+				curDiary.data.emotionList.map((emotion) => {
+					const isSelected = selectedEmotionId === emotion.id;
+					return (
+						<div
+							key={emotion.id}
+							className={`flex flex-col justify-start items-start ${
+								isSelected && "w-full"
+							}`}
+						>
+							<div
+								onClick={() => 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`}
+							>
+								<div
+									className={`${getEmotionColor(
+										emotion.category
+									)} rounded-full ${
+										isSelected ? "w-9 h-9" : "w-6 h-6"
+									}`}
+								/>
+								<div>{emotion.title}</div>
+							</div>
+
+							{isSelected && (
+								<div
+									ref={descriptionRef}
+									className="flex flex-col justify-center items-center w-full mt-2 mb-4 text-black-aneuk"
+								>
+									<div className="font-pretendard-regular text-lg text-black-aneuk mb-2 text-center">
+										{emotion.description}
+									</div>
+									<div className="font-pretendard text-base text-zinc-400 text-center">
+										"{emotion.example}"
+									</div>
+								</div>
+							)}
+						</div>
+					);
+				})}
+		</div>
+	);
+};
diff --git a/src/components/EmotionSelect/EmotionSelectPage.tsx b/src/components/EmotionSelect/EmotionSelectPage.tsx
@@ -51,6 +51,15 @@ const EmotionSelectPage: React.FC = () => {
 	const handelGen = async () => {
 		try {
 			if (emotionData !== null) {
+				try {
+					await API_DIARY.sendSelectedEmotion(
+						emotionData.data.diary_id,
+						curIndex,
+						selectedEmotions
+					);
+				} catch (error: any) {
+					console.error("Error handleSendEmotions: ", error);
+				}
 				await API_DIARY.genFinalDiary(emotionData.data.diary_id);
 			}
 		} catch (error) {