-
diff --git a/src/components/auth/intro/IntroSlide2.tsx b/src/components/auth/intro/IntroSlide2.tsx
index e8038e3..e3eb1e6 100644
--- a/src/components/auth/intro/IntroSlide2.tsx
+++ b/src/components/auth/intro/IntroSlide2.tsx
@@ -6,23 +6,23 @@ const PLATFORMS = [
{
id: "kakao",
icon: LogoKakao,
- bgColor: "bg-[#FEE500]",
- className: "text-[#3A1D1D]",
- size: "w-45 h-45",
+ bgColor: "bg-social-kakao",
+ className: "text-social-text-kakao",
+ size: "w-32 h-32",
},
{
id: "google",
icon: LogoGoogle,
- bgColor: "bg-white",
+ bgColor: "bg-social-google",
className: "",
- size: "w-45 h-45",
+ size: "w-32 h-32",
},
{
id: "naver",
icon: LogoNaver,
- bgColor: "bg-[#03C75A]",
+ bgColor: "bg-social-naver",
className: "text-white",
- size: "w-45 h-45",
+ size: "w-32 h-32",
},
];
@@ -35,27 +35,30 @@ export default function IntroSlide2({ isActive }: { isActive: boolean }) {
isActive ? "opacity-100 z-10" : "opacity-0 z-0"
}`}
>
-
+
-
- 통합 광고 성과 관리
-
-
-
흩어진 광고 데이터를 하나로!
-
광고 현황을 통합적으로 관리하고
-
성과 변화를 직관적으로 확인하세요.
-
+
+ 통합 관리
+
+
+ 흩어진 광고 성과를{"\n"}
+ 한곳에서 관리하세요
+
+
+ 여러 매체의 광고 데이터를{"\n"}
+ 실시간으로 모아서 보여드려요
+
-
-
+
+
{CAROUSEL_ITEMS.map((platform, index) => (
-
+
-
- AI 성과 요약
-
-
-
광고 데이터를 자동으로 분석해
-
중요한 성과 변화와 핵심만 정리하고
-
빠르게 파악할 수 있도록 제공합니다.
-
+
+ AI 성과 분석
+
+
+ 복잡한 데이터 분석,{"\n"}
+ AI가 대신 해드릴게요
+
+
+ 광고 성과를 자동으로 분석해서{"\n"}
+ 중요한 인사이트만 쏙쏙 뽑아드려요
+
-
-
- {bars.map((bar, index) => (
-
- {bar.isBlue && (
-
- )}
-
- ))}
+
+
+
+ {bars.map((bar, index) => (
+
+ {bar.isBlue && (
+
+ )}
+
+ ))}
+
diff --git a/src/components/auth/signupStep/Step01Email.tsx b/src/components/auth/signupStep/Step01Email.tsx
new file mode 100644
index 0000000..b64674b
--- /dev/null
+++ b/src/components/auth/signupStep/Step01Email.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useState } from "react";
+import { type SubmitHandler, useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+import type { z } from "zod";
+
+import { step01Schema } from "@/utils/validation";
+
+import CommonAuthInput from "@/components/auth/CommonAuthInput";
+import Button from "@/components/common/Button";
+
+import useAuthStore from "@/store/useAuthStore";
+
+interface IStep01EmailProps {
+ onNext: () => void;
+}
+
+type TStep01FormValues = z.infer
;
+
+export default function SignupEmail({ onNext }: IStep01EmailProps) {
+ const { setEmail } = useAuthStore();
+
+ const [sendCode, setSendCode] = useState(false);
+ const [, setCodeVerify] = useState(false);
+ const [codeError, setCodeError] = useState("");
+
+ const {
+ register,
+ handleSubmit,
+ control,
+ trigger,
+ formState: { errors, isValid },
+ } = useForm({
+ mode: "onBlur",
+ resolver: zodResolver(step01Schema),
+ });
+
+ const watchedEmail = useWatch({ control, name: "email" });
+ const watchedCode = useWatch({ control, name: "code" });
+
+ const postSendCode = async () => {
+ setCodeVerify(false);
+ const isEmailValid = await trigger("email");
+ if (isEmailValid && watchedEmail) {
+ setSendCode(true);
+ toast.success("인증번호가 발송되었습니다.", {
+ description: "테스트용: 아무 번호나 입력하세요",
+ });
+ }
+ };
+
+ const onSubmit: SubmitHandler = async (data) => {
+ setEmail(data.email);
+ onNext();
+ };
+
+ useEffect(() => {
+ setCodeVerify(false);
+ setCodeError("");
+ }, [watchedCode, watchedEmail]);
+
+ useEffect(() => {
+ setSendCode(false);
+ }, [watchedEmail]);
+
+ return (
+
+
+
+
회원가입을 위해
+
이메일 인증을 진행할게요
+
+
+
+ {!sendCode ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+ {sendCode && (
+
+
+
+ )}
+
+
+
+
+
로그인에 사용할
+
비밀번호를 입력해 주세요
+
+
+
+
+
+
+
+
사용자의
+
기본 정보를 입력해 주세요
+
+
+
+
+
Login
;
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ mode: "onBlur",
+ resolver: zodResolver(loginSchema),
+ });
+
+ const onSubmit: SubmitHandler = (data) => {
+ // 임시 로그인 처리
+ console.log("Login submit:", data);
+ toast.success("로그인 성공!", {
+ description: `이메일: ${data.email}`,
+ });
+ };
+
+ return (
+
+
+
+ 로그인
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 이메일로 회원가입
+
+
+
+
Signup
;
+ const location = useLocation();
+ const [step, setStep] = useState(location.state?.step || 0);
+
+ const handleEmailStart = () => {
+ setStep(1);
+ };
+
+ const handleNext = () => {
+ setStep((prev) => prev + 1);
+ };
+
+ if (step === 1) {
+ return ;
+ }
+ if (step === 2) {
+ return ;
+ }
+ if (step === 3) {
+ return ;
+ }
+
+ return (
+
+
+ }
+ onClick={handleEmailStart}
+ className="font-heading3 shadow-md hover:shadow-lg transition-all"
+ >
+ 이메일로 시작하기
+
+
+ }
+ onClick={() => {}}
+ className="bg-white border border-gray-100 text-text-main font-heading3 shadow-sm hover:bg-gray-50"
+ >
+ 구글 로그인
+
+
+ }
+ onClick={() => {}}
+ className="bg-social-kakao text-text-main font-heading3 shadow-sm hover:opacity-90"
+ >
+ 카카오 로그인
+
+
+ }
+ onClick={() => {}}
+ className="bg-social-naver text-white font-heading3 shadow-sm hover:opacity-90"
+ >
+ 네이버 로그인
+
+
+
+
+ 이미 사용자 계정이 있다면?
+
+ 로그인하기
+
+
+
ReplayDashboard
;
-}
diff --git a/src/pages/dashboard/timeline/Timeline.tsx b/src/pages/dashboard/timeline/Timeline.tsx
new file mode 100644
index 0000000..7bddd52
--- /dev/null
+++ b/src/pages/dashboard/timeline/Timeline.tsx
@@ -0,0 +1,3 @@
+export default function Timeline() {
+ return Timeline
;
+}
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
index a5f7e54..68b9571 100644
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -9,7 +9,7 @@ import Signup from "@/pages/auth/Signup";
import Error from "@/pages/common/Error";
import OverviewDashboard from "@/pages/dashboard/overview/OverviewDashboard";
import PlatformDashboard from "@/pages/dashboard/platform/PlatformDashboard";
-import ReplayDashboard from "@/pages/dashboard/replay/ReplayDashboard";
+import Timeline from "@/pages/dashboard/timeline/Timeline";
import Setting from "@/pages/setting/Setting";
import Workspace from "@/pages/workspace/Workspace";
@@ -88,8 +88,8 @@ const router = createBrowserRouter([
element: ,
},
{
- path: "replay",
- element: ,
+ path: "timeline",
+ element: ,
},
{
path: "platform",
diff --git a/src/store/useAuthStore.ts b/src/store/useAuthStore.ts
new file mode 100644
index 0000000..5de35f4
--- /dev/null
+++ b/src/store/useAuthStore.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+interface IAuthState {
+ email: string;
+ password: string;
+ socialId: number;
+ setEmail: (email: string) => void;
+ setPassword: (password: string) => void;
+ setSocialId: (socialId: number) => void;
+ resetAuth: () => void;
+}
+
+const useAuthStore = create((set) => ({
+ email: "",
+ password: "",
+ socialId: -1,
+ setEmail: (email) => set({ email }),
+ setPassword: (password) => set({ password }),
+ setSocialId: (socialId) => set({ socialId }),
+ resetAuth: () => set({ email: "", password: "" }),
+}));
+
+export default useAuthStore;
diff --git a/src/utils/validation.tsx b/src/utils/validation.tsx
index 5cfca46..cbbaaa5 100644
--- a/src/utils/validation.tsx
+++ b/src/utils/validation.tsx
@@ -50,7 +50,30 @@ export const signupSchema = z
message: "비밀번호와 비밀번호 확인이 일치하지 않아요.",
});
+export const termsSchema = z.boolean().refine((val) => val === true);
+
export const loginSchema = z.object({
email: emailSchema,
- password: z.string().min(1, "비밀번호는 필수입니다."),
+ password: passwordSchema,
+});
+
+export const step01Schema = z.object({
+ email: emailSchema,
+ code: codeSchema,
+});
+
+export const step02Schema = z
+ .object({
+ password: passwordSchema,
+ repassword: z.string().min(1, "비밀번호 확인은 필수입니다."),
+ })
+ .refine((data) => data.password === data.repassword, {
+ path: ["repassword"],
+ message: "비밀번호가 일치하지 않습니다.",
+ });
+
+export const step03Schema = z.object({
+ name: nameSchema,
+ phoneNum: phoneSchema,
+ terms: termsSchema,
});