Merge pull request #347 from TripInfoWeb/dev_gathering

Dev gathering
TripInfoWeb · Sep 21, 2024 · 88c4367 · 88c4367
2 parents 9f22b42 + df5a99d
commit 88c4367
Show file tree

Hide file tree

Showing 15 changed files with 294 additions and 40 deletions.
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
diff --git a/src/components/common/FloatingButton.tsx b/src/components/common/FloatingButton.tsx
@@ -9,10 +9,11 @@ interface Props {
   animationFlag: boolean;
   onClick: () => void;
   onScrollToTop: () => void;
+  createGatheringClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 
 const FloatingButton = forwardRef<HTMLDivElement, Props>(
-  ({ visible, animationFlag, onClick, onScrollToTop }, ref) => {
+  ({ visible, animationFlag, onClick, onScrollToTop, createGatheringClick }, ref) => {
     return (
       <div className="fixed bottom-8 left-[calc(100vw-12px)] z-40 flex w-24 translate-x-[-100%] flex-col items-center gap-3">
         {visible && (
@@ -31,7 +32,7 @@ const FloatingButton = forwardRef<HTMLDivElement, Props>(
               <Link
                 className="flex flex-col items-center text-sm hover:text-main"
                 href="/gathering/write"
-                onClick={onClick}
+                onClick={(e) => createGatheringClick(e)}
               >
                 <p>모임</p>
                 <p>등록하기</p>

diff --git a/src/components/common/GatheringItem.tsx b/src/components/common/GatheringItem.tsx
@@ -9,6 +9,7 @@ import Link from "next/link";
 
 interface IGatheringItem {
   data: Gathering;
+  isAccessGathering: boolean;
 }
 
 const SEX: { [key: string]: string } = {
@@ -35,11 +36,16 @@ const status: { [key: string]: string } = {
 };
 
 // todo
-const GatheringItem = ({ data }: IGatheringItem) => {
+const GatheringItem = ({ data, isAccessGathering }: IGatheringItem) => {
   return (
     <Link
       href={`/gathering/${data.gatheringId}`}
       className={`flex w-full ${data.isFinish || format(new Date(data.deadline), "yyyyMMdd") < format(new Date(), "yyyyMMdd") ? "text-gray2" : "text-black"} h-full max-h-[19.6875rem] flex-col gap-[1.25rem] rounded-2xl border-0 p-5 outline outline-2 outline-offset-[-2px] outline-gray3 duration-300 hover:bg-[#F2FAF7] hover:outline-main`}
+      onClick={(e) => {
+        if (!isAccessGathering) {
+          e.preventDefault();
+        }
+      }}
     >
       <div className="flex flex-col">
         {/* 상태와 북마크 */}

diff --git a/src/components/common/TopList.tsx b/src/components/common/TopList.tsx
@@ -31,7 +31,7 @@ async function getTopGatheringList() {
     `${process.env.BACKEND_URL}/api/gatherings/ranks`,
     {
       method: "GET",
-      next: { revalidate: 3600, tags: ["getTopGatheringList"] },
+      next: { revalidate: 60, tags: ["getTopGatheringList"] },
     },
   );
 

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorChattingLink.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorChattingLink.tsx
@@ -6,9 +6,10 @@ const GatheringEditorChattingLink = () => {
   return (
     <div className="relative flex w-full flex-shrink-0 items-center gap-[0.625rem]">
       <div
-        className={"relative w-[2.75rem] flex-shrink-0 text-lg font-semibold"}
+        className={"relative w-[2.75rem] flex-shrink-0"}
       >
-        링크
+        <span className={"text-lg font-semibold"}>링크</span>
+        <span className="absolute top-[-.5rem] text-lg text-main">*</span>
       </div>
       <div className="relative w-full">
         <input

diff --git a/src/components/gathering/read/GatheringCardList.tsx b/src/components/gathering/read/GatheringCardList.tsx
@@ -3,18 +3,31 @@ import { Gathering } from "@/types/GatheringDto";
 import GatheringItem from "../../common/GatheringItem";
 interface IGatheringCardList {
   data: Gathering[];
+  checkAccessGathering: (e: React.MouseEvent<HTMLDivElement>) => void;
+  isAccessGathering: boolean;
 }
-const GatheringCardList = ({ data }: IGatheringCardList) => {
+const GatheringCardList = ({
+  data,
+  checkAccessGathering,
+  isAccessGathering,
+}: IGatheringCardList) => {
   return (
     <>
       {data.length == 0 ? (
         <div className={"flex w-full flex-col items-center"}>
           <LottieNotFound text={"찾는 내용이 없습니다."} />
         </div>
       ) : (
-        <div className="mt-6 grid h-auto w-full justify-items-center gap-5 min-[744px]:grid-cols-2 min-[1024px]:grid-cols-3">
+        <div
+          onClick={(e) => checkAccessGathering(e)}
+          className="mt-6 grid h-auto w-full justify-items-center gap-5 min-[744px]:grid-cols-2 min-[1024px]:grid-cols-3"
+        >
           {data?.map((i, index) => (
-            <GatheringItem key={i.gatheringId} data={i} />
+            <GatheringItem
+              key={i.gatheringId}
+              data={i}
+              isAccessGathering={isAccessGathering}
+            />
           ))}
         </div>
       )}

diff --git a/src/components/gathering/read/GatheringSearch.tsx b/src/components/gathering/read/GatheringSearch.tsx
@@ -38,7 +38,7 @@ const GatheringSearch = ({
 
   return (
     <div className="flex flex-row items-center gap-4 max-[1024px]:justify-between max-[744px]:w-full max-[744px]:flex-col max-[744px]:items-start">
-      <div className="relative z-[1] flex flex-row items-center max-[744px]:w-full">
+      <div className="relative z-[20] flex flex-row items-center max-[744px]:w-full">
         <div
           className={
             "absolute left-0 top-0 flex h-full flex-row items-center text-sm text-gray1 hover:text-main"

diff --git a/src/components/gathering/read/detail/GatheringSupportManagement.tsx b/src/components/gathering/read/detail/GatheringSupportManagement.tsx
@@ -13,10 +13,12 @@ interface IGatheringSupportManagement {
   modalState: ModalState;
   modalState1: ModalState;
   modalState2: ModalState;
-  isFinish: boolean,
+  isFinish: boolean;
   openChattingUrl: string;
   reOpenGathering: () => void;
   isFullParticipants: boolean;
+  isAllowedGender: boolean;
+  isAllowedAgeRange: boolean;
 }
 const GatheringSupportManagement = ({
   postUserId,
@@ -31,8 +33,9 @@ const GatheringSupportManagement = ({
   openChattingUrl,
   reOpenGathering,
   isFullParticipants,
+  isAllowedGender,
+  isAllowedAgeRange,
 }: IGatheringSupportManagement) => {
-
   if (postUserId == userId && userId > 0) {
     return (
       <div className={"flex gap-2 max-[960px]:flex-col min-[960px]:flex-row"}>
@@ -142,10 +145,10 @@ const GatheringSupportManagement = ({
         {gatheringStatus == null && (
           <button
             onClick={applyGathering}
-            className={`${isFullParticipants && "bg-gray3"} flex h-[3.125rem] w-[7.5rem] items-center justify-center rounded-[2.125rem] text-sm outline outline-[1px] outline-offset-[-1px] outline-[#D9D9D9]`}
-            disabled={isFullParticipants}
+            className={`${isFullParticipants || !isAllowedGender || !isAllowedAgeRange && "bg-gray3"} flex h-[3.125rem] w-[7.5rem] items-center justify-center rounded-[2.125rem] text-sm outline outline-[1px] outline-offset-[-1px] outline-[#D9D9D9]`}
+            disabled={isFullParticipants || !isAllowedGender || !isAllowedAgeRange}
           >
-            {isFullParticipants ? "정원 초과" : "모임 신청하기"}
+            {isFullParticipants ? "정원 초과" : !isAllowedGender ? "성별 제한" : !isAllowedAgeRange ? "나이 제한" : "모임 신청하기"}
           </button>
         )}
       </div>

diff --git a/src/components/mypage/MyPageGatheringList.tsx b/src/components/mypage/MyPageGatheringList.tsx
@@ -4,15 +4,22 @@ import GatheringItemSkeleton from "../skeleton/common/GatheringItemSkeleton";
 interface IMyPageGatheringList {
   elements: Gathering[];
   isLoading: boolean;
+  checkAccessGathering: (e: React.MouseEvent<HTMLDivElement>) => void;
+  isAccessGathering: boolean;
 }
 
 const MyPageGatheringList = ({
   elements,
   isLoading,
+  checkAccessGathering,
+  isAccessGathering,
 }: IMyPageGatheringList) => {
 
   return (
-    <div className="my-6 grid w-full justify-items-center gap-x-3 gap-y-3 min-[744px]:grid-cols-2">
+    <div
+      onClick={(e) => checkAccessGathering(e)}
+      className="my-6 grid w-full justify-items-center gap-x-3 gap-y-3 min-[744px]:grid-cols-2"
+    >
       {isLoading
         ? Array.from({ length: 6 }).map((_, index) => (
             <GatheringItemSkeleton key={index} />
@@ -21,6 +28,7 @@ const MyPageGatheringList = ({
             <GatheringItem
               key={item.gatheringId}
               data={item}
+              isAccessGathering={isAccessGathering}
             />
           ))}
     </div>