Feat: 알바폼 지원자일 경우 상세페이지 API 불러오기 구현 완료 , UI 미완성

next.config.mjs

@@ -11,6 +11,12 @@ const nextConfig = {
         port: "",
         pathname: "/Albaform/**",
       },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        port: "",
+        pathname: "/a/**",
+      },
     ],
   },
   webpack(config) {

src/app/(auth)/login/page.tsx

@@ -63,6 +63,11 @@ export default function LoginPage() {
               {isPending ? "로그인 중..." : "로그인"}
             </button>
           </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 로그인하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
           <div className="flex justify-center space-x-6">
             <Link
               href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

src/app/(auth)/signup/applicant/page.tsx

@@ -106,6 +106,11 @@ export default function ApplicantSignupPage() {
               {isPending ? "회원가입 중..." : "회원가입"}
             </button>
           </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 회원가입하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
           <div className="flex justify-center space-x-4">
             <Link
               href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

src/app/(auth)/signup/owner/page.tsx

@@ -128,6 +128,11 @@ export default function OwnerSignupPage() {
               {isPending ? "회원가입 중..." : "회원가입"}
             </button>
           </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 회원가입하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
           <div className="flex justify-center space-x-4">
             <Link
               href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

src/app/(home)/page.tsx

@@ -3,10 +3,12 @@
 import { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 export default function Home() {
   const [visibleSections, setVisibleSections] = useState(new Set<string>());
   const observer = useRef<IntersectionObserver | null>(null);
+  const { user } = useUser();
 
   useEffect(() => {
     // 클라이언트 환경에서만 IntersectionObserver 실행
@@ -57,11 +59,19 @@ export default function Home() {
             <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
               한 곳에서 관리하는 알바 구인 플랫폼
             </p>
-            <Link href="/login">
-              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                알바를 시작하기
-              </p>
-            </Link>
+            {user ? (
+              <Link href="/albaList">
+                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                  알바 둘러보기
+                </p>
+              </Link>
+            ) : (
+              <Link href="/login">
+                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                  알바를 시작하기
+                </p>
+              </Link>
+            )}
           </div>
 
           {/* 배경 이미지 */}

src/app/(pages)/albaFormDetail/applicant/[formId]/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useUserFormDetail } from "@/hooks/queries/form/userFormDetail";
+import React, { useEffect, useState } from "react";
+import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
+import Chip from "@/app/components/chip/Chip";
+
+export default function AlbaFormDetailPage() {
+  const { formId } = useParams(); // useParams로 formId 추출
+  const [formIdState, setFormIdState] = useState<number>(0);
+
+  useEffect(() => {
+    // formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장
+    if (formId) {
+      setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장
+    }
+  }, [formId]);
+
+  // formId가 설정되면 useUserFormDetail 호출
+  const { data, isLoading, error } = useUserFormDetail({ formId: formIdState });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
+  }
+
+  if (!data) {
+    return <div>데이터가 없습니다.</div>;
+  }
+
+  // 모집 상태 계산
+  const recruitmentStatus = new Date(data.recruitmentEndDate) > new Date() ? "모집중" : "모집완료";
+
+  return (
+    <div className="container flex min-h-screen flex-col">
+      <div className="h-[562px] bg-black-100">사진영역</div>
+      <div>
+        <div className="mt-20 w-[770px] space-y-10">
+          <div className="flex items-center">
+            <Chip label={data.isPublic ? "공개" : "비공개"} variant={data.isPublic ? "positive" : "negative"} />
+            <Chip label={recruitmentStatus} variant="positive" />
+            <p className="text-sm text-grayscale-500">{new Date(data.createdAt).toLocaleString()} 등록</p>
+          </div>
+          <div className="mb-4 flex gap-4">
+            <span className="text-base text-black-400 underline">{data.storeName || "가게명"}</span>
+            <span className="text-grayscale-500">
+              {data.location || "위치"} ・ {"경력 정보 없음"}
+            </span>
+          </div>
+          <p className="text-3xl font-bold">{data.title}</p>
+          <CardChipIcon
+            formData={{
+              updatedAt: new Date(data.updatedAt),
+              createdAt: new Date(data.createdAt),
+              isPublic: data.isPublic,
+              scrapCount: data.scrapCount,
+              applyCount: data.applyCount,
+              imageUrls: data.imageUrls,
+              recruitmentEndDate: new Date(data.recruitmentEndDate),
+              recruitmentStartDate: new Date(data.recruitmentStartDate),
+              title: data.title,
+              id: data.id,
+            }}
+          />
+          <div className="text-2xl">{data.description}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(pages)/albaFormDetail/layout.tsx

@@ -0,0 +1,17 @@
+import React, { Suspense } from "react";
+
+export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-2xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <div>로딩 중...</div>
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}

src/app/(pages)/albaFormDetail/owner/[id]/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
+import Chip from "@/app/components/chip/Chip";
+import ChipWithIcon from "@/app/components/chip/ChipWithIcon";
+import React from "react";
+
+// 알바폼 상세 사장님 페이지
+export default function AlbaFormDetailPage({ formId }: { formId: number }) {
+  return (
+    <div className="container flex min-h-screen flex-col">
+      <div className="h-[562px] bg-black-100">사진영역</div>
+      <div>
+        <div className="mt-20 w-[770px] space-y-10">
+          <div className="flex items-center">
+            <Chip label="공개여부" variant="positive" />
+            <Chip label="모집중" variant="positive" />
+            <p className="text-sm text-grayscale-500">2024. 05. 04 12:30:54 등록</p>
+          </div>
+          <div className="mb-4 flex gap-4">
+            <span className="text-base text-black-400 underline">코드잇</span>
+            <span className="text-grayscale-500">서울 종로구 ・ 경력 무관</span>
+          </div>
+          <p className="text-3xl font-bold">코드잇 스터디카페 관리 (주말 오전) 모집합니다 서울 종로구 용산구 서대문 </p>
+          <CardChipIcon
+            formData={{
+              updatedAt: new Date(),
+              createdAt: new Date(),
+              isPublic: true,
+              scrapCount: 0,
+              applyCount: 0,
+              imageUrls: [],
+              recruitmentEndDate: new Date(),
+              recruitmentStartDate: new Date(),
+              title: "제목",
+              id: 1,
+            }}
+          />
+          <div className="text-2xl">
+            코드잇 스터디 카페입니다. 주말 토, 일 오픈업무 하실 분 구합니다. 성실하게 일하실 분들만 지원 바랍니다.
+            작성한 이력서(사진 부착)를 알바폼에 첨부해주시고, 아래와 같이 문자 보내주세요. 근무 중 전화통화 불가합니다.
+            예) OOO입니다. __에 거주합니다. 알바폼 지원. 이력서 검토 후 면접진행자에 한해 면접일정 개별
+            연락드리겠습니다. 많은 지원 바랍니다.
+          </div>
+        </div>
+        <div>{/* 오른쪽 콘텐츠 */}</div>
+      </div>
+    </div>
+  );
+}

src/app/(pages)/albaFormSupportDetail/layout.tsx

@@ -0,0 +1,17 @@
+import React, { Suspense } from "react";
+
+export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-2xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <div>로딩 중...</div>
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}

src/app/(pages)/albaFormSupportDetail/page.tsx

@@ -0,0 +1,44 @@
+import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
+import Chip from "@/app/components/chip/Chip";
+import React from "react";
+
+// 알바폼 지원내역 상세 페이지
+export default function AlbaFormSupportDetailPage({ formId }: { formId: number }) {
+  return (
+    <div className="container flex min-h-screen flex-col">
+      <div className="h-[562px] bg-black-100">지도영역</div>
+      <div className="mt-20 w-[770px] space-y-10">
+        <div className="flex items-center">
+          <Chip label="공개여부" variant="positive" />
+          <Chip label="모집중" variant="positive" />
+          <p className="text-sm text-grayscale-500">2024. 05. 04 12:30:54 등록</p>
+        </div>
+        <div className="mb-4 flex gap-4">
+          <span className="text-base text-black-400 underline">코드잇</span>
+          <span className="text-grayscale-500">서울 종로구 ・ 경력 무관</span>
+        </div>
+        <p className="text-3xl font-bold">코드잇 스터디카페 관리 (주말 오전) 모집합니다 서울 종로구 용산구 서대문 </p>
+        <CardChipIcon
+          formData={{
+            updatedAt: new Date(),
+            createdAt: new Date(),
+            isPublic: true,
+            scrapCount: 0,
+            applyCount: 0,
+            imageUrls: [],
+            recruitmentEndDate: new Date(),
+            recruitmentStartDate: new Date(),
+            title: "제목",
+            id: 1,
+          }}
+        />
+        <div className="text-2xl">
+          코드잇 스터디 카페입니다. 주말 토, 일 오픈업무 하실 분 구합니다. 성실하게 일하실 분들만 지원 바랍니다. 작성한
+          이력서(사진 부착)를 알바폼에 첨부해주시고, 아래와 같이 문자 보내주세요. 근무 중 전화통화 불가합니다. 예)
+          OOO입니다. __에 거주합니다. 알바폼 지원. 이력서 검토 후 면접진행자에 한해 면접일정 개별 연락드리겠습니다. 많은
+          지원 바랍니다.
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(pages)/albaList/page.tsx

@@ -150,7 +150,11 @@ export default function AlbaList() {
                 <React.Fragment key={page.nextCursor}>
                   {page.data.map((form) => (
                     <div key={form.id}>
-                      <AlbaListItem {...form} />
+                      <Link
+                        href={isOwner ? `/albaFormDetail/owner/${form.id}` : `/albaFormDetail/applicant/${form.id}`}
+                      >
+                        <AlbaListItem {...form} />
+                      </Link>
                     </div>
                   ))}
                 </React.Fragment>

src/app/api/oauth/callback/google/route.ts

@@ -4,6 +4,7 @@ import { decodeJwt } from "@/middleware";
 import apiClient from "@/lib/apiClient";
 import { OauthLoginUser, OauthResponse, OauthSignupUser } from "@/types/oauth/oauth";
 import { cookies } from "next/headers";
+import { RedirectError } from "@/utils/oauthLoginError";
 
 export const GET = async (request: NextRequest) => {
   const searchParams = request.nextUrl.searchParams;
@@ -82,15 +83,25 @@ export const GET = async (request: NextRequest) => {
     };
 
     const loginUser = async () => {
-      const { data: loginResponse } = await axios.post<OauthResponse>(
-        `${process.env.NEXT_PUBLIC_DOMAIN_URL}/api/oauth/login/${provider}`,
-        googleUser.login
-      );
-      console.log("구글 로그인 성공:", loginResponse);
+      try {
+        const { data: loginResponse } = await axios.post<OauthResponse>(
+          `${process.env.NEXT_PUBLIC_DOMAIN_URL}/api/oauth/login/${provider}`,
+          googleUser.login
+        );
+        console.log("구글 로그인 성공:", loginResponse);
 
-      // 쿠키 저장
-      const { accessToken, refreshToken } = loginResponse;
-      setCookies(accessToken, refreshToken);
+        // 쿠키 저장
+        const { accessToken, refreshToken } = loginResponse;
+        setCookies(accessToken, refreshToken);
+      } catch (error: any) {
+        if (error.response?.status === 403) {
+          console.log("회원가입이 필요합니다. 회원가입 페이지로 이동합니다...");
+          throw new RedirectError("/signup");
+        } else {
+          console.error("구글 로그인 중 오류:", error.message || error);
+          throw new Error("로그인 중 서버 오류");
+        }
+      }
     };
 
     const setCookies = (accessToken: string, refreshToken: string) => {
@@ -108,11 +119,18 @@ export const GET = async (request: NextRequest) => {
       });
     };
 
-    await processUser();
+    try {
+      await processUser();
+    } catch (error) {
+      if (error instanceof RedirectError) {
+        return NextResponse.redirect(new URL(error.redirectPath, request.url));
+      }
+      throw error;
+    }
   } catch (error: any) {
     console.error("OAuth 처리 중 오류:", error.message || error);
     return NextResponse.json({ message: error.message || "서버 오류" }, { status: 500 });
   }
 
-  return NextResponse.redirect(new URL("/", request.url));
+  return NextResponse.redirect(new URL("/mypage", request.url));
 };

src/app/api/oauth/callback/kakao/route.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 import apiClient from "@/lib/apiClient";
 import { OauthLoginUser, OauthResponse, OauthSignupUser } from "@/types/oauth/oauth";
 import { cookies } from "next/headers";
+import { RedirectError } from "@/utils/oauthLoginError";
 
 export const GET = async (request: NextRequest) => {
   const searchParams = request.nextUrl.searchParams;
@@ -71,8 +72,13 @@ export const GET = async (request: NextRequest) => {
       const { accessToken, refreshToken } = loginResponse;
       setCookies(accessToken, refreshToken);
     } catch (error: any) {
-      console.error("카카오 로그인 중 오류:", error.message || error);
-      throw new Error("로그인 중 서버 오류");
+      if (error.response?.status === 403) {
+        console.log("회원가입이 필요합니다. 회원가입 시도 중...");
+        //회원가입 페이지로 리다이렉트
+        throw new RedirectError("/signup");
+      } else {
+        throw new Error("회원가입 중 서버 오류");
+      }
     }
   };
 
@@ -98,5 +104,5 @@ export const GET = async (request: NextRequest) => {
     return NextResponse.json({ message: error.message || "서버 오류" }, { status: 500 });
   }
 
-  return NextResponse.redirect(new URL("/", request.url));
+  return NextResponse.redirect(new URL("/mypage", request.url));
 };