From 70db061561871fa68527622eb525a7d963bdab76 Mon Sep 17 00:00:00 2001 From: Shim MunSeong Date: Wed, 30 Oct 2024 21:36:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B3=B5=EC=97=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=A0=95=EB=B3=B4=20=EB=B3=80=EA=B2=BD=20=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 러닝타임 입력 폼의 suffix 가운데 정렬 적용 - 모바일 환경에서 공연 포스터 이미지 표시 비율 수정 - 모바일 환경에서 공연 포스터 설명 줄바꿈 추가 적용 --- .../ShowBasicInfoFormContent.tsx | 7 +++--- .../ShowInfoFormContent.styles.ts | 23 +++++++++++++++---- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/apps/admin/src/components/ShowInfoFormContent/ShowBasicInfoFormContent.tsx b/apps/admin/src/components/ShowInfoFormContent/ShowBasicInfoFormContent.tsx index 161d5184..2a1c82cc 100644 --- a/apps/admin/src/components/ShowInfoFormContent/ShowBasicInfoFormContent.tsx +++ b/apps/admin/src/components/ShowInfoFormContent/ShowBasicInfoFormContent.tsx @@ -36,7 +36,7 @@ const ShowBasicInfoFormContent = ({ const { getRootProps, getInputProps } = useDropzone({ accept: { - 'image/*': [], + 'image/jpeg, image/png': [], }, maxFiles: MAX_IMAGE_COUNT, onDrop: onDropImage, @@ -75,8 +75,9 @@ const ShowBasicInfoFormContent = ({ 공연 포스터 - 원하시는 노출 순서대로 이미지를 업로드해주세요. 표준 종이규격(A, B)의 이미지를 권장합니다.
- (최소 1장, 최대 {MAX_IMAGE_COUNT}장 업로드 가능 / jpg, png 형식) + 원하시는 노출 순서대로 이미지를 업로드해주세요.  + 표준 종이규격(A, B)의 이미지를 권장합니다.
+ (최소 1장, 최대 {MAX_IMAGE_COUNT}장 업로드 가능 / jpg, png 형식) {imageFiles.map((file, index) => ( diff --git a/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts b/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts index 49b4b619..d50ac25a 100644 --- a/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts +++ b/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts @@ -114,9 +114,21 @@ const ShowInfoFormDescription = styled.p` color: ${({ theme }) => theme.palette.grey.g60}; margin-top: 2px; + span { + display: inline-block; + width: 100%; + } + strong { font-weight: 600; } + + ${mq_lg} { + span { + display: inline; + width: auto; + } + } `; const ShowInfoFormButtonContainer = styled.div` @@ -130,21 +142,21 @@ const ShowInfoFormButton = styled(Button) ` const PreviewImageContainer = styled.div` display: grid; - grid-template-columns: repeat(3, 88px); + grid-template-columns: repeat(3, 1fr); gap: 8px; - height: 124px; margin-top: 16px; + aspect-ratio: 562 / 256; ${mq_lg} { - grid-template-columns: repeat(3, 1fr); gap: 28px; height: 256px; + aspect-ratio: initial; } `; const PreviewImage = styled.div<{ isFirstImage: boolean }>` max-width: 100%; - height: ${({ isFirstImage }) => (isFirstImage ? 'calc(124px - 16px)' : '124px')}; + height: ${({ isFirstImage }) => (isFirstImage ? 'calc(100% - 16px)' : '100%')}; width: 100%; background-size: cover; background-repeat: no-repeat; @@ -160,6 +172,7 @@ const PreviewImageWrap = styled.div<{ isFirstImage: boolean }>` position: relative; border-radius: 4px; border: 1px solid ${({ theme }) => theme.palette.grey.g20}; + aspect-ratio: 182 / 256; `; const FirstImageText = styled.span` @@ -263,7 +276,7 @@ const FileUploadAreaText = styled.span` const TextField = styled.div` margin-top: 8px; display: flex; - align-items: start; + align-items: center; gap: 8px; flex: ${({ flex }) => flex}; From 5cde6ebe077cb4271392d2f369cec2cdef8658cf Mon Sep 17 00:00:00 2001 From: Shim MunSeong Date: Sat, 2 Nov 2024 10:20:35 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=B5=9C=EC=86=8C=20=ED=8B=B0?= =?UTF-8?q?=EC=BC=93=20=ED=8C=90=EB=A7=A4=20=EC=8B=9C=EC=9E=91=EC=9D=BC?= =?UTF-8?q?=EC=9D=84=20=EA=B3=B5=EC=97=B0=20=EC=83=9D=EC=84=B1=EC=9D=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowTicketInfoFormContent.tsx | 97 +++++++++++-------- apps/admin/src/pages/ShowTicketPage/index.tsx | 1 + packages/api/src/types/show.ts | 1 + 3 files changed, 59 insertions(+), 40 deletions(-) diff --git a/apps/admin/src/components/ShowInfoFormContent/ShowTicketInfoFormContent.tsx b/apps/admin/src/components/ShowInfoFormContent/ShowTicketInfoFormContent.tsx index 763b0303..79cf7da3 100644 --- a/apps/admin/src/components/ShowInfoFormContent/ShowTicketInfoFormContent.tsx +++ b/apps/admin/src/components/ShowInfoFormContent/ShowTicketInfoFormContent.tsx @@ -1,16 +1,14 @@ import { TextField } from '@boolti/ui'; import { format, sub } from 'date-fns'; -import { useState } from 'react'; import { Controller, UseFormReturn } from 'react-hook-form'; import Styled from './ShowInfoFormContent.styles'; import { ShowTicketFormInputs } from './types'; -type ShowTicketFormRequiredInputs = Omit; - interface ShowTicketInfoFormContentProps { form: UseFormReturn; showDate: string; + salesMinStartDate?: string; salesStartTime?: string; disabled?: boolean; } @@ -18,29 +16,33 @@ interface ShowTicketInfoFormContentProps { const ShowTicketInfoFormContent = ({ form, showDate, + salesMinStartDate, salesStartTime, disabled, }: ShowTicketInfoFormContentProps) => { - const { watch, control } = form; + const { watch, control, formState: { errors }, setError, clearErrors } = form; - // TODO: react-hook-form의 에러 기능을 사용하도록 수정 - const [hasBlurred, setHasBlurred] = useState>( - { - startDate: false, - endDate: false, - }, - ); + const minStartDate = format(salesMinStartDate ?? new Date(), 'yyyy-MM-dd') + const minEndDate = format( + watch('startDate') || + (salesStartTime ? new Date(salesStartTime) : new Date()), + 'yyyy-MM-dd', + ) + const maxDate = format( + sub(showDate ? new Date(showDate) : new Date(), { days: 1 }), + 'yyyy-MM-dd', + ) return ( - 티켓 판매 정보 + 티켓 판매 - + - 판매 시작일 + 시작일 { + onChange(event); + clearErrors('startDate'); + + if (new Date(event.target.value) < new Date(minStartDate)) { + setError('startDate', { type: 'min', message: '공연 생성일 이후의 날짜를 선택해 주세요.' }); + return + } + }} onBlur={() => { onBlur(); - setHasBlurred((prev) => ({ ...prev, startDate: true })); + + if (!value) { + setError('startDate', { type: 'required', message: '필수 입력사항입니다.' }); + return + } }} placeholder={value} - min={format(salesStartTime ?? new Date(), 'yyyy-MM-dd')} - max={format( - sub(showDate ? new Date(showDate) : new Date(), { days: 1 }), - 'yyyy-MM-dd', - )} + min={minStartDate} + max={maxDate} required disabled={disabled} - errorMessage={ - hasBlurred.startDate && !value ? '필수 입력사항입니다.' : undefined - } + errorMessage={errors.startDate?.message} /> )} name="startDate" @@ -74,7 +83,7 @@ const ShowTicketInfoFormContent = ({ - 판매 종료일 + 종료일 { + onChange(event); + clearErrors('endDate'); + + if (new Date(event.target.value) < new Date(minEndDate)) { + setError('endDate', { type: 'min', message: '시작일 이후로 선택 가능합니다.' }); + return + } + + if (new Date(event.target.value) > new Date(maxDate)) { + setError('endDate', { type: 'max', message: '공연 전날까지 선택 가능합니다.' }); + return + } + }} onBlur={() => { onBlur(); - setHasBlurred((prev) => ({ ...prev, endDate: true })); + + if (!value) { + setError('endDate', { type: 'required', message: '필수 입력사항입니다.' }); + return + } }} placeholder={value} - min={format( - watch('startDate') || - (salesStartTime ? new Date(salesStartTime) : new Date()), - 'yyyy-MM-dd', - )} - max={format( - sub(showDate ? new Date(showDate) : new Date(), { days: 1 }), - 'yyyy-MM-dd', - )} + min={minEndDate} + max={maxDate} required disabled={disabled} - errorMessage={ - hasBlurred.endDate && !value ? '필수 입력사항입니다.' : undefined - } + errorMessage={errors.endDate?.message} /> )} name="endDate" /> - + diff --git a/apps/admin/src/pages/ShowTicketPage/index.tsx b/apps/admin/src/pages/ShowTicketPage/index.tsx index 151371e2..b07ce30e 100644 --- a/apps/admin/src/pages/ShowTicketPage/index.tsx +++ b/apps/admin/src/pages/ShowTicketPage/index.tsx @@ -89,6 +89,7 @@ const ShowTicketPage = () => { form={showTicketForm} showDate={format(show.date, 'yyyy-MM-dd')} salesStartTime={format(showSalesInfo.salesStartTime, 'yyyy-MM-dd')} + salesMinStartDate={show.createdAt} disabled={show.isEnded} /> diff --git a/packages/api/src/types/show.ts b/packages/api/src/types/show.ts index c58b1f6d..86723c89 100644 --- a/packages/api/src/types/show.ts +++ b/packages/api/src/types/show.ts @@ -38,6 +38,7 @@ export interface ShowResponse { host: Host; isEnded: boolean; settlementStatus: 'SETTLEMENT_REQUIRED' | 'SETTLEMENT_REQUEST' | 'SETTLEMENT_DONE' | null; + createdAt: string; } export type ShowSummaryResponse = Array<{