🐛 로그인 옵션 추가 및 Path 컬러 수정

Nexters · Mar 2, 2024 · ade8ab0 · ade8ab0
1 parent 5432d2e
commit ade8ab0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/src/components/global-navigation-bar/GlobalNavigationBar.tsx b/src/components/global-navigation-bar/GlobalNavigationBar.tsx
@@ -9,6 +9,7 @@ import SignOutModal from '@/features/auth/sign-out-modal';
 import WithdrawModal from '@/features/auth/withdraw-modal';
 import EditorList from '@/features/user/editor-list';
 import { useModal } from '@/hooks/useModal';
+import { useGetUserInformation } from '@/query-hooks/user/query';
 import { COLOR } from '@/styles/foundation';
 
 import * as S from './GlobalNavigationBar.css';
@@ -20,10 +21,13 @@ const GlobalNavigationBar = () => {
 
     const [isSaving, setIsSaving] = useState(false);
 
+    const { data: userData } = useGetUserInformation({ throwOnError: false });
+
     const isCoursePage = pathname.split('/')[1] === 'course';
 
     const handleSignOutButtonClick = () => openModal(<SignOutModal />);
     const handleWithdrawButtonClick = () => openModal(<WithdrawModal />);
+    const handleLoginButtonClick = () => navigate('/login');
 
     useEffect(() => {
         const isMac = navigator.userAgent.includes('Mac');
@@ -77,12 +81,24 @@ const GlobalNavigationBar = () => {
                         </button>
                     </PopOver.Trigger>
                     <PopOver.Content className={S.settingContent}>
-                        <PopOver.Item onClick={handleSignOutButtonClick}>
-                            <p className={S.logoutText}>로그아웃</p>
-                        </PopOver.Item>
-                        <PopOver.Item onClick={handleWithdrawButtonClick}>
-                            <p className={S.withdrawText}>회원탈퇴</p>
-                        </PopOver.Item>
+                        {userData ? (
+                            <>
+                                <PopOver.Item
+                                    onClick={handleSignOutButtonClick}
+                                >
+                                    <p className={S.logoutText}>로그아웃</p>
+                                </PopOver.Item>
+                                <PopOver.Item
+                                    onClick={handleWithdrawButtonClick}
+                                >
+                                    <p className={S.withdrawText}>회원탈퇴</p>
+                                </PopOver.Item>
+                            </>
+                        ) : (
+                            <PopOver.Item onClick={handleLoginButtonClick}>
+                                <p className={S.logoutText}>로그인</p>
+                            </PopOver.Item>
+                        )}
                     </PopOver.Content>
                 </PopOver>
             </div>

diff --git a/src/query-hooks/user/query.ts b/src/query-hooks/user/query.ts
@@ -1,7 +1,4 @@
-import {
-    type UseSuspenseQueryOptions,
-    useSuspenseQuery,
-} from '@tanstack/react-query';
+import { type UseQueryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
 
 import { UserRepository } from '@/apis/user';
@@ -11,10 +8,8 @@ import { USER_QUERY_KEY } from './key';
 
 export const useGetUserInformation = ({
     ...options
-}: {
-    options?: UseSuspenseQueryOptions<UserType, AxiosError, UserType>;
-}) => {
-    return useSuspenseQuery<UserType, AxiosError, UserType>({
+}: Omit<UseQueryOptions<UserType, AxiosError, UserType>, 'queryKey'>) => {
+    return useQuery<UserType, AxiosError, UserType>({
         ...options,
         queryFn: () => UserRepository.getInformationAsync(),
         queryKey: USER_QUERY_KEY.info(),

diff --git a/src/utils/tmap/tmapModule.tsx b/src/utils/tmap/tmapModule.tsx
@@ -457,9 +457,9 @@ export class TMapModule {
         this.#duration = totalDuration;
         this.#polyline = new Tmapv3.Polyline({
             path,
-            fillColor: '#FF0000',
+            fillColor: '#FF4D86',
             fillOpacity: 1,
-            strokeColor: '#FF0000',
+            strokeColor: '#FF4D86',
             strokeOpacity: 5,
             map: this.#mapInstance,
         });