0.1.9 #34

0.1.9

apis/index.ts

@@ -84,6 +84,10 @@ export const getLetter = async (letterId: string) => {
   const res = await api.get<LetterResponse>(`/letters/${letterId}`);
   return res.data;
 };
+export const updateLetterBySenderId = async (letterId: string) => {
+  const res = await api.patch<boolean>(`/letters/${letterId}`);
+  return res.data;
+};
 
 export const getMails = async () => {
   const res = await api.get<Mail[]>("/mails");
@@ -139,6 +143,7 @@ const APIs = {
   getMailById,
   getUserCat,
   postCatAccessory,
+  updateLetterBySenderId,
 };
 
 export default APIs;

app/(root)/(home)/[userId]/layout.tsx

@@ -3,7 +3,7 @@ import PrefetchQuery from "@/hydrate/prefetch-query";
 import CommonQuery from "@/lib/queries/common.query";
 import MailQuery from "@/lib/queries/mails.query";
 import { WithParam } from "@/type";
-import { cookies, headers } from "next/headers";
+import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import React from "react";
 
@@ -14,12 +14,8 @@ const UserLayout = async ({
   const cookie = cookies();
   const access = cookie.get("access");
   const user = await APIs.getMe(access?.value || "");
-  const header = headers();
-  const pathname = header.get("x-url") || "";
-
   if (user.id !== userId) return redirect("/");
-  if (!user.nickname && !pathname.includes("nickname"))
-    return redirect(`nickname`);
+
   return (
     <PrefetchQuery
       queries={[CommonQuery.getCat, CommonQuery.getAcc, MailQuery.getMails]}

app/(root)/(home)/[userId]/letter/page.tsx

@@ -1,93 +1,109 @@
 "use client";
 
-import React, { Suspense, useContext } from "react";
+import React, { Suspense, useContext, useEffect } from "react";
 import { AnimatePresence } from "framer-motion";
 import { useForm } from "react-hook-form";
-
-import { LetterFormValues, letterFormState } from "@/form-state";
+import { motion } from "framer-motion";
+import { LETTER_TYPE, LetterFormValues, letterFormState } from "@/form-state";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { HashContext } from "@/hooks/use-hash-router";
 import { ArrowLeft } from "lucide-react";
 import BaseLayout from "@/layout/base-layout";
 import { Form } from "@/components/ui/form";
 import { useSession } from "@/components/provider/session-provider";
-import { Letters } from "@/type";
 import dynamic from "next/dynamic";
+import Loading from "@/components/loading";
 import useSendLetter from "@/hooks/use-send-letter";
 import { copyURL } from "@/lib/utils";
 
+const SelectPad = dynamic(() => import("@/components/pages/letter/select-pad"));
 const WriteLetter = dynamic(
   () => import("@/components/pages/letter/write-letter"),
 );
 const FinishLetter = dynamic(
   () => import("@/components/pages/letter/finish-letter"),
 );
-const Mailing = dynamic(() => import("@/components/pages/letter/mailing"));
-const SelectPad = dynamic(() => import("@/components/pages/letter/select-pad"));
 
 const LetterPage = () => {
-  const { data } = useSession();
-  const { mutate, isPending, data: completedLetter } = useSendLetter();
-  const { user } = data || {};
+  const {
+    mutate,
+    isPending: isLoading,
+    data: completedLeetter,
+  } = useSendLetter();
+  const { data: session } = useSession();
   const router = useContext(HashContext);
   const form = useForm<LetterFormValues>({
     resolver: zodResolver(letterFormState),
     defaultValues: {
       catName: "umu",
       content: "",
       receiverNickname: "",
+      senderNickname: session?.user?.nickname ?? "",
+      letterType: LETTER_TYPE.LETTER,
     },
   });
 
-  const sendLetter = (letter: Letters) => {
-    mutate(letter, {
-      async onSuccess(data) {
-        copyURL(`/receiver/${data.data.id}`);
-
-        if (data && data.ok) {
-          router.push(`mailing`);
-        }
-      },
-    });
-  };
-
   const onValid = (values: LetterFormValues) => {
-    const param = { ...values, senderNickname: user?.nickname };
-    sendLetter(param);
+    router.push("finish");
   };
 
+  useEffect(() => {
+    if (session?.user?.nickname) {
+      form.setValue("senderNickname", session?.user?.nickname);
+    }
+  }, [form, session?.user?.nickname]);
+
   return (
     <Form {...form}>
       <BaseLayout
         as="form"
         onSubmit={form.handleSubmit(onValid)}
-        className='"flex p-6" h-full flex-col'
+        className='"flex p-6" h-full flex-col overflow-y-hidden'
       >
-        <ArrowLeft
-          onClick={() =>
-            router.hash
-              ? router.back()
-              : router.replace(`/${data?.user?.id}/post`, { native: true })
-          }
-        />
-        <Suspense fallback={<>Loading....</>}>
+        {router.hash !== "#mailing" && (
+          <ArrowLeft
+            onClick={() =>
+              router.hash
+                ? router.back()
+                : router.replace(`/${session?.user?.id}/post`, { native: true })
+            }
+          />
+        )}
+        <Suspense fallback={<Loading />}>
           <AnimatePresence mode="wait">
             {!router.hash ? (
               <SelectPad router={router} control={form.control} />
             ) : null}
             {router.hash === "#letter" ? (
-              <WriteLetter router={router} control={form.control} />
+              <WriteLetter
+                isSenderEditable={false}
+                router={router}
+                control={form.control}
+              />
             ) : null}
             {router.hash === "#finish" ? (
               <FinishLetter
                 router={router}
                 control={form.control}
-                isLoading={isPending}
+                onSendLetter={(values) => {
+                  mutate(
+                    {
+                      ...values,
+                    },
+                    {
+                      async onSuccess(data) {
+                        copyURL(`/receiver/${data.data.id}`);
+                        if (data && data.ok) {
+                          router.push(`/mailing/${data.data.id}`, {
+                            native: true,
+                          });
+                        }
+                      },
+                    },
+                  );
+                }}
               />
             ) : null}
-            {router.hash === "#mailing" ? (
-              <Mailing router={router} letter={completedLetter} />
-            ) : null}
           </AnimatePresence>
         </Suspense>
       </BaseLayout>

app/(root)/(home)/[userId]/nickname/page.tsx

@@ -46,7 +46,7 @@ const NicknamePage = () => {
   const { mutate } = useSetNickName({
     async onSuccess(data, variables) {
       if (data) {
-        update();
+        await update();
         router.replace(`/${userData?.user?.id}/post`);
       }
     },

app/(root)/(home)/[userId]/post/@letter/(.)letter/page.tsx

@@ -11,6 +11,7 @@ import CommonQuery from "@/lib/queries/common.query";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 import APIs from "@/apis";
+import LetterWithSheet from "@/components/letter-with-sheet";
 
 export default function LetterPage({
   params: { userId },
@@ -116,25 +117,12 @@ export default function LetterPage({
             )}
             style={{ fontFamily: mail?.catName }}
           >
-            <div
-              ref={letterWrapRef}
-              className="relative mt-8  w-full px-[2rem] py-[2rem] pr-[2.2rem]"
-            >
-              <Image
-                ref={imageRef}
-                className="absolute bottom-0 left-0 right-0 top-0 -z-[1]"
-                src="/assets/편지지.png"
-                alt="편지지"
-                width={750}
-                height={790}
-                style={{ objectFit: "cover" }}
-              />
-              <h1>{mail?.receiverNickname}에게</h1>
-              <p>{mail?.content}</p>
-              <h1 className="absolute bottom-[2rem] right-[2.2rem]">
-                {mail?.senderNickname}씀
-              </h1>
-            </div>
+            <LetterWithSheet
+              showStamp={false}
+              to={mail?.receiverNickname ?? ""}
+              content={mail?.content ?? ""}
+              from={mail?.senderNickname ?? ""}
+            />
           </div>
         </div>
 

app/(root)/(home)/[userId]/post/layout.tsx

@@ -1,4 +1,5 @@
 import { generateBlurImageByImageList } from "@/actions/blur-image-.action";
+import CheckNickname from "@/components/pages/post/check-nickname";
 import dynamic from "next/dynamic";
 import React, { PropsWithChildren, ReactNode, Suspense } from "react";
 
@@ -24,6 +25,7 @@ const PostLayout = async ({
       {children}
       {letter}
       <Background post={post} />
+      <CheckNickname />
     </>
   );
 };