회원가입 기능 추가, safeFetch 정리

src/apis/chatApi.ts

@@ -1,4 +1,4 @@
-import { type SafeFetchOptions, safeFetch } from '@/hooks/util/server/safeFetch';
+import { type SafeFetchOptions, safeFetch } from '@/hooks/util/api/fetch/safeFetch';
 import type {
   ChatListApiResponse,
   ChatRoom,

src/apis/linkApi.ts

@@ -1,4 +1,4 @@
-import { type SafeFetchOptions, safeFetch } from '@/hooks/util/server/safeFetch';
+import { type SafeFetchOptions, safeFetch } from '@/hooks/util/api/fetch/safeFetch';
 import type {
   DeleteLinkApiResponse,
   DuplicateLinkApiResponse,

src/apis/summary.ts

@@ -1,4 +1,4 @@
-import { type SafeFetchOptions, safeFetch } from '@/hooks/util/server/safeFetch';
+import { type SafeFetchOptions, safeFetch } from '@/hooks/util/api/fetch/safeFetch';
 import { SummaryData, SummaryResponse } from '@/types/api/summaryApi';
 
 const API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;

src/app/(route)/signup/SignupPage.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Button from '@/components/basics/Button/Button';
+import Input from '@/components/basics/Input/Input';
+import Label from '@/components/basics/Label/Label';
+import { useSignupSubmit } from '@/hooks/server/useSignup';
+
+import { useSignupForm } from './useSignupForm';
+
+const SignupPage = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useSignupForm();
+
+  const { submit, isPending } = useSignupSubmit();
+
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center gap-10">
+      <span className="font-title-md">회원가입</span>
+      <form onSubmit={handleSubmit(submit)} className="space-y-5">
+        {/* 이메일 */}
+        <Label htmlFor="email">이메일</Label>
+        <div>
+          <Input
+            {...register('email')}
+            id="email"
+            type="email"
+            placeholder="이메일을 입력해주세요"
+            autoComplete="email"
+            className={errors.email && 'border-red500 focus:border-red-500'}
+          />
+          {errors.email && <span className="text-red-500">{errors.email?.message}</span>}
+        </div>
+
+        {/* 비밀번호 */}
+        <Label htmlFor="password">비밀번호</Label>
+        <div>
+          <Input
+            {...register('password')}
+            id="password"
+            placeholder="8자 이상 입력해 주세요"
+            autoComplete="new-password"
+            className={errors.password && 'border-red500 focus:border-red-500'}
+          />
+          {errors.password && <span className="text-red-500">{errors.password?.message}</span>}
+        </div>
+        <Button
+          className="mt-2"
+          type="submit"
+          label="회원가입하기"
+          disabled={!isValid || isSubmitting || isPending}
+        />
+      </form>
+    </div>
+  );
+};
+
+export default SignupPage;

src/app/(route)/signup/page.tsx

@@ -0,0 +1,5 @@
+import SignupPage from './SignupPage';
+
+export default function Page() {
+  return <SignupPage />;
+}

src/app/(route)/signup/useSignupForm.ts

@@ -0,0 +1,15 @@
+'use client';
+
+import { SignupFormValues, SignupSchema } from '@/types/api/authApi';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+export const useSignupForm = () => {
+  const form = useForm<SignupFormValues>({
+    resolver: zodResolver(SignupSchema),
+    mode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  });
+
+  return form;
+};

src/app/LandingPage.tsx

@@ -72,6 +72,12 @@ export default function Landing() {
             🔧 개발 모드 로그인
           </button>
         )}
+        <button
+          onClick={() => router.push('/signup')}
+          className="mb-3 flex w-full items-center justify-center rounded-full border border-gray-300 bg-white px-6 py-4 font-medium text-gray-700 shadow-sm transition hover:border-gray-400 hover:bg-gray-50"
+        >
+          회원가입 하기
+        </button>
 
         <button
           onClick={handleGoogleLogin}

src/app/api/member/signup/route.ts

@@ -0,0 +1,26 @@
+import { handleApiError, parseJsonBody, safeFetch, validateRequest } from '@/hooks/util/api';
+import { SignupRequestSchema, SignupResponse } from '@/types/api/authApi';
+import { NextRequest } from 'next/server';
+
+const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;
+if (!BASE_API_URL) {
+  throw new Error('Missing environment variable: NEXT_PUBLIC_BASE_API_URL');
+}
+const BASE_URL = `${BASE_API_URL}/v1/member`;
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await parseJsonBody(req);
+    const data = validateRequest(SignupRequestSchema, body);
+
+    const result = await safeFetch<SignupResponse>(`${BASE_URL}/signup`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+
+    return Response.json(result, { status: 200 });
+  } catch (err) {
+    return handleApiError(err);
+  }
+}

src/app/layout-client.tsx

@@ -8,7 +8,7 @@ export default function LayoutClient({ children }: { children: React.ReactNode }
   const pathname = usePathname();
 
   // 랜딩에서는 SideNavigation 숨김
-  const showSideNav = pathname !== '/';
+  const showSideNav = pathname !== '/' && pathname !== '/signup';
 
   return (
     <ReactQueryProvider>

src/components/basics/Input/Input.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const style = tv({
+  base: 'flex h-10 items-center px-3 text-gray-800 placeholder-gray-400',
+  variants: {
+    size: {
+      sm: 'w-32',
+      md: 'w-60',
+      lg: 'w-full',
+    },
+    radius: {
+      none: 'rounded-none',
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-full',
+    },
+    variant: {
+      outline: 'border border-gray-300 bg-white focus-within:border-gray-600',
+      filled: 'bg-blue-200 focus-within:bg-blue-300',
+    },
+    disabled: {
+      true: 'pointer-events-none opacity-50',
+      false: '',
+    },
+  },
+});

src/components/basics/Input/Input.tsx

@@ -3,71 +3,42 @@
 import clsx from 'clsx';
 import React from 'react';
 
-interface InputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'value' | 'onChange'
-> {
-  value: string;
+import { style } from './Input.styles';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   placeholder?: string;
   size?: 'sm' | 'md' | 'lg';
   radius?: 'none' | 'sm' | 'md' | 'lg';
   variant?: 'outline' | 'filled';
   icon?: React.ReactElement;
   className?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
   {
-    value,
     placeholder = 'Enter text...',
     size = 'md',
     radius = 'md',
     variant = 'outline',
     icon,
     disabled = false,
     className,
-    onChange,
+    value,
+    defaultValue,
     ...rest
   },
   ref
 ) {
-  const baseStyle = 'flex items-center px-3 h-10 text-gray-800 placeholder-gray-400';
-  const sizeStyles = {
-    sm: 'w-32',
-    md: 'w-60',
-    lg: 'w-full',
-  };
-  const radiusStyles = {
-    none: 'rounded-none',
-    sm: 'rounded-sm',
-    md: 'rounded-md',
-    lg: 'rounded-full',
-  };
-  const variantStyles = {
-    outline: 'border border-gray-300 bg-white focus-within:border-gray-600',
-    filled: 'bg-blue-200 focus-within:bg-blue-300',
-  };
-
-  const classes = clsx(
-    className,
-    baseStyle,
-    sizeStyles[size],
-    radiusStyles[radius],
-    variantStyles[variant],
-    disabled && 'pointer-events-none opacity-50'
-  );
-
   return (
-    <div className={classes}>
+    <div className={clsx(style({ size, radius, variant, disabled }), className)}>
       <input
         ref={ref}
         type="text"
         value={value}
+        defaultValue={defaultValue}
         placeholder={placeholder}
         disabled={disabled}
         className="min-w-0 flex-1 bg-transparent outline-none"
-        onChange={onChange}
         {...rest}
       />
       {icon && <span className="ml-2 shrink-0">{icon}</span>}

src/components/wrappers/ReSummaryModal/hooks/useReSummary.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { fetchNewSummary } from '@/apis/summary';
-import { FetchError } from '@/hooks/util/server/safeFetch';
+import { FetchError } from '@/hooks/util/api/error/errors';
 import { showToast } from '@/stores/toastStore';
 import { ReSummaryRequest } from '@/types/api/summaryApi';
 import { useMutation } from '@tanstack/react-query';