Skip to content

Commit 6734875

Browse files
ljh130334ljh130334
committed
refactor: 일부 스타일링 수정
1 parent ff93be1 commit 6734875

File tree

6 files changed

+138
-160
lines changed

6 files changed

+138
-160
lines changed

‎public/icons/action/error.svg‎

Lines changed: 5 additions & 17 deletions
Loading

‎src/app/(protected)/action/complete/_component/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function Header() {
22
return (
3-
<div className="text-t2 mt-[50px] items-center justify-center text-center font-semibold text-white">
3+
<div className="text-t2 mt-[50px] items-center justify-center text-center font-semibold text-gray-strong">
44
작은 행동 인증 완료!
55
</div>
66
);

‎src/app/(protected)/action/complete/_component/PhotoCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ export default function CompletePhotoCard({
1313
}: CompletePhotoCardProps) {
1414
return (
1515
<div className="rounded-2xl px-5">
16-
<div className="flex gap-3 rounded-2xl bg-[linear-gradient(180deg,rgba(121,121,235,0.3)_0%,rgba(121,121,235,0.1)_70%,rgba(121,121,235,0)_100%)] py-4 pl-4">
16+
<div className="flex gap-3 rounded-2xl bg-[linear-gradient(180deg,rgba(121,121,235,0.3)_0%,rgba(121,121,235,0.1)_29.17%,rgba(121,121,235,0)_100%)] py-4 pl-4">
1717
<div className="flex gap-[14px]">
1818
<div className="relative h-[48px] w-[48px] overflow-hidden rounded-lg">
1919
<Image
2020
src={capturedImage}
2121
alt="인증 사진"
2222
fill
23-
className="object-cover"
23+
className="object-cover rounded-[4px]"
2424
sizes="48px"
2525
/>
2626
</div>

‎src/app/(protected)/action/complete/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function Complete() {
4444
}, [loadUserProfile]);
4545

4646
return (
47-
<div className="flex h-full w-full flex-col gap-4 bg-background-primary">
47+
<div className="flex h-full w-full flex-col gap-8 bg-background-primary">
4848
<Header />
4949

5050
<PhotoCard

‎src/components/dialog/OneButtonDialog.tsx‎

Lines changed: 55 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,66 @@
1-
import { Button } from '@/components/ui/button';
1+
import { Button } from "@/components/ui/button";
22
import {
3-
Dialog,
4-
DialogClose,
5-
DialogContent,
6-
DialogFooter,
7-
DialogHeader,
8-
DialogTitle,
9-
} from '@/components/ui/dialog';
3+
Dialog,
4+
DialogClose,
5+
DialogContent,
6+
DialogFooter,
7+
DialogHeader,
8+
DialogTitle,
9+
} from "@/components/ui/dialog";
1010
import Image from "next/image";
11-
import { useEffect, useState } from 'react';
11+
import { useEffect, useState } from "react";
1212

1313
interface OneButtonDialogProps {
14-
value: boolean;
15-
title: string;
16-
content1: string;
17-
content2: string;
18-
buttonName: string;
19-
icon?: string;
20-
onButtonClick: () => void;
14+
value: boolean;
15+
title: string;
16+
content1: string;
17+
content2: string;
18+
buttonName: string;
19+
icon?: string;
20+
onButtonClick: () => void;
2121
}
2222

2323
export function OneButtonDialog({
24-
value,
25-
title,
26-
content1,
27-
content2,
28-
buttonName,
29-
icon,
30-
onButtonClick,
24+
value,
25+
title,
26+
content1,
27+
content2,
28+
buttonName,
29+
icon,
30+
onButtonClick,
3131
}: OneButtonDialogProps) {
32-
const [open, setOpen] = useState(false);
32+
const [open, setOpen] = useState(false);
3333

34-
useEffect(() => {
35-
setOpen(value);
36-
}, [value]);
34+
useEffect(() => {
35+
setOpen(value);
36+
}, [value]);
3737

38-
return (
39-
<Dialog open={open} onOpenChange={setOpen}>
40-
<DialogContent className="w-[328px] rounded-[24px] border-none bg-component-gray-secondary px-4 pt-6 pb-4">
41-
<div className='flex flex-col gap-4 items-center justify-center'>
42-
{icon && (
43-
<Image
44-
src={icon}
45-
alt={icon}
46-
width={24}
47-
height={24}
48-
/>
49-
)}
50-
</div>
51-
<div>
52-
<DialogHeader>
53-
<DialogTitle className="text-t3 text-gray-normal">
54-
{title}
55-
</DialogTitle>
56-
</DialogHeader>
57-
<div className="mb-2 text-center text-b3 text-gray-neutral">
58-
{content1} <br />
59-
{content2}
60-
</div>
61-
</div>
62-
<Button
63-
size="md"
64-
variant="primary"
65-
className="w-full"
66-
onClick={onButtonClick}
67-
>
68-
{buttonName}
69-
</Button>
70-
</DialogContent>
71-
</Dialog>
72-
);
38+
return (
39+
<Dialog open={open} onOpenChange={setOpen}>
40+
<DialogContent className="w-[328px] rounded-[24px] border-none bg-component-gray-secondary px-4 pt-6 pb-4">
41+
<div className="flex flex-col gap-4 items-center justify-center">
42+
{icon && <Image src={icon} alt={icon} width={24.5} height={24.5} />}
43+
</div>
44+
<div>
45+
<DialogHeader>
46+
<DialogTitle className="text-t3 text-gray-normal mb-1">
47+
{title}
48+
</DialogTitle>
49+
</DialogHeader>
50+
<div className="mb-2 text-center text-b3 text-gray-neutral">
51+
{content1} <br />
52+
{content2}
53+
</div>
54+
</div>
55+
<Button
56+
size="md"
57+
variant="primary"
58+
className="w-full"
59+
onClick={onButtonClick}
60+
>
61+
{buttonName}
62+
</Button>
63+
</DialogContent>
64+
</Dialog>
65+
);
7366
}

‎src/components/ui/dialog.tsx‎

Lines changed: 74 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,106 @@
1-
'use client';
2-
import * as DialogPrimitive from '@radix-ui/react-dialog';
3-
import * as React from 'react';
1+
"use client";
42
// import { X } from 'lucide-react';
5-
import { cn } from '@/lib/utils';
3+
import { cn } from "@/lib/utils";
4+
import * as DialogPrimitive from "@radix-ui/react-dialog";
5+
import * as React from "react";
66
const Dialog = DialogPrimitive.Root;
77
const DialogTrigger = DialogPrimitive.Trigger;
88
const DialogPortal = DialogPrimitive.Portal;
99
const DialogClose = DialogPrimitive.Close;
1010
const DialogOverlay = React.forwardRef<
11-
React.ElementRef<typeof DialogPrimitive.Overlay>,
12-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
11+
React.ElementRef<typeof DialogPrimitive.Overlay>,
12+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
1313
>(({ className, ...props }, ref) => (
14-
<DialogPrimitive.Overlay
15-
ref={ref}
16-
className={cn(
17-
'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',
18-
className,
19-
)}
20-
{...props}
21-
/>
14+
<DialogPrimitive.Overlay
15+
ref={ref}
16+
className={cn(
17+
"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",
18+
className,
19+
)}
20+
{...props}
21+
/>
2222
));
2323
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
2424
const DialogContent = React.forwardRef<
25-
React.ElementRef<typeof DialogPrimitive.Content>,
26-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
25+
React.ElementRef<typeof DialogPrimitive.Content>,
26+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
2727
>(({ className, children, ...props }, ref) => (
28-
<DialogPortal>
29-
<DialogOverlay />
30-
<DialogPrimitive.Content
31-
ref={ref}
32-
className={cn(
33-
'bg-background 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%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
34-
className,
35-
)}
36-
{...props}
37-
>
38-
{children}
39-
{/* <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
28+
<DialogPortal>
29+
<DialogOverlay />
30+
<DialogPrimitive.Content
31+
ref={ref}
32+
className={cn(
33+
"bg-background 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%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
34+
className,
35+
)}
36+
{...props}
37+
>
38+
{children}
39+
{/* <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
4040
<X className="h-4 w-4" />
4141
<span className="sr-only">Close</span>
4242
</DialogPrimitive.Close> */}
43-
</DialogPrimitive.Content>
44-
</DialogPortal>
43+
</DialogPrimitive.Content>
44+
</DialogPortal>
4545
));
4646
DialogContent.displayName = DialogPrimitive.Content.displayName;
4747
const DialogHeader = ({
48-
className,
49-
...props
48+
className,
49+
...props
5050
}: React.HTMLAttributes<HTMLDivElement>) => (
51-
<div
52-
className={cn(
53-
'flex flex-col space-y-1.5 text-center sm:text-left',
54-
className,
55-
)}
56-
{...props}
57-
/>
51+
<div
52+
className={cn(
53+
"flex flex-col space-y-1.5 text-center sm:text-left",
54+
className,
55+
)}
56+
{...props}
57+
/>
5858
);
59-
DialogHeader.displayName = 'DialogHeader';
59+
DialogHeader.displayName = "DialogHeader";
6060
const DialogFooter = ({
61-
className,
62-
...props
61+
className,
62+
...props
6363
}: React.HTMLAttributes<HTMLDivElement>) => (
64-
<div
65-
className={cn(
66-
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
67-
className,
68-
)}
69-
{...props}
70-
/>
64+
<div
65+
className={cn(
66+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
67+
className,
68+
)}
69+
{...props}
70+
/>
7171
);
72-
DialogFooter.displayName = 'DialogFooter';
72+
DialogFooter.displayName = "DialogFooter";
7373
const DialogTitle = React.forwardRef<
74-
React.ElementRef<typeof DialogPrimitive.Title>,
75-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
74+
React.ElementRef<typeof DialogPrimitive.Title>,
75+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
7676
>(({ className, ...props }, ref) => (
77-
<DialogPrimitive.Title
78-
ref={ref}
79-
className={cn(
80-
'text-lg font-semibold leading-none tracking-tight',
81-
className,
82-
)}
83-
{...props}
84-
/>
77+
<DialogPrimitive.Title
78+
ref={ref}
79+
className={cn("t3 leading-none tracking-tight", className)}
80+
{...props}
81+
/>
8582
));
8683
DialogTitle.displayName = DialogPrimitive.Title.displayName;
8784
const DialogDescription = React.forwardRef<
88-
React.ElementRef<typeof DialogPrimitive.Description>,
89-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
85+
React.ElementRef<typeof DialogPrimitive.Description>,
86+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
9087
>(({ className, ...props }, ref) => (
91-
<DialogPrimitive.Description
92-
ref={ref}
93-
className={cn('text-muted-foreground text-sm', className)}
94-
{...props}
95-
/>
88+
<DialogPrimitive.Description
89+
ref={ref}
90+
className={cn("text-muted-foreground text-sm", className)}
91+
{...props}
92+
/>
9693
));
9794
DialogDescription.displayName = DialogPrimitive.Description.displayName;
9895
export {
99-
Dialog,
100-
DialogPortal,
101-
DialogOverlay,
102-
DialogClose,
103-
DialogTrigger,
104-
DialogContent,
105-
DialogHeader,
106-
DialogFooter,
107-
DialogTitle,
108-
DialogDescription,
96+
Dialog,
97+
DialogPortal,
98+
DialogOverlay,
99+
DialogClose,
100+
DialogTrigger,
101+
DialogContent,
102+
DialogHeader,
103+
DialogFooter,
104+
DialogTitle,
105+
DialogDescription,
109106
};

0 commit comments

Comments
 (0)