SKRF-458 fix : 프로필 페이지 4차 QA적용 (#212)

* fix : 북마크 카드 스타일 수정 * refactor : suspense위치 변경 * feat : 클럽 탈퇴 예외 코드 처리 * feat : 클럽 탈퇴 예외 코드 처리 * fix : 메인 배너 수정 * feat : 예매 매수 추가
Space-Club · Dec 1, 2023 · f887c47 · f887c47
1 parent ed72985
commit f887c47
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 10 deletions.
diff --git a/src/components/BookmarkedCard/BookmarkedCard.style.ts b/src/components/BookmarkedCard/BookmarkedCard.style.ts
@@ -1,15 +1,23 @@
 import Theme from '@/styles/Theme';
-import { ellipsisText } from '@/styles/common';
+import { ellipsisMultiLineText, ellipsisText } from '@/styles/common';
 import styled from '@emotion/styled';
 
 const BookmarkedCardContainer = styled.div`
   display: flex;
   width: 20rem;
+  height: 100%;
   cursor: pointer;
+  padding: 0 1rem;
   position: relative;
 `;
 
-const BookmarkedTitleStyled = styled.h3`
+const BookmarkedCardImageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const BookmarkedTitleStyled = styled(ellipsisMultiLineText)`
   font-size: 1.375rem;
   font-weight: 400;
   margin-bottom: 1.8rem;
@@ -47,4 +55,5 @@ export {
   BookmarkedInfoStyled,
   BookmarkedInfoLine,
   BookmarkedInfoLabelStyled,
+  BookmarkedCardImageWrapper,
 };
diff --git a/src/components/BookmarkedCard/BookmarkedCard.tsx b/src/components/BookmarkedCard/BookmarkedCard.tsx
@@ -7,6 +7,7 @@ import BookMark from '../common/BookMark/BookMark';
 import Poster from '../common/Poster/Poster';
 import {
   BookmarkedCardContainer,
+  BookmarkedCardImageWrapper,
   BookmarkedInfoLabelStyled,
   BookmarkedInfoLine,
   BookmarkedInfoStyled,
@@ -31,7 +32,9 @@ const BookmarkedCard = ({
         navigate(PATH.EVENT.DETAIL(eventId));
       }}
     >
-      <Poster posterSrc={posterImageUrl} width={7.6} />
+      <BookmarkedCardImageWrapper>
+        <Poster posterSrc={posterImageUrl} width={7.6} />
+      </BookmarkedCardImageWrapper>
       <BookmarkedInfoWrapper>
         <BookmarkedTitleStyled>{title}</BookmarkedTitleStyled>
         <BookmarkedInfoLine>

diff --git a/src/components/common/AppliedEventCard/AppliedEventCard.tsx b/src/components/common/AppliedEventCard/AppliedEventCard.tsx
@@ -17,6 +17,7 @@ interface AppliedEventCardProps
   extends Pick<Event, 'title' | 'posterImageUrl' | 'startDate' | 'location' | 'clubName'> {
   eventId: string;
   eventStatus: EventStatus;
+  ticketCount?: string;
 }
 
 const AppliedEventCard = ({
@@ -27,6 +28,7 @@ const AppliedEventCard = ({
   location,
   clubName,
   eventStatus,
+  ticketCount,
   ...props
 }: AppliedEventCardProps) => {
   const isPossibleCancel = eventStatus === 'PENDING' || eventStatus === 'CONFIRMED';
@@ -43,6 +45,7 @@ const AppliedEventCard = ({
           location={location}
           clubName={clubName}
           eventStatus={eventStatus}
+          ticketCount={ticketCount}
         />
       </EventLeftSection>
       <EventRightSection>

diff --git a/src/components/common/AppliedEventInfo/AppliedEventInfo.tsx b/src/components/common/AppliedEventInfo/AppliedEventInfo.tsx
@@ -13,6 +13,7 @@ import {
 interface AppliedEventInfoProps
   extends Pick<Event, 'title' | 'startDate' | 'location' | 'clubName'> {
   eventId: string;
+  ticketCount?: string;
   eventStatus: EventStatus;
 }
 
@@ -21,6 +22,7 @@ const AppliedEventInfo = ({
   startDate,
   location,
   clubName,
+  ticketCount,
   eventStatus,
 }: AppliedEventInfoProps) => {
   return (
@@ -38,6 +40,12 @@ const AppliedEventInfo = ({
         장소
         <SemiBlackFont>{location}</SemiBlackFont>
       </EventDescription>
+      {ticketCount && (
+        <EventDescription>
+          예매매수
+          <SemiBlackFont>{ticketCount}</SemiBlackFont>
+        </EventDescription>
+      )}
     </EventInfoSection>
   );
 };

diff --git a/src/components/common/MainBanner/MainBanner.style.ts b/src/components/common/MainBanner/MainBanner.style.ts
@@ -1,12 +1,15 @@
 import Theme from '@/styles/Theme';
+import { twoLineTitle } from '@/styles/common';
 import styled from '@emotion/styled';
 
 const BannerContainerStyled = styled.div`
   width: 100%;
+  max-width: 60rem;
   height: 19rem;
   border-radius: 2.3125rem;
-  margin: 2rem 0;
+  margin: 4rem 0;
   overflow: hidden;
+  cursor: pointer;
 `;
 
 const BannerWrapperStyled = styled.div`
@@ -21,7 +24,7 @@ const BannerImageStyled = styled.img`
   height: 100%;
 `;
 
-const BannerTopTitleStyled = styled.h1`
+const BannerTopTitleStyled = styled(twoLineTitle)`
   position: absolute;
   top: 1.56rem;
   left: 2.65rem;

diff --git a/src/components/common/MainBanner/MainBanner.tsx b/src/components/common/MainBanner/MainBanner.tsx
@@ -28,7 +28,7 @@ const MainBanner = () => {
             <BannerWrapperStyled onClick={() => navigate(PATH.EVENT.DETAIL(eventInfo.eventId))}>
               <ClubCoverTransparent />
               <BannerTopTitleStyled>
-                {clubInfo.name}
+                {eventInfo.eventCategory === 'RECRUITMENT' ? clubInfo.name : eventInfo.title}
                 {
                   MAIN_BANNER_EVENTS_TEXT[
                     eventInfo.eventCategory as keyof typeof MAIN_BANNER_EVENTS_TEXT

diff --git a/src/constants/event.ts b/src/constants/event.ts
@@ -88,8 +88,8 @@ const SUBMIT_FORM_OPTIONS = {
 };
 
 const MAIN_BANNER_EVENTS_TEXT: MainBannerText = {
-  SHOW: ' 공연 참여 신청하기',
-  PROMOTION: ' 행사 참여 신청하기',
+  SHOW: ' 참여 신청하기',
+  PROMOTION: ' 참여 신청하기',
   RECRUITMENT: ' 신입부원 모집 중!',
 };
 

diff --git a/src/constants/exceptionCode.ts b/src/constants/exceptionCode.ts
@@ -30,6 +30,7 @@ const EXCEPTION_CODE = {
   MAX_IMAGE_SIZE_EXCEEDED: 'MAX_IMAGE_SIZE_EXCEEDED',
   INVALID_FILE_EXTENSION: 'INVALID_FILE_EXTENSION',
   BAD_WORD_DETECTED: 'BAD_WORD_DETECTED',
+  USER_CANNOT_WITHDRAW: 'USER_CANNOT_WITHDRAW',
 } as const;
 
 const EXCEPTION_CODE_MESSAGE: ExceptionCodeMessage = {
@@ -62,6 +63,7 @@ const EXCEPTION_CODE_MESSAGE: ExceptionCodeMessage = {
   MAX_IMAGE_SIZE_EXCEEDED: '이미지의 최대 크기를 초과했습니다.',
   INVALID_FILE_EXTENSION: '지원하지 않는 파일 형식입니다.',
   BAD_WORD_DETECTED: '비속어가 포함되어 있습니다.',
+  USER_CANNOT_WITHDRAW: '소속된 클럽을 모두 나간 뒤 탈퇴할 수 있습니다.',
 };
 
 export { EXCEPTION_CODE, EXCEPTION_CODE_MESSAGE };
diff --git a/src/constants/modalMessage.ts b/src/constants/modalMessage.ts
@@ -10,7 +10,8 @@ const MODAL_TEXT = {
     '신청자의 정보를 받지 않으면 참여자의 정보를 볼 수 없어요! 그래도 진행하시겠어요?',
   DELETE_EVENT: '정말 행사를 삭제하시겠습니까?',
   DELETE_CLUB: '정말 클럽을 삭제하시겠습니까?',
-  DELETE_USER: '정말 스페이스 클럽을 탈퇴하시겠어요? 관련된 데이터는 모두 삭제됩니다.',
+  DELETE_USER:
+    '정말 스페이스 클럽을 탈퇴하시겠어요? 3일 안에 다시 로그인 하시면 데이터를 복구할 수 있지만 이후에는 관련 데이터가 모두 삭제됩니다',
   FORM_OPTION_EMPTY_TITLE: '제목이 입력되지 않은 항목이 있습니다.',
   CANCELED_SUBMITTED_FORM: '제출된 폼을 취소 시키겠습니까? 취소된 폼은 되돌릴 수 없습니다.',
 };

diff --git a/src/hooks/query/user/useDeleteUserMutation.ts b/src/hooks/query/user/useDeleteUserMutation.ts
@@ -1,12 +1,16 @@
 import deleteUser from '@/apis/users/deleteUser';
+import { EXCEPTION_CODE, EXCEPTION_CODE_MESSAGE } from '@/constants/exceptionCode';
 import { PATH } from '@/constants/path';
 import useToast from '@/hooks/useToast';
+import { HttpException } from '@/types/common';
 import { deleteStorage } from '@/utils/localStorage';
 
 import { useNavigate } from 'react-router-dom';
 
 import { useMutation } from '@tanstack/react-query';
 
+import { AxiosError } from 'axios';
+
 const useDeleteUserMutation = () => {
   const navigate = useNavigate();
   const { createToast } = useToast();
@@ -18,6 +22,11 @@ const useDeleteUserMutation = () => {
       deleteStorage('token');
       navigate(PATH.LOGIN);
     },
+    onError: (error: AxiosError<HttpException>) => {
+      if (error.response?.data.code === EXCEPTION_CODE.USER_CANNOT_WITHDRAW) {
+        createToast({ message: EXCEPTION_CODE_MESSAGE.USER_CANNOT_WITHDRAW, toastType: 'error' });
+      }
+    },
   });
 
   return { withdrawService };

diff --git a/src/pages/ProfilePage/AppliedEvents.tsx b/src/pages/ProfilePage/AppliedEvents.tsx
@@ -34,6 +34,7 @@ const AppliedEvents = () => {
               location={event.location}
               clubName={event.clubName}
               eventStatus={event.participationStatus}
+              ticketCount={event.ticketCount}
             />
           ))
         ) : (

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
@@ -27,8 +27,8 @@ const ProfilePage = () => {
           <DeleteUserButton />
         </DeleteUserButtonWrapper>
       </Header>
-      <Profile />
       <Suspense fallback={<Spinner />}>
+        <Profile />
         <ProfileBottomWrapper>
           <AppliedEventTabContainer>
             <Tab tabItems={PROFILE_TABS} />

diff --git a/src/types/api/getAppliedEvent.ts b/src/types/api/getAppliedEvent.ts
@@ -9,6 +9,7 @@ interface GetAppliedEventData {
   location: string;
   participationStatus: EventStatus;
   posterImageUrl: string;
+  ticketCount: string;
 }
 
 interface GetAppliedEventResponse {