[feat] 공통 컴포넌트 모달 구현 (#98)

* ✨ Feat: 간격 lx 28px 확장

* 📦️ Chore: dialog 패키지 설치

* 💄 Style: radius 20px 추가

* 💄 Style: border, spacing 28px, 20px 추가

* ✨ Feat: 모달 컴포넌트 구현, 커스텀 모달 구현

* ✨ Feat: 공통 컴포넌트 버튼 - dialog 버튼 옵션 추가

* ✨ Feat: 세팅 다이얼로그 추가

* ✨ Feat: 공통 모달, 프로그래밍식 닫기 지원

example에 지원 설명

Author: jangwonyoon

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
     "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-progress": "^1.1.2",
@@ -33,8 +34,8 @@
     "next-themes": "^0.4.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-intersection-observer": "^9.16.0",
     "react-hook-form": "^7.54.2",
+    "react-intersection-observer": "^9.16.0",
     "react-select": "^5.10.1",
     "sonner": "^2.0.1",
     "swiper": "^11.2.4",

pnpm-lock.yaml

@@ -64,6 +64,7 @@
     /* radius */
     --radius-sm: 8px;
     --radius-md: 12px;
+    --radius-ml: 20px;
     --radius-lg: 80px;
 
     .swiper-pagination-bullet {

src/app/globals.css

@@ -0,0 +1,22 @@
+'use client';
+
+import CommonDialog from '@/shared/ui/dialog/commonDialog';
+
+interface LogoutDialogProps {
+  trigger: React.ReactNode;
+  onConfirm?: () => void;
+}
+
+const LogoutDialog = ({ trigger, onConfirm }: LogoutDialogProps) => {
+  const handleConfirm = () => {
+    onConfirm?.();
+  };
+
+  return (
+    <CommonDialog title="로그아웃" trigger={trigger} onConfirm={handleConfirm} actionText="확인" cancelText="취소">
+      <div>지금 로그아웃 하시겠어요?</div>
+    </CommonDialog>
+  );
+};
+
+export default LogoutDialog;

src/features/setting/ui/dialog/logout.tsx

@@ -1,11 +1,21 @@
+'use client';
+
 import { Label } from '@radix-ui/react-label';
+import { useRouter } from 'next/navigation';
 
 import { cn } from '@/shared/lib/utils';
 import { spacingStyles } from '@/shared/spacing';
 import { List, ListItem, ListItemText } from '@/shared/ui/list';
 import { ArrowBtn } from '@/shared/ui/list/wrappedList';
 
+import LogoutDialog from './dialog/logout';
+
 const SettingView = () => {
+  const router = useRouter();
+  const handleLogout = () => {
+    router.push('/login');
+  };
+
   return (
     <List variant="settingItem">
       <Label className="text-body-3 text-gray-400">기타</Label>
@@ -14,7 +24,7 @@ const SettingView = () => {
       <SettingItem text="개인정보처리약관" />
 
       <Label className={cn('text-body-3 text-gray-400', spacingStyles({ marginTop: 'ms' }))}>계정</Label>
-      <SettingItem text="로그아웃" />
+      <LogoutDialog trigger={<SettingItem text="로그아웃" />} onConfirm={handleLogout} />
       <SettingItem text="회원 탈퇴" />
     </List>
   );

src/features/setting/ui/index.tsx

@@ -9,6 +9,7 @@ export const spacingStyles = cva('', {
       md: 'm-md', // margin: 16px;
       ml: 'm-ml', // margin: 20px;
       lg: 'm-lg', // margin: 24px;
+      lx: 'm-lx', // margin: 28px;
       xl: 'm-xl', // margin: 32px;
       '2xl': 'm-2xl', // margin: 48px;
     },
@@ -19,6 +20,7 @@ export const spacingStyles = cva('', {
       md: 'p-md', // padding: 16px;
       ml: 'p-ml', // padding: 20px;
       lg: 'p-lg', // padding: 24px;
+      lx: 'p-lx', // padding: 28px;
       xl: 'p-xl', // padding: 32px;
       '2xl': 'p-2xl', // padding: 48px;
     },
@@ -29,6 +31,7 @@ export const spacingStyles = cva('', {
       md: 'mx-md', // margin-left: 16px; margin-right: 16px;
       ml: 'mx-ml', // margin-left: 20px; margin-right: 20px;
       lg: 'mx-lg', // margin-left: 24px; margin-right: 24px;
+      lx: 'mx-lx', // margin-left: 28px; margin-right: 28px;
       xl: 'mx-xl', // margin-left: 32px; margin-right: 32px;
       '2xl': 'mx-2xl', // margin-left: 48px; margin-right: 48px;
     },
@@ -39,6 +42,7 @@ export const spacingStyles = cva('', {
       md: 'my-md', // margin-top: 16px; margin-bottom: 16px;
       ml: 'my-ml', // margin-top: 20px; margin-bottom: 20px;
       lg: 'my-lg', // margin-top: 24px; margin-bottom: 24px;
+      lx: 'my-lx', // margin-top: 28px; margin-bottom: 28px;
       xl: 'my-xl', // margin-top: 32px; margin-bottom: 32px;
       '2xl': 'my-2xl', // margin-top: 48px; margin-bottom: 48px;
     },
@@ -49,6 +53,7 @@ export const spacingStyles = cva('', {
       md: 'px-md', // padding-left: 16px; padding-right: 16px;
       ml: 'px-ml', // padding-left: 20px; padding-right: 20px;
       lg: 'px-lg', // padding-left: 24px; padding-right: 24px;
+      lx: 'px-lx', // padding-left: 28px; padding-right: 28px;
       xl: 'px-xl', // padding-left: 32px; padding-right: 32px;
       '2xl': 'px-2xl', // padding-left: 48px; padding-right: 48px;
     },
@@ -59,6 +64,7 @@ export const spacingStyles = cva('', {
       md: 'py-md', // padding-top: 16px; padding-bottom: 16px;
       ml: 'py-ml', // padding-top: 20px; padding-bottom: 20px;
       lg: 'py-lg', // padding-top: 24px; padding-bottom: 24px;
+      lx: 'py-lx', // padding-top: 28px; padding-bottom: 28px;
       xl: 'py-xl', // padding-top: 32px; padding-bottom: 32px;
       '2xl': 'py-2xl', // padding-top: 48px; padding-bottom: 48px;
     },
@@ -69,6 +75,7 @@ export const spacingStyles = cva('', {
       md: 'mt-md', // margin-top: 16px;
       ml: 'mt-ml', // margin-top: 20px;
       lg: 'mt-lg', // margin-top: 24px;
+      lx: 'mt-lx', // margin-top: 28px;
       xl: 'mt-xl', // margin-top: 32px;
       '2xl': 'mt-2xl', // margin-top: 48px;
     },
@@ -79,6 +86,7 @@ export const spacingStyles = cva('', {
       md: 'mb-md', // margin-bottom: 16px;
       ml: 'mb-ml', // margin-bottom: 20px;
       lg: 'mb-lg', // margin-bottom: 24px;
+      lx: 'mb-lx', // margin-bottom: 28px;
       xl: 'mb-xl', // margin-bottom: 32px;
       '2xl': 'mb-2xl', // margin-bottom: 48px;
     },
@@ -89,6 +97,7 @@ export const spacingStyles = cva('', {
       md: 'ml-md', // margin-left: 16px;
       ml: 'ml-ml', // margin-left: 20px;
       lg: 'ml-lg', // margin-left: 24px;
+      lx: 'ml-lx', // margin-left: 28px;
       xl: 'ml-xl', // margin-left: 32px;
       '2xl': 'ml-2xl', // margin-left: 48px;
     },
@@ -99,6 +108,7 @@ export const spacingStyles = cva('', {
       md: 'mr-md', // margin-right: 16px;
       ml: 'mr-ml', // margin-right: 20px;
       lg: 'mr-lg', // margin-right: 24px;
+      lx: 'mr-lx', // margin-right: 28px;
       xl: 'mr-xl', // margin-right: 32px;
       '2xl': 'mr-2xl', // margin-right: 48px;
     },
@@ -109,6 +119,7 @@ export const spacingStyles = cva('', {
       md: 'pt-md', // padding-top: 16px;
       ml: 'pt-ml', // padding-top: 20px;
       lg: 'pt-lg', // padding-top: 24px;
+      lx: 'pt-lx', // padding-top: 28px;
       xl: 'pt-xl', // padding-top: 32px;
       '2xl': 'pt-2xl', // padding-top: 48px;
     },
@@ -119,6 +130,7 @@ export const spacingStyles = cva('', {
       md: 'pb-md', // padding-bottom: 16px;
       ml: 'pb-ml', // padding-bottom: 20px;
       lg: 'pb-lg', // padding-bottom: 24px;
+      lx: 'pb-lx', // padding-bottom: 28px;
       xl: 'pb-xl', // padding-bottom: 32px;
       '2xl': 'pb-2xl', // padding-bottom: 48px;
     },
@@ -129,6 +141,7 @@ export const spacingStyles = cva('', {
       md: 'pl-md', // padding-left: 16px;
       ml: 'pl-ml', // padding-left: 20px;
       lg: 'pl-lg', // padding-left: 24px;
+      lx: 'pl-lx', // padding-left: 28px;
       xl: 'pl-xl', // padding-left: 32px;
       '2xl': 'pl-2xl', // padding-left: 48px;
     },
@@ -139,6 +152,7 @@ export const spacingStyles = cva('', {
       md: 'pr-md', // padding-right: 16px;
       ml: 'pr-ml', // padding-right: 20px;
       lg: 'pr-lg', // padding-right: 24px;
+      lx: 'pr-lx', // padding-right: 28px;
       xl: 'pr-xl', // padding-right: 32px;
       '2xl': 'pr-2xl', // padding-right: 48px;
     },

src/shared/spacing/spacing.ts

@@ -13,9 +13,11 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-gray-white active:bg-primary-active disabled:bg-gray-500 disabled:!text-gray-600',
         prev: 'bg-gray-100 text-gray-800 active:bg-gray-300 disabled:bg-gray-500 disabled:text-gray-600',
+        weak: `py-[15px] px-[32px] text-gray-800 flex rounded-sm bg-gray-100 w-full flex items-center justify-center`,
       },
       size: {
         default: 'h-[52px] px-8 rounded-md',
+        dialog: 'w-[136px] rounded-sm',
       },
     },
     defaultVariants: {

src/shared/ui/button.tsx

@@ -0,0 +1,63 @@
+import { Button } from '../button';
+
+import { WrappedDialog } from './wrappedDialog';
+
+import { DialogClose } from '.';
+
+type CommonDialogProps = {
+  title: string;
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  onConfirm: () => void;
+  actionText: string;
+  cancelText: string;
+};
+
+/**
+ * 공통으로 사용되는 다이얼로그 컴포넌트
+ * 제목, 내용, 확인/취소 버튼을 포함하는 기본적인 다이얼로그 구조를 제공합니다.
+ */
+
+/**
+ * 공통 다이얼로그 컴포넌트의 Props 타입
+ * @property {string} title - 다이얼로그 제목
+ * @property {React.ReactNode} trigger - 다이얼로그를 열기 위한 트리거 요소
+ * @property {React.ReactNode} children - 다이얼로그 내부 컨텐츠
+ * @property {() => void} onConfirm - 확인 버튼 클릭 시 실행될 콜백 함수
+ * @property {string} actionText - 확인 버튼에 표시될 텍스트 (기본값: '확인')
+ * @property {string} cancelText - 취소 버튼에 표시될 텍스트 (기본값: '취소')
+ */
+
+const CommonDialog = ({
+  title,
+  trigger,
+  children,
+  onConfirm,
+  actionText = '확인',
+  cancelText = '취소',
+}: CommonDialogProps) => {
+  return (
+    <WrappedDialog
+      title={title}
+      trigger={trigger}
+      footer={
+        <div className="flex gap-2">
+          <DialogClose asChild>
+            <Button variant="weak" size="dialog">
+              {cancelText}
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button size="dialog" onClick={onConfirm}>
+              {actionText}
+            </Button>
+          </DialogClose>
+        </div>
+      }
+    >
+      {children}
+    </WrappedDialog>
+  );
+};
+
+export default CommonDialog;

src/shared/ui/dialog/commonDialog.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+// import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/utils';
+import { spacingStyles } from '@/shared/spacing';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'bg-black/80 fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'rounded-ml fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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%]',
+        spacingStyles({ paddingTop: 'xl', paddingX: 'ml', paddingBottom: 'ml' }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400">
+        {/* <X className="h-4 w-4" /> */}
+        {/* <span className="sr-only">Close</span> */}
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-zinc-500 dark:text-zinc-400', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};