From 19b4f14e0369615986e8b534f4b5be137fa82e52 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 14 Dec 2023 00:00:11 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=87=20Remove=20useless=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 필요 없는 주석 삭제 --- packages/client/src/entities/posts/ui/Post.tsx | 4 ++-- packages/client/src/shared/apis/core/AxiosInterceptor.ts | 2 -- .../client/src/widgets/shareModal/ui/SearchSetContainer.tsx | 4 ++-- packages/client/vite.config.ts | 1 - 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx index cc5a95b..259dea9 100644 --- a/packages/client/src/entities/posts/ui/Post.tsx +++ b/packages/client/src/entities/posts/ui/Post.tsx @@ -120,12 +120,12 @@ const Label = styled.div` padding: 10px 15px; border-radius: 5px; width: fit-content; - max-width: 200px; // TODO: 수정 예정 + max-width: 200px; text-align: center; 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: 수정 예정 + transform: translate3d(calc(-50%), calc(-250%), 0); overflow: hidden; text-overflow: ellipsis; diff --git a/packages/client/src/shared/apis/core/AxiosInterceptor.ts b/packages/client/src/shared/apis/core/AxiosInterceptor.ts index a2d518f..b06b903 100644 --- a/packages/client/src/shared/apis/core/AxiosInterceptor.ts +++ b/packages/client/src/shared/apis/core/AxiosInterceptor.ts @@ -28,8 +28,6 @@ function AxiosInterceptor({ children }: Props) { if (url === '/auth/check-signin') return Promise.reject(error); - // TODO: '/auth/is-available-nickname' 부분 처리하기 - setToast({ text: errorMessage[method][url], type: 'error' }); console.error(error.response.data); diff --git a/packages/client/src/widgets/shareModal/ui/SearchSetContainer.tsx b/packages/client/src/widgets/shareModal/ui/SearchSetContainer.tsx index d411af9..21102f8 100644 --- a/packages/client/src/widgets/shareModal/ui/SearchSetContainer.tsx +++ b/packages/client/src/widgets/shareModal/ui/SearchSetContainer.tsx @@ -21,8 +21,8 @@ export default function SearchSetContainer({ if (searchStatus === 'public') return true; return false; }; - //www.xn--bj0b03z.site/guest/5026c728-d5c6-4d2c-b918-bdcd1149ac97 - https: return ( + + return ( 검색 허용 Date: Thu, 14 Dec 2023 00:24:40 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Seperate=20UpperBar=20?= =?UTF-8?q?components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - UpperBar 내의 요소들을 GoBackButton, SearchBar 컴포넌트로 분리해줌 --- .../client/src/widgets/upperBar/UpperBar.tsx | 106 +----------------- .../src/widgets/upperBar/ui/GoBackButton.tsx | 27 +++++ .../src/widgets/upperBar/ui/SearchBar.tsx | 89 +++++++++++++++ 3 files changed, 122 insertions(+), 100 deletions(-) create mode 100644 packages/client/src/widgets/upperBar/ui/GoBackButton.tsx create mode 100644 packages/client/src/widgets/upperBar/ui/SearchBar.tsx diff --git a/packages/client/src/widgets/upperBar/UpperBar.tsx b/packages/client/src/widgets/upperBar/UpperBar.tsx index 3305ac6..3c74eaa 100644 --- a/packages/client/src/widgets/upperBar/UpperBar.tsx +++ b/packages/client/src/widgets/upperBar/UpperBar.tsx @@ -1,111 +1,21 @@ import { MAX_WIDTH1, MAX_WIDTH2 } from '@constants'; import styled from '@emotion/styled'; -import goBackIcon from '@icons/icon-back-32-white.svg'; -import Cookies from 'js-cookie'; -import { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { checkExistNickname, getNickNames } from 'shared/apis'; import { useCheckNickName } from 'shared/hooks'; -import { useToastStore, useViewStore } from 'shared/store'; -import { IconButton, Search } from 'shared/ui'; +import { useViewStore } from 'shared/store'; +import GoBackButton from './ui/GoBackButton'; +import SearchBar from './ui/SearchBar'; export default function UpperBar() { - // TODO: ui 분리하기 - const [searchValue, setSearchValue] = useState(''); - const [debouncedSearchValue, setDebouncedSearchValue] = useState(''); - const [searchResults, setSearchResults] = useState([]); - const [isSearchButtonDisabled, setIsSearchButtonDisabled] = useState(false); - - const { setToast } = useToastStore(); - const { page, nickName } = useCheckNickName(); + const { page } = useCheckNickName(); const { view } = useViewStore(); - const user = Cookies.get('userName'); - - const navigate = useNavigate(); - - const DEBOUNCE_TIME = 200; - - useEffect(() => {}, [page, nickName]); - - useEffect(() => { - const debounce = setTimeout(() => { - setDebouncedSearchValue(searchValue); - }, DEBOUNCE_TIME); - - return () => clearTimeout(debounce); - }, [searchValue]); - - useEffect(() => { - if (!debouncedSearchValue) { - setSearchResults([]); - return; - } - - (async () => { - const nickNameDatas = await getNickNames(debouncedSearchValue); - const nickNames = nickNameDatas - .map((data: { nickname: string; id: number }) => data.nickname) - .filter((nickName: string) => nickName !== user) - .slice(0, 5); - - setSearchResults(nickNames); - })(); - }, [debouncedSearchValue]); - - const handleSearchButton = async () => { - if (isSearchButtonDisabled) return; - setIsSearchButtonDisabled(true); - try { - const data = await checkExistNickname(searchValue); - if (data.status === 'private') - return setToast({ - text: '비공개 처리된 유저입니다.', - type: 'error', - }); - if (searchValue === user) - return setToast({ - text: '내 은하로는 이동할 수 없습니다.', - type: 'error', - }); - navigate(`/search/${searchValue}`); - setSearchValue(''); - setDebouncedSearchValue(''); - setSearchResults([]); - } finally { - setIsSearchButtonDisabled(false); - } - }; - - const iconButtonVisibility = page === 'home' ? 'hidden' : 'visible'; - - const handleGoBackButton = () => { - if (page === 'guest') { - navigate('/'); - return; - } - - navigate('/home'); - }; return ( - - 뒤로가기 - + {page !== 'guest' && (
- +
)} @@ -132,7 +42,3 @@ const Layout = styled.div<{ view: string }>` width: 1000px; } `; - -const SearchBar = styled(Search)` - width: 320px; -`; diff --git a/packages/client/src/widgets/upperBar/ui/GoBackButton.tsx b/packages/client/src/widgets/upperBar/ui/GoBackButton.tsx new file mode 100644 index 0000000..519383c --- /dev/null +++ b/packages/client/src/widgets/upperBar/ui/GoBackButton.tsx @@ -0,0 +1,27 @@ +import goBackIcon from '@icons/icon-back-32-white.svg'; +import { useNavigate } from 'react-router-dom'; +import { IconButton } from 'shared/ui'; + +interface PropsTypes { + page: string; +} + +export default function GoBackButton({ page }: PropsTypes) { + const navigate = useNavigate(); + + const handleGoBackButton = () => { + if (page === 'guest') return navigate('/'); + navigate('/home'); + }; + + const iconButtonVisibility = page === 'home' ? 'hidden' : 'visible'; + + return ( + + 뒤로가기 + + ); +} diff --git a/packages/client/src/widgets/upperBar/ui/SearchBar.tsx b/packages/client/src/widgets/upperBar/ui/SearchBar.tsx new file mode 100644 index 0000000..0279e12 --- /dev/null +++ b/packages/client/src/widgets/upperBar/ui/SearchBar.tsx @@ -0,0 +1,89 @@ +import styled from '@emotion/styled'; +import Cookies from 'js-cookie'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { checkExistNickname, getNickNames } from 'shared/apis'; +import { useToastStore } from 'shared/store'; +import { Search } from 'shared/ui'; + +export default function SearchBar() { + const [searchValue, setSearchValue] = useState(''); + const [debouncedSearchValue, setDebouncedSearchValue] = useState(''); + const [searchResults, setSearchResults] = useState([]); + const [isSearchButtonDisabled, setIsSearchButtonDisabled] = useState(false); + + const { setToast } = useToastStore(); + + const user = Cookies.get('userName'); + const navigate = useNavigate(); + + const DEBOUNCE_TIME = 200; + + useEffect(() => { + const debounce = setTimeout(() => { + setDebouncedSearchValue(searchValue); + }, DEBOUNCE_TIME); + + return () => clearTimeout(debounce); + }, [searchValue]); + + useEffect(() => { + if (!debouncedSearchValue) { + setSearchResults([]); + return; + } + + (async () => { + const nickNameDatas = await getNickNames(debouncedSearchValue); + const nickNames = nickNameDatas + .map((data: { nickname: string; id: number }) => data.nickname) + .filter((nickName: string) => nickName !== user) + .slice(0, 5); + + setSearchResults(nickNames); + })(); + }, [debouncedSearchValue]); + + const handleSearchButton = async () => { + if (isSearchButtonDisabled) return; + setIsSearchButtonDisabled(true); + + try { + const data = await checkExistNickname(searchValue); + + if (data.status === 'private') + return setToast({ + text: '비공개 처리된 유저입니다.', + type: 'error', + }); + + if (searchValue === user) + return setToast({ + text: '내 은하로는 이동할 수 없습니다.', + type: 'error', + }); + + navigate(`/search/${searchValue}`); + setSearchValue(''); + setDebouncedSearchValue(''); + setSearchResults([]); + } finally { + setIsSearchButtonDisabled(false); + } + }; + + return ( + + ); +} + +const Layout = styled(Search)` + width: 320px; +`; From 2c20285a5d2235b387d4014335db2a1b82c9e526 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 14 Dec 2023 00:32:24 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Add=20coachmarker=20f9=20featur?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 코치마크에 전체화면에 대한 설명 추가 --- .../src/features/coachMarker/CoachMarker.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/client/src/features/coachMarker/CoachMarker.tsx b/packages/client/src/features/coachMarker/CoachMarker.tsx index 1d0c3cd..8189546 100644 --- a/packages/client/src/features/coachMarker/CoachMarker.tsx +++ b/packages/client/src/features/coachMarker/CoachMarker.tsx @@ -30,6 +30,20 @@ export default function CoachMarker({ isFirst }: PropsType) { }, }, }, + { + target: 'body', + content: ( +
+

전체화면 전환 🔎

+
+

F9를 눌러 전체화면으로 전환할 수 있습니다.

+

esc를 눌러 기본 화면으로 돌아올 수 있습니다.

+

더 큰 화면으로 우주를 감상해보세요.

+
+ ), + disableBeacon: true, + placement: 'center', + }, { target: '.leva', content: ( @@ -85,7 +99,7 @@ export default function CoachMarker({ isFirst }: PropsType) {

우주 공유 🔗


우주를 비공개로 설정하거나, 다른 사람에게 공유할 수 있습니다.

-

혼자만의 비밀 이야기를 담아도 좋아요.

+

혼자만의 비밀 이야기를 담아도 좋고,

사랑하는 사람과 함께하는 것도 좋아요. 🫶🏻

), From 74b9993550e702539396b65c0f1b72d28a5acc0b Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 14 Dec 2023 00:44:55 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=92=84=20Make=20background=20color=20?= =?UTF-8?q?design=20system?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 배경색을 디자인 시스템 내에 background.bdp04로 지정해줌 - Space warp 배경색을 통일해주었음 --- packages/client/src/shared/styles/theme.ts | 1 + packages/client/src/widgets/error/FallBackComponent.tsx | 4 ++-- .../client/src/widgets/galaxyCustomModal/ui/SampleScreen.tsx | 3 ++- packages/client/src/widgets/landingScreen/LandingScreen.tsx | 3 ++- packages/client/src/widgets/screen/Screen.tsx | 3 ++- .../client/src/widgets/starCustomModal/ui/SampleScreen.tsx | 3 ++- packages/client/src/widgets/warpScreen/WarpScreen.tsx | 3 ++- 7 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/client/src/shared/styles/theme.ts b/packages/client/src/shared/styles/theme.ts index e39493e..73a3e0f 100644 --- a/packages/client/src/shared/styles/theme.ts +++ b/packages/client/src/shared/styles/theme.ts @@ -27,6 +27,7 @@ const theme = { bdp02: '#161335', bdp03: '#241F50', bdp01_80: '#05021FCC', + bdp04: '#070614', }, stroke: { diff --git a/packages/client/src/widgets/error/FallBackComponent.tsx b/packages/client/src/widgets/error/FallBackComponent.tsx index 3ad5b88..d5b0cea 100644 --- a/packages/client/src/widgets/error/FallBackComponent.tsx +++ b/packages/client/src/widgets/error/FallBackComponent.tsx @@ -24,8 +24,8 @@ export default function FallBackComponent() { const Layout = styled.div` height: 100vh; width: 100vw; - background-color: #070614; - color: ${({ theme }) => theme.colors.text.primary}; + background-color: ${({ theme: { colors } }) => colors.background.bdp04}; + color: ${({ theme: { colors } }) => colors.text.primary}; display: flex; flex-direction: column; justify-content: center; diff --git a/packages/client/src/widgets/galaxyCustomModal/ui/SampleScreen.tsx b/packages/client/src/widgets/galaxyCustomModal/ui/SampleScreen.tsx index 65c5ea7..ac5c1e0 100644 --- a/packages/client/src/widgets/galaxyCustomModal/ui/SampleScreen.tsx +++ b/packages/client/src/widgets/galaxyCustomModal/ui/SampleScreen.tsx @@ -1,5 +1,6 @@ import { Canvas } from '@react-three/fiber'; import { Bloom, EffectComposer } from '@react-three/postprocessing'; +import { theme } from 'shared/styles'; import { Galaxy } from 'widgets'; export default function SampleScreen() { @@ -19,7 +20,7 @@ export default function SampleScreen() { luminanceSmoothing={0.025} /> - + diff --git a/packages/client/src/widgets/landingScreen/LandingScreen.tsx b/packages/client/src/widgets/landingScreen/LandingScreen.tsx index 610d61e..c3ded5f 100644 --- a/packages/client/src/widgets/landingScreen/LandingScreen.tsx +++ b/packages/client/src/widgets/landingScreen/LandingScreen.tsx @@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react'; import { Group, Object3DEventMap } from 'three'; import { Galaxy } from 'widgets/galaxy/index.ts'; import { CAMERA_FAR, CAMERA_POSITION, CAMERA_UP } from './lib/camera.ts'; +import theme from 'shared/styles/theme.ts'; export default function LandingScreen() { const galaxyRef = useRef>(null!); @@ -39,7 +40,7 @@ export default function LandingScreen() { /> - + diff --git a/packages/client/src/widgets/screen/Screen.tsx b/packages/client/src/widgets/screen/Screen.tsx index de4c791..1005c59 100644 --- a/packages/client/src/widgets/screen/Screen.tsx +++ b/packages/client/src/widgets/screen/Screen.tsx @@ -10,6 +10,7 @@ import { useState } from 'react'; import { useViewStore, useCameraStore } from 'shared/store'; import { Galaxy } from 'widgets/galaxy'; import { CameraLight, LevaTheme } from './ui'; +import { theme } from 'shared/styles'; export default function Screen() { const { view } = useViewStore(); @@ -53,7 +54,7 @@ export default function Screen() { /> - + diff --git a/packages/client/src/widgets/starCustomModal/ui/SampleScreen.tsx b/packages/client/src/widgets/starCustomModal/ui/SampleScreen.tsx index 28d74d3..782e75c 100644 --- a/packages/client/src/widgets/starCustomModal/ui/SampleScreen.tsx +++ b/packages/client/src/widgets/starCustomModal/ui/SampleScreen.tsx @@ -6,6 +6,7 @@ import { OrbitControls } from '@react-three/drei'; import { Canvas } from '@react-three/fiber'; import { Bloom, EffectComposer } from '@react-three/postprocessing'; import { Star } from 'features'; +import { theme } from 'shared/styles'; import * as THREE from 'three'; interface PropsType { @@ -66,7 +67,7 @@ export default function SampleScreen({ /> - + diff --git a/packages/client/src/widgets/warpScreen/WarpScreen.tsx b/packages/client/src/widgets/warpScreen/WarpScreen.tsx index 52b95e5..fc9763c 100644 --- a/packages/client/src/widgets/warpScreen/WarpScreen.tsx +++ b/packages/client/src/widgets/warpScreen/WarpScreen.tsx @@ -2,6 +2,7 @@ import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import { Canvas } from '@react-three/fiber'; import { Bloom, EffectComposer } from '@react-three/postprocessing'; +import { theme } from 'shared/styles'; import { AMBIENT_LIGHT_INTENSITY, BLOOM_INTENSITY, @@ -32,7 +33,7 @@ export default function WarpScreen({ isSwitching, setIsSwitching }: PropsType) { height: '100vh', width: '100vw', zIndex: 999, - backgroundColor: '#000000', + backgroundColor: theme.colors.background.bdp04, }; if (isSwitching === 'fade') return ; From 7a7afa6f7d5b4c4246f0f8c01466864e79417a45 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Thu, 14 Dec 2023 01:01:19 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20Add=20coachmarker=20elements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 코치마크 멘트 변경 - 모든 단계가 끝난 후 끝났다는 것을 알리는 스텝 추가 --- .../src/features/coachMarker/CoachMarker.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/client/src/features/coachMarker/CoachMarker.tsx b/packages/client/src/features/coachMarker/CoachMarker.tsx index 8189546..c6713b5 100644 --- a/packages/client/src/features/coachMarker/CoachMarker.tsx +++ b/packages/client/src/features/coachMarker/CoachMarker.tsx @@ -54,7 +54,7 @@ export default function CoachMarker({ isFirst }: PropsType) { 은하의 밝기,우주 블러효과 유무, 마우스의 휠 스피드를 변경할 수 있습니다.

-

우주를 나에게 맞게 수정해보세요.

+

우주의 분위기를 취향에 따라 바꾸어보세요.

), }, @@ -76,10 +76,15 @@ export default function CoachMarker({ isFirst }: PropsType) {

별 생성 ⭐️


글을 작성하여 우주의 별로 띄울 수 있습니다.

-

내 별의 모양, 색상, 밝기, 크기를 골라보아요.

-

나의 기분에 맞는 색도 추천받을 수 있어요.

+

기분에 따라 별의 모양, 색상, 밝기, 크기를 골라보아요.

+

나의 감정에 맞는 색도 추천받을 수 있어요.

), + styles: { + options: { + width: 400, + }, + }, }, { target: '.galaxy-custom-button', @@ -104,7 +109,21 @@ export default function CoachMarker({ isFirst }: PropsType) { ), }, + { + target: 'body', + content: ( +
+

별 하나에 글 하나 🌟

+
+

튜토리얼이 모두 끝났습니다.

+

이제 함께 나만의 우주를 꾸며봐요!😆

+
+ ), + disableBeacon: true, + placement: 'center', + }, ]; + return (