로그인시 블로그 생성여부 확인

pknu-wap · Nov 29, 2023 · bda325b · bda325b
1 parent f61fb95
commit bda325b
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 49 deletions.
diff --git a/client/src/api/blog-api.ts b/client/src/api/blog-api.ts
@@ -43,3 +43,14 @@ export const useGetSidebarQuery = (params: ISidebar) => {
   });
   return { data, isLoading, error };
 };
+
+export const getIsNewBlogApi = async () => {
+  const { data } = await defaultInstance.get('/is/new/blog');
+
+  return data;
+};
+
+export const useGetIsNewBlogQuery = () => {
+  const { isLoading, error, data } = useQuery([`isNewBlog`], () => getIsNewBlogApi(), {});
+  return { data, isLoading, error };
+};
diff --git a/client/src/app/mypage/page.tsx b/client/src/app/mypage/page.tsx
@@ -98,6 +98,12 @@ function page() {
     setImageSrc(userData?.thumbnail ?? '');
   }, [userData, isUserInfoEdit]);
 
+  useEffect(() => {
+    setName(userData?.nickName ?? '');
+    setIntroduction(userData?.introduction ?? '');
+    setImageSrc(userData?.thumbnail ?? '');
+  }, []);
+
   const onUpload = async (e: any) => {
     const file = e.target.files[0];
     const reader: any = new FileReader();

diff --git a/client/src/app/oauth2/redirect/page.tsx b/client/src/app/oauth2/redirect/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useGetIsNewBlogQuery } from '@/api/blog-api';
 import { PostMakeAccountApi } from '@/api/makeAccount-api';
 import CenterContent from '@/components/Layout/CenterContent';
 import { TextField } from '@mui/material';
@@ -7,6 +8,7 @@ import { Stack } from '@mui/material';
 import { useMutation } from '@tanstack/react-query';
 import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
+import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useState } from 'react';
 
 const Page = () => {
@@ -15,6 +17,7 @@ const Page = () => {
   const [blogUrl, setBlogUrl] = useState<string>('');
   const [blogName, setBlogName] = useState<string>('');
   const [nickname, setNickname] = useState<string>('');
+  const { data, isLoading } = useGetIsNewBlogQuery();
 
   const postMakeAccountCreateQuery = useMutation(PostMakeAccountApi, {
     onSuccess: () => router.push('/collect'),
@@ -30,67 +33,80 @@ const Page = () => {
     postMakeAccountCreateQuery.mutate(newAccountBody);
   };
 
+  useEffect(() => {
+    if (data) {
+      router.push('/collect');
+      enqueueSnackbar({ message: '로그인 성공하였습니다.', variant: 'success' });
+    }
+  }, [data]);
+
   useEffect(() => {
     const getTokenValue = params.get('token');
     const error = params.get('error');
 
     if (getTokenValue) {
       localStorage.setItem('token', getTokenValue);
-      console.log(getTokenValue);
     } else {
       console.log(error);
+      enqueueSnackbar({ message: '로그인에 실패하였습니다.', variant: 'error' });
     }
   }, [params]);
 
   return (
     <CenterContent>
-      <Stack width="300px" margin="auto" flexDirection="column" alignItems="center">
-        <TextField
-          required
-          fullWidth
-          sx={{ marginBottom: '5px' }}
-          id="outlined-basic"
-          label="blog URL"
-          variant="outlined"
-          value={blogUrl}
-          onChange={(e) => {
-            setBlogUrl(e.target.value);
-          }}
-        />
-        <Stack fontSize="10px" color="red" marginBottom="15px">
-          *블로그 URL은 수정할 수 없으니 신중히 적어주세요.
-        </Stack>
-        <TextField
-          required
-          fullWidth
-          sx={{ marginBottom: '30px' }}
-          id="outlined-basic"
-          label="이름"
-          variant="outlined"
-          value={blogName}
-          onChange={(e) => {
-            setBlogName(e.target.value);
-          }}
-        />
-        <TextField
-          required
-          fullWidth
-          sx={{ marginBottom: '5px' }}
-          id="outlined-basic"
-          label="닉네임"
-          variant="outlined"
-          value={nickname}
-          onChange={(e) => {
-            setNickname(e.target.value);
-          }}
-        />
-        <Stack fontSize="10px" color="red" marginBottom="15px">
-          *닉네임이 블로그 주소에 반영 됩니다.
+      {!isLoading && (
+        <Stack width="300px" margin="auto" flexDirection="column" alignItems="center">
+          <TextField
+            required
+            fullWidth
+            sx={{ marginBottom: '5px' }}
+            id="outlined-basic"
+            label="blog URL"
+            variant="outlined"
+            value={blogUrl}
+            onChange={(e) => {
+              setBlogUrl(e.target.value);
+            }}
+          />
+          <Stack fontSize="10px" color="red" marginBottom="15px">
+            *블로그 URL은 수정할 수 없으니 신중히 적어주세요.
+          </Stack>
+          <TextField
+            required
+            fullWidth
+            sx={{ marginBottom: '30px' }}
+            id="outlined-basic"
+            label="이름"
+            variant="outlined"
+            value={blogName}
+            onChange={(e) => {
+              setBlogName(e.target.value);
+            }}
+          />
+          <TextField
+            required
+            fullWidth
+            sx={{ marginBottom: '5px' }}
+            id="outlined-basic"
+            label="닉네임"
+            variant="outlined"
+            value={nickname}
+            onChange={(e) => {
+              setNickname(e.target.value);
+            }}
+          />
+          <Stack fontSize="10px" color="red" marginBottom="15px">
+            *닉네임이 블로그 주소에 반영 됩니다.
+          </Stack>
+          <Button
+            fullWidth
+            sx={{ height: '50px' }}
+            variant="outlined"
+            onClick={() => postOnClick()}>
+            입력
+          </Button>
         </Stack>
-        <Button fullWidth sx={{ height: '50px' }} variant="outlined" onClick={() => postOnClick()}>
-          입력
-        </Button>
-      </Stack>
+      )}
     </CenterContent>
   );
 };

diff --git a/client/src/constant/common.ts b/client/src/constant/common.ts
@@ -15,8 +15,8 @@ export const getCurrentThemeClass = (
 export const API_BASE_URL =
   'http://glogglogglog-env.eba-fuksumx7.ap-northeast-2.elasticbeanstalk.com';
 
-// export const OAUTH2_REDIRECT_URI = 'http://localhost:3000/oauth2/redirect';
-export const OAUTH2_REDIRECT_URI = 'http://15.164.221.35:3000/oauth2/redirect';
+export const OAUTH2_REDIRECT_URI = 'http://localhost:3000/oauth2/redirect';
+// export const OAUTH2_REDIRECT_URI = 'http://15.164.221.35:3000/oauth2/redirect';
 
 export const GITHUB_AUTH_URL =
   API_BASE_URL + '/oauth2/authorization/github?redirect_uri=' + OAUTH2_REDIRECT_URI;