Merge branch 'fe-dev' into feature/#855

client/src/apis/request/event.ts

@@ -1,4 +1,4 @@
-import {Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
@@ -53,3 +53,9 @@ export const requestPatchUser = async (args: RequestPatchUser) => {
     },
   });
 };
+
+export const requestGetCreatedEvents = async () => {
+  return await requestGet<CreatedEvents>({
+    endpoint: `${USER_API_PREFIX}/mine`,
+  });
+};

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/ChipGroup/ChipGroup.tsx

@@ -18,7 +18,7 @@ const ChipGroup = ({color, texts}: Props) => {
   return (
     <div css={chipGroupStyle}>
       {texts.map(text => (
-        <Chip color={color} text={text} />
+        <Chip key={text} color={color} text={text} />
       ))}
     </div>
   );

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

@@ -0,0 +1,19 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';
+
+export const inProgressCheckStyle = ({inProgress, theme}: WithTheme<{inProgress: boolean}>) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.125rem',
+    border: `1px solid ${inProgress ? theme.colors.primary : theme.colors.gray}`,
+    borderRadius: '0.5rem',
+    padding: '0.25rem 0.375rem',
+    height: '1.25rem',
+
+    '.in-progress-check-text': {
+      color: inProgress ? theme.colors.primary : theme.colors.gray,
+      paddingTop: '0.0625rem',
+    },
+  });

client/src/components/Design/components/CreatedEvent/CreatedEvent.tsx

@@ -0,0 +1,70 @@
+/** @jsxImportSource @emotion/react */
+import {useNavigate} from 'react-router-dom';
+
+import Text from '@HDcomponents/Text/Text';
+
+import {useTheme} from '@components/Design';
+
+import Flex from '../Flex/Flex';
+import Input from '../Input/Input';
+
+import {CreatedEventItemProps, CreatedEventListProps} from './CreatedEvent.type';
+import {inProgressCheckStyle} from './CreatedEvent.style';
+
+function InProgressCheck({inProgress}: {inProgress: boolean}) {
+  const {theme} = useTheme();
+
+  return (
+    <div css={inProgressCheckStyle({theme, inProgress})}>
+      <Text size="tiny" className="in-progress-check-text">
+        {inProgress ? '진행' : '완료'}
+      </Text>
+    </div>
+  );
+}
+
+function CreatedEventItem({createdEvent}: CreatedEventItemProps) {
+  const navigate = useNavigate();
+  const onClick = () => {
+    navigate(`/event/${createdEvent.eventId}/admin`);
+  };
+
+  return (
+    <Flex
+      justifyContent="spaceBetween"
+      alignItems="center"
+      height="2.5rem"
+      padding="0.5rem 1rem"
+      paddingInline="0.5rem"
+      onClick={onClick}
+    >
+      <Flex gap="0.5rem" alignItems="center">
+        <InProgressCheck inProgress={createdEvent.isFinished} />
+        <Text size="bodyBold" color="onTertiary">
+          {createdEvent.eventName}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+function CreatedEventList({createdEvents, eventName, onSearch, placeholder}: CreatedEventListProps) {
+  return (
+    <Flex
+      flexDirection="column"
+      width="100%"
+      backgroundColor="white"
+      padding="0.5rem 1rem"
+      paddingInline="0.5rem"
+      gap="0.5rem"
+      height="100%"
+      cssProp={{borderRadius: '1rem'}}
+    >
+      <Input inputType="search" value={eventName} onChange={onSearch} placeholder={placeholder} />
+      {createdEvents.length !== 0 &&
+        createdEvents.map(createdEvent => <CreatedEventItem key={createdEvent.eventId} createdEvent={createdEvent} />)}
+    </Flex>
+  );
+}
+
+export default CreatedEventList;

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

@@ -0,0 +1,12 @@
+import {CreatedEvent} from './../../../../types/serviceType';
+
+export interface CreatedEventItemProps {
+  createdEvent: CreatedEvent;
+}
+
+export interface CreatedEventListProps {
+  eventName: string;
+  onSearch: ({target}: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  createdEvents: CreatedEvent[];
+}

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

@@ -9,6 +9,7 @@ const QUERY_KEYS = {
   kakaoClientId: 'kakao-client-id',
   kakaoLogin: 'kakao-login',
   userInfo: 'user-info',
+  createdEvents: 'createdEvents',
 };
 
 export default QUERY_KEYS;

client/src/constants/routerUrls.ts

@@ -18,6 +18,7 @@ export const ROUTER_URLS = {
   event: EVENT,
   login: '/login',
   myPage: '/mypage',
+  createdEvents: '/mypage/events',
   guestEventLogin: `${EVENT_WITH_EVENT_ID}/admin/guest/login`,
   memberEventLogin: `${EVENT_WITH_EVENT_ID}/admin/member/login`,
   kakaoLoginRedirectUri: process.env.KAKAO_REDIRECT_URI,

client/src/hooks/queries/bill/useRequestGetBillDetails.ts

@@ -15,7 +15,7 @@ const useRequestGetBillDetails = ({billId, ...props}: WithErrorHandlingStrategy<
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.billDetails, billId],
+    queryKey: [QUERY_KEYS.billDetails, billId, eventId],
     queryFn: () => requestGetBillDetails({eventId, billId, ...props}),
   });
 

client/src/hooks/queries/event/useRequestGetCreatedEvents.ts

@@ -0,0 +1,23 @@
+import {useQuery} from '@tanstack/react-query';
+
+import {requestGetCreatedEvents} from '@apis/request/event';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestGetCreatedEvents = () => {
+  const {data, ...rest} = useQuery({
+    queryKey: [QUERY_KEYS.createdEvents],
+    queryFn: () => requestGetCreatedEvents(),
+    select: data => ({
+      ...data,
+      events: data.events.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
+    }),
+  });
+
+  return {
+    events: data?.events,
+    ...rest,
+  };
+};
+
+export default useRequestGetCreatedEvents;

client/src/hooks/queries/event/useRequestGetEvent.ts

@@ -11,7 +11,7 @@ const useRequestGetEvent = ({...props}: WithErrorHandlingStrategy | null = {}) =
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useSuspenseQuery({
-    queryKey: [QUERY_KEYS.event],
+    queryKey: [QUERY_KEYS.event, eventId],
     queryFn: () => requestGetEvent({eventId, ...props}),
   });
 

client/src/hooks/queries/member/useRequestGetAllMembers.ts

@@ -11,7 +11,7 @@ const useRequestGetAllMembers = ({...props}: WithErrorHandlingStrategy | null =
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.allMembers],
+    queryKey: [QUERY_KEYS.allMembers, eventId],
     queryFn: () => requestGetAllMembers({eventId, ...props}),
   });
 

client/src/hooks/queries/member/useRequestGetCurrentMembers.ts

@@ -11,7 +11,7 @@ const useRequestGetCurrentMembers = ({...props}: WithErrorHandlingStrategy | nul
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.currentMembers],
+    queryKey: [QUERY_KEYS.currentMembers, eventId],
     queryFn: () => requestGetCurrentMembers({eventId, ...props}),
   });
 

client/src/hooks/queries/report/useRequestGetReports.ts

@@ -11,7 +11,7 @@ const useRequestGetReports = ({...props}: WithErrorHandlingStrategy | null = {})
   const eventId = getEventIdByUrl();
 
   const {data, ...rest} = useQuery({
-    queryKey: [QUERY_KEYS.reports],
+    queryKey: [QUERY_KEYS.reports, eventId],
     queryFn: () => requestGetReports({eventId, ...props}),
   });
 

client/src/hooks/queries/step/useRequestGetSteps.ts

@@ -11,7 +11,7 @@ const useRequestGetSteps = ({...props}: WithErrorHandlingStrategy | null = {}) =
   const eventId = getEventIdByUrl();
 
   const queryResult = useQuery({
-    queryKey: [QUERY_KEYS.steps],
+    queryKey: [QUERY_KEYS.steps, eventId],
     queryFn: () => requestGetSteps({eventId, ...props}),
   });