[RELEASE] release 2.2 게스트 모드 추가 & 슬랙 메시지 (v2.2)

v2.2 배포

**[업데이트 내용]**
- 게스트모드가 추가됩니다. (#9 #18 #23)
  - 기존 로그인을 해야 사용할 수 있던 서비스를 로그인 없이 게스트모드로 이용 가능합니다. 
    - /main, /detail/[] 페이지를 이용 가능하며, 참여 목록은 블라인드 처리되어 볼 수 없습니다. 


-  주간발표 한정으로 슬랙 메시지를 보낼 수 있습니다. (#15)
    - 행사 카테고리를 주간발표로 하여 게시글을 올리면 prompt창이 뜨며, 선택 여부에 따라서 메시지를 보낼 수 있습니다.

FE/next.config.js

@@ -1,15 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // rewrite
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/main",
-        permanent: true,
-      },
-    ];
-  },
+  // async rewrites() {
+  //   return [
+  //     {
+  //       source: "/main",
+  //       destination: "/",
+  //     },
+  //   ];
+  // },
 };
 
 module.exports = nextConfig;

FE/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.35.7",
+    "@tanstack/react-query-devtools": "^5.28.14",
     "@types/qs": "^6.9.10",
     "@types/react-syntax-highlighter": "^15.5.11",
     "axios": "^1.6.2",

FE/src/apis/instance.ts

@@ -19,6 +19,7 @@ const https = axios.create({
 
 https.interceptors.request.use(
   async (config) => {
+    if (typeof window === "undefined") return config;
     const accessToken = localStorage.getItem("accessToken")?.replace(/"/g, "");
     const tokenExpiration = localStorage.getItem("tokenExpiration");
 

FE/src/apis/program.ts

@@ -21,9 +21,13 @@ import MESSAGE from "@/constants/MESSAGE";
 
 export const getProgramById = async (
   programId: number,
+  isLoggedIn: boolean,
 ): Promise<ProgramInfoDto> => {
+  const url = isLoggedIn
+    ? API.PROGRAM.DETAIL(programId)
+    : API.PROGRAM.GUEST_DETAIL(programId);
   const { data } = await https({
-    url: API.PROGRAM.DETAIL(programId),
+    url,
   });
   return new ProgramInfoDto(data?.data);
 };
@@ -37,16 +41,19 @@ export interface GetProgramListRequest {
   programStatus: ProgramStatus;
   size: number;
   page: number;
+  isLoggedIn: boolean;
 }
 
 export const getProgramList = async ({
   category,
   programStatus,
   size,
   page,
+  isLoggedIn,
 }: GetProgramListRequest): Promise<ProgramListDto> => {
+  const url = isLoggedIn ? API.PROGRAM.LIST : API.PROGRAM.GUEST_LIST;
   const { data } = await https({
-    url: API.PROGRAM.LIST,
+    url,
     method: "GET",
     params: {
       category,
@@ -86,6 +93,32 @@ export interface PostProgramRequest
   members: { memberId: number }[];
 }
 
+export const sendSlackMessage = async (
+  programId: number,
+  isRetry: boolean = false,
+) => {
+  if (!window) return;
+
+  if (!isRetry) {
+    const isConfirmed = confirm(MESSAGE.SLACK_MESSAGE.CONFIRM);
+    if (!isConfirmed) return;
+  }
+
+  return await https({
+    url: API.PROGRAM.SEND_MESSAGE(programId),
+    method: "POST",
+    data: {
+      programUrl:
+        process.env.NEXT_PUBLIC_SLACK_MESSAGE_REQUEST_URL_PREFIX + programId,
+    },
+  })
+    .then(() => alert(MESSAGE.SLACK_MESSAGE.SUCCESS))
+    .catch(() => {
+      const retry = confirm(MESSAGE.SLACK_MESSAGE.FAIL);
+      if (retry) sendSlackMessage(programId);
+    });
+};
+
 export const postProgram = async (
   body: PostProgramRequest,
 ): Promise<ProgramIdDto> => {

FE/src/app/(auth)/layout.tsx

@@ -1,8 +1,10 @@
 import { PropsWithChildren } from "react";
+import AuthValidate from "@/components/common/validate/Auth";
 
 export default function AuthLayout({ children }: PropsWithChildren) {
   return (
     <main className="mb-28 mt-16 h-full w-full max-w-[500px] sm:max-w-[800px] lg:max-w-[1112px]">
+      <AuthValidate isHaveToLoggedInRoute={false} />
       {children}
     </main>
   );

FE/src/app/(guest)/guest/detail/[programId]/page.tsx

@@ -0,0 +1,22 @@
+import AttendeeInfoContainer from "@/components/programDetail/attendee/AttendeeInfo.container";
+import ProgramInfo from "@/components/programDetail/program/ProgramInfo";
+import UserAttendModalContainer from "@/components/programDetail/userAttendModal/UserAttendModal.container";
+
+interface ProgramDetailPageProps {
+  params: {
+    programId: string;
+  };
+}
+
+const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
+  const { programId } = params;
+
+  return (
+    <div className="mb-16 space-y-16">
+      <ProgramInfo programId={+programId} isLoggedIn={false} />
+      <AttendeeInfoContainer programId={+programId} isLoggedIn={false} />
+      <UserAttendModalContainer programId={+programId} isLoggedIn={false} />
+    </div>
+  );
+};
+export default ProgramDetailPage;

FE/src/app/(guest)/guest/detail/error.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import ErrorFallback from "@/components/common/ErrorFallback";
+
+const DetailPageError = () => {
+  const error = {
+    message: "행사 정보를 불러오는 중에 오류가 발생했습니다.",
+  };
+
+  return (
+    <ErrorFallback
+      error={error}
+      resetErrorBoundary={() => {
+        window.location.reload();
+      }}
+    />
+  );
+};
+export default DetailPageError;

FE/src/app/(guest)/guest/detail/loading.tsx

@@ -0,0 +1,4 @@
+import LoadingSpinner from "@/components/common/LoadingSpinner";
+
+const DetailLoading = () => <LoadingSpinner />;
+export default DetailLoading;

FE/src/app/(private)/(program)/layout.tsx → FE/src/app/(guest)/guest/layout.tsx

@@ -1,10 +1,13 @@
-import { PropsWithChildren } from "react";
 import Header from "@/components/common/header/Header";
+import AuthValidate from "@/components/common/validate/Auth";
 
-export default function ProgramLayout({ children }: PropsWithChildren) {
+export default function GuestLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <>
       <Header />
+      <AuthValidate isHaveToLoggedInRoute={false} />
       <main className="my-16 w-full px-3 sm:max-w-[800px] lg:max-w-[1112px]">
         {children}
       </main>

FE/src/app/(guest)/guest/main/loading.tsx

@@ -0,0 +1,6 @@
+import LoadingSpinner from "@/components/common/LoadingSpinner";
+
+const MainLoading = () => {
+  return <LoadingSpinner />;
+};
+export default MainLoading;

FE/src/app/(guest)/guest/main/page.tsx

@@ -0,0 +1,98 @@
+// TODO: 서버 컴포넌트로 변경하기
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import ErrorFallback from "@/components/common/ErrorFallback";
+import Tab from "@/components/common/tabs/Tab";
+import TextTab from "@/components/common/tabs/TextTab";
+import ProgramList from "@/components/main/ProgramList";
+import ProgramListLoader from "@/components/main/ProgramList.loader";
+import TeamBuildingDropup from "@/components/main/TeamBuildingDropup";
+import MAIN from "@/constants/MAIN";
+import PROGRAM from "@/constants/PROGRAM";
+import { ProgramCategoryWithAll, ProgramStatus } from "@/types/program";
+
+const MainPage = () => {
+  const searchParams = useSearchParams();
+
+  // TODO: Hook으로 변경하기
+  const [queryValue, setQueryValue] = useState(MAIN.DEFAULT_QUERY);
+
+  // TODO: useEffect를 Hook으로 변경하기
+  useEffect(() => {
+    setQueryValue({
+      ...MAIN.DEFAULT_QUERY,
+      category:
+        (searchParams.get("category") as ProgramCategoryWithAll) ?? "all",
+      status: (searchParams.get("status") as ProgramStatus) ?? "active",
+      page: searchParams.get("page") ?? "1",
+    });
+  }, [searchParams]);
+
+  useEffect(() => {
+    window.history.replaceState(
+      {},
+      "",
+      `?category=${queryValue.category}&status=${queryValue.status}&page=${queryValue.page}`,
+    );
+  }, [queryValue]);
+
+  const handleSetCategory = (category: ProgramCategoryWithAll) => {
+    setQueryValue({
+      ...queryValue,
+      category,
+      page: "1",
+    });
+  };
+
+  const handleSetStatus = (status: ProgramStatus) => {
+    setQueryValue({
+      ...queryValue,
+      status,
+      page: "1",
+    });
+  };
+
+  const handleSetPage = (page: number) => {
+    setQueryValue({
+      ...queryValue,
+      page: page.toString(),
+    });
+  };
+
+  // TODO: 합성 컴포넌트!
+  return (
+    <div className="relative space-y-8">
+      <Tab<ProgramCategoryWithAll>
+        options={Object.values(PROGRAM.CATEGORY_TAB_WITH_ALL)}
+        selected={queryValue.category}
+        onItemClick={(v) => handleSetCategory(v)}
+        size="lg"
+        baseColor="white"
+        pointColor="navy"
+        align="line"
+      />
+      <TextTab<ProgramStatus>
+        options={Object.values(PROGRAM.STATUS_TAB)}
+        selected={queryValue.status}
+        onClick={(v) => handleSetStatus(v)}
+      />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <Suspense fallback={<ProgramListLoader />}>
+          <ProgramList
+            category={queryValue.category}
+            programStatus={queryValue.status}
+            page={+queryValue.page}
+            setPage={handleSetPage}
+            isLoggedIn={false}
+          />
+        </Suspense>
+      </ErrorBoundary>
+      <TeamBuildingDropup />
+    </div>
+  );
+};
+
+export default MainPage;

FE/src/app/(private)/(program)/detail/[programId]/page.tsx

@@ -13,9 +13,9 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
 
   return (
     <div className="mb-16 space-y-16">
-      <ProgramInfo programId={+programId} />
-      <AttendeeInfoContainer programId={+programId} />
-      <UserAttendModalContainer programId={+programId} />
+      <ProgramInfo programId={+programId} isLoggedIn />
+      <AttendeeInfoContainer programId={+programId} isLoggedIn />
+      <UserAttendModalContainer programId={+programId} isLoggedIn />
     </div>
   );
 };

FE/src/app/(private)/(program)/edit/[programId]/page.tsx

@@ -14,7 +14,7 @@ interface ProgramEditPageProps {
 
 const ProgramEditPage = ({ params }: ProgramEditPageProps) => {
   const { programId } = params;
-  const { data: programInfo, isLoading } = useGetProgramById(+programId);
+  const { data: programInfo, isLoading } = useGetProgramById(+programId, true);
 
   if (isLoading) return <LoadingSpinner />;
 

FE/src/app/(private)/(program)/main/page.tsx

@@ -86,6 +86,7 @@ const MainPage = () => {
             programStatus={queryValue.status}
             page={+queryValue.page}
             setPage={handleSetPage}
+            isLoggedIn
           />
         </Suspense>
       </ErrorBoundary>

FE/src/app/(private)/layout.tsx

@@ -1,11 +1,15 @@
 import { PropsWithChildren } from "react";
+import Header from "@/components/common/header/Header";
 import AuthValidate from "@/components/common/validate/Auth";
 
 const PrivateLayout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <AuthValidate />
-      {children}
+      <Header />
+      <main className="my-16 w-full px-3 sm:max-w-[800px] lg:max-w-[1112px]">
+        {children}
+      </main>
     </>
   );
 };

FE/src/app/page.tsx

@@ -1,4 +1,7 @@
+import { redirect } from "next/navigation";
+
 export default function Home() {
+  redirect("/login");
   return (
     <main>
       <h1>Home</h1>