diff --git a/packages/client/src/app/Router.tsx b/packages/client/src/app/Router.tsx index a83c75d..c71a6ee 100644 --- a/packages/client/src/app/Router.tsx +++ b/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( } /> } /> } /> + } /> , ), diff --git a/packages/client/src/assets/icon-check-purple.svg b/packages/client/src/assets/icon-check-purple.svg new file mode 100644 index 0000000..022251f --- /dev/null +++ b/packages/client/src/assets/icon-check-purple.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/packages/client/src/entities/posts/apis/getMyPost.ts b/packages/client/src/entities/posts/apis/getMyPost.ts new file mode 100644 index 0000000..7a03c92 --- /dev/null +++ b/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; +}; diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx index 17296ab..647590d 100644 --- a/packages/client/src/entities/posts/ui/Post.tsx +++ b/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; diff --git a/packages/client/src/entities/posts/ui/Posts.tsx b/packages/client/src/entities/posts/ui/Posts.tsx index ab686b1..68085e4 100644 --- a/packages/client/src/entities/posts/ui/Posts.tsx +++ b/packages/client/src/entities/posts/ui/Posts.tsx @@ -1,4 +1,3 @@ -import { useFetch } from 'shared/hooks'; import Post from './Post'; import { useState } from 'react'; import { StarData } from 'shared/lib/types/star'; @@ -6,6 +5,7 @@ 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(); @@ -13,13 +13,14 @@ export default function Posts() { const { isMyPage, pageOwnerNickName } = useOwnerStore(); const { view } = useViewStore(); - const myPostData = useFetch('star').data; - useEffect(() => { if (view !== 'MAIN') return; if (isMyPage) { - setPostData(myPostData); + (async () => { + const myPostData = await getMyPost(); + setPostData(myPostData); + })(); return; } @@ -27,7 +28,7 @@ export default function Posts() { const otherPostData = await getPostListByNickName(pageOwnerNickName); setPostData(otherPostData); })(); - }, [isMyPage, myPostData, view]); + }, [isMyPage, view]); return ( <> diff --git a/packages/client/src/features/backgroundStars/index.tsx b/packages/client/src/features/backgroundStars/BackgroundStars.tsx similarity index 100% rename from packages/client/src/features/backgroundStars/index.tsx rename to packages/client/src/features/backgroundStars/BackgroundStars.tsx diff --git a/packages/client/src/features/controls/Controls.tsx b/packages/client/src/features/controls/Controls.tsx index a56292e..c4f0ef2 100644 --- a/packages/client/src/features/controls/Controls.tsx +++ b/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') { diff --git a/packages/client/src/features/star/index.tsx b/packages/client/src/features/star/Star.tsx similarity index 100% rename from packages/client/src/features/star/index.tsx rename to packages/client/src/features/star/Star.tsx diff --git a/packages/client/src/features/star/lib/constants/index.ts b/packages/client/src/features/star/lib/constants/index.ts index e98a87d..181cea9 100644 --- a/packages/client/src/features/star/lib/constants/index.ts +++ b/packages/client/src/features/star/lib/constants/index.ts @@ -1 +1 @@ -export const DISTANCE_LIMIT = 3000; +export const DISTANCE_LIMIT = 5000; diff --git a/packages/client/src/features/writingModal/index.tsx b/packages/client/src/features/writingModal/WritingModal.tsx similarity index 100% rename from packages/client/src/features/writingModal/index.tsx rename to packages/client/src/features/writingModal/WritingModal.tsx diff --git a/packages/client/src/pages/Home/index.tsx b/packages/client/src/pages/Home/Home.tsx similarity index 88% rename from packages/client/src/pages/Home/index.tsx rename to packages/client/src/pages/Home/Home.tsx index 5e49923..2a0c8ae 100644 --- a/packages/client/src/pages/Home/index.tsx +++ b/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); diff --git a/packages/client/src/pages/Home/ui/index.ts b/packages/client/src/pages/Home/ui/index.ts deleted file mode 100644 index 22954c8..0000000 --- a/packages/client/src/pages/Home/ui/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './UpperBar'; diff --git a/packages/client/src/pages/Landing/index.tsx b/packages/client/src/pages/Landing/Landing.tsx similarity index 89% rename from packages/client/src/pages/Landing/index.tsx rename to packages/client/src/pages/Landing/Landing.tsx index 4943a61..da9bc18 100644 --- a/packages/client/src/pages/Landing/index.tsx +++ b/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'; diff --git a/packages/client/src/pages/Landing/ui/styled.ts b/packages/client/src/pages/Landing/ui/styled.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/client/src/shared/apis/login.ts b/packages/client/src/shared/apis/login.ts index 6bc6ea1..825c52d 100644 --- a/packages/client/src/shared/apis/login.ts +++ b/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>, setPasswordState: React.Dispatch>, 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) { diff --git a/packages/client/src/shared/apis/share.ts b/packages/client/src/shared/apis/share.ts new file mode 100644 index 0000000..53a84df --- /dev/null +++ b/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; +}; diff --git a/packages/client/src/shared/store/useViewStore.ts b/packages/client/src/shared/store/useViewStore.ts index 2e856b7..c5ffcbd 100644 --- a/packages/client/src/shared/store/useViewStore.ts +++ b/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; diff --git a/packages/client/src/shared/ui/inputBar/index.tsx b/packages/client/src/shared/ui/inputBar/index.tsx deleted file mode 100644 index bba0db2..0000000 --- a/packages/client/src/shared/ui/inputBar/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as Input } from './InputBar'; diff --git a/packages/client/src/widgets/galaxy/lib/constants/index.ts b/packages/client/src/widgets/galaxy/lib/constants/index.ts index 9c9ae12..8448e22 100644 --- a/packages/client/src/widgets/galaxy/lib/constants/index.ts +++ b/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; diff --git a/packages/client/src/widgets/galaxyCustomModal/GalaxyCustom.tsx b/packages/client/src/widgets/galaxyCustomModal/GalaxyCustom.tsx new file mode 100644 index 0000000..a85b098 --- /dev/null +++ b/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 ( +
{ + e.preventDefault(); + handleSubmit(); + }} + > + { + navigate('/home'); + setView('MAIN'); + }} + rightButton={} + > + + + + + +
+ ); +} + +const Container = styled.div` + display: flex; + gap: 24px; +`; diff --git a/packages/client/src/widgets/landingScreen/index.tsx b/packages/client/src/widgets/landingScreen/LandingScreen.tsx similarity index 88% rename from packages/client/src/widgets/landingScreen/index.tsx rename to packages/client/src/widgets/landingScreen/LandingScreen.tsx index ff389f0..6fa339b 100644 --- a/packages/client/src/widgets/landingScreen/index.tsx +++ b/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'; diff --git a/packages/client/src/widgets/loginModal/index.tsx b/packages/client/src/widgets/loginModal/LoginModal.tsx similarity index 86% rename from packages/client/src/widgets/loginModal/index.tsx rename to packages/client/src/widgets/loginModal/LoginModal.tsx index 7f89480..8394627 100644 --- a/packages/client/src/widgets/loginModal/index.tsx +++ b/packages/client/src/widgets/loginModal/LoginModal.tsx @@ -5,6 +5,7 @@ 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') ?? ''); @@ -12,6 +13,7 @@ export default function LoginModal() { 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(); diff --git a/packages/client/src/widgets/loginModal/ui/OauthLogin.tsx b/packages/client/src/widgets/loginModal/ui/OauthLogin.tsx index c207a72..1d9b88a 100644 --- a/packages/client/src/widgets/loginModal/ui/OauthLogin.tsx +++ b/packages/client/src/widgets/loginModal/ui/OauthLogin.tsx @@ -8,19 +8,20 @@ export default function OauthLogin() { return ( - + 네이버로 로그인 - + 깃허브로 로그인 - + 구글로 로그인 ); } const Container = styled.div` + margin: 20px 0 0 0; display: flex; justify-content: space-evenly; diff --git a/packages/client/src/widgets/logoAndStart/index.tsx b/packages/client/src/widgets/logoAndStart/LogoAndStart.tsx similarity index 100% rename from packages/client/src/widgets/logoAndStart/index.tsx rename to packages/client/src/widgets/logoAndStart/LogoAndStart.tsx diff --git a/packages/client/src/widgets/screen/index.tsx b/packages/client/src/widgets/screen/Screen.tsx similarity index 87% rename from packages/client/src/widgets/screen/index.tsx rename to packages/client/src/widgets/screen/Screen.tsx index 55b7b9f..203707b 100644 --- a/packages/client/src/widgets/screen/index.tsx +++ b/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() { - + +