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

[온보딩] step02 -> step03 넘어갈 때 스켈레톤 ui 적용 #483

Merged
merged 10 commits into from
Mar 11, 2024
Merged

[온보딩] step02 -> step03 넘어갈 때 스켈레톤 ui 적용 #483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
750c527
feat: 이미지 HEIGHT 최대값 10000으로 변경
ExceptAnyone Mar 11, 2024
8a1e6ab
feat: Loading 상태 추가 후 일단 스피너로 추가
ExceptAnyone Mar 11, 2024
71f213e
chore: 필요없는 주석 및 코드 제거
ExceptAnyone Mar 11, 2024
682ec82
feat: step05 로딩 스피너 추가
ExceptAnyone Mar 11, 2024
15f867f
fix: 이미지 최대 세로 값 5000px로 변경
ExceptAnyone Mar 11, 2024
1412348
feat: 온보딩 전용 스켈레톤 ui 컴포넌트 구현
ExceptAnyone Mar 11, 2024
1779165
feat: 온보딩 전용 스켈레톤 ui Step02에 적용
ExceptAnyone Mar 11, 2024
574842e
style: 온보딩 스켈레톤 스타일 코드 분리
ExceptAnyone Mar 11, 2024
5f3c4f1
Merge branch 'develop' into feat/#479-onboarding-skeleton
ExceptAnyone Mar 11, 2024
7462951
Merge branch 'develop' into feat/#479-onboarding-skeleton
ExceptAnyone Mar 11, 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
15 changes: 15 additions & 0 deletions src/components/OnBoardingSteps/Skeleton/Skeleton.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import styled from 'styled-components';

export const OnboardingSkeletonWrapper = styled.div`
gap: 11.6rem;
`;

export const TitleWrapper = styled.div`
${({ theme }) => theme.mixin.flexBox({ direction: 'column' })};
gap: 0.9rem;
border-radius: 4px;
`;

export const DetailWrapper = styled.div`
margin-top: 11.6rem;
`;
38 changes: 38 additions & 0 deletions src/components/OnBoardingSteps/Skeleton/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';
import * as S from './Skeleton.style';

const OnboardingSkeleton = () => {
return (
<S.OnboardingSkeletonWrapper>
<S.TitleWrapper>
<Skeleton
count={1}
style={{
width: '12.3rem',
height: '2.4rem',
}}
/>
<Skeleton
count={1}
style={{
width: '10.2rem',
height: '2.4rem',
}}
/>
<Skeleton
count={1}
style={{
width: '18.9rem',
height: '2.4rem',
}}
/>
</S.TitleWrapper>
<S.DetailWrapper>
<Skeleton style={{ width: '100%', height: '0.1rem' }} />
</S.DetailWrapper>
</S.OnboardingSkeletonWrapper>
);
};

export default OnboardingSkeleton;
98 changes: 53 additions & 45 deletions src/components/OnBoardingSteps/Step02/Step02.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import usePreviewImage from '../../../hooks/common/usePreviewImage';
import usePostPresignedUrl from '../../../hooks/queries/etc/usePostPresignedUrl';
import { useOnboardingContext } from '../../../context/Onboarding/OnboardingContext';
import useBinarizeAndPutImage from '../../../hooks/queries/onboarding/useBinarizeAndPutImage';
import React from 'react';
import React, { useState } from 'react';
import OnboardingSkeleton from '../Skeleton/Skeleton';

/** @TODO 추후 presigned URL 진행 */
interface ThumbnailInputProps {
Expand All @@ -17,6 +18,7 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
const { onNext } = props;
const { handleImageUpload, previewImageInfo } = usePreviewImage();
const { updateOnboardingInfo } = useOnboardingContext();
const [isLoading, setIsLoading] = useState<boolean>(false);

const { binarizeAndPutImage } = useBinarizeAndPutImage();

Expand All @@ -28,11 +30,11 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
postPresignedUrl.mutate(filename, {
onSuccess: async (data) => {
/** @todo 파일네임 파싱하는 함수 유틸로 처리 */
setIsLoading(true);
const presignedUrl = data.presignedUrl.split('?')[0];
console.log('data.presignedUrl', data.presignedUrl);
console.log('parsingpresignedUrl', presignedUrl);
updateOnboardingInfo({ imageUrl: presignedUrl });

if (previewImageInfo.file) {
await binarizeAndPutImage({ presignedUrl, file: previewImageInfo.file });
}
Expand All @@ -47,51 +49,57 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {

return (
<>
<Title>썸네일을 등록해주세요</Title>
<S.IcEmptyThumbnailWrapper>
<input
type='file'
accept='image/jpeg, image/png, image/gif, image/heic, image/webp '
style={{ display: 'none' }}
id='imgInput'
onChange={handleImageUpload}
/>
<label htmlFor='imgInput'>
{previewImageInfo.previewImage ? (
<S.ThumbnailWrapper>
<S.PreviewImage src={previewImageInfo.previewImage} alt='preview' />
<IcImgEditBtn
style={{
position: 'absolute',
width: '2.8rem',
height: '2.8rem',
bottom: '1.2rem',
right: '0.8rem',
cursor: 'pointer',
}}
/>
</S.ThumbnailWrapper>
) : (
<IcEmptyThumbnailFinal
style={{
position: 'relative',
width: '24rem',
height: '24rem',
cursor: 'pointer',
}}
{isLoading ? (
<OnboardingSkeleton />
) : (
<>
<Title>썸네일을 등록해주세요</Title>
<S.IcEmptyThumbnailWrapper>
<input
type='file'
accept='image/jpeg, image/png, image/gif, image/heic '
style={{ display: 'none' }}
id='imgInput'
onChange={handleImageUpload}
/>
)}
</label>
</S.IcEmptyThumbnailWrapper>
<label htmlFor='imgInput'>
{previewImageInfo.previewImage ? (
<S.ThumbnailWrapper>
<S.PreviewImage src={previewImageInfo.previewImage} alt='preview' />
<IcImgEditBtn
style={{
position: 'absolute',
width: '2.8rem',
height: '2.8rem',
bottom: '1.2rem',
right: '0.8rem',
cursor: 'pointer',
}}
/>
</S.ThumbnailWrapper>
) : (
<IcEmptyThumbnailFinal
style={{
position: 'relative',
width: '24rem',
height: '24rem',
cursor: 'pointer',
}}
/>
)}
</label>
</S.IcEmptyThumbnailWrapper>

<OnBoardingBtn
isActivated={previewImageInfo.previewImage !== null}
setStep={() => {
fetchPresignedUrl(previewImageInfo.imageName);
}}
>
다음
</OnBoardingBtn>
<OnBoardingBtn
isActivated={previewImageInfo.previewImage !== null}
setStep={() => {
fetchPresignedUrl(previewImageInfo.imageName);
}}
>
다음
</OnBoardingBtn>
</>
)}
</>
);
});
Expand Down
82 changes: 46 additions & 36 deletions src/components/OnBoardingSteps/Step05/Step05.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { useOnboardingContext } from '../../../context/Onboarding/OnboardingCont
import useSetTournamentDuration from '../../../hooks/onboarding/useSetTournamentDuration';
import { TimeOptionHelper } from '../../../utils/TimeOptionHelper';
import SelectTimeOptions from './SelectTimeOptions';
import { useState } from 'react';
import Loading from '../../../pages/Loading/Loading';

interface SetTournamentDurationProps {
onNext: VoidFunction;
Expand All @@ -26,11 +28,13 @@ const SetTournamentDuration = (props: SetTournamentDurationProps) => {
const { onboardingInfo, updateOnboardingInfo } = useOnboardingContext();
const { handleTimeSelect, selectedOption } = useSetTournamentDuration();
const { mutation } = usePostOnboardingInfo();
const [isLoading, setIsLoading] = useState<boolean>(false);

const postOnboarding = async () => {
try {
const response = mutation.mutate(onboardingInfo, {
onSuccess: (data) => {
setIsLoading(true);
setInvitationCode(data.invitationCode);
console.log('step05 postOnboarding response', response);
const roomId = data.roomId;
Expand All @@ -46,44 +50,50 @@ const SetTournamentDuration = (props: SetTournamentDurationProps) => {

return (
<>
<Title>
선물 토너먼트를 <br /> 몇 시간 동안 진행할까요?
</Title>
<S.SubTitleWrapper>
<SubTitle subTitle='토너먼트가 아래 시간 동안 진행돼요.' />
</S.SubTitleWrapper>
<S.SetTournamentDurationWrapper>
{timeOptions.map((hours) => {
const { dateType, isAfterDelivery } = TimeOptionHelper(
hours.time,
onboardingInfo.tournamentStartDate,
onboardingInfo.deliveryDate,
);
{isLoading ? (
<Loading />
) : (
<>
<Title>
선물 토너먼트를 <br /> 몇 시간 동안 진행할까요?
</Title>
<S.SubTitleWrapper>
<SubTitle subTitle='토너먼트가 아래 시간 동안 진행돼요.' />
</S.SubTitleWrapper>
<S.SetTournamentDurationWrapper>
{timeOptions.map((hours) => {
const { dateType, isAfterDelivery } = TimeOptionHelper(
hours.time,
onboardingInfo.tournamentStartDate,
onboardingInfo.deliveryDate,
);

return (
<SelectTimeOptions
key={`${hours.time}시간`}
optionText={`${hours.time}시간`}
dateType={dateType}
isSelected={selectedOption === `${hours.time}시간`}
onClick={() => updateOnboardingInfo({ tournamentDuration: hours.textEnglish })}
onTimeSelect={handleTimeSelect}
isAfterDelivery={isAfterDelivery}
/>
);
})}
</S.SetTournamentDurationWrapper>
return (
<SelectTimeOptions
key={`${hours.time}시간`}
optionText={`${hours.time}시간`}
dateType={dateType}
isSelected={selectedOption === `${hours.time}시간`}
onClick={() => updateOnboardingInfo({ tournamentDuration: hours.textEnglish })}
onTimeSelect={handleTimeSelect}
isAfterDelivery={isAfterDelivery}
/>
);
})}
</S.SetTournamentDurationWrapper>

<S.OnBoardingBtnWrapper>
<OnBoardingBtn
isActivated={!!selectedOption}
setStep={() => {
postOnboarding();
}}
>
다음
</OnBoardingBtn>
</S.OnBoardingBtnWrapper>
<S.OnBoardingBtnWrapper>
<OnBoardingBtn
isActivated={!!selectedOption}
setStep={() => {
postOnboarding();
}}
>
다음
</OnBoardingBtn>
</S.OnBoardingBtnWrapper>
</>
)}
</>
);
};
Expand Down
4 changes: 0 additions & 4 deletions src/core/toast-messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
/**@todo 이미지 최소,최대 height 상의 필요*/
export const IMAGE_HEIGHT = Object.freeze({

MAX: 5000,
MIN: 300,



});

export const MESSAGE = Object.freeze({
Expand Down