랜딩페이지 및 인증페이지 개발 완료

next.config.ts

@@ -1,6 +1,26 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.kakaocdn.net',
+      },
+      {
+        protocol: 'http',
+        hostname: '**.kakaocdn.net',
+      },
+      {
+        protocol: 'https',
+        hostname: '**.kakao.com',
+      },
+      {
+        protocol: 'http',
+        hostname: '**.kakao.com',
+      },
+    ],
+  },
   async headers() {
     return [
       {

package.json

@@ -17,6 +17,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.90.21",
     "clsx": "^2.1.1",
     "framer-motion": "^12.34.0",

src/app/(auth)/_components/AuthCard.module.css

@@ -0,0 +1,46 @@
+.wrapper {
+  width: 100%;
+  max-width: 550px;
+}
+
+.card {
+  width: 100%;
+  background-color: var(--color-background-primary);
+  border-radius: 20px;
+  /* figma 시안: top 72px, right 45px, bottom 70px, left 45px */
+  padding: 72px 45px 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.logoLink {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+/* PC/태블릿: logoLarge 표시 */
+.logoLarge {
+  display: block;
+}
+
+/* 모바일: logoSmall 표시 */
+.logoSmall {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .logoLarge {
+    display: none;
+  }
+
+  .logoSmall {
+    display: block;
+  }
+
+  .card {
+    padding: 48px 22px 40px;
+  }
+}

src/app/(auth)/_components/AuthCard.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import logoLarge from '@/assets/logos/logoLarge.svg';
+import logoSmall from '@/assets/logos/logoSmall.svg';
+import styles from './AuthCard.module.css';
+
+interface AuthCardProps {
+  children: React.ReactNode;
+}
+
+export default function AuthCard({ children }: AuthCardProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.card}>
+        <Link href="/" className={styles.logoLink} aria-label="홈으로 이동">
+          <Image src={logoLarge} alt="Coworkers 로고" className={styles.logoLarge} priority />
+          <Image src={logoSmall} alt="Coworkers 로고" className={styles.logoSmall} priority />
+        </Link>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(auth)/layout.module.css

@@ -0,0 +1,8 @@
+.layout {
+  min-height: 100vh;
+  background-color: var(--color-background-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 16px;
+}

src/app/(auth)/layout.tsx

@@ -0,0 +1,5 @@
+import styles from './layout.module.css';
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return <div className={styles.layout}>{children}</div>;
+}

src/app/(auth)/login/LoginForm.module.css

@@ -0,0 +1,136 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.label {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* 버튼으로 변경 - 페이지 이동이 아닌 모달 오픈 동작이므로 */
+.forgotButton {
+  align-self: flex-end;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-brand-primary);
+  font-family: inherit;
+}
+
+.forgotButton:hover {
+  text-decoration: underline;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.signupPrompt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+}
+
+.promptText {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.signupLink {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-brand-primary);
+  text-decoration: none;
+}
+
+.signupLink:hover {
+  text-decoration: underline;
+}
+
+/* ─── OR 구분선 ─── */
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.dividerLine {
+  flex: 1;
+  height: 1px;
+  background-color: var(--color-background-tertiary);
+}
+
+.dividerText {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-default);
+  white-space: nowrap;
+}
+
+/* ─── 간편 로그인 ─── */
+.social {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.socialLabel {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-default);
+}
+
+.kakaoButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kakaoButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* 모바일 */
+@media (max-width: 767px) {
+  .label {
+    font-size: 14px;
+  }
+
+  .promptText,
+  .signupLink {
+    font-size: 14px;
+  }
+
+  .socialLabel {
+    font-size: 14px;
+  }
+}