AlertModal 및 ProfileImage 컴포넌트 생성

shared/stories/organisms/AlertModal.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { View } from "react-native";
+import { globalGray100 } from "../../ui/index";
+import AlertModal from "../../ui/organisms/AlertModal";
+
+const meta: Meta<typeof AlertModal> = {
+  title: "organisms/AlertModal",
+  component: AlertModal,
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          backgroundColor: globalGray100,
+          padding: 20,
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AlertModal>;
+
+// 1. 버튼 하나
+export const SingleButton: Story = {
+  args: {
+    title: "알림",
+    content: "작업이 완료되었습니다.",
+    confirmLabel: "확인",
+    onConfirm: () => {
+      console.log("확인 클릭");
+    },
+  },
+};
+
+// 2. 버튼 두 개
+export const TwoButtons: Story = {
+  args: {
+    title: "알림",
+    content: "이 작업을 진행하시겠습니까?",
+    cancelLabel: "취소",
+    confirmLabel: "확인",
+    onCancel: () => {
+      console.log("취소 클릭");
+    },
+    onConfirm: () => {
+      console.log("확인 클릭");
+    },
+  },
+};
+
+// 3. 이미지 있음
+export const WithDefaultProfileImage: Story = {
+  args: {
+    title: "모달 타이틀",
+    content: "모달 본문내용 모달 본문내용 모달 본문내용 모달 본문내용",
+    confirmLabel: "맞아요",
+    onConfirm: () => {
+      console.log("확인 클릭");
+    },
+  },
+  render: (args) => (
+    <AlertModal {...args}>
+      <AlertModal.ProfileImage size={56} />
+    </AlertModal>
+  ),
+};
+
+// 4. 긴 텍스트
+export const LongContent: Story = {
+  args: {
+    title: "긴 제목이 들어가는 경우 테스트",
+    content:
+      "이것은 매우 긴 콘텐츠 텍스트입니다. 모달의 width가 화면 크기에 따라 조절되고, 콘텐츠는 자동으로 wrap되어야 합니다. 여러 줄에 걸쳐 표시되는 긴 텍스트를 테스트하기 위한 예시입니다.",
+    cancelLabel: "취소",
+    confirmLabel: "확인",
+    onCancel: () => {
+      console.log("취소 클릭");
+    },
+    onConfirm: () => {
+      console.log("확인 클릭");
+    },
+  },
+};

shared/ui/atoms/ProfileImage.tsx

@@ -0,0 +1,16 @@
+import { Image } from "react-native";
+
+const defaultUserImage = require("../../../assets/icons/user.svg");
+
+interface ProfileImageProps {
+  uri?: string;
+  size?: number;
+}
+
+const ProfileImage = ({ uri, size }: ProfileImageProps) => {
+  const imageSource = uri ? { uri } : defaultUserImage;
+
+  return <Image source={imageSource} style={{ width: size, height: size }} />;
+};
+
+export default ProfileImage;

shared/ui/organisms/AlertModal.tsx

@@ -0,0 +1,149 @@
+import { StyleSheet, View } from "react-native";
+import NemoText from "../atoms/NemoText";
+import ProfileImage from "../atoms/ProfileImage";
+import {
+  globalGray0,
+  globalGray700,
+  globalSpacingLg,
+  globalSpacingSm,
+  globalSpacingXs,
+} from "../index";
+import ModalButton from "../molecules/ModalButton";
+
+interface AlertModalProps {
+  children?: React.ReactNode;
+  title: string;
+  content?: string;
+  cancelLabel?: string;
+  confirmLabel: string;
+  onCancel?: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * AlertModal 컴포넌트
+ *
+ * @example
+ * // 버튼 하나만
+ * <AlertModal
+ *   title="알림"
+ *   content="작업이 완료되었습니다."
+ *   confirmLabel="확인"
+ *   onConfirm={() => {}}
+ * />
+ *
+ * @example
+ * // 버튼 두 개
+ * <AlertModal
+ *   title="알림"
+ *   content="이 작업을 진행하시겠습니까?"
+ *   cancelLabel="취소"
+ *   confirmLabel="확인"
+ *   onCancel={() => {}}
+ *   onConfirm={() => {}}
+ * />
+ *
+ * @example
+ * // 프로필 이미지 포함 (기본 이미지)
+ * <AlertModal
+ *   title="모달 타이틀"
+ *   content="모달 본문내용"
+ *   confirmLabel="맞아요"
+ *   onConfirm={() => {}}
+ * >
+ *   <AlertModal.ProfileImage />
+ * </AlertModal>
+ *
+ * @example
+ * // 프로필 이미지 포함 (커스텀 이미지)
+ * <AlertModal
+ *   title="모달 타이틀"
+ *   content="모달 본문내용"
+ *   cancelLabel="취소하기"
+ *   confirmLabel="맞아요"
+ *   onCancel={() => {}}
+ *   onConfirm={() => {}}
+ * >
+ *   <AlertModal.ProfileImage uri={userData?.profileImage} size={56} />
+ * </AlertModal>
+ */
+
+const AlertModal = ({
+  title,
+  content,
+  cancelLabel,
+  confirmLabel,
+  onCancel,
+  onConfirm,
+  children,
+}: AlertModalProps) => {
+  return (
+    <View style={styles.container}>
+      {children && <View style={styles.image}>{children}</View>}
+
+      <View style={styles.title}>
+        <NemoText level="h3">{title}</NemoText>
+      </View>
+
+      {content && (
+        <View style={styles.content}>
+          <NemoText level="body2" style={{ color: globalGray700 }}>
+            {content}
+          </NemoText>
+        </View>
+      )}
+
+      <View style={styles.footer}>
+        {cancelLabel && onCancel && (
+          <View style={styles.buttonWrapper}>
+            <ModalButton
+              label={cancelLabel}
+              variant="secondary"
+              onPress={onCancel}
+            />
+          </View>
+        )}
+        <View style={styles.buttonWrapper}>
+          <ModalButton
+            label={confirmLabel}
+            variant="primary"
+            onPress={onConfirm}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+// Composition을 위해 ProfileImage를 붙임
+AlertModal.ProfileImage = ProfileImage;
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    marginHorizontal: 53,
+    backgroundColor: globalGray0,
+    borderRadius: 14,
+    gap: globalSpacingSm,
+    padding: globalSpacingLg,
+    alignSelf: "center",
+  },
+  image: {
+    alignItems: "center",
+  },
+  title: {
+    alignItems: "center",
+  },
+  content: {
+    alignItems: "center",
+  },
+  footer: {
+    flexDirection: "row",
+    gap: globalSpacingXs,
+  },
+  buttonWrapper: {
+    flex: 1,
+  },
+});
+
+export default AlertModal;