Merge pull request #24 from NewMillenniumWorkout/dev/HomePage

[DEV] HomePage 구성 완료, 로고 이미지 적용, 스크롤 관련 버그들 수정
NewMillenniumWorkout · Dec 5, 2024 · 286310a · 286310a
2 parents 2f8d438 + 5187433
commit 286310a
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 94 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<title>React App</title>
+		<title>아늑</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/images/logo_bg.png b/src/assets/images/logo_bg.png
diff --git a/src/assets/images/logo_close.png b/src/assets/images/logo_close.png
diff --git a/src/assets/images/logo_outlined.png b/src/assets/images/logo_outlined.png
diff --git a/src/assets/images/logo_shadow.png b/src/assets/images/logo_shadow.png
diff --git a/src/assets/images/odocat.png b/src/assets/images/odocat.png
diff --git a/src/components/Calendar/CalendarPage.tsx b/src/components/Calendar/CalendarPage.tsx
@@ -122,7 +122,7 @@ const CalendarPage: React.FC = () => {
 			</div>
 			<div
 				ref={containerRef}
-				className="flex flex-col flex-grow min-h-0 justify-start items-center bg-white-aneuk pb-24 overflow-y-auto"
+				className="flex flex-col flex-grow min-h-0 justify-start items-center bg-white-aneuk pb-40 overflow-y-auto"
 			>
 				{!isLoading && (
 					<Card

diff --git a/src/components/Chat/ChatBubble.tsx b/src/components/Chat/ChatBubble.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { formatTime } from "../../utils/TimeFormatter";
-import profileImg from "../../assets/images/aneuk_profile.png";
+import profileImg from "../../assets/images/logo.png";
 
 interface ChatBubbleProps {
 	content: string;
@@ -24,7 +24,7 @@ const ChatBubble: React.FC<ChatBubbleProps> = ({
 				<img
 					src={profileImg}
 					alt="Profile"
-					className="self-start w-9 h-9 mr-1 rounded-[16px]"
+					className="self-start w-12 mr-0.5 object-contain"
 				></img>
 			)}
 			{sender === "MEMBER" && (
@@ -34,7 +34,7 @@ const ChatBubble: React.FC<ChatBubbleProps> = ({
 			)}
 			<div className="flex flex-col">
 				{sender === "ASSISTANT" && (
-					<div className="ml-1.5 mb-1 mt-0.5 text-black-aneuk text-sm">
+					<div className="ml-1.5 mb-1 mt-1.5 text-black-aneuk text-sm">
 						아늑
 					</div>
 				)}

diff --git a/src/components/EmotionSelect/EmotionSelectPage.tsx b/src/components/EmotionSelect/EmotionSelectPage.tsx
@@ -49,6 +49,7 @@ const EmotionSelectPage: React.FC = () => {
 	};
 
 	const handelGen = async () => {
+		setIsLoading(true);
 		try {
 			if (emotionData !== null) {
 				try {
@@ -67,6 +68,7 @@ const EmotionSelectPage: React.FC = () => {
 		} catch (error) {
 			console.error("Error fetching new content:", error);
 		} finally {
+			setIsLoading(false);
 			navigate("/calendar");
 		}
 	};

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
@@ -1,21 +1,28 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { IconProvider } from "../utils/IconProvider";
+import logoImg from "../assets/images/logo_shadow.png";
 
 type FloatingActionButtonProps = {};
 
 const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({}) => {
 	const navigate = useNavigate();
+	const [isFloating, setIsFloating] = useState(false);
+
+	useEffect(() => {
+		const timer = setTimeout(() => setIsFloating(true), 500);
+		return () => clearTimeout(timer);
+	}, []);
 	return (
-		<button
+		<img
+			src={logoImg}
 			onClick={() => {
 				navigate("/chat");
 			}}
-			className="flex justify-center items-center w-14 bg-white text-black-aneuk rounded-full shadow-lg transition duration-300 ease-in-out absolute bottom-20 right-4"
-			style={{ aspectRatio: "1 / 1" }}
-		>
-			<IconProvider.FileEditIcon className="w-[28px] h-[28px]" />
-		</button>
+			className={`w-24 absolute bottom-20 right-4 object-contain animate-floating cursor-pointer ${
+				isFloating ? "animate-floating" : "animate-slide-up"
+			}`}
+		></img>
 	);
 };
 

diff --git a/src/components/Home/HomeCard.tsx b/src/components/Home/HomeCard.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+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 HomeCardProps {
+	curDiary: FinalDiary | null;
+	isFlipped: boolean;
+	isFlipping: boolean;
+	setIsFlipped: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const HomeCard: React.FC<HomeCardProps> = ({
+	curDiary,
+	isFlipped,
+	isFlipping,
+	setIsFlipped,
+}) => {
+	const handleCardClick = () => {
+		setIsFlipped(!isFlipped);
+	};
+
+	useEffect(() => {
+		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 (
+			<div className="flex flex-1 justify-center items-center">
+				<div className="font-pretendard-regular text-xl text-black-aneuk">
+					이날은 일기가 없어요~
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={`group flex flex-col w-[90%] aspect-[2/2.8] mt-[5%] [perspective:1000px] animate-flip cursor-pointer`}
+			onClick={handleCardClick}
+		>
+			<div
+				className={`relative h-full w-full rounded-[32px] shadow-custom-strong transition-all duration-500 [transform-style:preserve-3d] 
+                    ${isFlipped ? "[transform:rotateY(-180deg)]" : ""}`}
+			>
+				<div
+					className={`absolute inset-0 flex flex-col w-full h-full p-2 bg-white rounded-[32px] [backface-visibility:hidden]`}
+				>
+					<img
+						src={curDiary.data.imageUrl}
+						alt="Diary Image"
+						className="flex flex-col justify-center items-center w-[100%] h-[80%] rounded-[24px] object-cover"
+					/>
+					<div className="flex flex-row flex-1 justify-start items-start p-2 space-x-2">
+						{uniqueCategories.map((category, index) => (
+							<div
+								key={index}
+								className={`aspect-square w-6 rounded-full ${getEmotionColor(
+									category
+								)}`}
+							/>
+						))}
+					</div>
+				</div>
+				<div
+					className={`absolute inset-0 flex flex-col justify-start items-start w-full h-full p-7 bg-white rounded-[32px] [transform:rotateY(-180deg)] [backface-visibility:hidden]`}
+				>
+					<div className="font-gowun-bold text-lg text-black-aneuk mb-2">
+						{format(
+							new Date(curDiary.data.date),
+							"yyyy.MM.dd EEEE",
+							{ locale: ko }
+						)}
+					</div>
+					<div className="font-gowun-regular text-black-aneuk text-base text-start overflow-y-auto">
+						{curDiary.data.content}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default HomeCard;
diff --git a/src/components/Home/HomePage.tsx b/src/components/Home/HomePage.tsx
@@ -2,13 +2,17 @@ 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";
+import HomeCard from "./HomeCard";
+import { EmotionLabels } from "../Calendar/EmotionLabels";
+import logoImg from "../../assets/images/logo.png";
+import logoClickedImg from "../../assets/images/logo_close.png";
 
 const HomePage: React.FC = () => {
 	const [randomDiary, setRandomDiary] = useState<FinalDiary | null>(null);
-	const [date, setDate] = useState<Date | undefined>(new Date());
 	const [isLoading, setIsLoading] = useState(true);
 	const [isFlipped, setIsFlipped] = useState(false);
+	const [isFlipping, setIsFlipping] = useState(false);
+	const [isImageClicked, setIsImageClicked] = useState(false);
 	const [selectedEmotionId, setSelectedEmotionId] = useState<number | null>(
 		null
 	);
@@ -19,31 +23,27 @@ const HomePage: React.FC = () => {
 	const handleRandomButton = () => {
 		const getRandomDiary = async () => {
 			try {
+				setIsFlipping(true);
 				const response = await apiClient.get("/home/random");
-				console.log(response);
-				setRandomDiary(response.data);
+
 				setIsLoading(false);
+				setIsFlipped(false);
+
+				setIsFlipping(false);
+				setSelectedEmotionId(null);
+				setRandomDiary(response.data);
 			} catch (error: any) {
 				console.error("Error getting random diary:", error.message);
 				setIsLoading(false);
+				setIsFlipping(false);
 				throw error;
+			} finally {
 			}
 		};
 		getRandomDiary();
 	};
 
 	useEffect(() => {
-		if (containerRef.current) {
-			containerRef.current.scrollTo({
-				top: 0,
-				behavior: "smooth",
-			});
-		}
-		setSelectedEmotionId(null);
-	}, [date]);
-
-	useEffect(() => {
-		console.log(selectedEmotionId);
 		setSelectedEmotionId(null);
 	}, [isFlipped]);
 
@@ -66,78 +66,58 @@ const HomePage: React.FC = () => {
 		}
 	}, [selectedEmotionId]);
 
-	const handleEmotionClick = (id: number) => {
-		setSelectedEmotionId((prevId) => (prevId === id ? null : id));
+	const handleMouseDown = () => {
+		setIsImageClicked(true);
+	};
+
+	const handleMouseUp = () => {
+		setIsImageClicked(false);
+		handleRandomButton();
 	};
 
 	return (
 		<div
 			ref={containerRef}
-			className="flex flex-col space-y-6 flex-grow w-full h-full justify-center items-center bg-white-aneuk pb-24 overflow-y-auto"
+			className="flex flex-col justify-start items-center w-full h-full overflow-y-auto bg-white-aneuk"
 		>
-			{!isLoading && (
-				<Card
-					curDiary={randomDiary}
-					isFlipped={isFlipped}
-					setIsFlipped={setIsFlipped}
-				/>
-			)}
-			{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">
-					{randomDiary &&
-						randomDiary.data.emotionList.map((emotion, index) => {
-							const isSelected = selectedEmotionId === emotion.id;
-							return (
-								<div
-									key={emotion.id}
-									className="flex flex-col justify-start items-start"
-								>
-									<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>
-			)}
-			<button
-				className="bg-black-aneuk text-white font-pretendard-bold p-5 rounded-2xl shadow-xl"
-				onClick={handleRandomButton}
+			<div
+				className={`flex flex-col w-full h-full ${
+					randomDiary ? "justify-start" : "justify-center"
+				} items-center bg-white-aneuk mt-8 mb-80`}
 			>
-				행복버튼
-			</button>
+				{!randomDiary && (
+					<div className="font-pretendard-bold text-2xl text-black-aneuk mb-8">
+						오늘의 일기를 뽑아보세요
+					</div>
+				)}
+				{!isLoading && (
+					<HomeCard
+						key={randomDiary?.data.diary_id || Math.random()}
+						curDiary={randomDiary}
+						isFlipped={isFlipped}
+						isFlipping={isFlipping}
+						setIsFlipped={setIsFlipped}
+					/>
+				)}
+				{isFlipped && (
+					<EmotionLabels
+						curDiary={randomDiary}
+						selectedEmotionId={selectedEmotionId}
+						setSelectedEmotionId={setSelectedEmotionId}
+						descriptionRef={descriptionRef}
+					/>
+				)}
+				{!isFlipped && (
+					<img
+						src={isImageClicked ? logoClickedImg : logoImg}
+						onMouseDown={handleMouseDown}
+						onMouseUp={handleMouseUp}
+						className={`p-5 mt-12 object-contain cursor-pointer ${
+							isImageClicked ? "w-[28%]" : "w-[30%]"
+						}`}
+					></img>
+				)}
+			</div>
 		</div>
 	);
 };

diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx
@@ -5,6 +5,7 @@ import googleImg from "../../assets/images/google.png";
 import aneukImg from "../../assets/images/aneuk_profile.png";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import { useAuth } from "../../AuthContext";
+import logo from "../../assets/images/logo_bg.png";
 
 const LoginPage = () => {
 	const [searchParams] = useSearchParams();
@@ -23,8 +24,12 @@ const LoginPage = () => {
 
 	return (
 		<div className="absolute inset-0 z-50 bg-white flex flex-col justify-center items-center w-full h-full p-8">
-			<img src={aneukImg} className="w-[25%] rounded-full mb-2" />
-			<div className="font-pretendard-bold text-2xl mb-44">아늑</div>
+			<img
+				src={logo}
+				alt="Profile"
+				className="w-[35%] mr-0.5 object-contain rounded-[40%] mb-4"
+			></img>
+			<div className="font-pretendard-bold text-2xl mb-36">아늑</div>
 			<div className="font-pretendard-light text-gray-aneuk text-base mb-4">
 				- 로그인하여 나의 감정 알아보러 가기 -
 			</div>