Merge pull request #266 from boostcampwm2023/develop

[Deploy] Week5 Ver5 배포

packages/client/src/app/Router.tsx

@@ -3,16 +3,17 @@ import {
 	createBrowserRouter,
 	createRoutesFromElements,
 } from 'react-router-dom';
-import Home from '../pages/Home';
-import Landing from '../pages/Landing';
-import { WritingModal } from 'features/writingModal';
-import LoginModal from 'widgets/loginModal';
+import Home from '../pages/Home/Home';
+import Landing from '../pages/Landing/Landing';
+import { WritingModal } from 'features/writingModal/WritingModal';
+import LoginModal from 'widgets/loginModal/LoginModal';
 import SignUpModal from 'widgets/signupModal/SignUpModal';
 import NickNameSetModal from 'widgets/nickNameSetModal/NickNameSetModal';
-import LogoAndStart from 'widgets/logoAndStart';
+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';
 
 export const router = createBrowserRouter(
 	createRoutesFromElements(
@@ -33,6 +34,7 @@ export const router = createBrowserRouter(
 				<Route path="writing" element={<WritingModal />} />
 				<Route path="galaxy-custom" element={<GalaxyCustomModal />} />
 				<Route path="star-custom" element={<StarCustomModal />} />
+				<Route path="share" element={<ShareModal />} />
 			</Route>
 		</>,
 	),

packages/client/src/entities/posts/apis/getMyPost.ts

@@ -0,0 +1,9 @@
+import instance from 'shared/apis/AxiosInterceptor';
+
+export const getMyPost = async () => {
+	const { data } = await instance({
+		method: 'GET',
+		url: '/star',
+	});
+	return data;
+};

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

@@ -1,4 +1,3 @@
-import Star from 'features/star';
 import { useRef } from 'react';
 import { useCameraStore } from 'shared/store/useCameraStore';
 import { ThreeEvent } from '@react-three/fiber';
@@ -10,6 +9,7 @@ import { StarType } from 'shared/lib/types/star';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import theme from 'shared/ui/styles/theme';
+import Star from 'features/star/Star';
 
 interface PropsType {
 	data: StarType;

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

@@ -1,33 +1,34 @@
-import { useFetch } from 'shared/hooks';
 import Post from './Post';
 import { useState } from 'react';
 import { StarData } from 'shared/lib/types/star';
 import { useOwnerStore } from 'shared/store/useOwnerStore';
 import { getPostListByNickName } from 'shared/apis/star';
 import { useEffect } from 'react';
 import { useViewStore } from 'shared/store';
+import { getMyPost } from '../apis/getMyPost';
 
 export default function Posts() {
 	const [postData, setPostData] = useState<StarData[]>();
 
 	const { isMyPage, pageOwnerNickName } = useOwnerStore();
 	const { view } = useViewStore();
 
-	const myPostData = useFetch<StarData[]>('star').data;
-
 	useEffect(() => {
 		if (view !== 'MAIN') return;
 
 		if (isMyPage) {
-			setPostData(myPostData);
+			(async () => {
+				const myPostData = await getMyPost();
+				setPostData(myPostData);
+			})();
 			return;
 		}
 
 		(async () => {
 			const otherPostData = await getPostListByNickName(pageOwnerNickName);
 			setPostData(otherPostData);
 		})();
-	}, [isMyPage, myPostData, view]);
+	}, [isMyPage, view]);
 
 	return (
 		<>

packages/client/src/features/controls/Controls.tsx

@@ -37,7 +37,7 @@ export default function Controls() {
 
 	useFrame((state, delta) => {
 		const targetPosition = new THREE.Vector3(0, 0, 0);
-		const LENGTH_LIMIT = 1000 * delta;
+		const LENGTH_LIMIT = (cameraToCurrentView * delta) / 2;
 
 		if (targetView) targetView.getWorldPosition(targetPosition);
 		if (view === 'POST') {

packages/client/src/features/star/lib/constants/index.ts

@@ -1 +1 @@
-export const DISTANCE_LIMIT = 3000;
+export const DISTANCE_LIMIT = 5000;

packages/client/src/pages/Home/index.tsx → packages/client/src/pages/Home/Home.tsx

@@ -1,8 +1,8 @@
-import Screen from 'widgets/screen';
+import Screen from 'widgets/screen/Screen';
 import { useViewStore } from 'shared/store/useViewStore';
 import { Outlet, useNavigate } from 'react-router-dom';
-import UnderBar from 'shared/ui/underBar/UnderBar';
-import UpperBar from './ui/UpperBar';
+import UnderBar from 'widgets/underBar/UnderBar';
+import UpperBar from '../../widgets/upperBar/UpperBar';
 import WarpScreen from 'widgets/warpScreen/WarpScreen';
 import { useEffect, useState } from 'react';
 import instance from 'shared/apis/AxiosInterceptor';
@@ -32,21 +32,19 @@ export default function Home() {
 	const { setSpiral, setStart, setThickness, setZDist } = useGalaxyStore();
 
 	useEffect(() => {
-		const checkLogin = async () => {
+		(async () => {
 			try {
 				const res = await instance({
 					method: 'GET',
 					url: `/auth/check-signin`,
 				});
-				if (res.status !== 200) {
-					navigate('/login');
-				}
+
+				if (res.status !== 200) navigate('/login');
 			} catch (error) {
-				console.error(error);
 				navigate('/login');
 			}
-		};
-		checkLogin();
+		})();
+
 		getSignInInfo().then((res) => {
 			Cookies.set('nickname', res.nickname);
 			setNickname(res.nickname);

packages/client/src/pages/Landing/index.tsx → packages/client/src/pages/Landing/Landing.tsx

@@ -1,4 +1,4 @@
-import LandingScreen from 'widgets/landingScreen';
+import LandingScreen from 'widgets/landingScreen/LandingScreen';
 import { useState } from 'react';
 import { useToastStore } from 'shared/store/useToastStore';
 import { Toast } from 'shared/ui';

packages/client/src/shared/apis/login.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosError } from 'axios';
 import Cookies from 'js-cookie';
 import { NavigateFunction } from 'react-router-dom';
-import { useScreenSwitchStore } from 'shared/store/useScreenSwitchStore';
 import instance from './AxiosInterceptor';
 
 axios.defaults.withCredentials = true;
@@ -14,6 +13,7 @@ export const postLogin = async (
 	setIdState: React.Dispatch<React.SetStateAction<boolean>>,
 	setPasswordState: React.Dispatch<React.SetStateAction<boolean>>,
 	navigate: NavigateFunction,
+	setIsSwitching: (value: boolean) => void,
 ) => {
 	try {
 		await instance({
@@ -23,7 +23,6 @@ export const postLogin = async (
 		});
 		Cookies.set('userId', data.username, { path: '/', expires: 7 });
 		navigate('/home');
-		const { setIsSwitching } = useScreenSwitchStore();
 		setIsSwitching(true);
 	} catch (err) {
 		if (err instanceof AxiosError) {

packages/client/src/shared/apis/share.ts

@@ -0,0 +1,22 @@
+import instance from './AxiosInterceptor';
+
+export const getShareLink = async (nickName: string) => {
+	const { data } = await instance({
+		method: 'GET',
+		url: `/auth/sharelink?nickname=${nickName}`,
+	});
+
+	return data;
+};
+
+export const patchShareStatus = async (status: 'private' | 'public') => {
+	const { data } = await instance({
+		method: 'PATCH',
+		url: `/auth/status`,
+		data: {
+			status,
+		},
+	});
+
+	return data;
+};

packages/client/src/shared/store/useViewStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-type view = 'MAIN' | 'DETAIL' | 'POST' | 'WRITING' | 'CUSTOM';
+type view = 'MAIN' | 'DETAIL' | 'POST' | 'WRITING' | 'CUSTOM' | 'SHARE';
 
 interface ViewState {
 	view: view;

packages/client/src/widgets/galaxy/lib/constants/index.ts

@@ -1,4 +1,4 @@
-export const STARS_NUM = 10000;
+export const STARS_NUM = 6000;
 
 export const DISTANCE_LIMIT = 3000;
 

packages/client/src/widgets/galaxyCustomModal/GalaxyCustom.tsx

@@ -0,0 +1,48 @@
+import { Modal } from 'shared/ui';
+import { useNavigate } from 'react-router-dom';
+import { RightButton, SampleScreen, Sliders } from './ui';
+import { useViewStore } from 'shared/store';
+import styled from '@emotion/styled';
+import { useGalaxyStore, useCustomStore } from 'shared/store';
+
+export default function GalaxyCustom() {
+	const navigate = useNavigate();
+	const { setView } = useViewStore();
+	const { setSpiral, setStart, setThickness, setZDist } = useGalaxyStore();
+	const { spiral, start, thickness, zDist } = useCustomStore();
+
+	const handleSubmit = () => {
+		setSpiral(spiral);
+		setStart(start);
+		setThickness(thickness);
+		setZDist(zDist);
+	};
+
+	return (
+		<form
+			onSubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+		>
+			<Modal
+				title="은하 커스텀"
+				onClickGoBack={() => {
+					navigate('/home');
+					setView('MAIN');
+				}}
+				rightButton={<RightButton />}
+			>
+				<Container>
+					<SampleScreen />
+					<Sliders />
+				</Container>
+			</Modal>
+		</form>
+	);
+}
+
+const Container = styled.div`
+	display: flex;
+	gap: 24px;
+`;

packages/client/src/widgets/landingScreen/index.tsx → packages/client/src/widgets/landingScreen/LandingScreen.tsx

@@ -1,6 +1,6 @@
 import { Canvas } from '@react-three/fiber';
-import BackgroundStars from 'features/backgroundStars';
-import { Galaxy } from '../galaxy';
+import BackgroundStars from 'features/backgroundStars/BackgroundStars.tsx';
+import { Galaxy } from '../galaxy/index.ts';
 import { EffectComposer, Bloom } from '@react-three/postprocessing';
 import { CAMERA_POSITION, CAMERA_UP, CAMERA_FAR } from './lib/camera.ts';
 

packages/client/src/widgets/loginModal/index.tsx → packages/client/src/widgets/loginModal/LoginModal.tsx

@@ -5,13 +5,15 @@ import Cookies from 'js-cookie';
 import { useState } from 'react';
 import { postLogin } from 'shared/apis';
 import { useCheckLogin } from 'shared/hooks';
+import { useScreenSwitchStore } from 'shared/store/useScreenSwitchStore';
 
 export default function LoginModal() {
 	const [id, setId] = useState(Cookies.get('userId') ?? '');
 	const [idState, setIdState] = useState(true);
 	const [password, setPassword] = useState('');
 	const [passwordState, setPasswordState] = useState(true);
 	const navigate = useNavigate();
+	const { setIsSwitching } = useScreenSwitchStore();
 
 	const isValid = () => {
 		return id.length && password.length && idState && passwordState;
@@ -24,7 +26,13 @@ export default function LoginModal() {
 			password: password,
 		};
 		setPassword('');
-		await postLogin(data, setIdState, setPasswordState, navigate);
+		await postLogin(
+			data,
+			setIdState,
+			setPasswordState,
+			navigate,
+			setIsSwitching,
+		);
 	};
 
 	useCheckLogin();

packages/client/src/widgets/loginModal/ui/OauthLogin.tsx

@@ -8,19 +8,20 @@ export default function OauthLogin() {
 	return (
 		<Container>
 			<a href={NAVER_AUTH_URL}>
-				<img src={NaverLogo} />
+				<img src={NaverLogo} alt="네이버로 로그인" />
 			</a>
 			<a href={GITHUB_AUTH_URL}>
-				<img src={GithubLogo} />
+				<img src={GithubLogo} alt="깃허브로 로그인" />
 			</a>
 			<a href={GOOGLE_AUTH_URL}>
-				<img src={GoogleLogo} />
+				<img src={GoogleLogo} alt="구글로 로그인" />
 			</a>
 		</Container>
 	);
 }
 
 const Container = styled.div`
+	margin: 20px 0 0 0;
 	display: flex;
 	justify-content: space-evenly;
 

packages/client/src/widgets/screen/index.tsx → packages/client/src/widgets/screen/Screen.tsx

@@ -1,5 +1,5 @@
 import { Canvas } from '@react-three/fiber';
-import BackgroundStars from 'features/backgroundStars';
+import BackgroundStars from 'features/backgroundStars/BackgroundStars';
 import { Galaxy } from '../galaxy';
 import { EffectComposer, Bloom } from '@react-three/postprocessing';
 import { Leva, useControls } from 'leva';
@@ -9,6 +9,7 @@ import { useCameraStore } from 'shared/store/useCameraStore.ts';
 import { Posts } from 'entities/posts';
 import styled from '@emotion/styled';
 import { useViewStore } from 'shared/store';
+import { CameraLight } from './ui';
 
 export default function Screen() {
 	const { view } = useViewStore();
@@ -24,7 +25,7 @@ export default function Screen() {
 		mipmapBlur: { value: false },
 	});
 	const { wheelSpeed } = useControls('Controls', {
-		wheelSpeed: { value: 3, min: 0.1, max: 5, step: 0.01 },
+		wheelSpeed: { value: 3, min: 0.1, max: 30, step: 0.1 },
 	});
 
 	return (
@@ -45,11 +46,12 @@ export default function Screen() {
 				</EffectComposer>
 
 				<color attach="background" args={['#070614']} />
-				<ambientLight color="#fff" intensity={5} />
+				<ambientLight color="#fff" intensity={2} />
 				<Controls />
 				<BackgroundStars />
 				<Galaxy />
 				<Posts />
+				<CameraLight />
 			</Canvas>
 			<LevaWrapper>
 				<Leva fill collapsed hidden={view !== 'MAIN'} />

packages/client/src/widgets/screen/ui/CameraLight.tsx

@@ -0,0 +1,16 @@
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Group, Object3DEventMap } from 'three';
+
+export default function CameraLight() {
+	const lightRef = useRef<Group<Object3DEventMap>>(null!);
+
+	useFrame((state) => {
+		lightRef.current.position.copy(state.camera.position);
+	});
+	return (
+		<group ref={lightRef}>
+			<directionalLight intensity={3} />
+		</group>
+	);
+}

packages/client/src/widgets/screen/ui/index.ts

@@ -0,0 +1 @@
+export { default as CameraLight } from './CameraLight';