[FE] 이벤트 페이지 프로필 표시(로그인 유지) 및 이벤트 페이지 로딩 화면 설정

client/src/apis/request/user.ts

@@ -0,0 +1,11 @@
+import {User} from 'types/serviceType';
+
+import {BASE_URL} from '@apis/baseUrl';
+import {requestGet} from '@apis/fetcher';
+
+export const requestGetUserInfo = async () => {
+  return await requestGet<User>({
+    baseUrl: BASE_URL.HD,
+    endpoint: `/api/users/mine`,
+  });
+};

client/src/components/Design/components/Image/Image.tsx

@@ -1,4 +1,5 @@
-type ImageProps = React.ComponentProps<'img'> & {
+/** @jsxImportSource @emotion/react */
+export type ImageProps = React.ComponentProps<'img'> & {
   src: string;
   fallbackSrc?: string;
 };

client/src/components/Design/components/Profile/Profile.stories.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {Profile} from './Profile';
+
+const meta: Meta<typeof Profile> = {
+  title: 'Components/Profile',
+  component: Profile,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    Story => (
+      <div style={{width: '200px', height: '200px', padding: '1rem'}}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    src: 'https://wooteco-crew-wiki.s3.ap-northeast-2.amazonaws.com/%EC%9B%A8%EB%94%94%286%EA%B8%B0%29/g583lirp8yg.jpg',
+    size: 'large',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Playground 스토리
+export const Playground: Story = {};

client/src/components/Design/components/Profile/Profile.style.ts

@@ -0,0 +1,26 @@
+import {css} from '@emotion/react';
+
+import {Theme} from '@components/Design/theme/theme.type';
+
+import {ProfileSize} from './Profile.type';
+
+const SEMANTIC_SIZE: Record<ProfileSize, string> = {
+  small: '1rem',
+  medium: '1.75rem',
+  large: '3rem',
+};
+
+export const profileContainerStyle = (theme: Theme, size: ProfileSize) => {
+  return css({
+    display: 'flex',
+
+    width: SEMANTIC_SIZE[size],
+    height: SEMANTIC_SIZE[size],
+
+    borderRadius: '50%',
+
+    backgroundColor: theme.colors.white,
+
+    objectFit: 'cover',
+  });
+};

client/src/components/Design/components/Profile/Profile.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @emotion/react */
+import {useTheme} from '@components/Design/theme/HDesignProvider';
+
+import Image from '../Image/Image';
+
+import {profileContainerStyle} from './Profile.style';
+import {ProfileProps} from './Profile.type';
+
+export const Profile = ({size = 'medium', ...profileProps}: ProfileProps) => {
+  const {theme} = useTheme();
+
+  return <Image aria-label="프로필 이미지" {...profileProps} css={profileContainerStyle(theme, size)} />;
+};

client/src/components/Design/components/Profile/Profile.type.ts

@@ -0,0 +1,7 @@
+import {ImageProps} from '../Image/Image';
+
+export type ProfileSize = 'small' | 'medium' | 'large';
+
+export type ProfileProps = ImageProps & {
+  size?: ProfileSize;
+};

client/src/components/Loader/EventLoader.tsx

@@ -1,4 +1,4 @@
-import {useQueries} from '@tanstack/react-query';
+import {useSuspenseQueries} from '@tanstack/react-query';
 import {useEffect} from 'react';
 
 import {requestGetEvent} from '@apis/request/event';
@@ -16,7 +16,7 @@ import QUERY_KEYS from '@constants/queryKeys';
 const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHandlingStrategy | null> = {}) => {
   const eventId = getEventIdByUrl();
 
-  const queries = useQueries({
+  const queries = useSuspenseQueries({
     queries: [
       {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId, ...props})},
       {
@@ -44,9 +44,7 @@ const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHand
     }
   }, [stepsData.data, stepsData.isSuccess, updateTotalExpenseAmount]);
 
-  const isLoading = queries.some(query => query.isLoading === true);
-
-  return !isLoading && children;
+  return children;
 };
 
 export default EventLoader;

client/src/components/ShareEventButton/DesktopShareEventButton.tsx

@@ -27,12 +27,10 @@ const DesktopShareEventButton = ({onCopy}: DesktopShareEventButtonProps) => {
   };
 
   return (
-    <div style={{marginRight: '1rem'}}>
-      <Dropdown base="button" baseButtonText="정산 초대하기">
-        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
-        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
-      </Dropdown>
-    </div>
+    <Dropdown base="button" baseButtonText="정산 초대하기">
+      <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+      <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
+    </Dropdown>
   );
 };
 

client/src/components/ShareEventButton/MobileShareEventButton.tsx

@@ -29,13 +29,11 @@ const MobileShareEventButton = ({copyShare, kakaoShare}: MobileShareEventButtonP
   };
 
   return (
-    <div style={{marginRight: '1rem'}}>
-      <Dropdown base="button" baseButtonText="정산 초대하기" onBaseButtonClick={initKakao}>
-        <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
-        <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
-        <DropdownButton text="카카오톡으로 초대하기" onClick={kakaoShare} />
-      </Dropdown>
-    </div>
+    <Dropdown base="button" baseButtonText="정산 초대하기" onBaseButtonClick={initKakao}>
+      <DropdownButton text="링크 복사하기" onClick={copyAndToast} />
+      <DropdownButton text="QR코드로 초대하기" onClick={navigateQRPage} />
+      <DropdownButton text="카카오톡으로 초대하기" onClick={kakaoShare} />
+    </Dropdown>
   );
 };
 

client/src/constants/queryKeys.ts

@@ -8,6 +8,7 @@ const QUERY_KEYS = {
   images: 'images',
   kakaoClientId: 'kakao-client-id',
   kakaoLogin: 'kakao-login',
+  userInfo: 'userinfo',
 };
 
 export default QUERY_KEYS;

client/src/hooks/queries/user/useRequestGetUserInfo.ts

@@ -0,0 +1,16 @@
+import {useSuspenseQuery} from '@tanstack/react-query';
+
+import {requestGetUserInfo} from '@apis/request/user';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestGetUserInfo = () => {
+  const {data} = useSuspenseQuery({
+    queryKey: [QUERY_KEYS.userInfo],
+    queryFn: requestGetUserInfo,
+  });
+
+  return {userInfo: data};
+};
+
+export default useRequestGetUserInfo;

client/src/hooks/useEventPageLayout.ts

@@ -6,6 +6,7 @@ import getEventIdByUrl from '@utils/getEventIdByUrl';
 import useRequestGetEvent from './queries/event/useRequestGetEvent';
 import useRequestGetAllMembers from './queries/member/useRequestGetAllMembers';
 import useRequestGetSteps from './queries/step/useRequestGetSteps';
+import useRequestGetUserInfo from './queries/user/useRequestGetUserInfo';
 
 const useEventPageLayout = () => {
   const eventId = getEventIdByUrl();
@@ -14,13 +15,15 @@ const useEventPageLayout = () => {
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
   const {members} = useRequestGetAllMembers();
   const {steps} = useRequestGetSteps();
+  const {userInfo} = useRequestGetUserInfo();
   const billsCount = steps.flatMap(step => [...step.bills]).length;
 
   const event = {
     eventName,
     bankName,
     accountNumber,
     createdByGuest,
+    userInfo,
   };
 
   const eventSummary = {

client/src/pages/EventPage/EventPageFallback/EventPageLoading.tsx

@@ -0,0 +1,23 @@
+import {Flex, Icon, IconButton, MainLayout, TopNav} from '@components/Design';
+import {Footer} from '@components/Footer';
+
+const EventPageLoading = () => {
+  return (
+    <MainLayout backgroundColor="gray">
+      <Flex justifyContent="spaceBetween" alignItems="center">
+        <TopNav>
+          <TopNav.Item routePath="/">
+            <IconButton variants="none">
+              <Icon iconType="heundeut" />
+            </IconButton>
+          </TopNav.Item>
+          <TopNav.Item displayName="홈" routePath="/home" />
+          <TopNav.Item displayName="관리" routePath="/admin" />
+        </TopNav>
+      </Flex>
+      <Footer />
+    </MainLayout>
+  );
+};
+
+export default EventPageLoading;

client/src/pages/EventPage/EventPageLayout.tsx

@@ -1,8 +1,10 @@
 import type {Event} from 'types/serviceType';
 
-import {Outlet} from 'react-router-dom';
+import {Link, Outlet} from 'react-router-dom';
 import {useEffect} from 'react';
 
+import {Profile} from '@components/Design/components/Profile/Profile';
+
 import useEventPageLayout from '@hooks/useEventPageLayout';
 import useShareEvent from '@hooks/useShareEvent';
 import useAmplitude from '@hooks/useAmplitude';
@@ -14,6 +16,9 @@ import {Flex, Icon, IconButton, MainLayout, TopNav} from '@HDesign/index';
 
 import {isMobileDevice} from '@utils/detectDevice';
 import {updateMetaTag} from '@utils/udpateMetaTag';
+import getImageUrl from '@utils/getImageUrl';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
 
 export type EventPageContextProps = Event & {
   isAdmin: boolean;
@@ -50,6 +55,8 @@ const EventPageLayout = () => {
     };
   }, []);
 
+  const isKakaoUser = event.userInfo && event.userInfo.isGuest === false;
+
   return (
     <MainLayout backgroundColor="gray">
       <Flex justifyContent="spaceBetween" alignItems="center">
@@ -62,11 +69,18 @@ const EventPageLayout = () => {
           <TopNav.Item displayName="홈" routePath="/home" />
           <TopNav.Item displayName="관리" routePath="/admin" />
         </TopNav>
-        {isMobile ? (
-          <MobileShareEventButton copyShare={trackLinkShare} kakaoShare={trackKakaoShare} />
-        ) : (
-          <DesktopShareEventButton onCopy={trackLinkShare} />
-        )}
+        <Flex alignItems="center" gap="0.75rem" margin="0 1rem 0 0">
+          {isMobile ? (
+            <MobileShareEventButton copyShare={trackLinkShare} kakaoShare={trackKakaoShare} />
+          ) : (
+            <DesktopShareEventButton onCopy={trackLinkShare} />
+          )}
+          {isKakaoUser && (
+            <Link to={ROUTER_URLS.myPage}>
+              <Profile src={event.userInfo.profileImage ?? getImageUrl('runningDog', 'png')} size="medium" />
+            </Link>
+          )}
+        </Flex>
       </Flex>
       <Outlet context={outletContext} />
       <Footer />

client/src/router.tsx

@@ -33,6 +33,7 @@ const LoginPage = lazy(() => import('@pages/LoginPage'));
 const MyPage = lazy(() => import('@pages/MyPage'));
 const LoginRedirectPage = lazy(() => import('@pages/LoginPage/LoginRedirectPage'));
 const LoginFailFallback = lazy(() => import('@pages/LoginPage/LoginFailFallback'));
+const EventPageLoading = lazy(() => import('@pages/EventPage/EventPageFallback/EventPageLoading'));
 
 const router = createBrowserRouter([
   {
@@ -75,9 +76,11 @@ const router = createBrowserRouter([
           {
             path: ROUTER_URLS.event,
             element: (
-              <EventLoader>
-                <EventPage />
-              </EventLoader>
+              <Suspense fallback={<EventPageLoading />}>
+                <EventLoader>
+                  <EventPage />
+                </EventLoader>
+              </Suspense>
             ),
             children: [
               {

client/src/types/serviceType.ts

@@ -71,6 +71,8 @@ export type Event = BankAccount & {
 
 export type User = BankAccount & {
   nickname: Nickname;
+  isGuest: boolean;
+  profileImage: string | null;
 };
 
 export interface Report {