Merge branch 'dev' of https://github.com/TripInfoWeb/solitour-frontend …

…into dev_auth
TripInfoWeb · Sep 21, 2024 · a083adf · a083adf
2 parents ebf2fd5 + 74d1fb5
commit a083adf
Show file tree

Hide file tree

Showing 32 changed files with 540 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.28",
     "lottie-react": "^2.4.0",
-    "next": "14.2.3",
+    "next": "14.2.10",
     "node-html-parser": "^6.1.13",
     "quill-image-drop-and-paste": "^2.0.1",
     "rc-slider": "^11.1.5",

diff --git a/src/app/api/auth/user-image/route.ts b/src/app/api/auth/user-image/route.ts
@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+
+// 사용자 이미지 삭제 API
+export async function DELETE(request: NextRequest) {
+  const access_cookie = request.cookies.get("access_token");
+  if (!access_cookie) {
+    const refresh_cookie = request.cookies.get("refresh_token");
+    if (!refresh_cookie) {
+      // 리프레시 토큰이 없으므로 요청 중단
+      return new NextResponse("Refresh token not found", { status: 403 });
+    }
+    // 리프레시 토큰으로 재발급 받아 재요청 보내기 위한 응답
+    return new NextResponse("Refresh token not found", { status: 401 });
+  }
+
+  const response = await fetch(`${process.env.BACKEND_URL}/api/user-image`, {
+    method: "DELETE",
+    headers: {
+      Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+      "Content-Type": "application/json",
+    },
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    return new NextResponse(`${response.statusText}`, { status: response.status });
+  }
+
+    return await response.json();
+}
diff --git a/src/app/api/gathering/[id]/route.ts b/src/app/api/gathering/[id]/route.ts
@@ -8,7 +8,6 @@ export async function GET(
   try {
     const cookie = request.cookies.get("access_token");
 
-    // Back-end API 호출
     const response = await fetch(
       `${process.env.BACKEND_URL}/api/gatherings/${params.id}`,
       {
@@ -43,7 +42,6 @@ export async function PUT(
     const cookie = request.cookies.get("access_token");
     const bodyData = await request.json();
 
-    // Back-end API 호출
     const response = await fetch(
       `${process.env.BACKEND_URL}/api/gatherings/${params.id}`,
       {
@@ -60,11 +58,9 @@ export async function PUT(
     if (!response.ok) {
       throw new Error(response.statusText);
     }
-    await revalidatePath(`/gathering/${params.id}`);
-    // return NextResponse.redirect(
-    //   new URL(`/getGathering/${params.id}`),
-    // );
-
+    revalidatePath(`/gathering/${params.id}`);
+    revalidatePath("/mypage");
+    revalidatePath("/gathering");
     return response;
   } catch (e) {
     return new Response(JSON.stringify({ error: "Failed to update data." }), {

diff --git a/src/app/api/gathering/route.ts b/src/app/api/gathering/route.ts
@@ -31,6 +31,8 @@ export async function POST(request: NextRequest) {
       throw new Error(`Error: ${errorData.error || "Unknown error occurred"}`);
     }
     const resultData = await response.json();
+    // 생성시 홈 화면에 new모임 최신화
+    revalidateTag("getNewGatheringList");
     return NextResponse.json(
       { data: resultData, message: "데이터가 성공적으로 처리되었습니다." },
       { status: 200 },
@@ -90,6 +92,8 @@ export async function DELETE(request: NextRequest) {
     return NextResponse.json({ error: "서버 오류" }, { status: 500 });
   }
 
+  revalidateTag("getNewGatheringList");
   revalidatePath("/gathering", "layout");
+  revalidatePath("/mypage");
   return response;
 }
diff --git a/src/components/auth/AddUserInformationForm.tsx b/src/components/auth/AddUserInformationForm.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { useRef, useState } from "react";
+
+interface IAddUserInformationForm {
+
+}
+const AddUserInformationForm = (props: IAddUserInformationForm) => {
+  const [sex, setSex] = useState("");
+    const [date, setDate] = useState({
+      year: "",
+      month: "",
+      day: "",
+    });
+
+    const monthRef = useRef<HTMLInputElement>(null);
+    const dayRef = useRef<HTMLInputElement>(null);
+
+  // 숫자만 입력되게 필터링
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    if (!/^\d*$/.test(value)) return;
+
+    setDate((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    if (name === "year" && value.length === 4) {
+      monthRef.current?.focus();
+    }
+
+    if (name === "month" && value.length === 2) {
+      dayRef.current?.focus();
+    }
+  };
+
+  return (
+    <section
+      className={
+        "flex max-w-[31.25rem] max-h-[calc(100vh-1rem)] overflow-y-scroll scrollbar-hide flex-col items-center rounded-b-[1rem] bg-white px-[3.5rem] pb-[2rem] pt-[.5rem]"
+      }
+    >
+      <h2 className="text-[1.625rem] font-bold text-black">
+        안녕하세요 솔리투어입니다
+      </h2>
+      <p className="mt-[0.625rem] max-w-[15.875rem] text-center text-gray1">
+        신뢰할 수 있는 이용 환경을 위해 필요한 정보를 입력해 주세요
+      </p>
+      <div className="mt-[1.25rem] flex w-full max-w-[24.25rem] flex-col gap-y-[2.375rem] rounded-[1.125rem] bg-[#F7F7F7] px-[2.25rem] pb-[1.875rem] pt-[1.5rem]">
+        <article className="flex flex-col">
+          <h3 className="text-[1.125rem] font-bold text-black"> 성별 </h3>
+          <div className={"mt-3 flex h-10 w-full gap-x-3"}>
+            <button
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${sex == "MALE" ? "font-bold bg-[#F2FAF7] text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              onClick={() => setSex("MALE")}
+            >
+              남성
+            </button>
+            <button
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${sex == "FEMALE" ? "font-bold bg-[#F2FAF7] text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              onClick={() => setSex("FEMALE")}
+            >
+              여성
+            </button>
+          </div>
+        </article>
+        <article className="flex flex-col">
+          <h3 className="text-[1.125rem] font-bold text-black"> 생년월일 </h3>
+          <div className="mt-3 flex h-10 items-center justify-center rounded-[1.5rem] bg-white py-[0.375rem] text-main outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#F0F0F0]">
+            <input
+              type="text"
+              name="year"
+              value={date.year}
+              onChange={handleInputChange}
+              placeholder="YYYY"
+              maxLength={4}
+              min={1965}
+              className="w-[2.5rem] bg-transparent text-center outline-none"
+              />
+            <span className="">.</span>
+            <input
+              type="text"
+              name="month"
+              value={date.month}
+              onChange={handleInputChange}
+              placeholder="MM"
+              maxLength={2}
+              ref={monthRef}
+              className="w-[1.675rem] bg-transparent text-center outline-none"
+              />
+            <span className="">.</span>
+            <input
+              type="text"
+              name="day"
+              value={date.day}
+              onChange={handleInputChange}
+              placeholder="DD"
+              maxLength={2}
+              ref={dayRef}
+              className="w-[1.375rem] bg-transparent text-center outline-none"
+            />
+          </div>
+        </article>
+        <article className="flex flex-col">
+          <h3 className="text-[1.125rem] font-bold text-black"> 이름 </h3>
+          <input
+            type={"text"}
+            className={"mt-3 h-10 w-full rounded-[1.5rem] px-3"}
+            placeholder="이름을 입력해주세요"
+          />
+        </article>
+      </div>
+      <p className="mt-[0.875rem] max-w-[18.125rem] text-center text-sm text-gray1">
+        정보를 입력하지 않아도 서비스를 이용할 수 있으나 일부 서비스 이용이
+        제한될 수 있습니다
+      </p>
+      <button
+        className={"mt-5 min-h-[4rem] w-full rounded-[1.5rem] bg-main text-white"}
+      >
+        입력 완료
+      </button>
+    </section>
+  );
+};
+export default AddUserInformationForm