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

feat: 공연 기본 정보 관련 수정사항 반영 #227

Merged
merged 3 commits into from
Oct 26, 2024
Merged

feat: 공연 기본 정보 관련 수정사항 반영 #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea6190e
feat: 공연 기본 정보 수정사항 반영
Puterism Oct 26, 2024
a41e9dd
feat: 공연일 관련 밸리데이션 로직 추가
Puterism Oct 26, 2024
8e48b67
chore: TODO 주석 추가
Puterism Oct 26, 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
126 changes: 77 additions & 49 deletions apps/admin/src/components/ShowInfoFormContent/ShowBasicInfoFormContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ImageFile } from '@boolti/api';
import { CloseIcon, FileUpIcon } from '@boolti/icon';
import { Button, TextField, TimePicker, useDialog } from '@boolti/ui';
import { add, format } from 'date-fns';
import { useRef, useState } from 'react';
import { useRef } from 'react';
import { useDropzone } from 'react-dropzone';
import { Controller, UseFormReturn } from 'react-hook-form';
import DaumPostcode from 'react-daum-postcode';
Expand All @@ -12,8 +12,7 @@ import { ShowInfoFormInputs } from './types';
import { useBodyScrollLock } from '~/hooks/useBodyScrollLock';

const MAX_IMAGE_COUNT = 3;

type ShowBasicInfoFormInputs = Omit<ShowInfoFormInputs, 'notice' | 'hostName' | 'hostPhoneNumber'>;
const MIN_DATE = format(add(new Date(), { days: 1 }), 'yyyy-MM-dd')

interface ShowBasicInfoFormContentProps {
form: UseFormReturn<ShowInfoFormInputs, unknown, ShowInfoFormInputs>;
Expand All @@ -31,9 +30,9 @@ const ShowBasicInfoFormContent = ({
onDeleteImage,
}: ShowBasicInfoFormContentProps) => {
const { open, close, isOpen } = useDialog();
const detailAdressInputRef = useRef<HTMLInputElement>(null);
const detailAddressInputRef = useRef<HTMLInputElement>(null);

const { control, setValue } = form;
const { control, setValue, formState: { errors }, setError, clearErrors } = form;

const { getRootProps, getInputProps } = useDropzone({
accept: {
Expand All @@ -43,16 +42,6 @@ const ShowBasicInfoFormContent = ({
onDrop: onDropImage,
});

const [hasBlurred, setHasBlurred] = useState<Record<keyof ShowBasicInfoFormInputs, boolean>>({
name: false,
date: false,
startTime: false,
runningTime: false,
placeName: false,
placeStreetAddress: false,
placeDetailAddress: false,
});

const openDaumPostCodeWithDialog: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
open({
Expand All @@ -62,10 +51,9 @@ const ShowBasicInfoFormContent = ({
style={{ maxWidth: 426, height: 470 }}
onComplete={(address) => {
setValue('placeStreetAddress', address.roadAddress);
detailAdressInputRef.current?.focus();
detailAddressInputRef.current?.focus();
}}
onClose={() => {
setHasBlurred((prev) => ({ ...prev, placeStreetAddress: true }));
close();
}}
/>
Expand All @@ -87,8 +75,8 @@ const ShowBasicInfoFormContent = ({
<Styled.ShowInfoFormContent>
<Styled.ShowInfoFormLabel required>공연 포스터</Styled.ShowInfoFormLabel>
<Styled.ShowInfoFormDescription>
원하시는 <strong>노출 순서대로</strong> 이미지를 업로드해주세요. (최소 1장, 최대{' '}
{MAX_IMAGE_COUNT}장 업로드 가능 / jpg, png 형식)
원하시는 노출 순서대로 이미지를 업로드해주세요. 표준 종이규격(A, B)의 이미지를 권장합니다.<br />
(최소 1장, 최대 {MAX_IMAGE_COUNT}장 업로드 가능 / jpg, png 형식)
</Styled.ShowInfoFormDescription>
<Styled.PreviewImageContainer>
{imageFiles.map((file, index) => (
Expand Down Expand Up @@ -143,13 +131,20 @@ const ShowBasicInfoFormContent = ({
placeholder="공연명을 입력해 주세요 (띄어쓰기 포함 최대 40자)"
required
disabled={disabled}
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('name');
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, name: true }));

if (!value) {
setError('name', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
value={value ?? ''}
errorMessage={hasBlurred.name && !value ? '필수 입력사항입니다.' : undefined}
errorMessage={errors.name?.message}
/>
)}
name="name"
Expand All @@ -164,23 +159,36 @@ const ShowBasicInfoFormContent = ({
<Controller
control={control}
rules={{
min: MIN_DATE,
required: true,
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextField
inputType="date"
size="big"
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('date');

if (new Date(event.target.value) < new Date(MIN_DATE)) {
setError('date', { type: 'min', message: '오늘 이후의 날짜를 선택해 주세요.' });
return
}
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, date: true }));

if (!value) {
setError('date', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
placeholder={value}
min={format(add(new Date(), { days: 1 }), 'yyyy-MM-dd')}
min={MIN_DATE}
required
disabled={disabled}
value={value ?? ''}
errorMessage={hasBlurred.date && !value ? '필수 입력사항입니다.' : undefined}
errorMessage={errors.date?.message}
/>
)}
name="date"
Expand All @@ -190,7 +198,7 @@ const ShowBasicInfoFormContent = ({
</Styled.ShowInfoFormRow>
<Styled.ShowInfoFormRow>
<Styled.ShowInfoFormContent>
<Styled.ShowInfoFormLabel required>공연 시작 시간</Styled.ShowInfoFormLabel>
<Styled.ShowInfoFormLabel required>시작 시간</Styled.ShowInfoFormLabel>
<Styled.TextField>
<Controller
control={control}
Expand All @@ -201,15 +209,20 @@ const ShowBasicInfoFormContent = ({
return (
<TimePicker
disabled={disabled}
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('startTime');
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, startTime: true }));

if (!value) {
setError('startTime', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
value={value}
errorMessage={
hasBlurred.startTime && !value ? '필수 입력사항입니다.' : undefined
}
errorMessage={errors.startTime?.message}
/>
);
}}
Expand All @@ -232,15 +245,20 @@ const ShowBasicInfoFormContent = ({
min={0}
required
disabled={disabled}
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('runningTime');
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, runningTime: true }));

if (!value) {
setError('runningTime', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
value={value ?? ''}
errorMessage={
hasBlurred.runningTime && !value ? '필수 입력사항입니다.' : undefined
}
errorMessage={errors.runningTime?.message}
/>
)}
name="runningTime"
Expand All @@ -265,13 +283,20 @@ const ShowBasicInfoFormContent = ({
placeholder="공연장명을 입력해 주세요"
required
disabled={disabled}
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('placeName');
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, placeName: true }));

if (!value) {
setError('placeName', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
value={value ?? ''}
errorMessage={hasBlurred.placeName && !value ? '필수 입력사항입니다.' : undefined}
errorMessage={errors.placeName?.message}
/>
)}
name="placeName"
Expand All @@ -297,9 +322,7 @@ const ShowBasicInfoFormContent = ({
required
disabled
value={value ?? ''}
errorMessage={
hasBlurred.placeStreetAddress && !value ? '필수 입력사항입니다.' : undefined
}
errorMessage={errors.placeStreetAddress?.message}
/>
<Button colorTheme="netural" size="bold" onClick={openDaumPostCodeWithDialog}>
주소 찾기
Expand All @@ -317,21 +340,26 @@ const ShowBasicInfoFormContent = ({
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextField
ref={detailAdressInputRef}
ref={detailAddressInputRef}
inputType="text"
size="big"
placeholder="상세 주소를 입력해 주세요"
required
disabled={disabled}
onChange={onChange}
onChange={(event) => {
onChange(event);
clearErrors('placeDetailAddress');
}}
onBlur={() => {
onBlur();
setHasBlurred((prev) => ({ ...prev, placeDetailAddress: true }));

if (!value) {
setError('placeDetailAddress', { type: 'required', message: '필수 입력사항입니다.' });
return
}
}}
value={value ?? ''}
errorMessage={
hasBlurred.placeDetailAddress && !value ? '필수 입력사항입니다.' : undefined
}
errorMessage={errors.placeDetailAddress?.message}
/>
)}
name="placeDetailAddress"
Expand Down
9 changes: 1 addition & 8 deletions apps/admin/src/components/ShowInfoFormContent/ShowCastInfoFormContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ import ShowCastInfoFormDialogContent, {
} from '../ShowCastInfoFormDialogContent';

interface Props {
hasPreviousCastInfo?: boolean;
onSave: (value: TempShowCastInfoFormInput) => Promise<void>;
}

const ShowCastInfoFormContent = ({ hasPreviousCastInfo = false, onSave }: Props) => {
const ShowCastInfoFormContent = ({ onSave }: Props) => {
const dialog = useDialog();

const onClick = () => {
Expand Down Expand Up @@ -46,12 +45,6 @@ const ShowCastInfoFormContent = ({ hasPreviousCastInfo = false, onSave }: Props)
</Styled.ShowInfoFormTitle>
<Styled.ShowInfoFormSubtitle>
출연진 정보를 팀 단위로 등록해 주세요.
{!hasPreviousCastInfo && (
<>
<br />
정보는 공연 등록 이후에도 <strong>수정 및 추가</strong>할 수 있어요.
</>
)}
</Styled.ShowInfoFormSubtitle>
</Styled.ShowInfoFormGroupInfo>
<Styled.DesktopCastInfoRegisterButton
Expand Down
Loading
Loading