Merge pull request #336 from boostcampwm2023/feature/star

[FE] 별 생성 위치 조정, 별 생성 삭제 애니메이션

packages/client/src/entities/posts/ui/Post.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Html } from '@react-three/drei';
-import { ThreeEvent } from '@react-three/fiber';
+import { ThreeEvent, useFrame } from '@react-three/fiber';
 import { Star } from 'features';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -12,14 +12,24 @@ interface PropsType {
 	data: StarType;
 	postId: number;
 	title: string;
+	state?: 'created' | 'normal' | 'deleted';
 }
 
-export default function Post({ data, postId, title }: PropsType) {
+export default function Post({
+	data,
+	postId,
+	title,
+	state = 'normal',
+}: PropsType) {
 	const { targetView, setTargetView } = useCameraStore();
 	const { setView } = useViewStore();
 
 	const meshRef = useRef<THREE.Mesh>(null!);
 	const [isHovered, setIsHovered] = useState(false);
+	const [starState, setStarState] = useState<'created' | 'normal' | 'deleted'>(
+		'normal',
+	);
+	const [size, setSize] = useState(0);
 
 	const navigate = useNavigate();
 	const location = useLocation();
@@ -30,6 +40,29 @@ export default function Post({ data, postId, title }: PropsType) {
 		if (id && Number(id) === postId) setTargetView(meshRef.current);
 	}, [id]);
 
+	useEffect(() => {
+		if (state === 'created') {
+			setStarState('created');
+			setSize(0);
+		} else if (state === 'deleted') {
+			setStarState('deleted');
+			setSize(data.size);
+		}
+	}, [state]);
+
+	useFrame((_, delta) => {
+		if (starState === 'created') {
+			if (size + delta * 300 < data.size) setSize(size + delta * 300);
+			else {
+				setSize(data.size);
+				setStarState('normal');
+			}
+		} else if (starState === 'deleted') {
+			if (size - delta * 300 > 0) setSize(size - delta * 300);
+			else setSize(0);
+		}
+	});
+
 	const handleMeshClick = (e: ThreeEvent<MouseEvent>) => {
 		e.stopPropagation();
 
@@ -65,7 +98,7 @@ export default function Post({ data, postId, title }: PropsType) {
 			position={
 				new THREE.Vector3(data.position.x, data.position.y, data.position.z)
 			}
-			size={data.size}
+			size={size}
 			color={data.color}
 			onClick={handleMeshClick}
 			ref={meshRef}

packages/client/src/entities/posts/ui/Posts.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { getPostListByNickName } from 'shared/apis';
 import { useCheckNickName } from 'shared/hooks';
 import { StarData } from 'shared/lib';
@@ -7,7 +7,8 @@ import { getMyPost } from '../apis/getMyPost';
 import Post from './Post';
 
 export default function Posts() {
-	const [postData, setPostData] = useState<StarData[]>();
+	const [postData, setPostData] = useState<StarData[]>([]);
+	const [prevData, setPrevData] = useState<StarData[]>([]);
 	const { view } = useViewStore();
 
 	const { page, nickName } = useCheckNickName();
@@ -23,17 +24,39 @@ export default function Posts() {
 		}
 	}, [view, nickName]);
 
-	return (
-		<group>
-			{postData &&
-				postData.map((data, index) => (
+	const PostList = useMemo(() => {
+		const prevId = prevData.map((data) => data.id);
+		const currentId = postData.map((data) => data.id);
+
+		const list = postData.map((data) => {
+			return (
+				<Post
+					key={data.id}
+					data={data.star}
+					postId={data.id}
+					title={data.title}
+					state={prevId.includes(data.id) ? 'normal' : 'created'}
+				/>
+			);
+		});
+		prevData
+			.filter((data) => !currentId.includes(data.id))
+			.forEach((data) =>
+				list.push(
 					<Post
-						key={index}
+						key={data.id}
 						data={data.star}
 						postId={data.id}
 						title={data.title}
-					/>
-				))}
-		</group>
-	);
+						state="deleted"
+					/>,
+				),
+			);
+
+		setPrevData([...postData]);
+
+		return list;
+	}, [postData]);
+
+	return <group>{PostList}</group>;
 }

packages/client/src/widgets/starCustomModal/lib/generateStarPosition.ts

@@ -12,9 +12,12 @@ export const generateStarPosition = async (
 	existingStars: StarData[],
 	size: number,
 ): Promise<StarPosition> => {
-	const x = getRandomFloat(-ARMS_X_DIST * 2, ARMS_X_DIST * 2);
+	const r = getRandomFloat(0, ARMS_X_DIST * 2);
+	const theta = getRandomFloat(0, Math.PI * 2);
+
+	const x = r * Math.cos(theta);
 	const y = getRandomFloat(-GALAXY_THICKNESS, GALAXY_THICKNESS);
-	const z = getRandomFloat(-ARMS_X_DIST * 2, ARMS_X_DIST * 2);
+	const z = r * Math.sin(theta);
 
 	const isOverlap = existingStars.some(({ star }) => {
 		const dist = Math.sqrt(