[온보딩] 사파리에서 날짜 형식 NaN, undefined 뜨는 현상 수정 (#451)

* feat: 사파리 undefined 해결을 위한 TEST 컨테이너 작성

* feat: 안드로이드/pc 공유하기 예외처리 다른 브랜치에서 복붙

* feat: 토스트 메세지 추가

* feat: 사파리 날짜계산 undefined 해결

* chore: 필요없는 코드 제거

* fix: 병합 해결

src/components/OnBoardingSteps/Step06/Step06.tsx

@@ -39,8 +39,8 @@ const OnboardingFinal = (props: OnboardingFinalProps) => {
     new Date(onboardingInfo.tournamentStartDate),
     DURATION_MAPPING[onboardingInfo.tournamentDuration as keyof typeof DURATION_MAPPING] as number,
   );
+  const formattedEndDate = format(tournamentEndDate, 'yyyy-MM-dd');
 
-  const formattedEndDate = format(tournamentEndDate, 'yyyy.MM.dd(EEE)');
   const isDeliveryBeforeEnd =
     new Date(onboardingInfo.deliveryDate).getTime() < tournamentEndDate.getTime();
 
@@ -93,6 +93,7 @@ const OnboardingFinal = (props: OnboardingFinalProps) => {
                   {formatDuration(onboardingInfo.tournamentDuration)}
                 </S.InfoContainerDetail>
               </S.TournamentProceedWrapper>
+
               <>
                 <S.InfoContainer>
                   <S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>

src/core/toast-messages.ts

@@ -8,4 +8,5 @@ export const MESSAGE = Object.freeze({
   HEIGHT_SMALL: `이미지 세로길이가 너무 작습니다. ${IMAGE_HEIGHT.MIN}px 이상 이미지를 선택해주세요.`,
   HEIGHT_BIG: `이미지 세로길이가 너무 큽니다. ${IMAGE_HEIGHT.MAX}px 이하 이미지를 선택해주세요. `,
   UNSELECT_DATE: '날짜를 먼저 선택해주세요.',
+  INVALID_INVITATION_CODE: '유효하지 않은 초대코드입니다.',
 });

src/pages/Participants/ParticipantsView.tsx

@@ -11,6 +11,8 @@ import useFormatDate from '../../hooks/onboarding/useFormatDate';
 import { addHours, format } from 'date-fns';
 import OnboardingFinalFooter from '../../components/OnBoardingSteps/Step06/OnboardingFinalFooter';
 import OnboardingFinalHeader from '../../components/OnBoardingSteps/Step06/OnboardingFinalHeader';
+import { toast } from 'react-toastify';
+import { MESSAGE } from '../../core/toast-messages';
 
 const DURATION_MAPPING = {
   SIX_HOURS: 6,
@@ -25,7 +27,6 @@ const ParticipantsView = () => {
   const { formatDuration, formatDate } = useFormatDate();
   const { mutation } = usePostParticipation();
   const navigate = useNavigate();
-
   console.log('useGetGifteeInfo로 받아온 data', data);
 
   /**@see 카카오 공유하기를 위한 useEffect */
@@ -43,23 +44,21 @@ const ParticipantsView = () => {
     DURATION_MAPPING[data.data.tournamentDuration as keyof typeof DURATION_MAPPING] as number,
   );
 
-  const formattedEndDate = format(tournamentEndDate, 'yyyy.MM.dd(EEE)');
+  const formattedEndDate = format(tournamentEndDate, 'yyyy-MM-dd');
 
   /**@see 선물 전달 일이 토너먼트 종료일보다 일찍일 때 */
   const isDeliveryBeforeEnd =
     new Date(data.data.deliveryDate).getTime() < tournamentEndDate.getTime();
 
   useEffect(() => {
     setIsToken(localStorage.getItem('EXIT_LOGIN_TOKEN') !== null);
-
-    console.log('isTOken', isToken);
-    console.log('isDeliveryBeforeEnd', isDeliveryBeforeEnd);
   }, [isToken, isDeliveryBeforeEnd]);
 
   const handleClickRoom = async (body: string | null) => {
     console.log('입장 버튼 클릭! 그리고 초대 코드', invitationCode);
     if (body === null) {
-      console.error('초대 코드가 유효하지 않습니다.');
+      console.error(MESSAGE.INVALID_INVITATION_CODE);
+      toast(MESSAGE.INVALID_INVITATION_CODE);
       return;
     }
     try {