Merge pull request #342 from boostcampwm2023/feature/edit-coachmark

[FE] 코치마크에 전체화면 설명 추가
boostcampwm2023 · Dec 13, 2023 · 58472ab · 58472ab
2 parents 67b16cd + f4bacbf
commit 58472ab
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 118 deletions.
diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
@@ -119,12 +119,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.background.bdp01_80};
 	border: ${theme.colors.stroke.sc};
 	color: ${theme.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/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: (
+				<div>
+					<h3>전체화면 전환 🔎</h3>
+					<br />
+					<p>F9를 눌러 전체화면으로 전환할 수 있습니다.</p>
+					<p>esc를 눌러 기본 화면으로 돌아올 수 있습니다.</p>
+					<p>더 큰 화면으로 우주를 감상해보세요.</p>
+				</div>
+			),
+			disableBeacon: true,
+			placement: 'center',
+		},
 		{
 			target: '.leva',
 			content: (
@@ -40,7 +54,7 @@ export default function CoachMarker({ isFirst }: PropsType) {
 						은하의 밝기,우주 블러효과 유무, 마우스의 휠 스피드를 변경할 수
 						있습니다.
 					</p>
-					<p>우주를 나에게 맞게 수정해보세요.</p>
+					<p>우주의 분위기를 취향에 따라 바꾸어보세요.</p>
 				</div>
 			),
 		},
@@ -62,10 +76,15 @@ export default function CoachMarker({ isFirst }: PropsType) {
 					<h3>별 생성 ⭐️</h3>
 					<br />
 					<p>글을 작성하여 우주의 별로 띄울 수 있습니다.</p>
-					<p>내 별의 모양, 색상, 밝기, 크기를 골라보아요.</p>
-					<p>나의 기분에 맞는 색도 추천받을 수 있어요.</p>
+					<p>기분에 따라 별의 모양, 색상, 밝기, 크기를 골라보아요.</p>
+					<p>나의 감정에 맞는 색도 추천받을 수 있어요.</p>
 				</div>
 			),
+			styles: {
+				options: {
+					width: 400,
+				},
+			},
 		},
 		{
 			target: '.galaxy-custom-button',
@@ -85,12 +104,26 @@ export default function CoachMarker({ isFirst }: PropsType) {
 					<h3>우주 공유 🔗</h3>
 					<br />
 					<p>우주를 비공개로 설정하거나, 다른 사람에게 공유할 수 있습니다.</p>
-					<p>혼자만의 비밀 이야기를 담아도 좋아요.</p>
+					<p>혼자만의 비밀 이야기를 담아도 좋고,</p>
 					<p>사랑하는 사람과 함께하는 것도 좋아요. 🫶🏻</p>
 				</div>
 			),
 		},
+		{
+			target: 'body',
+			content: (
+				<div>
+					<h3>별 하나에 글 하나 🌟</h3>
+					<br />
+					<p>튜토리얼이 모두 끝났습니다.</p>
+					<p>이제 함께 나만의 우주를 꾸며봐요!😆 </p>
+				</div>
+			),
+			disableBeacon: true,
+			placement: 'center',
+		},
 	];
+
 	return (
 		<Joyride
 			steps={steps}

diff --git 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/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
@@ -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
@@ -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}
 					/>
 				</EffectComposer>
-				<color attach="background" args={['#070614']} />
+				<color attach="background" args={[theme.colors.background.bdp04]} />
 				<ambientLight color="#fff" intensity={5} />
 				<Galaxy number={1500} isCustom={true} />
 			</Canvas>

diff --git 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<Group<Object3DEventMap>>(null!);
@@ -39,7 +40,7 @@ export default function LandingScreen() {
 					/>
 				</EffectComposer>
 
-				<color attach="background" args={['#070614']} />
+				<color attach="background" args={[theme.colors.background.bdp04]} />
 				<ambientLight color="#fff" intensity={5} />
 				<BackgroundStars />
 				<group ref={galaxyRef}>

diff --git 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() {
 					/>
 				</EffectComposer>
 
-				<color attach="background" args={['#070614']} />
+				<color attach="background" args={[theme.colors.background.bdp04]} />
 				<ambientLight color="#fff" intensity={1} />
 				<Controls />
 				<BackgroundStars />

diff --git 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 (
 		<Layout>
 			<SearchSetLabel>검색 허용</SearchSetLabel>
 			<SearchSetCheckBox

diff --git 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({
 					/>
 				</EffectComposer>
 
-				<color attach="background" args={['#070614']} />
+				<color attach="background" args={[theme.colors.background.bdp04]} />
 
 				<directionalLight color={'#fff'} intensity={4} />
 				<ambientLight color="#fff" intensity={1} />

diff --git 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 (
 		<Layout view={view}>
-			<IconButton
-				onClick={handleGoBackButton}
-				style={{ visibility: iconButtonVisibility }}
-			>
-				<img src={goBackIcon} alt="뒤로가기" />
-			</IconButton>
+			<GoBackButton page={page} />
 
 			{page !== 'guest' && (
 				<div className="search-bar">
-					<SearchBar
-						onSubmit={handleSearchButton}
-						inputState={searchValue}
-						setInputState={setSearchValue}
-						placeholder="닉네임을 입력하세요"
-						results={searchResults}
-						disabled={isSearchButtonDisabled}
-					/>
+					<SearchBar />
 				</div>
 			)}
 		</Layout>
@@ -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
@@ -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 (
+		<IconButton
+			onClick={handleGoBackButton}
+			style={{ visibility: iconButtonVisibility }}
+		>
+			<img src={goBackIcon} alt="뒤로가기" />
+		</IconButton>
+	);
+}