Merge pull request #338 from boostcampwm2023/develop

[Deploy] Week6 Ver5 배포
boostcampwm2023 · Dec 13, 2023 · 594ff37 · 594ff37
2 parents 4e66bd8 + 35980ae
commit 594ff37
Show file tree

Hide file tree

Showing 138 changed files with 753 additions and 441 deletions.
diff --git a/README.md b/README.md
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -21,6 +21,7 @@
 	</head>
 	<body>
 		<div id="root"></div>
+		<div id="modal-root"></div>
 		<script type="module" src="./src/app/App.tsx"></script>
 	</body>
 </html>
diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
@@ -1,14 +1,14 @@
 /// <reference types="vite-plugin-svgr/client" />
+import { ThemeProvider } from '@emotion/react';
 import { router } from 'app/Router';
+import { Audio } from 'features';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import { ThemeProvider } from '@emotion/react';
-import theme from 'shared/ui/styles/theme';
+import { AxiosInterceptor } from 'shared/apis';
+import { theme } from 'shared/styles';
+import { AudioButton } from 'shared/ui';
 import './global.css';
-import { AxiosInterceptor } from 'shared/apis/core/AxiosInterceptor';
-import Audio from 'features/audio/Audio';
-import AudioButton from 'shared/ui/audioButton/AudioButton';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
 	<React.StrictMode>

diff --git a/packages/client/src/app/Router.tsx b/packages/client/src/app/Router.tsx
@@ -1,22 +1,22 @@
+import { Home, Landing } from 'pages';
 import {
 	Route,
 	createBrowserRouter,
 	createRoutesFromElements,
 } from 'react-router-dom';
-import Home from '../pages/Home/Home';
-import Landing from '../pages/Landing/Landing';
-import { WritingModal } from 'features/writingModal';
-import LoginModal from 'widgets/loginModal/LoginModal';
-import SignUpModal from 'widgets/signupModal/SignUpModal';
-import NickNameSetModal from 'widgets/nickNameSetModal/NickNameSetModal';
-import LogoAndStart from 'widgets/logoAndStart/LogoAndStart';
-import { PostModal } from 'features/postModal';
-import GalaxyCustomModal from 'widgets/galaxyCustomModal/GalaxyCustomModal';
-import StarCustomModal from 'widgets/starCustomModal/StarCustomModal';
-import ShareModal from 'widgets/shareModal/ShareModal';
-import PrivateRoute from '../shared/routes/PrivateRoute';
-import PublicRoute from 'shared/routes/PublicRoute';
-import FallBackComponent from 'widgets/error/FallBackComponent';
+import { PrivateRoute, PublicRoute } from 'shared/routes';
+import {
+	FallBackComponent,
+	GalaxyCustomModal,
+	LoginModal,
+	LogoAndStart,
+	NickNameSetModal,
+	PostModal,
+	ShareModal,
+	SignUpModal,
+	StarCustomModal,
+	WritingModal,
+} from 'widgets';
 
 export const router = createBrowserRouter(
 	createRoutesFromElements(

diff --git a/packages/client/src/assets/bgm.mp3 b/packages/client/src/assets/bgm.mp3
diff --git a/packages/client/src/assets/logo/Github.png b/packages/client/src/assets/logo/Github.png
diff --git a/packages/client/src/assets/logo/Google.png b/packages/client/src/assets/logo/Google.png
diff --git a/packages/client/src/assets/logo/Naver.png b/packages/client/src/assets/logo/Naver.png
diff --git a/packages/client/src/assets/musics/bgm.mp3 b/packages/client/src/assets/musics/bgm.mp3
diff --git a/packages/client/src/entities/index.ts b/packages/client/src/entities/index.ts
@@ -0,0 +1,2 @@
+export * from './like';
+export * from './posts';
diff --git a/packages/client/src/entities/like/Like.tsx b/packages/client/src/entities/like/Like.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useReducer, useState } from 'react';
 import { Heart } from 'lucide-react';
-import { AlertDialog, Button } from 'shared/ui';
-import theme from 'shared/ui/styles/theme';
-import instance from 'shared/apis/core/AxiosInterceptor';
+import { useEffect, useReducer, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { instance } from 'shared/apis';
+import { theme } from 'shared/styles';
+import { AlertDialog, Button } from 'shared/ui';
 
 interface PropsType {
 	postId: string;

diff --git a/packages/client/src/entities/like/index.ts b/packages/client/src/entities/like/index.ts
@@ -0,0 +1 @@
+export { default as Like } from './Like';
diff --git a/packages/client/src/entities/posts/apis/getMyPost.ts b/packages/client/src/entities/posts/apis/getMyPost.ts
@@ -1,5 +1,5 @@
-import instance from 'shared/apis/core/AxiosInterceptor';
-import { StarData } from 'shared/lib/types/star';
+import { instance } from 'shared/apis';
+import { StarData } from 'shared/lib';
 
 export const getMyPost = async (): Promise<StarData[]> => {
 	const { data } = await instance({

diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
@@ -1,28 +1,35 @@
-import { useRef } from 'react';
-import { useCameraStore } from 'shared/store/useCameraStore';
-import { ThreeEvent } from '@react-three/fiber';
-import { Html } from '@react-three/drei';
 import styled from '@emotion/styled';
-import { useViewStore } from 'shared/store/useViewStore';
-import * as THREE from 'three';
-import { StarType } from 'shared/lib/types/star';
+import { Html } from '@react-three/drei';
+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';
-import { useState, useEffect } from 'react';
-import theme from 'shared/ui/styles/theme';
-import Star from 'features/star/Star';
+import { StarType } from 'shared/lib';
+import { useCameraStore, useViewStore } from 'shared/store';
+import * as THREE from 'three';
 
 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();
@@ -33,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();
 
@@ -68,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}
@@ -92,9 +122,9 @@ const Label = styled.div`
 	width: fit-content;
 	max-width: 200px; // TODO: 수정 예정
 	text-align: center;
-	background-color: ${theme.colors.background.bdp01_80};
-	border: 1px solid ${theme.colors.stroke.sc};
-	color: ${theme.colors.text.secondary};
+	background-color: ${({ theme: { colors } }) => colors.background.bdp01_80};
+	border: ${({ theme: { colors } }) => colors.stroke.sc};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	transform: translate3d(calc(-50%), calc(-250%), 0); // TODO: 수정 예정
 
 	overflow: hidden;

diff --git a/packages/client/src/entities/posts/ui/Posts.tsx b/packages/client/src/entities/posts/ui/Posts.tsx
@@ -1,13 +1,14 @@
-import Post from './Post';
-import { useState, useEffect } from 'react';
-import { StarData } from 'shared/lib/types/star';
-import { getPostListByNickName } from 'shared/apis/star';
-import { getMyPost } from '../apis/getMyPost';
-import useCheckNickName from 'shared/hooks/useCheckNickName';
+import { useEffect, useState, useMemo } from 'react';
+import { getPostListByNickName } from 'shared/apis';
+import { useCheckNickName } from 'shared/hooks';
+import { StarData } from 'shared/lib';
 import { useViewStore } from 'shared/store';
+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>;
 }
diff --git a/packages/client/src/features/audio/Audio.tsx b/packages/client/src/features/audio/Audio.tsx
@@ -1,6 +1,6 @@
-import bgm from 'assets/bgm.mp3';
+import bgm from 'assets/musics/bgm.mp3';
 import ReactHowler from 'react-howler';
-import { usePlayingStore } from 'shared/store/useAudioStore';
+import { usePlayingStore } from 'shared/store';
 
 export default function Audio() {
 	const { playing } = usePlayingStore();

diff --git a/packages/client/src/features/audio/index.ts b/packages/client/src/features/audio/index.ts
@@ -0,0 +1 @@
+export { default as Audio } from './Audio';
diff --git a/packages/client/src/features/backgroundStars/BackgroundStars.tsx b/packages/client/src/features/backgroundStars/BackgroundStars.tsx
@@ -1,13 +1,13 @@
-import { useMemo, useRef } from 'react';
+import { DIMENSION, SPACE_MAX_SIZE, SPACE_MIN_SIZE } from '@constants';
 import { useFrame } from '@react-three/fiber';
-import { getRandomInt, getRandomFloat } from '@utils/random';
+import { getRandomFloat, getRandomInt } from '@utils/random';
+import { useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import {
 	BACKGROUND_STARS_NUM,
 	BACKGROUND_STAR_COLORS,
 	BACKGROUND_STAR_SIZE,
 } from './lib/constants';
-import { DIMENSION, SPACE_MAX_SIZE, SPACE_MIN_SIZE } from '@constants';
 
 const getBackgroundStarsInfo = () => {
 	const positions = Array.from(

diff --git a/packages/client/src/features/backgroundStars/index.ts b/packages/client/src/features/backgroundStars/index.ts
@@ -0,0 +1 @@
+export { default as BackgroundStars } from './BackgroundStars';
diff --git a/packages/client/src/features/coachMarker/CoachButton.tsx b/packages/client/src/features/coachMarker/CoachButton.tsx
@@ -1,7 +1,7 @@
+import styled from '@emotion/styled';
 import { HelpCircleIcon } from 'lucide-react';
 import { useState } from 'react';
 import CoachMarker from './CoachMarker';
-import styled from '@emotion/styled';
 
 export default function CoachButton() {
 	const [showCoach, setShowCoach] = useState(false);
@@ -14,6 +14,6 @@ export default function CoachButton() {
 }
 
 const HelpCircleButton = styled(HelpCircleIcon)`
-	color: ${({ theme }) => theme.colors.text.secondary};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	cursor: pointer;
 `;
diff --git a/packages/client/src/features/coachMarker/CoachMarker.tsx b/packages/client/src/features/coachMarker/CoachMarker.tsx
@@ -1,5 +1,5 @@
 import Joyride, { Step } from 'react-joyride';
-import { patchShareStatus } from 'shared/apis/share';
+import { patchShareStatus } from 'shared/apis';
 
 interface PropsType {
 	isFirst: boolean;

diff --git a/packages/client/src/features/coachMarker/index.ts b/packages/client/src/features/coachMarker/index.ts
@@ -0,0 +1,2 @@
+export { default as CoachButton } from './CoachButton';
+export { default as CoachMarker } from './CoachMarker';
diff --git a/packages/client/src/features/controls/Controls.tsx b/packages/client/src/features/controls/Controls.tsx
@@ -1,13 +1,11 @@
-import { useRef } from 'react';
+import { CAMERA_POST_VIEW } from '@constants';
 import { OrbitControls } from '@react-three/drei';
-import * as THREE from 'three';
-import { useCameraStore } from 'shared/store/useCameraStore';
 import { Camera, useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useRef } from 'react';
+import { useCheckNickName } from 'shared/hooks';
+import { useCameraStore, useViewStore } from 'shared/store';
+import * as THREE from 'three';
 import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
-import { useViewStore } from 'shared/store/useViewStore';
-import { useEffect } from 'react';
-import { CAMERA_POST_VIEW } from '@constants';
-import useCheckNickName from 'shared/hooks/useCheckNickName';
 
 const setCameraPosition = (
 	camera: Camera,

diff --git a/packages/client/src/features/controls/index.ts b/packages/client/src/features/controls/index.ts
@@ -0,0 +1 @@
+export { default as Controls } from './Controls';
diff --git a/packages/client/src/features/index.ts b/packages/client/src/features/index.ts
@@ -0,0 +1,5 @@
+export * from './audio';
+export * from './backgroundStars';
+export * from './coachMarker';
+export * from './controls';
+export * from './star';
diff --git a/packages/client/src/features/star/Star.tsx b/packages/client/src/features/star/Star.tsx
@@ -1,10 +1,10 @@
+import { ShapeType } from '@constants';
+import { ThreeEvent, useFrame } from '@react-three/fiber';
 import { forwardRef } from 'react';
+import { useForwardRef } from 'shared/hooks';
 import * as THREE from 'three';
-import { useFrame, ThreeEvent } from '@react-three/fiber';
 import { DISTANCE_LIMIT } from './lib/constants';
-import { useForwardRef } from 'shared/hooks';
 import { Geometry } from './model';
-import { ShapeType } from '@constants';
 
 interface PropsType {
 	children?: React.ReactNode;

diff --git a/packages/client/src/features/star/index.ts b/packages/client/src/features/star/index.ts
@@ -0,0 +1 @@
+export { default as Star } from './Star';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './like';
		export * from './posts';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as BackgroundStars } from './BackgroundStars';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as CoachButton } from './CoachButton';
		export { default as CoachMarker } from './CoachMarker';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Controls } from './Controls';