feat: guest 도메인 추가 (#23)

feat: guest 도메인 추가

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.GUEST_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.GUEST_LIST,
+    url,
     method: "GET",
     params: {
       category,

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)/layout.tsx → FE/src/app/(guest)/guest/layout.tsx

@@ -1,11 +1,13 @@
 import Header from "@/components/common/header/Header";
+import AuthValidate from "@/components/common/validate/Auth";
 
 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/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/(guest)/detail/[programId]/page.tsx → 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)/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/(private)/(program)/detail/loading.tsx

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

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/loading.tsx

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

FE/src/app/(guest)/main/page.tsx → 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/components/common/header/Header.tsx

@@ -18,7 +18,7 @@ const Header = () => {
 
   return (
     <header className="sticky top-0 z-50 flex w-full items-center justify-between rounded-b-xl bg-background px-2 py-4 shadow-sm sm:px-32">
-      <Logo />
+      <Logo isLoggedIn={isLoggedIn} />
       {!isLoading && (
         <section className="flex w-fit items-center gap-4 sm:gap-8">
           {isLoggedIn ? (

FE/src/components/common/header/Logo.tsx

@@ -6,16 +6,22 @@ const INIT_CATEGORY = "all";
 const INIT_STATUS = "active";
 const INIT_PAGE = "1";
 
-const Logo = () => {
+interface LogoProps {
+  isLoggedIn: boolean;
+}
+
+const Logo = ({ isLoggedIn }: LogoProps) => {
   const router = useRouter();
   const pathname = usePathname();
 
+  const mainUrl = isLoggedIn ? ROUTES.MAIN : ROUTES.GUEST_MAIN;
+
   const handleClick = () => {
-    if (pathname === ROUTES.MAIN) {
-      window.location.href = `${ROUTES.MAIN}?category=${INIT_CATEGORY}&status=${INIT_STATUS}&page=${INIT_PAGE}`;
+    if (pathname === mainUrl) {
+      window.location.href = `${mainUrl}?category=${INIT_CATEGORY}&status=${INIT_STATUS}&page=${INIT_PAGE}`;
       return;
     }
-    router.push(ROUTES.MAIN);
+    router.push(mainUrl);
   };
 
   return (

FE/src/components/login/guest/GuestLoginButton.tsx

@@ -3,7 +3,7 @@ import StyledLoginButton from "../ui/StyledLoginButton";
 export default function GuestLoginButton() {
   return (
     <StyledLoginButton
-      linkUrl="/main"
+      linkUrl="/guest/main"
       buttonText="Visit to EEOS"
       imageUrl="/icons/blackCompany.svg"
       color="guest"

FE/src/components/main/ProgramList.tsx

@@ -10,20 +10,23 @@ interface ProgramListProps {
   programStatus?: ProgramStatus;
   page?: number;
   setPage: (page: number) => void;
+  isLoggedIn: boolean;
 }
 
 const ProgramList = ({
   category = "all",
   programStatus = "active",
   page = 1,
   setPage: handleSetPage,
+  isLoggedIn,
 }: ProgramListProps) => {
   const queryClient = useQueryClient();
   const { data: programListData } = useGetProgramList({
     category,
     programStatus,
     page: page - 1,
     size: PROGRAM.LIST_SIZE,
+    isLoggedIn,
   });
 
   queryClient.setQueryData<number>(["totalPage"], programListData.totalPage);
@@ -33,7 +36,11 @@ const ProgramList = ({
     <>
       <div className="w-full space-y-5">
         {programs.map((program) => (
-          <ProgramListItem key={program.programId} programData={program} />
+          <ProgramListItem
+            key={program.programId}
+            programData={program}
+            isLoggedIn={isLoggedIn}
+          />
         ))}
       </div>
       <Paginataion

FE/src/components/main/ProgramListItem.tsx

@@ -5,14 +5,18 @@ import { convertDate } from "@/utils/convert";
 
 interface ProgramListItemProps {
   programData: ProgramSimpleInfoDto;
+  isLoggedIn: boolean;
 }
 
-const ProgramListItem = ({ programData }: ProgramListItemProps) => {
+const ProgramListItem = ({ programData, isLoggedIn }: ProgramListItemProps) => {
   const { programId, title, deadLine } = programData;
+  const lingUrl = isLoggedIn
+    ? ROUTES.DETAIL(programId)
+    : ROUTES.GUEST_DETAIL(programId);
   return (
     <Link
-      href={ROUTES.DETAIL(programId)}
       className="flex w-full flex-col items-center justify-between gap-4 rounded-lg bg-gray-10 px-8 py-6 transition-all hover:bg-secondary-20 sm:flex-row"
+      href={lingUrl}
       key={programId}
     >
       <p className="w-full truncate text-center text-lg font-bold sm:text-left">