TestPR : storybook err 확인

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)/(albaform)/addform/RecruitCondition.tsx → src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx

@@ -4,7 +4,7 @@ import Label from "../Label";
 import InputDropdown from "@/app/components/button/dropdown/InputDropdown";
 
 // 알바폼 만들기 - 사장님- 2-모집조건
-export default function RecruitCondition() {
+export default function RecruitConditionSection() {
   const {
     register,
     formState: { errors },

src/app/(pages)/(albaform)/addform/RecruitContent.tsx → src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx

@@ -7,11 +7,10 @@ import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePicker
 import { cn } from "@/lib/tailwindUtil";
 import { useFormContext } from "react-hook-form";
 import { useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
 
 // 알바폼 만들기 - 사장님 - 1-모집내용
 
-export default function RecruitContent() {
+export default function RecruitContentSection() {
   // 이미지 파일을 로컬 상태에 저장
   const [initialImageList, setInitialImageList] = useState<{ file: File; url: string; id: string }[]>([]);
 
@@ -41,12 +40,9 @@ export default function RecruitContent() {
     ]);
   };
 
-  const searchParams = useSearchParams();
-  const currentParam = searchParams.get("tab");
-  const initialLoad = currentParam === null; // 초기 로딩 여부 확인
   // 컴포넌트가 마운트될 때 이미지 초기값 설정 (초기로딩 제외)
   useEffect(() => {
-    if (!initialLoad && currentValue.imageFiles?.length > 0) {
+    if (currentValue.imageFiles?.length > 0) {
       handleChangeImages(currentValue.imageFiles);
     }
   }, []);

src/app/(pages)/(albaform)/addform/WorkCondition.tsx → src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx

@@ -12,7 +12,7 @@ import BaseInput from "@/app/components/input/text/BaseInput";
 import CheckBtn from "@/app/components/button/default/CheckBtn";
 
 // 알바폼 만들기 - 사장님 - 3-근무조건
-export default function WorkCondition() {
+export default function WorkConditionSection() {
   const {
     register,
     setValue,

src/app/(pages)/(albaform)/addform/page.tsx

@@ -4,13 +4,13 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import axios from "axios";
 import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
-import RecruitCondition from "./RecruitCondition";
 import Button from "@/app/components/button/default/Button";
 import { toast } from "react-hot-toast";
 import { useMutation } from "@tanstack/react-query";
 import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
-import RecruitContent from "./RecruitContent";
-import WorkCondition from "./WorkCondition";
+import RecruitContentSection from "./RecruitContentSection";
+import RecruitConditionSection from "./RecruitConditionSection";
+import WorkConditionSection from "./WorkConditionSection";
 
 interface SubmitFormDataType {
   isPublic: boolean;
@@ -66,13 +66,12 @@ export default function AddFormPage() {
 
   const {
     setValue,
-    getValues,
     handleSubmit,
     formState: { isDirty, isValid },
   } = methods;
 
   // 훅폼에서 관리하는 전체 데이터를 가져오는 함수
-  const currentValues: SubmitFormDataType = getValues();
+  const currentValues: SubmitFormDataType = methods.watch();
 
   // 이미지 업로드 api 처리를 위해 별도 변수에 할당
   const imageFiles = currentValues.imageFiles;
@@ -135,17 +134,17 @@ export default function AddFormPage() {
       "모집 조건": "recruit-condition",
       "근무 조건": "work-condition",
     }[option];
-    router.replace(`/addform?tab=${params}`);
+    router.push(`/addform?tab=${params}`);
   };
 
   const renderChildren = () => {
     switch (selectedOption) {
       case "모집 내용":
-        return <RecruitContent key="recruitContent" />;
+        return <RecruitContentSection key="recruitContent" />;
       case "모집 조건":
-        return <RecruitCondition key="recruitCondition" />;
+        return <RecruitConditionSection key="recruitCondition" />;
       case "근무 조건":
-        return <WorkCondition key="workCondition" />;
+        return <WorkConditionSection key="workCondition" />;
       default:
         return <></>;
     }
@@ -204,33 +203,27 @@ export default function AddFormPage() {
       window.localStorage.setItem("tempAddFormData", JSON.stringify(currentValues));
     }
     toast.success("임시 저장되었습니다.");
-    // console.log("임시저장 데이터", currentValues);
+    console.log("임시저장 데이터", currentValues);
   };
 
   // 각각의 탭 작성중 여부
   const isEditingRecruitContent =
-    currentValues.title !== "" ||
-    currentValues.description !== "" ||
-    currentValues.recruitmentStartDate !== "" ||
-    currentValues.imageUrls
+    currentValues.title !== "" || currentValues.description !== "" || currentValues.recruitmentStartDate !== undefined
       ? true
       : false;
   const isEditingRecruitCondition =
-    currentValues.gender ||
-    currentValues.numberOfPositions ||
-    currentValues.education ||
-    currentValues.age ||
-    currentValues.preferred
+    currentValues.gender !== "" ||
+    currentValues.numberOfPositions !== 0 ||
+    currentValues.education !== "" ||
+    currentValues.age !== "" ||
+    currentValues.preferred !== ""
       ? true
       : false;
   const isEditingWorkCondition =
-    currentValues.location ||
-    currentValues.workDays ||
-    currentValues.workStartTime ||
-    currentValues.workStartDate ||
-    currentValues.hourlyWage ||
-    currentValues.isNegotiableWorkDays ||
-    currentValues.isPublic
+    currentValues.location !== "" ||
+    currentValues.workStartTime !== "" ||
+    currentValues.workStartDate !== "" ||
+    currentValues.hourlyWage > 0
       ? true
       : false;
 
@@ -242,7 +235,7 @@ export default function AddFormPage() {
             options={[
               {
                 label: "모집 내용",
-                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-condition",
+                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-content",
               },
               { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
               { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },

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>
+  );
+}