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

.github/workflows/chromatic.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Chromatic에 게시
         id: chromatic
-        uses: chromaui/action@v1 # Chromatic의 GitHub Action
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # 환경 변수 참조
           token: ${{ secrets.GITHUB_TOKEN }} # GitHub 인증 토큰

next.config.mjs

@@ -1,11 +1,5 @@
 /** @type {import('next').NextConfig} */
 
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
@@ -17,20 +11,20 @@ const nextConfig = {
         port: "",
         pathname: "/Albaform/**",
       },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        port: "",
+        pathname: "/a/**",
+      },
     ],
   },
+  // Webpack 커스터마이징 제거
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
-
-    config.module.rules.push({
-      test: /\.css$/,
-      use: ["style-loader", "css-loader", "postcss-loader"],
-      include: [path.resolve(__dirname, "node_modules/react-datepicker"), path.resolve(__dirname, "src/app")],
-    });
-
     return 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

@@ -152,7 +152,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>