Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Feb 29, 2024
+8 −7
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
127d7e2
feat: 사파리 undefined 해결을 위한 TEST 컨테이너 작성
ExceptAnyone Feb 29, 2024
eec548b
feat: 안드로이드/pc 공유하기 예외처리 다른 브랜치에서 복붙
ExceptAnyone Feb 29, 2024
792615b
feat: 토스트 메세지 추가
ExceptAnyone Feb 29, 2024
0203c9c
feat: 사파리 날짜계산 undefined 해결
ExceptAnyone Feb 29, 2024
9b889bd
chore: 필요없는 코드 제거
ExceptAnyone Feb 29, 2024
203f47b
Merge branch 'develop' into feat/#448-kakao-redirect-tournament-endtime
ExceptAnyone Feb 29, 2024
62f1a1b
fix: 병합 해결
ExceptAnyone Feb 29, 2024
dcfc364
Merge branch 'develop' into feat/#448-kakao-redirect-tournament-endtime
ExceptAnyone Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/components/OnBoardingSteps/Step06/OnboardingFinalFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from 'styled-components';
import BtnFill from '../../common/Button/Cta/fill/BtnFill';
import useHandleShare from '../../../hooks/common/useHandleShare';
import { useHandleShare } from '../../../hooks/common/useHandleShare';
import useClipboard from '../../../hooks/useCopyClip';

interface OnboardingFinalFooterProps {
invitationCode: string;
Expand All @@ -10,6 +11,7 @@ interface OnboardingFinalFooterProps {
}
const OnboardingFinalFooter = (props: OnboardingFinalFooterProps) => {
const { onClick, giftee, invitationCode } = props;
const { handleCopyToClipboard } = useClipboard();

const handleClick = () => {
if (onClick) {
Expand All @@ -28,11 +30,11 @@ const OnboardingFinalFooter = (props: OnboardingFinalFooterProps) => {
}}
/**@TODO 확인을 위한 local 주소로 공유. 추후에 배포페이지로 변경하기 */
onClick={() =>
// handleCopyToClipboard(`${PAGE.LOCAL_RESULT_PAGE}${invitationCode}`)
// handleCopyToClipboard(`${PAGE.DEPLOY_RESULT_PAGE}${invitationCode}`)
useHandleShare(
`${giftee}님을 위한 선물방이 개설됐어요`,
`${giftee}님을 위한 선물방이 개설됐어요`,
`${import.meta.env.VITE_APP_BASE_URL_KAKAO}result/${invitationCode}`,
handleCopyToClipboard,
)
}
>
Expand All @@ -51,8 +53,7 @@ const OnboardingFinalFooterWrapper = styled.div`

gap: 0.8rem;
height: 5.2rem;
bottom: 2rem;
margin-top: 3.2rem;
margin-top: 5rem;
`;

export default OnboardingFinalFooter;
51 changes: 16 additions & 35 deletions src/components/OnBoardingSteps/Step06/Step06.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분이 브라우저 이슈 때문에 생긴 수정 사항이군요!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞아여 ㅠ PR 내용 조금 더 자세하게 수정하고 관련 링크 첨부했는데 한 번 확인해보셔도 좋을 것 같습니다!!


const formattedEndDate = format(tournamentEndDate, 'yyyy.MM.dd(EEE)');
const isDeliveryBeforeEnd =
new Date(onboardingInfo.deliveryDate).getTime() < tournamentEndDate.getTime();

Expand Down Expand Up @@ -69,7 +69,7 @@ const OnboardingFinal = (props: OnboardingFinalProps) => {
</S.SecondTitleWrapper>
</div>
<S.ProgressLineAndDetailContainer>
{isDeliveryBeforeEnd === true ? (
{isDeliveryBeforeEnd === false ? (
<IcBeforeTournamentProgressLine
style={{ width: '1.6rem', height: '24.1rem', marginTop: '3.5rem' }}
/>
Expand All @@ -94,40 +94,21 @@ const OnboardingFinal = (props: OnboardingFinalProps) => {
</S.InfoContainerDetail>
</S.TournamentProceedWrapper>

{/* isDeliveryBeforeEnd가 true인 경우와 false인 경우에 따라 렌더링하는 순서가 달라짐 */}
{isDeliveryBeforeEnd === true ? (
<>
<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>
<>
<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>

<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(onboardingInfo.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>
</>
) : (
<>
<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(onboardingInfo.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>

<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>
</>
)}
<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(onboardingInfo.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>
</>
</S.DetailWrapper>
</S.ProgressLineAndDetailContainer>
<OnboardingFinalFooter
Expand Down
1 change: 1 addition & 0 deletions src/core/toast-messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '유효하지 않은 초대코드입니다.',
});
19 changes: 13 additions & 6 deletions src/hooks/common/useHandleShare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
export const useHandleShare = async (title: string, text: string) => {
export const useHandleShare = async (
title: string,
text: string,
url: string,
handleCopyToClipboard: (text: string) => void,
) => {
try {
await navigator.share({
title: title,
text: text,
url: window.location.href,
url: url,
});
} catch (error) {
console.error('Web Share API를 지원하지 않습니다.');
console.error('Web Share API를 사용할 수 없습니다.', error);
}
return <div></div>;
};

export default useHandleShare;
if (typeof navigator.share === 'undefined') {
handleCopyToClipboard(url);
console.log('클릭');
}
};
62 changes: 21 additions & 41 deletions src/pages/Participants/ParticipantsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -25,7 +27,6 @@ const ParticipantsView = () => {
const { formatDuration, formatDate } = useFormatDate();
const { mutation } = usePostParticipation();
const navigate = useNavigate();

console.log('useGetGifteeInfo로 받아온 data', data);

/**@see 카카오 공유하기를 위한 useEffect */
Expand All @@ -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 {
Expand Down Expand Up @@ -98,7 +97,7 @@ const ParticipantsView = () => {
</S.SecondTitleWrapper>
</div>
<S.ProgressLineAndDetailContainer>
{isDeliveryBeforeEnd === true ? (
{isDeliveryBeforeEnd === false ? (
<IcBeforeTournamentProgressLine
style={{ width: '1.6rem', height: '24.1rem', marginTop: '3.5rem' }}
/>
Expand All @@ -123,40 +122,21 @@ const ParticipantsView = () => {
</S.InfoContainerDetail>
</S.TournamentProceedWrapper>

{/* isDeliveryBeforeEnd가 true인 경우와 false인 경우에 따라 렌더링하는 순서가 달라짐 */}
{isDeliveryBeforeEnd === true ? (
<>
<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>

<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(data.data.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>
</>
) : (
<>
<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(data.data.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>

<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>
</>
)}
<>
<S.InfoContainer>
<S.InfoContainerTitle>토너먼트 종료</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(formattedEndDate, false)}
</S.InfoContainerDetail>
</S.InfoContainer>

<S.InfoContainerPresent>
<S.InfoContainerTitle>선물 전달</S.InfoContainerTitle>
<S.InfoContainerDetail>
{formatDate(data.data.deliveryDate, false)}
</S.InfoContainerDetail>
</S.InfoContainerPresent>
</>
</S.DetailWrapper>
</S.ProgressLineAndDetailContainer>

Expand Down