feat: 이메일 필드 추가 및 프로필 페이지에 이메일 표시

Author: minsukim-29cm

src/controllers/auth/api.ts

@@ -34,12 +34,14 @@ export const fetchOAuth2Login = async (_code: string, _state: string, provider:
 
 export const fetchAuthRegister = async (
   imageBase64: string,
+  email: string,
   nickname: string,
   birth_date: string,
   marketingAgreement: boolean,
   provider: string,
 ) => {
   const formData = new FormData();
+  if (email) formData.append('email', email);
   formData.append('nickname', nickname);
   formData.append('birth_date', birth_date);
   formData.append('marketingAgreement', String(marketingAgreement));

src/hooks/useAuthInfo.ts

@@ -3,6 +3,7 @@ import { webPath } from '@router/index';
 import useLocalStorageState from './useLocalStorageState';
 
 interface UserInfo {
+  email?: string;
   nickname: string;
   profileImage?: string;
   provider: string;

src/hooks/useSocialAuth.ts

@@ -96,13 +96,15 @@ export const useSocialAuth = () => {
           navigate(webPath.register, {
             state: {
               provider,
+              email: res.email,
             },
           });
           return;
         }
 
         // 로그인 성공 - WebView와 브라우저 모두 동일하게 처리
         setAuthInfo(res.access_token, res.refresh_token, {
+          email: res.email,
           nickname: res.nickname,
           profileImage: res.profileImageUrl,
           provider: res.provider,

src/pages/MyPage/Profile/Profile.Style.ts

@@ -31,6 +31,11 @@ const ProfileContents = styled.div({
     },
   },
 
+  ['>span']: {
+    ...theme.font.body16Medium,
+    color: theme.colors.sub_blue1,
+  },
+
   ['>button']: {
     display: 'flex',
     gap: '6px',

src/pages/MyPage/Profile/Profile.tsx

@@ -11,6 +11,7 @@ const MyPageProfile = () => {
   const { isLogin, userInfo, handleNavigateLogin, setUserInfo } = useAuthInfo();
 
   const username = userInfo?.nickname ?? '아직 정보가 없어요!';
+  const useremail = userInfo?.email ?? '로그인을 진행해주세요';
 
   const handleClickProfile = () => {
     if (!isLogin) {
@@ -62,6 +63,7 @@ const MyPageProfile = () => {
       />
       <ProfileContents>
         <p>{username}<RightArrowThickSVG /></p>
+        <span>{useremail}</span>
       </ProfileContents>
     </ProfileContainer>
   );

src/pages/Register/Register.tsx

@@ -52,6 +52,8 @@ const Register = () => {
   const { navToRegisterDone, navToTerm } = useRouter();
   const location = useLocation();
 
+  const email = location.state?.email || '';
+
   const [values, setValues] = useState({
     name: '',
     birth: '',
@@ -189,6 +191,23 @@ const Register = () => {
         },
       ],
     },
+    ...(email
+      ? [
+          {
+            name: 'email',
+            title: '이메일',
+            inputs: [
+              {
+                key: 'email',
+                value: email,
+                placeholder: 'email@email.com',
+                disabled: true,
+                handleChange: handleChangeValue,
+              },
+            ],
+          } as MyPageInputProps,
+        ]
+      : []),
     {
       name: 'birth',
       title: '생년월일(선택)',
@@ -218,6 +237,7 @@ const Register = () => {
 
     const res = await fetchAuthRegister(
       profileImage as string,
+      email,
       values.name,
       values.birth,
       true,