ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dialog rounded corners on mobile

Browse Source 
The dialog's rounded corners were not displaying correctly on mobile devices, while they were fine on desktop. This commit addresses the issue.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-16 06:10:57 +00:00
parent 2cb8a73bab
commit 87a6a65f17
8 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/TransactionEditDialog.tsx
View File

@@ -21,6 +21,7 @@ import TransactionFormFields, {
TransactionFormValues
} from './transaction/TransactionFormFields';
import TransactionDeleteAlert from './transaction/TransactionDeleteAlert';
import { useIsMobile } from '@/hooks/use-mobile';
interface TransactionEditDialogProps {
transaction: Transaction;
@@ -38,6 +39,7 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
onDelete
}) => {
const { updateTransaction, deleteTransaction } = useBudget();
const isMobile = useIsMobile();
const form = useForm<TransactionFormValues>({
resolver: zodResolver(transactionFormSchema),
@@ -94,7 +96,7 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogContent className={`sm:max-w-md mx-auto ${isMobile ? 'rounded-xl overflow-hidden' : ''}`}>
<DialogHeader>
<DialogTitle>지출 수정</DialogTitle>
</DialogHeader>

4
src/components/ui/alert-dialog.tsx
View File

@@ -17,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@@ -35,7 +35,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-[90%] max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-[90%] max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:rounded-xl rounded-xl overflow-hidden",
className
)}
{...props}

4
src/components/ui/dialog.tsx
View File

@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-[90%] max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-[90%] max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:rounded-xl rounded-xl overflow-hidden",
className
)}
{...props}

2
src/components/ui/drawer.tsx
View File

@@ -42,7 +42,7 @@ const DrawerContent = React.forwardRef<
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto w-[95%] max-w-sm mx-auto flex-col rounded-t-[10px] border bg-background",
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto w-[95%] max-w-sm mx-auto flex-col rounded-t-[10px] rounded-xl border bg-background overflow-hidden",
className
)}
{...props}

2
src/components/ui/popover.tsx
View File

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-[90%] max-w-sm rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 w-[90%] max-w-sm rounded-xl overflow-hidden border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}

4
src/components/ui/sheet.tsx
View File

@@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 rounded-xl overflow-hidden",
{
variants: {
side: {

13
src/hooks/use-mobile.tsx
View File

@@ -4,11 +4,22 @@ import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean>(false)
const [isMobile, setIsMobile] = React.useState<boolean>(
typeof window !== 'undefined' ? window.innerWidth < MOBILE_BREAKPOINT : false
)
React.useEffect(() => {
if (typeof window === 'undefined') return;
const checkMobile = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
// 모바일 화면인 경우 body에 클래스 추가
if (window.innerWidth < MOBILE_BREAKPOINT) {
document.body.classList.add('is-mobile');
} else {
document.body.classList.remove('is-mobile');
}
}
// 초기 확인

14
src/index.css
View File

@@ -154,6 +154,20 @@
#root {
@apply p-0;
}
/* 모바일에서 팝업과 다이얼로그 스타일 보정 */
[role="dialog"] {
@apply rounded-xl overflow-hidden;
}
/* 다이얼로그 내용에 적용되는 스타일 */
.DialogContent,
.PopoverContent,
.AlertDialogContent,
.DrawerContent,
.SheetContent {
@apply rounded-xl overflow-hidden;
}
}
}