('normal');
const [size, setSize] = useState(0);
const navigate = useNavigate();
@@ -120,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 } }) => colors.background.bdp01_80};
- border: ${({ theme: { colors } }) => colors.stroke.sc};
- color: ${({ theme: { colors } }) => colors.text.secondary};
- transform: translate3d(calc(-50%), calc(-250%), 0); // TODO: 수정 예정
+ background-color: ${theme.colors.background.bdp01_80};
+ border: ${theme.colors.stroke.sc};
+ color: ${theme.colors.text.secondary};
+ 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 52b95e5..d2232af 100644
--- a/packages/client/src/widgets/warpScreen/WarpScreen.tsx
+++ b/packages/client/src/widgets/warpScreen/WarpScreen.tsx
@@ -2,6 +2,8 @@ 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,
BLOOM_INTENSITY,
@@ -16,8 +18,8 @@ import BrightSphere from './ui/BrightSphere';
import SpaceWarp from './ui/SpaceWarp';
interface PropsType {
- isSwitching: 'warp' | 'fade' | 'end';
- setIsSwitching: React.Dispatch>;
+ isSwitching: WarpStateType;
+ setIsSwitching: React.Dispatch>;
}
export default function WarpScreen({ isSwitching, setIsSwitching }: PropsType) {
@@ -32,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/src/widgets/warpScreen/ui/SpaceWarp.tsx b/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx
index 1a3c313..009498c 100644
--- a/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx
+++ b/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx
@@ -11,6 +11,7 @@ import {
SPACE_WARP_Y_MAX,
SPACE_WARP_Y_MIN,
} from '../lib/constants';
+import { WarpStateType } from 'shared/lib';
const geSpaceWarpLinesInfo = () => {
const positions = Array.from({ length: SPACE_WARP_LINES_NUM }, () => {
@@ -33,7 +34,7 @@ const geSpaceWarpLinesInfo = () => {
};
interface PropsType {
- setIsSwitching: React.Dispatch>;
+ setIsSwitching: React.Dispatch>;
}
export default function SpaceWarp({ setIsSwitching }: PropsType) {
diff --git a/packages/client/src/widgets/writingModal/ui/Images.tsx b/packages/client/src/widgets/writingModal/ui/Images.tsx
index 73d3a9c..91ab321 100644
--- a/packages/client/src/widgets/writingModal/ui/Images.tsx
+++ b/packages/client/src/widgets/writingModal/ui/Images.tsx
@@ -1,24 +1,28 @@
import styled from '@emotion/styled';
import ImageIcon from '@icons/icon-photo-32-gray.svg?react';
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
interface PropsType {
- onModify: (files: FileList | null) => void;
+ files: FileList | null;
+ setFiles: React.Dispatch>;
}
-export default function Images({ onModify }: PropsType) {
+export default function Images({ files, setFiles }: PropsType) {
const [showImages, setShowImages] = useState([]);
- const [files, setFiles] = useState(null);
const inputRef = useRef(null);
+ const [inputKey, setInputKey] = useState(0);
const handleAddImages = (event: ChangeEvent) => {
- const files = event.target.files;
- if (!files) return;
- if (files.length > 5) return;
- const images = Array.from(files).map((file) => URL.createObjectURL(file));
+ const currentFiles = event.target.files;
+ if (!currentFiles) return;
+ if (currentFiles.length > 5) return;
+ const images = Array.from(currentFiles).map((file) =>
+ URL.createObjectURL(file),
+ );
setShowImages(images);
- setFiles(files);
- onModify(files);
+ setFiles(currentFiles);
+
+ setInputKey((prevKey) => (prevKey + 1) % 2);
};
const handleDeleteImage = (id: number) => {
@@ -30,7 +34,6 @@ export default function Images({ onModify }: PropsType) {
.filter((_, index) => index !== id)
.forEach((file) => dataTransfer.items.add(file));
setFiles(dataTransfer.files);
- onModify(dataTransfer.files);
};
return (
@@ -38,10 +41,12 @@ export default function Images({ onModify }: PropsType) {
inputRef.current?.click()}>
diff --git a/packages/client/src/widgets/writingModal/ui/WritingModal.tsx b/packages/client/src/widgets/writingModal/ui/WritingModal.tsx
index d2b01a7..84ac830 100644
--- a/packages/client/src/widgets/writingModal/ui/WritingModal.tsx
+++ b/packages/client/src/widgets/writingModal/ui/WritingModal.tsx
@@ -98,7 +98,7 @@ export default function WritingModal() {
)}
-
+
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index d1132f9..3e69305 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -24,7 +24,7 @@
"@utils/*": ["shared/utils/*"],
"@hooks/*": ["shared/lib/hooks/*"],
"@constants": ["shared/lib/constants"],
- "@icons/*": ["assets/*"]
+ "@icons/*": ["assets/icons/*"]
}
},
"include": ["src"],
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',