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: 출연진 등록 모바일 대응 및 공연 등록 웹뷰 관련 이슈 수정 #256

Merged
merged 7 commits into from
Jan 1, 2025
+594 −400
Merged

feat: 출연진 등록 모바일 대응 및 공연 등록 웹뷰 관련 이슈 수정 #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
77d6a45
feat: 출연진 정보 등록 폼 모바일 스타일 적용
alstn2468 Dec 31, 2024
e403823
feat: 스크립트로 제어하던 부분 브레이크 포인트 제어로 수정
alstn2468 Dec 31, 2024
050a57b
chore: lint:fix, format 실행
alstn2468 Dec 31, 2024
df9cd72
feat: 출연진 정보 다이얼로그, 바텀시트 모바일 대응
alstn2468 Dec 31, 2024
20336c7
feat: 등록하기 버튼 모바일 대응
alstn2468 Jan 1, 2025
fce11f5
fix: 타임 피커 스타일 수정
alstn2468 Jan 1, 2025
f1ec18e
fix: 웹뷰 일 때 상단 마진 제거
alstn2468 Jan 1, 2025
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
99 changes: 75 additions & 24 deletions apps/admin/src/components/ShowCastInfo/ShowCastInfo.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,70 @@ 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;
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`
color: ${({ theme }) => theme.palette.grey.g90};
${({ theme }) => theme.typo.sh2};
${({ theme }) => theme.typo.sh1};

${mq_lg} {
${({ theme }) => theme.typo.sh2};
}
`;

const EditButtonWrapper = styled.div`
span {
const MobileEditButton = styled.button`
width: 24px;
height: 24px;

& > svg {
width: 24px;
height: 24px;
}

${mq_lg} {
display: none;
margin-left: 8px;
}
`;

const EditButtonWrapper = styled.div`
display: none;

${mq_lg} {
display: flex;
justify-content: center;
align-items: center;

span {
margin-left: 8px;
display: inline;
}
}
Expand All @@ -78,16 +106,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;
}
}
`;

Expand All @@ -106,22 +143,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`
Expand All @@ -132,13 +177,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 {
Expand All @@ -154,4 +204,5 @@ export default {
UserImage,
Username,
Rolename,
MobileEditButton,
};
86 changes: 40 additions & 46 deletions apps/admin/src/components/ShowCastInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,9 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
const dialog = useDialog();
const [isOpen, setIsOpen] = useState(false);

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),
Expand All @@ -38,54 +33,53 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
zIndex: isDragging ? 100 : 99,
cursor: isDragging ? 'grabbing' : undefined,
};

const toggle = () => setIsOpen((prev) => !prev);

const onClickEdit: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
dialog.open({
title: '출연진 정보 편집',
isAuto: true,
content: (
<ShowCastInfoFormDialogContent
onSave={async (castInfo) => {
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 (
<Styled.Container ref={setNodeRef} style={style}>
<Styled.Header>
<Styled.HeaderNameWrapper>
<Styled.Handle type="button" {...attributes} {...listeners}>
<MenuIcon />
</Styled.Handle>
<Styled.Name>
{showCastInfo.name}
</Styled.Name>
<Styled.Name>{showCastInfo.name}</Styled.Name>
</Styled.HeaderNameWrapper>

<Styled.MobileEditButton type="button" onClick={onClickEdit}>
<EditIcon />
</Styled.MobileEditButton>
<Styled.EditButtonWrapper>
<TextButton
type="button"
colorTheme="netural"
size="regular"
onClick={(e) => {
e.preventDefault();
dialog.open({
title: '출연진 정보 편집',
isAuto: true,
content: (
<ShowCastInfoFormDialogContent
onSave={async (castInfo) => {
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('삭제 중 오류가 발생하였습니다.'));
}
}}
/>
),
});
}}
>
<TextButton type="button" colorTheme="netural" size="regular" onClick={onClickEdit}>
<EditIcon />
<span>정보 편집</span>
</TextButton>
Expand Down Expand Up @@ -125,7 +119,7 @@ const ShowCastInfo = ({ showCastInfo, onSave, onDelete }: Props) => {
</Styled.CollapseButton>
</>
)}
</Styled.Container >
</Styled.Container>
);
};

Expand Down
35 changes: 18 additions & 17 deletions apps/admin/src/components/ShowCastInfoFormDialogContent/DraggableShowCastInfoMemberRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<ShowCastInfoMemberRow {...props} ref={setNodeRef} draggingStyle={style} {...attributes} {...listeners} />
)
}
<ShowCastInfoMemberRow
{...props}
ref={setNodeRef}
draggingStyle={style}
{...attributes}
{...listeners}
/>
);
};

export default DraggableShowCastInfoMemberRow
export default DraggableShowCastInfoMemberRow;
Loading
Loading