Feat/#157: 네이버 OAuth 검수를 위한 프로필 수정 페이지에 이메일 확인 파트 추가 (#158)

* feat: 프로필 수정 페이지에서 이메일 표시 기능 추가

* refactor: getUserNickname 의 반환값을 닉네임이 없을 경우 빈 스트링으로 수정

닉네임 중복 검사에서 최초 회원가입 때 닉네임을 'Guest1234'로 설정할 경우 중복 검사가 정상 수행되지 않는 오류가 있습니다.
이전 사용자가 Guest1234로 닉네임을 설정할 경우도 있으니 이와 같이 변경합니다.

* feat: 이메일 툴팁 기능 추가

* fix: 토큰 만료 후 로그인 페이지에서 메인페이지로 돌아갈 시 이전 쿼리 에러 상태가 회복되지 않아 이를 보완

src/components/ErrorBoundary/StayDuringRoutingAlert.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useOverlay } from '@toss/use-overlay';
 import { Alert } from 'concept-be-design-system';
 import { useCallback, useEffect } from 'react';
@@ -14,6 +15,7 @@ interface Props {
 let isOpenAlert = false;
 
 const StayDuringRoutingAlert = ({ content }: Props) => {
+  const queryClient = useQueryClient();
   const overlay = useOverlay({
     exitOnUnmount: false,
   });
@@ -27,13 +29,14 @@ const StayDuringRoutingAlert = ({ content }: Props) => {
             close();
             exit();
             isOpenAlert = false;
+            queryClient.invalidateQueries({ queryKey: ['ideas'] });
           }}
           content={content}
           buttonContent={buttonContent}
         />
       ));
     },
-    [overlay],
+    [overlay, queryClient],
   );
 
   useEffect(() => {

src/pages/Feed/Feed.page.tsx

@@ -44,7 +44,7 @@ const Feed = () => {
           <Spacer size={27} />
           <FeedFixTextWrapper>
             <Text font="suit22sb" color="w1">
-              {getUserNickname()}
+              {getUserNickname() || 'Guest1234'},
             </Text>
             <Text font="suit22r" color="w1">
               님,

src/pages/Feed/utils/getUserNickname.ts

@@ -7,5 +7,5 @@ export const getUserNickname = (): string => {
     return user.nickname;
   }
 
-  return 'Guest1234';
+  return '';
 };

src/pages/Profile/types/index.ts

@@ -1,13 +1,13 @@
 export type Idea = {
   id: number;
-  title: string; // 게시글 제목,
-  introduce: string; // 게시글 본문,
-  hitsCount: number; // 조회수,
-  commentsCount: number; // 댓글 개수,
-  likesCount: number; // 좋아요수,
-  bookmarksCount: number; // 북마크 수,
-  branches: string[]; // 분야,
-  skillCategories: string[]; // 목적
+  title: string;
+  introduce: string;
+  hitsCount: number;
+  commentsCount: number;
+  likesCount: number;
+  bookmarksCount: number;
+  branches: string[];
+  skillCategories: string[];
 };
 
 export type MemberSkills = {
@@ -17,15 +17,16 @@ export type MemberSkills = {
 };
 
 export type Member = {
-  profileImageUrl: string; // 프로필 이미지,
-  nickname: string; // 닉네임
-  isMyProfile: boolean; // 내 프로필 여부
-  mainSkill: string; // 주요 스킬
-  livingPlace: string; // 지역
-  workingPlace: string; // 직장명
-  introduction: string; // 자기소개
-  skills: MemberSkills[]; // 세부 스킬
-  joinPurposes: string[]; // 관심 영역
+  email: string;
+  profileImageUrl: string;
+  nickname: string;
+  isMyProfile: boolean;
+  mainSkill: string;
+  livingPlace: string;
+  workingPlace: string;
+  introduction: string;
+  skills: MemberSkills[];
+  joinPurposes: string[];
 };
 
 export interface MemberResponse {

src/pages/ProfileEdit/ProfileEdit.page.tsx

@@ -23,6 +23,7 @@ import { FormEvent } from 'react';
 import useProfileEditQuery from './hooks/useProfileEditQuery.ts';
 import usePutProfileMutation from './hooks/usePutProfileMutation.ts';
 import { DropdownValue, FieldValue } from './types';
+import { ReactComponent as SVGToolTip24 } from '../../../public/assets/tool_tip_24.svg';
 import { NICKNAME_REG_EXP } from '../../constants/index.ts';
 import useAlert from '../../hooks/useAlert.tsx';
 import Back from '../../layouts/Back.tsx';
@@ -163,6 +164,28 @@ const ProfileEdit = () => {
             </Flex>
           </Box>
 
+          <Flex gap={6}>
+            <Text font="suit15m" color="b9">
+              이메일
+            </Text>
+            <SVGToolTip24
+              width={15}
+              height={15}
+              onClick={() =>
+                openAlert({
+                  content: '가입 시 등록한 이메일입니다. 확인용이며 본인 외 다른 사람에게 노출되지 않습니다.',
+                })
+              }
+              cursor="pointer"
+            />
+          </Flex>
+          <Spacer size={12} />
+          <Text font="suit15m" color="b4">
+            {my.email}
+          </Text>
+
+          <Spacer size={35} />
+
           <Field
             label="닉네임"
             value={fieldValue.nickname}

src/pages/ProfileEdit/hooks/useProfileEditQuery.ts

@@ -17,7 +17,7 @@ const useProfileEditQuery = () => {
     skillLevels,
     regions,
     purposes,
-    my: { ...my, ['skills']: mySkills, ['joinPurposes']: myPurposes },
+    my: { ...my, skills: mySkills, joinPurposes: myPurposes, email: my.email },
   };
 };
 

src/pages/SignUp/hooks/useCheckDuplicateNickname.ts

@@ -14,8 +14,10 @@ const useCheckDuplicateNickname = ({ nickname, setFieldErrorValue }: Props) => {
   const userNickname = getUserNickname();
   const timerId = useRef<number | null>(null);
 
+  console.log(userNickname);
+
   useEffect(() => {
-    if (userNickname === nickname || nickname.length < 2 || NICKNAME_REG_EXP.test(nickname)) {
+    if (nickname.length < 2 || NICKNAME_REG_EXP.test(nickname)) {
       return;
     }
 
@@ -28,8 +30,9 @@ const useCheckDuplicateNickname = ({ nickname, setFieldErrorValue }: Props) => {
       if (!nickname) return;
 
       const isUnique = await getCheckDuplicateNickname(nickname);
+      const isSameBeforeNickname = userNickname === nickname;
 
-      if (!isUnique) {
+      if (!isUnique && !isSameBeforeNickname) {
         setFieldErrorValue((prev) => ({
           ...prev,
           nickname: '이미 사용 중인 닉네임입니다.',