From 77d6a45b0c5053e784d8bc3841088838a4351409 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 31 Dec 2024 18:47:14 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EC=B6=9C=EC=97=B0=EC=A7=84=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=93=B1=EB=A1=9D=20=ED=8F=BC=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowCastInfo/ShowCastInfo.styles.ts | 81 ++++++++++---- .../src/components/ShowCastInfo/index.tsx | 104 +++++++++--------- apps/admin/src/hooks/useIsMobile.ts | 10 ++ packages/icon/src/components/ChevronDown.tsx | 2 +- packages/icon/src/components/ChevronUp.tsx | 2 +- 5 files changed, 124 insertions(+), 75 deletions(-) create mode 100644 apps/admin/src/hooks/useIsMobile.ts diff --git a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts index 357e8a21..aff23900 100644 --- a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts +++ b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts @@ -19,18 +19,22 @@ const Header = styled.div` align-items: center; border-radius: 8px 8px 0px 0px; border: 1px solid ${({ theme }) => theme.palette.grey.g20}; - padding: 24px 28px; + padding: 16px 20px; &:last-child { border-radius: 8px; } + + ${mq_lg} { + padding: 24px 28px; + } `; const HeaderNameWrapper = styled.div` display: flex; align-items: center; gap: 12px; -` +`; const Handle = styled.button` display: inline-flex; @@ -40,23 +44,35 @@ const Handle = styled.button` cursor: grab; user-select: none; user-zoom: none; -` +`; const Name = styled.span` color: ${({ theme }) => theme.palette.grey.g90}; - ${({ theme }) => theme.typo.sh2}; + ${({ theme }) => theme.typo.sh1}; + + ${mq_lg} { + ${({ theme }) => theme.typo.sh2}; + } +`; + +const MobileEditButton = styled.button` + width: 24px; + height: 24px; + + & > svg { + width: 24px; + height: 24px; + } `; const EditButtonWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + span { - display: none; margin-left: 8px; - } - - ${mq_lg} { - span { - display: inline; - } + display: inline; } `; @@ -78,16 +94,25 @@ const CastItem = styled.div` display: flex; justify-content: flex-start; align-items: center; - padding: 14px 28px; - flex: 1 0 50%; - max-width: 50%; + padding: 8px 20px; + flex: 1 0 auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - &:first-of-type, - &:nth-of-type(2) { - padding-top: 18px; + &:first-of-type { + padding-top: 12px; + } + + ${mq_lg} { + flex: 1 0 50%; + max-width: 50%; + padding: 14px 28px; + + &:first-of-type, + &:nth-of-type(2) { + padding-top: 18px; + } } `; @@ -106,22 +131,30 @@ const UserImage = styled.div` const Username = styled.span` color: ${({ theme }) => theme.palette.grey.g90}; - ${({ theme }) => theme.typo.b3}; + ${({ theme }) => theme.typo.b1}; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: 0 1 auto; + + ${mq_lg} { + ${({ theme }) => theme.typo.b3}; + } `; const Rolename = styled.span` color: ${({ theme }) => theme.palette.grey.g50}; - ${({ theme }) => theme.typo.b3}; + ${({ theme }) => theme.typo.b1}; margin-left: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: 0 1 auto; max-width: 100px; + + ${mq_lg} { + ${({ theme }) => theme.typo.b3}; + } `; const CollapseButton = styled.button` @@ -132,13 +165,18 @@ const CollapseButton = styled.button` border-radius: 0px 0px 8px 8px; border: 1px solid ${({ theme }) => theme.palette.grey.g20}; border-top: none; - ${({ theme }) => theme.typo.sh1}; + ${({ theme }) => theme.typo.b1}; color: ${({ theme }) => theme.palette.grey.g70}; - padding: 19px 32px; + padding: 12px 32px; & > svg { margin-left: 8px; } + + ${mq_lg} { + ${({ theme }) => theme.typo.sh1}; + padding: 19px 32px; + } `; export default { @@ -154,4 +192,5 @@ export default { UserImage, Username, Rolename, + MobileEditButton, }; diff --git a/apps/admin/src/components/ShowCastInfo/index.tsx b/apps/admin/src/components/ShowCastInfo/index.tsx index d58a0a8e..c94e29ec 100644 --- a/apps/admin/src/components/ShowCastInfo/index.tsx +++ b/apps/admin/src/components/ShowCastInfo/index.tsx @@ -8,6 +8,7 @@ import { useState } from 'react'; import ShowCastInfoFormDialogContent, { TempShowCastInfoFormInput, } from '../ShowCastInfoFormDialogContent'; +import { useIsMobile } from '~/hooks/useIsMobile'; interface Props { showCastInfo: TempShowCastInfoFormInput; @@ -20,15 +21,11 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => { const memberLength = members.length ?? 0; const dialog = useDialog(); const [isOpen, setIsOpen] = useState(false); + const isMobile = useIsMobile(); - const { - attributes, - listeners, - setNodeRef, - transform, - transition, - isDragging - } = useSortable({ id: showCastInfo.id }); + const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ + id: showCastInfo.id, + }); const style = { transform: CSS.Translate.toString(transform), @@ -38,57 +35,60 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => { zIndex: isDragging ? 100 : 99, cursor: isDragging ? 'grabbing' : undefined, }; - + const toggle = () => setIsOpen((prev) => !prev); + const onClickEdit: React.MouseEventHandler = (e) => { + e.preventDefault(); + dialog.open({ + title: '출연진 정보 편집', + isAuto: true, + content: ( + { + try { + await onSave(castInfo); + dialog.close(); + } catch { + return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.')); + } + }} + prevShowCastInfo={showCastInfo} + onDelete={async () => { + try { + await onDelete?.(); + dialog.close(); + } catch { + return new Promise((_, reject) => reject('삭제 중 오류가 발생하였습니다.')); + } + }} + /> + ), + }); + }; + return ( - - - - - {showCastInfo.name} - + {!isMobile && ( + + + + )} + {showCastInfo.name} - { - e.preventDefault(); - dialog.open({ - title: '출연진 정보 편집', - isAuto: true, - content: ( - { - try { - await onSave(castInfo); - dialog.close(); - } catch { - return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.')); - } - }} - prevShowCastInfo={showCastInfo} - onDelete={async () => { - try { - await onDelete?.(); - dialog.close(); - } catch { - return new Promise((_, reject) => reject('삭제 중 오류가 발생하였습니다.')); - } - }} - /> - ), - }); - }} - > - - 정보 편집 - + {isMobile ? ( + + + + ) : ( + + + 정보 편집 + + )} {memberLength > 0 && ( @@ -125,7 +125,7 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => { )} - + ); }; diff --git a/apps/admin/src/hooks/useIsMobile.ts b/apps/admin/src/hooks/useIsMobile.ts new file mode 100644 index 00000000..46fe8191 --- /dev/null +++ b/apps/admin/src/hooks/useIsMobile.ts @@ -0,0 +1,10 @@ +import { useTheme } from '@emotion/react'; +import { useDeviceWidth } from './useDeviceWidth'; + +export function useIsMobile() { + const deviceWidth = useDeviceWidth(); + const theme = useTheme(); + const isMobile = deviceWidth < parseInt(theme.breakpoint.mobile, 10); + + return isMobile; +} diff --git a/packages/icon/src/components/ChevronDown.tsx b/packages/icon/src/components/ChevronDown.tsx index 50bdfb9f..671210c2 100644 --- a/packages/icon/src/components/ChevronDown.tsx +++ b/packages/icon/src/components/ChevronDown.tsx @@ -1,5 +1,5 @@ export const ChevronDown = () => ( - + ( - + Date: Tue, 31 Dec 2024 18:49:22 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A6=BD?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EC=A0=9C=EC=96=B4=ED=95=98=EB=8D=98=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EB=B8=8C=EB=A0=88=EC=9D=B4=ED=81=AC=20?= =?UTF-8?q?=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EC=A0=9C=EC=96=B4=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowCastInfo/ShowCastInfo.styles.ts | 38 ++++++++++++------- .../src/components/ShowCastInfo/index.tsx | 28 ++++++-------- 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts index aff23900..4f66ab39 100644 --- a/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts +++ b/apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts @@ -37,13 +37,17 @@ const HeaderNameWrapper = styled.div` `; const Handle = styled.button` - display: inline-flex; - align-items: center; - justify-content: center; - color: ${({ theme }) => theme.palette.grey.g40}; - cursor: grab; - user-select: none; - user-zoom: none; + display: none; + + ${mq_lg} { + display: inline-flex; + align-items: center; + justify-content: center; + color: ${({ theme }) => theme.palette.grey.g40}; + cursor: grab; + user-select: none; + user-zoom: none; + } `; const Name = styled.span` @@ -63,16 +67,24 @@ const MobileEditButton = styled.button` width: 24px; height: 24px; } + + ${mq_lg} { + display: none; + } `; const EditButtonWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; + display: none; - span { - margin-left: 8px; - display: inline; + ${mq_lg} { + display: flex; + justify-content: center; + align-items: center; + + span { + margin-left: 8px; + display: inline; + } } `; diff --git a/apps/admin/src/components/ShowCastInfo/index.tsx b/apps/admin/src/components/ShowCastInfo/index.tsx index c94e29ec..4ebc67cd 100644 --- a/apps/admin/src/components/ShowCastInfo/index.tsx +++ b/apps/admin/src/components/ShowCastInfo/index.tsx @@ -8,7 +8,6 @@ import { useState } from 'react'; import ShowCastInfoFormDialogContent, { TempShowCastInfoFormInput, } from '../ShowCastInfoFormDialogContent'; -import { useIsMobile } from '~/hooks/useIsMobile'; interface Props { showCastInfo: TempShowCastInfoFormInput; @@ -21,7 +20,6 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => { const memberLength = members.length ?? 0; const dialog = useDialog(); const [isOpen, setIsOpen] = useState(false); - const isMobile = useIsMobile(); const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: showCastInfo.id, @@ -71,24 +69,20 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => { - {!isMobile && ( - - - - )} + + + {showCastInfo.name} + + + + - {isMobile ? ( - - - - ) : ( - - - 정보 편집 - - )} + + + 정보 편집 + {memberLength > 0 && ( From 050a57bc1ebf457e0dbdcdaa9611df67e1e6009a Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 31 Dec 2024 18:50:33 +0900 Subject: [PATCH 3/7] =?UTF-8?q?chore:=20lint:fix,=20format=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DraggableShowCastInfoMemberRow.tsx | 35 +-- .../ShowCastInfoFormDialogContent.styles.ts | 9 +- .../ShowCastInfoMemberRow.tsx | 222 ++++++++++-------- .../ShowCastInfoFormDialogContent/index.tsx | 77 ++++-- .../ShowCastInfoFormContent.tsx | 67 ++++-- .../ShowInfoFormContent.styles.ts | 2 +- .../pages/ShowAddPage/ShowAddPage.styles.ts | 46 ++-- apps/admin/src/pages/ShowInfoPage/index.tsx | 191 +++++++++------ .../ShowTicketPage/ShowTicketPage.styles.ts | 2 +- packages/api/src/mutations/index.ts | 2 +- .../src/mutations/useChangeCastTeamOrder.ts | 4 +- packages/api/src/mutations/useEditShowInfo.ts | 12 +- .../src/components/BooltiUIProvider/index.tsx | 4 +- .../components/Checkbox/Checkbox.styles.ts | 4 +- packages/ui/src/components/Checkbox/index.tsx | 15 +- .../StepProgressBar/StepProgressBar.styles.ts | 18 +- .../src/components/StepProgressBar/index.tsx | 24 +- 17 files changed, 421 insertions(+), 313 deletions(-) diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx index 162f1188..0eb6e2b6 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx @@ -1,30 +1,31 @@ -import { useSortable } from "@dnd-kit/sortable"; +import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; -import ShowCastInfoMemberRow, { ShowCastInfoMemberRowProps } from "./ShowCastInfoMemberRow"; +import ShowCastInfoMemberRow, { ShowCastInfoMemberRowProps } from './ShowCastInfoMemberRow'; interface DraggableShowCastInfoMemberRowProps extends ShowCastInfoMemberRowProps { - id: string + id: string; } const DraggableShowCastInfoMemberRow = ({ id, ...props }: DraggableShowCastInfoMemberRowProps) => { - const { - attributes, - listeners, - setNodeRef, - transform, - transition, - isDragging - } = useSortable({ id }); + const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ + id, + }); const style = { transform: CSS.Translate.toString(transform), transition, - opacity: isDragging ? 0 : 1 + opacity: isDragging ? 0 : 1, }; - + return ( - - ) -} + + ); +}; -export default DraggableShowCastInfoMemberRow \ No newline at end of file +export default DraggableShowCastInfoMemberRow; diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts index 77d44bef..eb792fe5 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts @@ -62,7 +62,7 @@ const InputWrapper = styled.div` &:focus-within { border-color: ${({ theme, isError }) => - isError ? theme.palette.status.error : theme.palette.grey.g70}; + isError ? theme.palette.status.error : theme.palette.grey.g70}; } `; @@ -76,7 +76,7 @@ const Handle = styled.button` cursor: grab; user-select: none; user-zoom: none; -` +`; const TextFieldWrap = styled.div` margin-bottom: 28px; @@ -209,8 +209,7 @@ const DraggableShowCastInfoMemberRow = styled.div` border-radius: 4px; z-index: -1; } -` - +`; export default { ShowInfoFormLabel, @@ -231,5 +230,5 @@ export default { DeleteButton, ErrorMessage, FieldWrap, - DraggableShowCastInfoMemberRow + DraggableShowCastInfoMemberRow, }; diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx index db016ab9..e5b77697 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx @@ -2,121 +2,135 @@ import { ClearIcon, MenuIcon, TrashIcon, UserIcon } from '@boolti/icon'; import { Member } from '@boolti/api'; import { replaceUserCode } from '~/utils/replace'; import Styled from './ShowCastInfoFormDialogContent.styles'; -import { TempShowCastInfoFormInput } from "."; -import { Control, Controller } from "react-hook-form"; +import { TempShowCastInfoFormInput } from '.'; +import { Control, Controller } from 'react-hook-form'; import { forwardRef } from 'react'; export interface ShowCastInfoMemberRowProps { control: Control; - field: Partial & { id: number, _id: string }; + field: Partial & { id: number; _id: string }; index: number; isFieldBlurred: { userCode: boolean; roleName: boolean }; draggingStyle?: React.CSSProperties; onSetUser?: (userCode: string) => void; onResetUser?: () => void; onBlurRoleName?: () => void; - onDelete?: () => void + onDelete?: () => void; } -const ShowCastInfoMemberRow = forwardRef(({ control, field, index, isFieldBlurred, draggingStyle, onSetUser, onResetUser, onBlurRoleName, onDelete, ...props }, ref) => { - return ( - - - - - { - const value = field.userCode; - const isError = Boolean( - isFieldBlurred.userCode ? !value || !field.userNickname : false, - ); - return ( - - - {field.userNickname ? ( - <> - {field.userImgPath ? ( - ( + ( + { + control, + field, + index, + isFieldBlurred, + draggingStyle, + onSetUser, + onResetUser, + onBlurRoleName, + onDelete, + ...props + }, + ref, + ) => { + return ( + + + + + { + const value = field.userCode; + const isError = Boolean( + isFieldBlurred.userCode ? !value || !field.userNickname : false, + ); + return ( + + + {field.userNickname ? ( + <> + {field.userImgPath ? ( + + ) : ( + + )} + {field.userNickname} + { + onChange(undefined); + onResetUser?.(); + }} + > + + + + ) : ( + <> + # + { + const nextValue = replaceUserCode(e.target.value); + onChange(nextValue); + }} + onBlur={async (event) => { + onBlur(); + onSetUser?.(event.target.value); + }} + value={value ?? ''} /> - ) : ( - - )} - {field.userNickname} - { - onChange(undefined); - onResetUser?.(); - }} - > - - - - ) : ( - <> - # - { - const nextValue = replaceUserCode(e.target.value); - onChange(nextValue); - }} - onBlur={async (event) => { - onBlur(); - onSetUser?.(event.target.value); - }} - value={value ?? ''} - /> - - )} - - {isError && 필수 입력사항입니다.} - - ); - }} - name={`members.${index}.userCode`} - /> - { - const value = field.roleName; - const isError = isFieldBlurred.roleName && !value; - return ( - - - { - onBlur(); - onBlurRoleName?.(); - }} - value={value ?? ''} - /> - - {isError && 필수 입력사항입니다.} - - ); - }} - name={`members.${index}.roleName`} - /> - - - - - ); -}); + + )} + + {isError && 필수 입력사항입니다.} + + ); + }} + name={`members.${index}.userCode`} + /> + { + const value = field.roleName; + const isError = isFieldBlurred.roleName && !value; + return ( + + + { + onBlur(); + onBlurRoleName?.(); + }} + value={value ?? ''} + /> + + {isError && 필수 입력사항입니다.} + + ); + }} + name={`members.${index}.roleName`} + /> + + + + + ); + }, +); -export default ShowCastInfoMemberRow +export default ShowCastInfoMemberRow; diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx index 3b9b6619..d22929b4 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx @@ -6,8 +6,25 @@ import { useBodyScrollLock } from '~/hooks/useBodyScrollLock'; import { PlusIcon } from '@boolti/icon'; import { Member, queryKeys, useQueryClient } from '@boolti/api'; import ShowCastInfoMemberRow from './ShowCastInfoMemberRow'; -import { DndContext, DragOverlay, DragStartEvent, DragOverEvent, UniqueIdentifier, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, closestCenter } from '@dnd-kit/core'; -import { SortableContext, arrayMove, verticalListSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable'; +import { + DndContext, + DragOverlay, + DragStartEvent, + DragOverEvent, + UniqueIdentifier, + KeyboardSensor, + MouseSensor, + TouchSensor, + useSensor, + useSensors, + closestCenter, +} from '@dnd-kit/core'; +import { + SortableContext, + arrayMove, + verticalListSortingStrategy, + sortableKeyboardCoordinates, +} from '@dnd-kit/sortable'; import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; import DraggableShowCastInfoMemberRow from './DraggableShowCastInfoMemberRow'; @@ -89,35 +106,38 @@ const ShowCastInfoFormDialogContent = ({ prevShowCastInfo, onDelete, onSave }: P }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, - }) + }), ); const dragStartHandler = (event: DragStartEvent) => { setDraggingItemId(event.active.id); }; - const dragEndHandler = useCallback((event: DragOverEvent) => { - const { active, over } = event; + const dragEndHandler = useCallback( + (event: DragOverEvent) => { + const { active, over } = event; - if (!(active && over && over.id !== active.id)) return; + if (!(active && over && over.id !== active.id)) return; - const oldIndex = controlledFields.findIndex(({ _id }) => _id === active.id); - const newIndex = controlledFields.findIndex(({ _id }) => _id === over.id); + const oldIndex = controlledFields.findIndex(({ _id }) => _id === active.id); + const newIndex = controlledFields.findIndex(({ _id }) => _id === over.id); - if (oldIndex === -1 || newIndex === -1) return; + if (oldIndex === -1 || newIndex === -1) return; - const nextFields = arrayMove(controlledFields, oldIndex, newIndex); - replace(nextFields); + const nextFields = arrayMove(controlledFields, oldIndex, newIndex); + replace(nextFields); - setIsMemberFieldBlurred((prev) => { - const nextMemberFieldBlurred = [...prev]; - nextMemberFieldBlurred.splice(oldIndex, 1); - nextMemberFieldBlurred.splice(newIndex, 0, prev[oldIndex]); - return nextMemberFieldBlurred; - }) + setIsMemberFieldBlurred((prev) => { + const nextMemberFieldBlurred = [...prev]; + nextMemberFieldBlurred.splice(oldIndex, 1); + nextMemberFieldBlurred.splice(newIndex, 0, prev[oldIndex]); + return nextMemberFieldBlurred; + }); - setDraggingItemId(null); - }, [controlledFields, replace]); + setDraggingItemId(null); + }, + [controlledFields, replace], + ); return ( <> @@ -148,8 +168,17 @@ const ShowCastInfoFormDialogContent = ({ prevShowCastInfo, onDelete, onSave }: P /> 팀원 - - field._id)} strategy={verticalListSortingStrategy}> + + field._id)} + strategy={verticalListSortingStrategy} + > {controlledFields.map((field, index) => ( { @@ -219,7 +248,7 @@ const ShowCastInfoFormDialogContent = ({ prevShowCastInfo, onDelete, onSave }: P ))} - {(draggingItemId && draggingField && draggingFieldIndex > -1) ? ( + {draggingItemId && draggingField && draggingFieldIndex > -1 ? ( void; } -const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfoFormContentProps) => { +const ShowCastInfoFormContent = ({ + initialCastTeamList, + onChange, +}: ShowCastInfoFormContentProps) => { const dialog = useDialog(); - const [castTeamList, setCastTeamList] = useState(initialCastTeamList ?? []) - const prevCastTeamList = useRef(JSON.stringify(castTeamList)) + const [castTeamList, setCastTeamList] = useState( + initialCastTeamList ?? [], + ); + const prevCastTeamList = useRef(JSON.stringify(castTeamList)); const sensors = useSensors( useSensor(MouseSensor, { @@ -37,7 +56,7 @@ const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfo }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, - }) + }), ); const castTeamDragEndHandler = useCallback((event: DragOverEvent) => { @@ -53,7 +72,6 @@ const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfo } }, []); - const castAddButtonClickHandler = () => { dialog.open({ isAuto: true, @@ -61,11 +79,8 @@ const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfo content: ( { - console.log(castInfo) - setCastTeamList((prev) => [ - ...prev, - castInfo - ]) + console.log(castInfo); + setCastTeamList((prev) => [...prev, castInfo]); dialog.close(); }} /> @@ -74,13 +89,13 @@ const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfo }; useEffect(() => { - const stringifiedCastTeamList = JSON.stringify(castTeamList) + const stringifiedCastTeamList = JSON.stringify(castTeamList); if (prevCastTeamList.current !== stringifiedCastTeamList) { - prevCastTeamList.current = stringifiedCastTeamList - onChange?.(castTeamList) + prevCastTeamList.current = stringifiedCastTeamList; + onChange?.(castTeamList); } - }, [castTeamList, onChange]) + }, [castTeamList, onChange]); return ( @@ -107,24 +122,28 @@ const ShowCastInfoFormContent = ({ initialCastTeamList, onChange }: ShowCastInfo 등록하기 - - info.id)} strategy={verticalListSortingStrategy}> + + info.id)} + strategy={verticalListSortingStrategy} + > {castTeamList.map((info) => ( { setCastTeamList((prev) => - prev.map((item) => - item.id === info.id ? showCastInfoFormInput : item, - ) + prev.map((item) => (item.id === info.id ? showCastInfoFormInput : item)), ); return new Promise((resolve) => resolve()); }} onDelete={() => { - setCastTeamList((prev) => - prev.filter((item) => item.id !== info.id) - ); + setCastTeamList((prev) => prev.filter((item) => item.id !== info.id)); return new Promise((resolve) => resolve()); }} /> diff --git a/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts b/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts index 7d04170a..0370c43d 100644 --- a/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts +++ b/apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts @@ -449,7 +449,7 @@ const TicketAction = styled.div` ${mq_lg} { display: flex; - + svg { width: 20px; height: 20px; diff --git a/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts b/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts index ce5ddd00..c319e965 100644 --- a/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts +++ b/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts @@ -183,23 +183,23 @@ const ShowAddFormButtonContainer = styled.div` gap: 8px; `; -const ShowAddFormButton = styled(Button) ` +const ShowAddFormButton = styled(Button)` ${({ variant }) => { switch (variant) { case 'next': { return ` width: calc(100% - 100px); - ` + `; } case 'prev': { return ` width: 100px; - ` + `; } default: { return ` width: 100%; - ` + `; } } }}; @@ -207,24 +207,24 @@ const ShowAddFormButton = styled(Button) ` ${mq_lg} { ${({ variant }) => { - switch (variant) { - case 'next': { - return ` + switch (variant) { + case 'next': { + return ` width: calc(100% - 152px); - ` - } - case 'prev': { - return ` + `; + } + case 'prev': { + return ` width: 152px; - ` - } - default: { - return ` + `; + } + default: { + return ` width: 100%; - ` + `; + } } - } - }}; + }}; } `; @@ -405,15 +405,15 @@ const Term = styled.div` align-items: center; `; -const TermLabel = styled(Checkbox.Label) <{ main?: boolean }>` +const TermLabel = styled(Checkbox.Label)<{ main?: boolean }>` display: flex; align-items: center; gap: 8px; - ${({ theme, main }) => main ? theme.typo.sh1 : theme.typo.b1}; - color: ${({ theme, main }) => main ? theme.palette.grey.g90 : theme.palette.grey.g60}; + ${({ theme, main }) => (main ? theme.typo.sh1 : theme.typo.b1)}; + color: ${({ theme, main }) => (main ? theme.palette.grey.g90 : theme.palette.grey.g60)}; font-weight: ${({ main }) => (main ? '600' : '400')}; user-select: none; - cursor: ${({ main }) => main ? 'pointer' : 'default'}; + cursor: ${({ main }) => (main ? 'pointer' : 'default')}; `; const TermLink = styled.a` @@ -507,5 +507,5 @@ export default { TermLink, MobileHeader, MobileHeaderText, - MobileContent + MobileContent, }; diff --git a/apps/admin/src/pages/ShowInfoPage/index.tsx b/apps/admin/src/pages/ShowInfoPage/index.tsx index f51beb88..765919ea 100644 --- a/apps/admin/src/pages/ShowInfoPage/index.tsx +++ b/apps/admin/src/pages/ShowInfoPage/index.tsx @@ -16,7 +16,10 @@ import { useParams } from 'react-router-dom'; import { middlewareAtom, myHostInfoAtom } from '~/components/ShowDetailLayout'; import ShowBasicInfoFormContent from '~/components/ShowInfoFormContent/ShowBasicInfoFormContent'; import ShowDetailInfoFormContent from '~/components/ShowInfoFormContent/ShowDetailInfoFormContent'; -import { ShowBasicInfoFormInputs, ShowDetailInfoFormInputs } from '~/components/ShowInfoFormContent/types'; +import { + ShowBasicInfoFormInputs, + ShowDetailInfoFormInputs, +} from '~/components/ShowInfoFormContent/types'; import PreviewFrame from './PreviewFrame'; import Styled from './ShowInfoPage.styles'; @@ -37,9 +40,12 @@ const ShowInfoPage = () => { const [imageFiles, setImageFiles] = useState([]); const [showImages, setShowImages] = useState([]); - const [castTeamListDraft, setCastTeamListDraft] = useState(null); + const [castTeamListDraft, setCastTeamListDraft] = useState( + null, + ); const isImageFilesDirty = imageFiles.some((file) => file.preview.startsWith('blob:')); - const isCastTeamListDraftDirty = initialCastTeamListRef.current !== JSON.stringify(castTeamListDraft) + const isCastTeamListDraftDirty = + initialCastTeamListRef.current !== JSON.stringify(castTeamListDraft); const showBasicInfoForm = useForm(); const showDetailInfoForm = useForm(); @@ -52,9 +58,18 @@ const ShowInfoPage = () => { const uploadShowImageMutation = useUploadShowImage(); const isSaveButtonDisabled = useMemo( - () => !showBasicInfoForm.formState.isValid || !showDetailInfoForm.formState.isValid || imageFiles.length === 0 || show?.isEnded, - [imageFiles.length, show?.isEnded, showBasicInfoForm.formState.isValid, showDetailInfoForm.formState.isValid] - ) + () => + !showBasicInfoForm.formState.isValid || + !showDetailInfoForm.formState.isValid || + imageFiles.length === 0 || + show?.isEnded, + [ + imageFiles.length, + show?.isEnded, + showBasicInfoForm.formState.isValid, + showDetailInfoForm.formState.isValid, + ], + ); const toast = useToast(); const confirm = useConfirm(); @@ -77,62 +92,83 @@ const ShowInfoPage = () => { const [isValidShowBasicInfoFormInputs, isValidShowDetailInfoFormInputs] = await Promise.all([ showBasicInfoForm.trigger(), - showDetailInfoForm.trigger() + showDetailInfoForm.trigger(), ]); if (!isValidShowBasicInfoFormInputs || !isValidShowDetailInfoFormInputs) return; const showBasicInfoFormInputs = showBasicInfoForm.getValues(); const showDetailInfoFormInputs = showDetailInfoForm.getValues(); - const castTeams = castTeamListDraft?.map((team) => ({ - id: team.id >= 0 ? team.id : undefined, - name: team.name, - members: team.members?.map((member) => ({ - id: member.id >= 0 ? member.id : undefined, - roleName: member.roleName ?? '', - userCode: member.userCode ?? '' - })) - })) ?? [] - - await editShowInfoMutation.mutateAsync({ - showId, - body: { - name: showBasicInfoFormInputs.name, - images: [...showImages, ...newShowImages].map((image, index) => ({ - sequence: index + 1, - thumbnailPath: image.thumbnailPath, - path: image.path, + const castTeams = + castTeamListDraft?.map((team) => ({ + id: team.id >= 0 ? team.id : undefined, + name: team.name, + members: team.members?.map((member) => ({ + id: member.id >= 0 ? member.id : undefined, + roleName: member.roleName ?? '', + userCode: member.userCode ?? '', })), - date: `${showBasicInfoFormInputs.date}T${showBasicInfoFormInputs.startTime}:00.000Z`, - runningTime: +showBasicInfoFormInputs.runningTime, - place: { - name: showBasicInfoFormInputs.placeName, - streetAddress: showBasicInfoFormInputs.placeStreetAddress, - detailAddress: showBasicInfoFormInputs.placeDetailAddress, - }, - notice: showDetailInfoFormInputs.notice, - host: { - name: showDetailInfoFormInputs.hostName, - phoneNumber: showDetailInfoFormInputs.hostPhoneNumber, + })) ?? []; + + await editShowInfoMutation.mutateAsync( + { + showId, + body: { + name: showBasicInfoFormInputs.name, + images: [...showImages, ...newShowImages].map((image, index) => ({ + sequence: index + 1, + thumbnailPath: image.thumbnailPath, + path: image.path, + })), + date: `${showBasicInfoFormInputs.date}T${showBasicInfoFormInputs.startTime}:00.000Z`, + runningTime: +showBasicInfoFormInputs.runningTime, + place: { + name: showBasicInfoFormInputs.placeName, + streetAddress: showBasicInfoFormInputs.placeStreetAddress, + detailAddress: showBasicInfoFormInputs.placeDetailAddress, + }, + notice: showDetailInfoFormInputs.notice, + host: { + name: showDetailInfoFormInputs.hostName, + phoneNumber: showDetailInfoFormInputs.hostPhoneNumber, + }, + castTeams, }, - castTeams }, - }, { - onSuccess: () => { - refetchShowDetail() - refetchShowSalesInfo() - refetchCastTeamList() - - toast.success('공연 정보를 저장했습니다.'); - setPreviewDrawerOpen(false); - } - }); - - }, [castTeamListDraft, editShowInfoMutation, imageFiles, refetchCastTeamList, refetchShowDetail, refetchShowSalesInfo, show, showBasicInfoForm, showDetailInfoForm, showId, showImages, toast, uploadShowImageMutation]) + { + onSuccess: () => { + refetchShowDetail(); + refetchShowSalesInfo(); + refetchCastTeamList(); + toast.success('공연 정보를 저장했습니다.'); + setPreviewDrawerOpen(false); + }, + }, + ); + }, [ + castTeamListDraft, + editShowInfoMutation, + imageFiles, + refetchCastTeamList, + refetchShowDetail, + refetchShowSalesInfo, + show, + showBasicInfoForm, + showDetailInfoForm, + showId, + showImages, + toast, + uploadShowImageMutation, + ]); const confirmSaveShowInfo = useCallback(async () => { - if (!showBasicInfoForm.formState.isDirty && !showDetailInfoForm.formState.isDirty && !isImageFilesDirty && !isCastTeamListDraftDirty) { + if ( + !showBasicInfoForm.formState.isDirty && + !showDetailInfoForm.formState.isDirty && + !isImageFilesDirty && + !isCastTeamListDraftDirty + ) { return true; } @@ -150,7 +186,14 @@ const ShowInfoPage = () => { } return true; - }, [showBasicInfoForm, showDetailInfoForm, isImageFilesDirty, isCastTeamListDraftDirty, confirm, submitHandler]); + }, [ + showBasicInfoForm, + showDetailInfoForm, + isImageFilesDirty, + isCastTeamListDraftDirty, + confirm, + submitHandler, + ]); useEffect(() => { if (!show) return; @@ -181,12 +224,12 @@ const ShowInfoPage = () => { const initialCastTeamList = castTeamList.map((team) => ({ id: team.id, name: team.name, - members: team.members - })) + members: team.members, + })); setCastTeamListDraft(initialCastTeamList); - initialCastTeamListRef.current = JSON.stringify(initialCastTeamList) - }, [castTeamList]) + initialCastTeamListRef.current = JSON.stringify(initialCastTeamList); + }, [castTeamList]); useEffect(() => { setMiddleware(() => confirmSaveShowInfo); @@ -246,7 +289,7 @@ const ShowInfoPage = () => { { - setCastTeamListDraft(data) + setCastTeamListDraft(data); }} /> )} @@ -257,9 +300,7 @@ const ShowInfoPage = () => { size="bold" colorTheme="primary" type="button" - disabled={ - isSaveButtonDisabled - } + disabled={isSaveButtonDisabled} onClick={() => { setPreviewDrawerOpen(true); }} @@ -287,7 +328,9 @@ const ShowInfoPage = () => { file.preview), - name: showBasicInfoForm.watch('name') ? showBasicInfoForm.watch('name') : '', + name: showBasicInfoForm.watch('name') + ? showBasicInfoForm.watch('name') + : '', date: showBasicInfoForm.watch('date') ? format(showBasicInfoForm.watch('date'), 'yyyy.MM.dd (E)') : '', @@ -306,14 +349,16 @@ const ShowInfoPage = () => { hostName: showDetailInfoForm.watch('hostName'), hostPhoneNumber: showDetailInfoForm.watch('hostPhoneNumber'), }} - showCastTeams={castTeamListDraft?.map((team) => ({ - name: team.name, - members: team.members?.map((member) => ({ - roleName: member.roleName ?? '', - userNickname: member.userNickname ?? '', - userImgPath: member.userImgPath ?? '' - })) - })) ?? []} + showCastTeams={ + castTeamListDraft?.map((team) => ({ + name: team.name, + members: team.members?.map((member) => ({ + roleName: member.roleName ?? '', + userNickname: member.userNickname ?? '', + userImgPath: member.userImgPath ?? '', + })), + })) ?? [] + } hasNoticePage containerRef={showPreviewRef} /> @@ -330,10 +375,7 @@ const ShowInfoPage = () => { > 닫기 - + 저장하기 @@ -379,10 +421,7 @@ const ShowInfoPage = () => { > 닫기 - + 저장하기 diff --git a/apps/admin/src/pages/ShowTicketPage/ShowTicketPage.styles.ts b/apps/admin/src/pages/ShowTicketPage/ShowTicketPage.styles.ts index beb426dd..962152d6 100644 --- a/apps/admin/src/pages/ShowTicketPage/ShowTicketPage.styles.ts +++ b/apps/admin/src/pages/ShowTicketPage/ShowTicketPage.styles.ts @@ -33,7 +33,7 @@ const ShowTicketFormContent = styled.div` display: flex; flex-direction: column; gap: 48px; -` +`; const ShowTicketSubmitContainer = styled.div` margin-top: 32px; diff --git a/packages/api/src/mutations/index.ts b/packages/api/src/mutations/index.ts index 830ff458..3d173804 100644 --- a/packages/api/src/mutations/index.ts +++ b/packages/api/src/mutations/index.ts @@ -87,7 +87,7 @@ export { useSuperAdminCreateSalesTicket, useSuperAdminCreateInvitationTicket, useSuperAdminEditSalesInfo, - useChangeCastTeamOrder + useChangeCastTeamOrder, }; export type { ImageFile }; diff --git a/packages/api/src/mutations/useChangeCastTeamOrder.ts b/packages/api/src/mutations/useChangeCastTeamOrder.ts index cd64e5ee..a3c27d29 100644 --- a/packages/api/src/mutations/useChangeCastTeamOrder.ts +++ b/packages/api/src/mutations/useChangeCastTeamOrder.ts @@ -10,6 +10,8 @@ const postChangeCastTeamOrder = (showId: number, body: PostChangeCastTeamOrderRe fetcher.post(`web/v1/shows/${showId}/cast-teams/change-sequence`, { json: body }); const useChangeCastTeamOrder = () => - useMutation(({ showId, body }: { showId: number, body: PostChangeCastTeamOrderRequest }) => postChangeCastTeamOrder(showId, body)); + useMutation(({ showId, body }: { showId: number; body: PostChangeCastTeamOrderRequest }) => + postChangeCastTeamOrder(showId, body), + ); export default useChangeCastTeamOrder; diff --git a/packages/api/src/mutations/useEditShowInfo.ts b/packages/api/src/mutations/useEditShowInfo.ts index 950841a4..b85d614f 100644 --- a/packages/api/src/mutations/useEditShowInfo.ts +++ b/packages/api/src/mutations/useEditShowInfo.ts @@ -22,14 +22,14 @@ interface PutShowInfoRequest { phoneNumber: string; }; castTeams?: { - id?: number - name: string + id?: number; + name: string; members?: { - id?: number - userCode: string - roleName: string + id?: number; + userCode: string; + roleName: string; }[]; - }[] + }[]; } const putShowInfo = (showId: number, body: PutShowInfoRequest) => diff --git a/packages/ui/src/components/BooltiUIProvider/index.tsx b/packages/ui/src/components/BooltiUIProvider/index.tsx index 28972924..06c5b9c5 100644 --- a/packages/ui/src/components/BooltiUIProvider/index.tsx +++ b/packages/ui/src/components/BooltiUIProvider/index.tsx @@ -14,9 +14,7 @@ const BooltiUIProvider = ({ children }: BooltiUIProviderProps) => { - - {children} - + {children} diff --git a/packages/ui/src/components/Checkbox/Checkbox.styles.ts b/packages/ui/src/components/Checkbox/Checkbox.styles.ts index 98764490..6914694b 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.styles.ts +++ b/packages/ui/src/components/Checkbox/Checkbox.styles.ts @@ -19,12 +19,12 @@ export const CheckboxContainer = styled.div<{ checked?: boolean; variant: 'main' &:hover { border-color: ${theme.palette.grey.g90}; } - ` + `; } case 'sub': { return ` color: ${checked ? theme.palette.grey.g90 : theme.palette.grey.g20}; - ` + `; } } }} diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx index e9c9cc52..c63fb80f 100644 --- a/packages/ui/src/components/Checkbox/index.tsx +++ b/packages/ui/src/components/Checkbox/index.tsx @@ -4,12 +4,17 @@ import styled from '@emotion/styled'; const CheckIcon: React.FC = () => ( - + ); interface CheckboxProps extends Omit, 'type'> { - variant: 'main' | 'sub' + variant: 'main' | 'sub'; } const Checkbox: React.FC = ({ variant, ...props }) => { @@ -27,14 +32,14 @@ const Checkbox: React.FC = ({ variant, ...props }) => { - ) -} + ); +}; const CheckboxLabel = styled.label` &:hover ${Styled.CheckboxContainer} { border-color: ${({ theme }) => theme.palette.grey.g90}; } -` +`; const CheckboxComponent = Checkbox as React.FC & { Label: typeof CheckboxLabel; diff --git a/packages/ui/src/components/StepProgressBar/StepProgressBar.styles.ts b/packages/ui/src/components/StepProgressBar/StepProgressBar.styles.ts index 0a768fec..cc1066e9 100644 --- a/packages/ui/src/components/StepProgressBar/StepProgressBar.styles.ts +++ b/packages/ui/src/components/StepProgressBar/StepProgressBar.styles.ts @@ -5,7 +5,7 @@ const StepProgressBar = styled.div<{ width?: string }>` flex-direction: column; gap: 8px; width: ${({ width }) => width || '100%'}; -` +`; const StepProgressBarLine = styled.div<{ step: number; maxStep: number }>` position: relative; @@ -22,18 +22,18 @@ const StepProgressBarLine = styled.div<{ step: number; maxStep: number }>` display: block; top: 0; left: 0; - width: calc(${({ step, maxStep }) => step / maxStep * 100}%); + width: calc(${({ step, maxStep }) => (step / maxStep) * 100}%); height: 4px; background-color: ${({ theme }) => theme.palette.grey.g90}; transition: width 0.2s ease-in-out; } -` +`; const StepProgressBarItemList = styled.div` display: flex; align-items: center; justify-content: space-between; -` +`; const StepProgressBarItem = styled.div<{ active: boolean }>` display: flex; @@ -44,15 +44,17 @@ const StepProgressBarItem = styled.div<{ active: boolean }>` ${({ theme }) => theme.typo.c1}; color: ${({ theme }) => theme.palette.grey.g30}; - ${({ theme, active }) => active && ` + ${({ theme, active }) => + active && + ` color: ${theme.palette.grey.g90}; font-weight: 600; `} -` +`; export default { StepProgressBar, StepProgressBarLine, StepProgressBarItemList, - StepProgressBarItem -} \ No newline at end of file + StepProgressBarItem, +}; diff --git a/packages/ui/src/components/StepProgressBar/index.tsx b/packages/ui/src/components/StepProgressBar/index.tsx index 7e16109f..2789f769 100644 --- a/packages/ui/src/components/StepProgressBar/index.tsx +++ b/packages/ui/src/components/StepProgressBar/index.tsx @@ -1,22 +1,22 @@ -import Styled from './StepProgressBar.styles' +import Styled from './StepProgressBar.styles'; interface StepProgressBarItem { - key: string - title: string + key: string; + title: string; } interface StepProgressBarProps { - activeKey: string - items: StepProgressBarItem[] - width?: string + activeKey: string; + items: StepProgressBarItem[]; + width?: string; } const StepProgressBar: React.FC = ({ activeKey, items, width }) => { - const step = items.findIndex((item) => item.key === activeKey) + 1 - + const step = items.findIndex((item) => item.key === activeKey) + 1; + return ( - + {items.map((item, index) => ( = index + 1}> @@ -25,7 +25,7 @@ const StepProgressBar: React.FC = ({ activeKey, items, wid ))} - ) -} + ); +}; -export default StepProgressBar \ No newline at end of file +export default StepProgressBar; From df9cd72cfac96d34159675117a9ca678f8ef3244 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 31 Dec 2024 19:05:33 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EC=B6=9C=EC=97=B0=EC=A7=84=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8,=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowCastInfoFormDialogContent.styles.ts | 30 +++++++++++++++++-- .../ShowCastInfoMemberRow.tsx | 24 ++++++++------- .../ShowCastInfoFormDialogContent/index.tsx | 4 +-- 3 files changed, 42 insertions(+), 16 deletions(-) diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts index eb792fe5..ff43c0c4 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts @@ -9,6 +9,10 @@ interface InputWrapperProps { isError?: boolean; } +const Container = styled.div` + max-width: 600px; +`; + const ShowInfoFormLabel = styled.span` display: block; ${({ theme }) => theme.typo.b3}; @@ -42,7 +46,8 @@ const MemberList = styled.div` const FieldWrap = styled.div` flex: 1; margin-right: 8px; - width: calc(50% - 32px); + width: calc(50% - 36px); + max-width: calc(50% - 36px); `; const InputWrapper = styled.div` @@ -51,7 +56,7 @@ const InputWrapper = styled.div` ${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)}; border-radius: 4px; background-color: ${({ theme }) => theme.palette.grey.w}; - padding: 8px 12px; + padding: 8px 36px 8px 12px; height: 48px; flex: auto; position: relative; @@ -142,6 +147,14 @@ const RegisterButton = styled(Button)` margin-left: auto; `; +const UserImageWrap = styled.div` + display: none; + + ${mq_lg} { + display: block; + } +`; + const UserImage = styled.div` box-sizing: border-box; width: 32px; @@ -156,14 +169,23 @@ const UserImage = styled.div` const Username = styled.span` ${({ theme }) => theme.typo.b3}; color: ${({ theme }) => theme.palette.grey.g90}; - margin: 0 8px; + margin: 0 6px 0 0; flex: 1 1 auto; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + ${mq_lg} { + margin: 0 8px; + } `; const RemoveButton = styled.button` width: 24px; height: 24px; cursor: pointer; + position: absolute; + right: 12px; `; const DeleteButton = styled.button` @@ -212,6 +234,7 @@ const DraggableShowCastInfoMemberRow = styled.div` `; export default { + Container, ShowInfoFormLabel, InputWrapper, Handle, @@ -223,6 +246,7 @@ export default { RegisterButton, MemberList, UserImage, + UserImageWrap, Username, RemoveButton, TextFieldWrap, diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx index e5b77697..12b9e8dc 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoMemberRow.tsx @@ -51,17 +51,19 @@ const ShowCastInfoMemberRow = forwardRef {field.userNickname ? ( <> - {field.userImgPath ? ( - - ) : ( - - )} + + {field.userImgPath ? ( + + ) : ( + + )} + {field.userNickname} { diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx index d22929b4..556faab3 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx @@ -140,7 +140,7 @@ const ShowCastInfoFormDialogContent = ({ prevShowCastInfo, onDelete, onSave }: P ); return ( - <> + 팀명 - + ); }; From 20336c712a195706ced21474d228a58c1faa9705 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Wed, 1 Jan 2025 11:27:26 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EB=93=B1=EB=A1=9D=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowCastInfoFormDialogContent.styles.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts index ff43c0c4..799d2d5a 100644 --- a/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts +++ b/apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts @@ -144,7 +144,13 @@ const MemberAddButton = styled.button` `; const RegisterButton = styled(Button)` - margin-left: auto; + margin-left: 40px; + flex: 1; + + ${mq_lg} { + margin-left: auto; + flex: none; + } `; const UserImageWrap = styled.div` From fce11f5393f993c19bd1ff712a0902f51d87a545 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Wed, 1 Jan 2025 11:30:53 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=84=20=ED=94=BC?= =?UTF-8?q?=EC=BB=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/TimePicker/TimePicker.styles.ts | 6 +++--- packages/ui/src/components/TimePicker/index.tsx | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/TimePicker/TimePicker.styles.ts b/packages/ui/src/components/TimePicker/TimePicker.styles.ts index 8e5d63ae..880f3cdc 100644 --- a/packages/ui/src/components/TimePicker/TimePicker.styles.ts +++ b/packages/ui/src/components/TimePicker/TimePicker.styles.ts @@ -16,21 +16,21 @@ const Text = styled(TextField)` const Dimmed = styled.div` position: fixed; - z-index: 1; + z-index: 999; bottom: 0; left: 0; width: 100vw !important; height: 100vh; background-color: rgba(0, 0, 0, 0.25); ${mq_lg} { - display: none; + background-color: transparent; + position: absolute; } `; const Control = styled.div` position: fixed; width: 100vw !important; - z-index: 2; left: 0; bottom: 0; border-radius: 12px 12px 0px 0px; diff --git a/packages/ui/src/components/TimePicker/index.tsx b/packages/ui/src/components/TimePicker/index.tsx index 878f170e..70c1d6ec 100644 --- a/packages/ui/src/components/TimePicker/index.tsx +++ b/packages/ui/src/components/TimePicker/index.tsx @@ -89,7 +89,7 @@ function TimePicker({ disabled, errorMessage, value, onChange, onBlur }: Props) /> {open && ( - <> + 시간 선택하기 @@ -157,8 +157,7 @@ function TimePicker({ disabled, errorMessage, value, onChange, onBlur }: Props) - - + )} From f1ec18e37a678c6f8c15b4434e04d9f2be6d69b7 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Wed, 1 Jan 2025 11:33:25 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EC=9B=B9=EB=B7=B0=20=EC=9D=BC=20?= =?UTF-8?q?=EB=95=8C=20=EC=83=81=EB=8B=A8=20=EB=A7=88=EC=A7=84=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts | 4 ++-- apps/admin/src/pages/ShowAddPage/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts b/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts index c319e965..6229fca4 100644 --- a/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts +++ b/apps/admin/src/pages/ShowAddPage/ShowAddPage.styles.ts @@ -454,8 +454,8 @@ const MobileHeaderText = styled.div` color: ${({ theme }) => theme.palette.grey.g90}; `; -const MobileContent = styled.div` - margin-top: 52px; +const MobileContent = styled.div<{ isWebView: boolean }>` + margin-top: ${({ isWebView }) => (isWebView ? '0' : '52px')}; padding: 32px 20px; ${mq_lg} { diff --git a/apps/admin/src/pages/ShowAddPage/index.tsx b/apps/admin/src/pages/ShowAddPage/index.tsx index 384746e0..d265ae55 100644 --- a/apps/admin/src/pages/ShowAddPage/index.tsx +++ b/apps/admin/src/pages/ShowAddPage/index.tsx @@ -422,7 +422,7 @@ const ShowAddPage = ({ step }: ShowAddPageProps) => { {showAddPageContent} - {showAddPageContent} + {showAddPageContent} ); };