diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
index 7e967b0..7f42ca9 100644
--- 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
index 1d0c3cd..c6713b5 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를 눌러 기본 화면으로 돌아올 수 있습니다.
+
더 큰 화면으로 우주를 감상해보세요.
+
우주를 나에게 맞게 수정해보세요.
+ 우주의 분위기를 취향에 따라 바꾸어보세요.
),
},
@@ -62,10 +76,15 @@ export default function CoachMarker({ isFirst }: PropsType) {
별 생성 ⭐️
글을 작성하여 우주의 별로 띄울 수 있습니다.
- 내 별의 모양, 색상, 밝기, 크기를 골라보아요.
- 나의 기분에 맞는 색도 추천받을 수 있어요.
+ 기분에 따라 별의 모양, 색상, 밝기, 크기를 골라보아요.
+ 나의 감정에 맞는 색도 추천받을 수 있어요.
),
+ styles: {
+ options: {
+ width: 400,
+ },
+ },
},
{
target: '.galaxy-custom-button',
@@ -85,12 +104,26 @@ export default function CoachMarker({ isFirst }: PropsType) {
우주 공유 🔗
우주를 비공개로 설정하거나, 다른 사람에게 공유할 수 있습니다.
- 혼자만의 비밀 이야기를 담아도 좋아요.
+ 혼자만의 비밀 이야기를 담아도 좋고,
사랑하는 사람과 함께하는 것도 좋아요. 🫶🏻
),
},
+ {
+ target: 'body',
+ content: (
+
+
별 하나에 글 하나 🌟
+
+
튜토리얼이 모두 끝났습니다.
+
이제 함께 나만의 우주를 꾸며봐요!😆
+
-
+
{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;
+`;
diff --git a/packages/client/src/widgets/warpScreen/WarpScreen.tsx b/packages/client/src/widgets/warpScreen/WarpScreen.tsx
index ebc2cee..d2232af 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 { WarpStateType } from 'shared/lib';
import {
AMBIENT_LIGHT_INTENSITY,
@@ -33,7 +34,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 ;
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index a4baff2..2b12930 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -3,7 +3,6 @@ import react from '@vitejs/plugin-react';
import tsConfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
-// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsConfigPaths(), svgr()],
cacheDir: '.vite',