devping-kr · plla2 · Mar 28, 2025 · Mar 28, 2025 · Mar 28, 2025 · Mar 28, 2025
diff --git a/public/imgs/auth.jpg b/public/imgs/auth.jpg
diff --git a/public/imgs/auth.png b/public/imgs/auth.png
diff --git a/public/imgs/white-logo.png b/public/imgs/white-logo.png
diff --git a/src/components/common/Icon/assets/ArrowRight.tsx b/src/components/common/Icon/assets/ArrowRight.tsx
@@ -11,16 +11,16 @@ const ArrowRight = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 32 32'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       className={className}
       {...props}
     >
       <path
-        d='M18 6L28 16M28 16L18 26M28 16H4'
+        d='M13.5 4.5L21 12M21 12L13.5 19.5M21 12H3'
         stroke={color}
-        strokeWidth='3'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx
@@ -33,6 +33,11 @@ export const LandingBadgeBlack = customTypography('span', {
   color: 'black',
 });
 
+export const H1White = customTypography('h1', {
+  type: 'H1',
+  color: 'white',
+});
+
 export const H1Black = customTypography('h1', {
   type: 'H1',
   color: 'black',
@@ -63,6 +68,11 @@ export const H3White = customTypography('h3', {
   color: 'white',
 });
 
+export const H4White = customTypography('h4', {
+  type: 'H4',
+  color: 'white',
+});
+
 export const H4Black = customTypography('h4', {
   type: 'H4',
   color: 'black',
@@ -223,6 +233,11 @@ export const Subtitle2Red500 = customTypography('span', {
   color: 'red',
 });
 
+export const SubTitle3White = customTypography('span', {
+  type: 'Subtitle3',
+  color: 'white',
+});
+
 export const SubTitle3Black = customTypography('span', {
   type: 'Subtitle3',
   color: 'black',

diff --git a/src/components/feature/Login/index.tsx b/src/components/feature/Login/index.tsx
@@ -1,12 +1,41 @@
 'use client';
 
-import { H1Black } from '@/components/common/Typography';
+import Image from 'next/image';
+import Link from 'next/link';
+import Icon from '@/components/common/Icon';
+import {
+  H1Black,
+  H1White,
+  H4White,
+  SubTitle3White,
+} from '@/components/common/Typography';
 import LoginBody from '@/components/shared/Auth/LoginBody';
 
 const Login = () => {
   return (
     <main className='mx-auto my-0 flex overflow-hidden'>
-      <section className="h-screen w-full bg-[url('/imgs/auth.jpg')] bg-cover bg-center"></section>
+      <section className="relative h-screen w-full bg-green-500 bg-[url('/imgs/auth.png')] bg-cover bg-center">
+        <div className='absolute inset-0 z-10 animate-gradient bg-gradient-to-bl from-transparent to-black-100/60 bg-[400%,400%]'></div>
+        <div className='absolute z-50 flex h-screen flex-col items-start justify-between p-20'>
+          <Image
+            src='/imgs/white-logo.png'
+            width={77}
+            height={56}
+            alt='white logo'
+          />
+          <div className='flex flex-col gap-4'>
+            <H4White>학교·병원 영양사들을 위한</H4White>
+            <div className='flex flex-col'>
+              <H1White>ALL IN ONE</H1White>
+              <H1White>식단 관리 서비스, 냠냠플래너</H1White>
+            </div>
+          </div>
+          <Link href='/' target='_blank' className='flex items-center gap-4'>
+            <SubTitle3White>홈페이지 보기</SubTitle3White>
+            <Icon name='arrowRight' width={24} height={24} color='white' />
+          </Link>
+        </div>
+      </section>
       <section className='flex h-screen min-w-[608px] flex-col items-center justify-center gap-6 px-16'>
         <H1Black>로그인</H1Black>
         <LoginBody />

diff --git a/src/components/feature/Signup/index.tsx b/src/components/feature/Signup/index.tsx
@@ -1,12 +1,41 @@
 'use client';
 
-import { H1Black } from '@/components/common/Typography';
+import Image from 'next/image';
+import Link from 'next/link';
+import Icon from '@/components/common/Icon';
+import {
+  H1Black,
+  H1White,
+  H4White,
+  SubTitle3White,
+} from '@/components/common/Typography';
 import SignupBody from '@/components/shared/Auth/SignupBody';
 
 const Signup = () => {
   return (
     <main className='mx-auto my-0 flex overflow-hidden'>
-      <section className="h-screen w-full bg-[url('/imgs/auth.jpg')] bg-cover bg-center"></section>
+      <section className="relative h-screen w-full bg-green-500 bg-[url('/imgs/auth.png')] bg-cover bg-center">
+        <div className='absolute inset-0 z-10 animate-gradient bg-gradient-to-bl from-transparent to-black-100/60 bg-[400%,400%]'></div>
+        <div className='absolute z-50 flex h-screen flex-col items-start justify-between p-20'>
+          <Image
+            src='/imgs/white-logo.png'
+            width={77}
+            height={56}
+            alt='white logo'
+          />
+          <div className='flex flex-col gap-4'>
+            <H4White>학교·병원 영양사들을 위한</H4White>
+            <div className='flex flex-col'>
+              <H1White>ALL IN ONE</H1White>
+              <H1White>식단 관리 서비스, 냠냠플래너</H1White>
+            </div>
+          </div>
+          <Link href='/' target='_blank' className='flex items-center gap-4'>
+            <SubTitle3White>홈페이지 보기</SubTitle3White>
+            <Icon name='arrowRight' width={24} height={24} color='white' />
+          </Link>
+        </div>
+      </section>
       <section className='flex h-screen min-w-[608px] flex-col items-center justify-center gap-6 px-16'>
         <H1Black>회원가입</H1Black>
         <SignupBody />

diff --git a/src/components/shared/Auth/LoginBody/index.tsx b/src/components/shared/Auth/LoginBody/index.tsx
@@ -13,7 +13,6 @@ import Icon from '@/components/common/Icon';
 import { Input } from '@/components/common/Input';
 import {
   Caption1Red500,
-  H4Black,
   Label1Black,
   Subtitle1White,
   Subtitle2Black,
@@ -149,33 +148,32 @@ const LoginBody = () => {
               <Subtitle1White>로그인</Subtitle1White>
             </Button>
           </div>
-          <div className='flex w-full flex-col items-center gap-6'>
-            <H4Black>회원가입</H4Black>
-            <div className='flex w-full flex-col gap-4'>
-              <Button
-                onClick={() => navigate(BASE_ROUTES.SIGNUP)}
-                variant='soft'
-                className='flex items-center justify-between px-4'
-                width='full'
-                size='md'
-              >
-                <Icon name='envelope' width={24} height={24} color='black' />
-                <Subtitle2Black>이메일로 시작하기</Subtitle2Black>
-                <div />
-              </Button>
-              <Button
-                className='flex items-center justify-between px-4'
-                width='full'
-                size='md'
-                variant='outline'
-                onClick={() => googleLoginHandler()}
-              >
-                <Icon name='google' width={24} height={24} />
-                <Subtitle2Black>구글로 시작하기</Subtitle2Black>
-                <div />
-              </Button>
-            </div>
+          {/* <div className='flex w-full flex-col items-center gap-6'> */}
+          <div className='flex w-full flex-col gap-4'>
+            <Button
+              className='flex items-center justify-between px-4'
+              width='full'
+              size='md'
+              variant='outline'
+              onClick={() => googleLoginHandler()}
+            >
+              <Icon name='google' width={24} height={24} />
+              <Subtitle2Black>구글로 시작하기</Subtitle2Black>
+              <div />
+            </Button>
+            <Button
+              onClick={() => navigate(BASE_ROUTES.SIGNUP)}
+              variant='soft'
+              className='flex items-center justify-between px-4'
+              width='full'
+              size='md'
+            >
+              <Icon name='envelope' width={24} height={24} color='black' />
+              <Subtitle2Black>이메일로 시작하기</Subtitle2Black>
+              <div />
+            </Button>
           </div>
+          {/* </div> */}
         </fieldset>
       </form>
     </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -24,8 +24,18 @@ const config: Config = {
       transitionProperty: {
         colors: 'color, background-color, border-color, text-decoration-color',
       },
+      animation: {
+        gradient: 'gradient 12s ease infinite',
+      },
+      keyframes: {
+        gradient: {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
+      },
+      plugins: [],
     },
   },
-  plugins: [],
 };
+
 export default config;