feat: 로딩 (#80)

* chore: InView with framer-motion * feat: add loading layout * feat: text-effect * feat: global loading * feat: delay create invitation * feat: 저장 중 로딩 * feat: 삭제 토스트 추가 * feat: 저장 버튼 평소 활성화 * �feat: OG 이미지 설정 (#79) * feat: update thumbnail * feat: apply og image * feat: add layout thumbnail * feat: 템플릿의 썸네일이 초기 적용되도록
Nexters · Aug 20, 2024 · 0a854b6 · 0a854b6
1 parent 63e52eb
commit 0a854b6
Show file tree

Hide file tree

Showing 11 changed files with 325 additions and 23 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "drizzle-orm": "^0.33.0",
     "es-hangul": "^1.4.2",
     "es-toolkit": "^1.13.1",
+    "framer-motion": "^11.3.28",
     "ky": "^1.4.0",
     "lucia": "^3.2.0",
     "lucide-react": "^0.414.0",

diff --git a/src/app/(main)/dashboard/template-item.tsx b/src/app/(main)/dashboard/template-item.tsx
@@ -1,31 +1,42 @@
 "use client";
 
 import { useMutation } from "@tanstack/react-query";
+import { delay } from "es-toolkit";
 import { PlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
+import { useLoadingStore } from "~/components/gloabl-loading";
 import { createInvitation } from "~/lib/db/schema/invitations.query";
 import type { Template } from "~/lib/db/schema/templates";
 
 export default function TemplateItem({ template }: { template: Template }) {
   const router = useRouter();
+  const loadingLayer = useLoadingStore();
 
   const createMutation = useMutation({
     mutationFn: async () => {
-      // TODO: global loading
-      return await createInvitation({
-        title: template.title,
-        thumbnailUrl: template.thumbnailUrl,
-        customFields: template.customFields,
-      });
+      loadingLayer.open("초대장을 만들고 있어요...");
+
+      const [data] = await Promise.all([
+        await createInvitation({
+          title: template.title,
+          thumbnailUrl: template.thumbnailUrl,
+          customFields: template.customFields,
+        }),
+        await delay(1000),
+      ]);
+
+      return data;
     },
     onSuccess: (data) => {
       toast.success("초대장이 생성되었습니다.");
       router.push(`/i/${data.eventUrl}/edit`);
+      loadingLayer.close();
     },
     onError: (error) => {
       console.error("Error creating invitation:", error);
       toast.error("초대장 생성 중 오류가 발생했습니다.");
+      loadingLayer.close();
     },
   });
 

diff --git a/src/app/(main)/loading.tsx b/src/app/(main)/loading.tsx
@@ -0,0 +1,25 @@
+export default function Loading() {
+  return (
+    <div className="grid h-screen w-screen animate-pulse place-items-center p-4 text-muted-foreground">
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          className="h-8 w-8 animate-spin fill-muted text-muted-foreground"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span className="sr-only">Loading...</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/core/in-view.tsx b/src/components/core/in-view.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import {
+  motion,
+  type Transition,
+  useInView,
+  type UseInViewOptions,
+  type Variant,
+} from "framer-motion";
+import { type ReactNode, useRef } from "react";
+
+interface InViewProps {
+  children: ReactNode;
+  variants?: {
+    hidden: Variant;
+    visible: Variant;
+  };
+  transition?: Transition;
+  viewOptions?: UseInViewOptions;
+  className?: string;
+}
+
+const defaultVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+export function InView({
+  children,
+  variants = defaultVariants,
+  transition,
+  viewOptions,
+  className,
+}: InViewProps) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, viewOptions);
+
+  return (
+    <motion.div
+      ref={ref}
+      initial="hidden"
+      animate={isInView ? "visible" : "hidden"}
+      variants={variants}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/src/components/core/text-effect.tsx b/src/components/core/text-effect.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import React from "react";
+
+type PresetType = "blur" | "shake" | "scale" | "fade" | "slide";
+
+type TextEffectProps = {
+  children: string;
+  per?: "word" | "char";
+  as?: keyof JSX.IntrinsicElements;
+  variants?: {
+    container?: Variants;
+    item?: Variants;
+  };
+  className?: string;
+  preset?: PresetType;
+};
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+};
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: "blur(12px)" },
+      visible: { opacity: 1, filter: "blur(0px)" },
+    },
+  },
+  shake: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { x: 0 },
+      visible: { x: [-5, 5, -5, 5, 0], transition: { duration: 0.5 } },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+    },
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+    },
+  },
+};
+
+const AnimationComponent: React.FC<{
+  word: string;
+  variants: Variants;
+  per: "word" | "char";
+}> = React.memo(({ word, variants, per }) => {
+  if (per === "word") {
+    return (
+      <motion.span
+        aria-hidden="true"
+        variants={variants}
+        className="inline-block whitespace-pre"
+      >
+        {word}
+      </motion.span>
+    );
+  }
+
+  return (
+    <span className="inline-block whitespace-pre">
+      {word.split("").map((char, charIndex) => (
+        <motion.span
+          key={`char-${charIndex}`}
+          aria-hidden="true"
+          variants={variants}
+          className="inline-block whitespace-pre"
+        >
+          {char}
+        </motion.span>
+      ))}
+    </span>
+  );
+});
+
+AnimationComponent.displayName = "AnimationComponent";
+
+export function TextEffect({
+  children,
+  per = "word",
+  as = "p",
+  variants,
+  className,
+  preset,
+}: TextEffectProps) {
+  const words = children.split(/(\S+)/);
+  const MotionTag = motion[as as keyof typeof motion];
+  const selectedVariants = preset
+    ? presetVariants[preset]
+    : { container: defaultContainerVariants, item: defaultItemVariants };
+  const containerVariants = variants?.container || selectedVariants.container;
+  const itemVariants = variants?.item || selectedVariants.item;
+
+  return (
+    <MotionTag
+      initial="hidden"
+      animate="visible"
+      aria-label={children}
+      variants={containerVariants}
+      className={className}
+    >
+      {words.map((word, wordIndex) => (
+        <AnimationComponent
+          key={`word-${wordIndex}`}
+          word={word}
+          variants={itemVariants}
+          per={per}
+        />
+      ))}
+    </MotionTag>
+  );
+}
diff --git a/src/components/editor/navigation.tsx b/src/components/editor/navigation.tsx
@@ -13,7 +13,7 @@ import {
   Undo2,
 } from "lucide-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { useEditor } from "~/components/editor/provider";
 import TitleInput from "~/components/editor/title-input";
@@ -38,8 +38,6 @@ export default function EditorNavigation() {
   const { editor, dispatch } = useEditor();
   const router = useRouter();
   const { openDialog } = useAlertDialogStore();
-  const params = useParams();
-  const subDomain = params.subdomain;
 
   const handlePreviewClick = () => {
     dispatch({ type: "TOGGLE_PREVIEW_MODE" });
@@ -54,19 +52,18 @@ export default function EditorNavigation() {
   };
 
   const handleOnSave = async () => {
-    try {
-      await updateInvitation({
+    toast.promise(
+      updateInvitation({
         id: editor.config.invitationId,
         title: editor.config.invitationTitle,
         customFields: editor.data,
-      });
-      toast.success("저장되었습니다.");
-    } catch (error) {
-      console.error(error);
-      toast.error("일시적인 오류가 발생되었습니다.", {
-        description: "잠시후 다시 시도해보세요.",
-      });
-    }
+      }),
+      {
+        loading: "저장중...",
+        success: "저장되었습니다.",
+        error: "일시적인 오류가 발생되었습니다.",
+      },
+    );
   };
 
   const handleOnDelete = () => {
@@ -78,6 +75,7 @@ export default function EditorNavigation() {
       onConfirm: async () => {
         await deleteInvitation(editor.config.invitationId);
         router.replace("/dashboard");
+        toast.success("삭제되었습니다.");
       },
     });
   };

diff --git a/src/components/editor/sidebar/sidebar-settings-tab.tsx b/src/components/editor/sidebar/sidebar-settings-tab.tsx
@@ -118,10 +118,7 @@ function CustomDomainSection() {
                       type="submit"
                       size="sm"
                       className="ml-2 h-6"
-                      disabled={
-                        updateSubdomainMutation.isPending ||
-                        field.state.value === editor.config.invitationSubdomain
-                      }
+                      disabled={updateSubdomainMutation.isPending}
                     >
                       저장
                     </Button>

diff --git a/src/components/gloabl-loading.tsx b/src/components/gloabl-loading.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { create } from "zustand";
+import { TextEffect } from "~/components/core/text-effect";
+
+type LoadingStore = {
+  text?: string;
+  isOpen: boolean;
+  open: (text?: string) => void;
+  close: () => void;
+};
+
+export const useLoadingStore = create<LoadingStore>((set) => ({
+  isOpen: false,
+  open: (text) => set({ isOpen: true, text }),
+  close: () => set({ isOpen: false }),
+}));
+
+export default function GlobalLoading() {
+  const { text, isOpen } = useLoadingStore();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 flex flex-col items-center justify-center gap-2 bg-background/95 animate-in"
+          initial={{ opacity: 0, filter: "blur(4px)" }}
+          animate={{ opacity: 1, filter: "blur(0px)" }}
+          exit={{ opacity: 0, filter: "blur(2px)" }}
+        >
+          <img
+            src="https://velog.velcdn.com/images/bepyan/post/3433ddb0-3b6d-43f0-8568-8d678f323b0b/image.png"
+            alt="로딩중..."
+            width={500}
+            height={300}
+            className="animate-head-shake"
+            style={{ animationDuration: "5s" }}
+          />
+          {text && (
+            <TextEffect className="pb-10 text-4xl font-bold">{text}</TextEffect>
+          )}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}