feature login flow on app

Author: createhb21

package.json

@@ -10,13 +10,14 @@
     "prepare": "husky",
     "graph": "nx run-many --target=build --graph",
     "storybook": "nx storybook @ahhachul/storybook",
+    "dev:app": "yarn workspace ahhachul.com start",
     "dev:one-app": "yarn workspace @ahhachul/one-app dev",
     "test:one-app": "yarn workspace @ahhachul/one-app test",
     "dev:mocking": "yarn workspace @ahhachul/one-app dev:mocking",
     "server:mocking": "yarn workspace @ahhachul/one-app server:mocking",
+    "build:app": "nx build ahhachul.com",
     "build:one-app": "nx build @ahhachul/one-app",
     "build:all": "nx run-many --target=build --all",
-    "build:app": "nx build ahhachul.com",
     "start:one-app": "yarn workspace @ahhachul/one-app start"
   },
   "lint-staged": {

services/ahhachul.com/src/app/stackflow/layers/domainLayers/signIn.ts

@@ -1,9 +1,9 @@
 import { SignIn } from 'pages/sign-in/ui/Page/Page';
 import { SetupNickname } from 'pages/sign-in/ui/Page/SetupNickname';
+import { SignInCallback } from 'pages/sign-in/ui/Page/SignInCallback';
 
 export const signInLayers = {
   SignIn,
+  SignInCallback,
   SetupNickname,
-  // LostDetail,
-  // LostEditor,
 };

services/ahhachul.com/src/app/stackflow/plugins/index.ts

@@ -20,8 +20,9 @@ const stackflowPlugin = [
   historySyncPlugin({
     routes: {
       // sign-in pages
-      SignIn: PATH.authentication.signIn.home,
-      SetupNickname: PATH.authentication.signIn.setting.nickname,
+      SignIn: PATH.authentication.login.home,
+      SignInCallback: PATH.authentication.login.callback,
+      SetupNickname: PATH.authentication.login.setting.nickname,
 
       // main pages
       Home: PATH.home,

services/ahhachul.com/src/entities/app-authentications/api/index.ts

@@ -17,7 +17,7 @@ interface APIRedirectUrlResponse {
   redirectUrl: string;
 }
 
-const getRedirectUrl = (params: APIRedirectUrlParams) =>
+export const getRedirectUrl = (params: APIRedirectUrlParams) =>
   base.get<IResponse<APIRedirectUrlResponse>>(
     `${routes.auth}/redirect-url?${queryString.stringify(params)}`,
   );
@@ -48,23 +48,17 @@ interface APISocialSignInResponse extends IToken {
   isNeedAdditionalUserInfo: boolean;
 }
 
-const login = (body: APISocialSignInParams) =>
+export const requestLogin = (body: APISocialSignInParams) =>
   base.post<IResponse<APISocialSignInResponse>>(`${routes.auth}/login`, body);
 
 export const useLogin = () => {
   const setToken = useAuthStore((state) => state.setToken);
 
   return useMutation({
-    mutationFn: login,
+    mutationFn: requestLogin,
     onSuccess({
       data: {
-        result: {
-          accessToken,
-          refreshToken,
-          accessTokenExpiresIn,
-          refreshTokenExpiresIn,
-          isNeedAdditionalUserInfo,
-        },
+        result: { accessToken, refreshToken, isNeedAdditionalUserInfo },
       },
     }) {
       if (isNeedAdditionalUserInfo) {
@@ -75,8 +69,6 @@ export const useLogin = () => {
       setToken({
         accessToken,
         refreshToken,
-        accessTokenExpiresIn,
-        refreshTokenExpiresIn,
       });
     },
     onError(err) {

services/ahhachul.com/src/entities/app-authentications/model/index.ts

@@ -14,8 +14,4 @@ export interface IToken {
   accessToken: string;
   /** 리프레시 토큰 */
   refreshToken: string;
-  /** 액세스 토큰 만료 시간 */
-  accessTokenExpiresIn: number;
-  /** 리프레시 토큰 만료 시간 */
-  refreshTokenExpiresIn: number;
 }

services/ahhachul.com/src/entities/app-authentications/slice/index.ts

@@ -3,7 +3,7 @@ import { persist } from 'zustand/middleware';
 import { type IToken } from 'entities/app-authentications/model';
 
 interface IAuthStore {
-  state: Nullable<IToken>;
+  auth: Nullable<IToken>;
 }
 
 export const useAuthStore = create(
@@ -13,9 +13,9 @@ export const useAuthStore = create(
     }
   >(
     (set) => ({
-      state: null,
-      setToken: (state: Nullable<IToken>) => {
-        set({ state });
+      auth: null,
+      setToken: (auth: Nullable<IToken>) => {
+        set({ auth });
       },
     }),
     {
@@ -39,3 +39,15 @@ export const useSocialLoginModal = create<
       active,
     })),
 }));
+
+interface TemporaryAuthState {
+  auth: Nullable<IToken>;
+  setTempAuth: (authData: IToken) => void;
+  reset: () => void;
+}
+
+export const useTemporaryAuthStore = create<TemporaryAuthState>((set) => ({
+  auth: null,
+  setTempAuth: (authData: IToken) => set({ auth: authData }),
+  reset: () => set({ auth: null }),
+}));

services/ahhachul.com/src/entities/app-authentications/static/icons/apple.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cssUtils from 'shared/utils.css';
+
+const SVG = `
+ <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.8015 0C12.8434 0 12.8853 0 12.9295 0C13.0323 1.26946 12.5477 2.218 11.9589 2.90489C11.381 3.58705 10.5898 4.24865 9.31008 4.14827C9.22471 2.89699 9.71004 2.0188 10.2981 1.33348C10.8435 0.694803 11.8435 0.126472 12.8015 0Z"
+        fill="black"
+      />
+      <path
+        d="M16.6754 13.2123C16.6754 13.225 16.6754 13.236 16.6754 13.2479C16.3158 14.3371 15.8028 15.2706 15.1768 16.137C14.6053 16.9235 13.9049 17.9819 12.6544 17.9819C11.5739 17.9819 10.8562 17.2871 9.74875 17.2681C8.57731 17.2491 7.9331 17.8491 6.86204 18.0001C6.73952 18.0001 6.617 18.0001 6.49685 18.0001C5.71036 17.8862 5.07563 17.2634 4.61322 16.7021C3.2497 15.0438 2.19603 12.9017 2 10.1604C2 9.89164 2 9.62368 2 9.35493C2.083 7.39304 3.03628 5.79792 4.30336 5.02486C4.97208 4.61383 5.89137 4.26366 6.915 4.42017C7.3537 4.48815 7.80188 4.63833 8.19473 4.78694C8.56704 4.93001 9.03261 5.18374 9.47368 5.1703C9.77247 5.16161 10.0697 5.00589 10.3708 4.89602C11.253 4.57747 12.1177 4.21228 13.2575 4.38381C14.6274 4.5909 15.5996 5.19955 16.2004 6.1386C15.0416 6.87609 14.1255 7.98746 14.282 9.88532C14.4211 11.6093 15.4234 12.6179 16.6754 13.2123Z"
+        fill="black"
+      />
+    </svg>
+`;
+
+export const AppleIcon = () => (
+  <div
+    css={[cssUtils.flexCenterCenter]}
+    dangerouslySetInnerHTML={{ __html: SVG }}
+  />
+);

services/ahhachul.com/src/entities/app-authentications/ui/SocialLogin.tsx

@@ -3,17 +3,21 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { fadeInAndUpVariants } from 'shared/lib/config/animation/framer-motion';
 
-import { useFlow } from 'app/stackflow';
-import { useGetSignInRedirectUrl } from '../api';
+import { getRedirectUrl } from '../api';
 import { KakaoIcon } from '../static/icons/kakao';
 import { GoogleIcon } from '../static/icons/google';
+import type { ISocialSignInType } from '../model';
+import { AppleIcon } from '../static/icons/apple';
 
 export const SocialLogin = () => {
-  const { push } = useFlow();
-  const urls = useGetSignInRedirectUrl();
-  console.log('urls:', urls);
-
-  const clickLogin = () => push('SetupNickname', {});
+  const clickLogin = async (loginType: ISocialSignInType) => {
+    try {
+      const res = await getRedirectUrl({ providerType: loginType });
+      window.location.assign(res.data.result.redirectUrl);
+    } catch (error) {
+      alert('로그인 정보를 불러오는데 실패했어요. (unknown)');
+    }
+  };
 
   return (
     <SocialGroup
@@ -22,14 +26,18 @@ export const SocialLogin = () => {
       initial="initial"
       variants={fadeInAndUpVariants(0.3)}
     >
-      <KakaoLogin onClick={clickLogin}>
-        <KakaoIcon />
-        <span>Kakao로 계속하기</span>
-      </KakaoLogin>
-      <GoogleLogin onClick={clickLogin}>
+      <GoogleLogin onClick={() => clickLogin('GOOGLE')}>
         <GoogleIcon />
         <span>Google로 계속하기</span>
       </GoogleLogin>
+      <GoogleLogin onClick={() => clickLogin('APPLE')}>
+        <AppleIcon />
+        <span>Apple로 계속하기</span>
+      </GoogleLogin>
+      <KakaoLogin onClick={() => clickLogin('KAKAO')}>
+        <KakaoIcon />
+        <span>Kakao로 계속하기</span>
+      </KakaoLogin>
     </SocialGroup>
   );
 };

services/ahhachul.com/src/features/users/api/index.ts

@@ -1,12 +1,29 @@
+import axios from 'axios';
+import { IToken } from 'entities/app-authentications';
 import { type IResponse } from 'entities/with-server';
-import { base, routes, useAuthMutation } from 'shared/api';
+import { base, routes, useAuthMutation, useAuthQuery } from 'shared/api';
+
+export const GET_USER_INFO_QUERY_KEY = ['USER', 'INFO'];
 
 interface APICheckNicknameParams {
   nickname: string;
 }
 interface APINicknameResponse {
   available: boolean;
 }
+interface APIUpdateUserResponse {
+  nickname: string;
+  gender: string | null;
+  ageRange: string | null;
+}
+
+interface APIUserInfoResponse {
+  memberId: number;
+  nickname: string;
+  email: string | null;
+  gender: string | null;
+  ageRange: string | null;
+}
 
 const checkNickname = (body: APICheckNicknameParams) =>
   base.post<IResponse<APINicknameResponse>>(
@@ -15,3 +32,43 @@ const checkNickname = (body: APICheckNicknameParams) =>
   );
 export const useCheckNickName = () =>
   useAuthMutation({ mutationFn: checkNickname });
+
+export const updateUser = async (data: { nickname: string; auth: IToken }) => {
+  try {
+    const accessToken = data.auth.accessToken;
+    const res = await axios.patch<APIUpdateUserResponse>(
+      `${process.env.REACT_APP_BASE_URL}/members`,
+      { nickname: data.nickname },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+
+    return res.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(
+        `Update user failed: ${error.response?.data?.message || error.message}`,
+      );
+    } else {
+      console.error('Unexpected error during user update:', error);
+      throw new Error('An unexpected error occurred during user update.');
+    }
+  }
+};
+
+const getUserInfo = () =>
+  base.post<IResponse<APIUserInfoResponse>>(routes.users);
+
+export const useGetUserInfo = (auth: Nullable<IToken>) =>
+  useAuthQuery({
+    queryFn: getUserInfo,
+    queryKey: GET_USER_INFO_QUERY_KEY,
+    options: {
+      enabled: !!auth,
+      staleTime: 10 * 60 * 1000,
+      select: (res) => res.data.result,
+    },
+  });

services/ahhachul.com/src/features/users/ui/CheerUpPhrase/CheerUpPhrase.tsx

@@ -1,12 +1,16 @@
 import React, { type HTMLAttributes } from 'react';
 import { getRandomPhrase } from 'features/users/lib/getRandomPhrase';
 import * as styles from './CheerUpPhrase.css';
+import { useGetUserInfo } from 'features/users/api';
+import { useAuthStore } from 'entities/app-authentications/slice';
 
 interface CTAFlowsProps extends HTMLAttributes<HTMLHeadingElement> {}
 
 const phrase = getRandomPhrase();
 export const CheerUpPhrase = ({ ...props }: CTAFlowsProps) => {
-  let username = '이효범';
+  const { auth } = useAuthStore();
+  const { data: userInfo } = useGetUserInfo(auth);
+  const username = userInfo?.nickname || '아하철';
 
   return (
     <h1 css={styles.cheerUpPhrase} {...props}>