Merge pull request #158 from han-kimm/feat/setting

⚡️fix: 닉네임 중복 확인, 상세 페이지 이미지 size UseEffect, 소셜로그인 로직 수정
P1Z7 · Feb 23, 2024 · cfc5462 · cfc5462
2 parents 6c2c1e1 + 91a8a34
commit cfc5462
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 17 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} 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
@@ -125,7 +125,7 @@ export class Api {
     return res;
   }
 
-  async delete<T extends DeleteEndPoint>(endPoint: T, body: DeleteBodyType<T>) {
+  async delete<T extends DeleteEndPoint>(endPoint: T, body?: DeleteBodyType<T>) {
     this.baseUrl = "/api" + endPoint;
 
     const newEndPoint = this.baseUrl;
@@ -136,7 +136,7 @@ export class Api {
         "Content-type": "application/json",
       },
     };
-    const res = await fetch(newEndPoint);
+    const res = await fetch(newEndPoint, config);
     if (await this.updateToken(res)) {
       const refetchResult = await this.refetch(newEndPoint, config);
       return refetchResult;
@@ -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/_components/GenericFormProvider.tsx b/app/_components/GenericFormProvider.tsx
@@ -71,7 +71,7 @@ const GenericFormProvider = <T extends FieldValues>({ children, formOptions }: G
     if (path === "/signup") {
       const res = await handleSignupSubmit(userInputValue, instance);
       if (!res.error) {
-        router.push("/");
+        router.refresh();
       }
     }
   };

diff --git a/app/_components/header/PcHeader.tsx b/app/_components/header/PcHeader.tsx
@@ -30,7 +30,7 @@ const PcHeader = () => {
       return;
     }
     setSession(undefined);
-  }, [newSession?.isAuth]);
+  }, [newSession?.user.profileImage]);
 
   return (
     <header className="sticky top-0 z-nav hidden h-72 w-full bg-white-black px-24 pc:block">

diff --git a/app/_components/input/InputText.tsx b/app/_components/input/InputText.tsx
@@ -7,7 +7,7 @@ import ClearIcon from "@/public/icon/x_gray.svg";
 
 interface Prop extends InputHTMLAttributes<HTMLInputElement> {
   children?: ReactNode;
-  type?: "text" | "password";
+  type?: "text" | "password" | "email";
   horizontal?: boolean;
   hint?: string;
   onKeyDown?: (e: KeyboardEvent) => void;
@@ -117,8 +117,10 @@ const InputText: Function = ({
               onKeyDown={onKeyDown}
               {...field}
               className={classNames(
-                "focus:border-1 mt-8 h-48 w-full rounded-sm bg-gray-50 px-16 py-12 pr-36 text-16 text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-1 focus:outline-blue",
-                { "outline outline-1 outline-red": fieldState.error },
+                "mt-8 h-48 w-full rounded-sm bg-gray-50 px-16 py-12 pr-36 text-16 text-gray-900 outline-none placeholder:text-gray-400 focus:border focus:border-blue",
+                {
+                  "border border-red": fieldState.error,
+                },
               )}
             />
             <Button />

diff --git a/app/_components/modal/WithdrawModal.tsx b/app/_components/modal/WithdrawModal.tsx
@@ -18,7 +18,7 @@ const WithdrawModal = ({ closeModal }: Props) => {
       return;
     }
     try {
-      await instance.delete(`/users/${session.user.userId}`, undefined);
+      await instance.delete(`/users/${session.user.userId}`);
       toast("지금까지 Opener와 함께해 주셔서 감사합니다!", {
         className: "text-16 font-600",
       });

diff --git a/app/_store/session/cookies.ts b/app/_store/session/cookies.ts
@@ -25,7 +25,9 @@ export const deleteCookies: typeof cookies.remove = (name, options) => {
   return cookies.remove(name, options);
 };
 
-export const setSession = (newSession: Session) => (deleteCookies("session"), setCookies("session", newSession, { path: "/" }));
+export const setSession = (newSession: Session) => (
+  deleteCookies("session"), setCookies("session", newSession, { path: "/", expires: new Date(Date.now() + 24 * 60 * 60 * 1000) })
+);
 
 export const getSession = (): Session | undefined => getCookies("session");
 

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;
 };