✨ feat: 닉네임 중복 확인, 상세 페이지 이미지 size UseEffect, 소셜로그인 로직 수정

P1Z7 · Feb 23, 2024 · 91a8a34 · 91a8a34
1 parent 3964930
commit 91a8a34
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/app/(route)/event/[eventId]/_components/tab/DescriptionTab.tsx b/app/(route)/event/[eventId]/_components/tab/DescriptionTab.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import { EventImageType } from "@/types/index";
 
 interface Props {
@@ -9,10 +10,16 @@ interface Props {
 }
 
 const DescriptionTab = ({ images, description }: Props) => {
+  const [sizes, setSizes] = useState("300px");
+
+  useEffect(() => {
+    setSizes("1000px");
+  }, []);
+
   return (
     <div className="mb-40 flex w-full flex-col gap-16 px-20 py-24 pt-24 pc:gap-24 pc:px-40 pc:py-32">
       <p className="whitespace-pre-wrap border-b border-gray-50 pb-16 text-14 font-500 text-gray-700 pc:pb-32 pc:text-16">{description}</p>
-      {images?.map((image) => <Image key={image.id} src={image.imageUrl} alt={"행사 정보 사진"} width={0} height={0} priority sizes="800px" className="w-full" />)}
+      {images?.map((image) => <Image key={image.id} src={image.imageUrl} alt={"행사 정보 사진"} width={0} height={0} priority sizes={sizes} className="w-full" />)}
     </div>
   );
 };

diff --git a/app/(route)/oauth/callback/[provider]/page.tsx b/app/(route)/oauth/callback/[provider]/page.tsx
@@ -33,10 +33,10 @@ const OAuth = () => {
         return;
       }
 
-      router.back();
+      router.push(pathname);
       router.refresh();
-    } catch {
-      toast("네트워크 오류! 다시 시도해 주십시오.", {
+    } catch (e) {
+      toast.error("이미 가입한 이메일입니다.", {
         className: "text-16 font-600",
       });
       router.push("/signin");

diff --git a/app/(route)/setting/profile/page.tsx b/app/(route)/setting/profile/page.tsx
@@ -38,10 +38,18 @@ const ProfilePage = () => {
     if (!nickName || !session) {
       return;
     }
-    setSubmitState((prev) => ({ isError: false, isLoading: true }));
+    setSubmitState({ isError: false, isLoading: true });
 
     setTimeout(async () => {
       try {
+        const nickNameRes = await instance.get("/users/nickname");
+        if (nickNameRes.isDuplicated) {
+          toast.error("이미 사용 중인 닉네임입니다.", {
+            className: "text-16 font-600",
+          });
+          return;
+        }
+
         let url;
         if (!formState.dirtyFields.profileImage) {
           url = session.user.profileImage;

diff --git a/app/(route)/signup/page.tsx b/app/(route)/signup/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import MetaTag from "@/components/MetaTag";
 import PinkLayout from "@/components/layout/PinkLayout";
@@ -25,6 +25,7 @@ const DEFAULT_VALUES = {
 };
 
 const SignUp = () => {
+  const emailFromSignin = useSearchParams().get("email");
   const router = useRouter();
   const [pcWidth, setPcWidth] = useState<"narrow" | "wide">("narrow");
 
@@ -51,7 +52,7 @@ const SignUp = () => {
       <PinkLayout size={pcWidth}>
         <Header onClick={handlePrevClick} />
         <div className="flex h-[calc(100%-13.8rem)] grow flex-col px-20">
-          <GenericFormProvider<SignUpFormType> formOptions={{ mode: "onBlur", defaultValues: DEFAULT_VALUES }}>
+          <GenericFormProvider<SignUpFormType> formOptions={{ mode: "onBlur", defaultValues: { ...DEFAULT_VALUES, email: emailFromSignin ?? "" } }}>
             <ProfileSetup steps={STEPS} handleNextClick={handleNextClick} Funnel={Funnel} Step={Step} />
           </GenericFormProvider>
         </div>

diff --git a/app/_api/api.ts b/app/_api/api.ts
@@ -255,7 +255,9 @@ type GetQueryType<T> = T extends "/event"
                           ? Req_Query_Type["그룹조회"]
                           : T extends "/artist"
                             ? Req_Query_Type["멤버조회"]
-                            : unknown;
+                            : T extends "/users/nickname"
+                              ? Req_Query_Type["닉네임"]
+                              : unknown;
 // 사용하실 때 직접 추가 부탁드립니다!
 type PutBodyType<T> = T extends `/event/${string}`
   ? Req_Post_Type["event"]

diff --git a/app/_types/queryType.ts b/app/_types/queryType.ts
@@ -75,6 +75,10 @@ type Req_Query_Artist_Event = {
   userId: string;
 };
 
+type Req_Query_NickName = {
+  search: string;
+};
+
 export type Req_Query_Type = {
   행사목록: Req_Query_Event;
   행사캐러셀: Req_Query_Event_Carousel;
@@ -90,4 +94,5 @@ export type Req_Query_Type = {
   멤버조회: Req_Query_Artist;
   수정상세: Req_Query_Approve;
   아티스트행사: Req_Query_Artist_Event;
+  닉네임: Req_Query_NickName;
 };