💄 add login & profile UI

.eslintrc.js

@@ -18,8 +18,14 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', 'import', '@tanstack/query'],
+  plugins: ['react', 'import', '@tanstack/query', 'tailwindcss'],
   rules: {
+    'tailwindcss/no-custom-classname': [
+      'warn',
+      {
+        whitelist: ['^.*dodal.*$'],
+      },
+    ],
     curly: ['error', 'all'],
     eqeqeq: [
       'error',

app/(route)/(index)/_components/choose-profile.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { ROUTE } from '@/app/_constants/route'
+
+export default function ChooseProfile() {
+  return (
+    <main className='flex h-full flex-col items-center px-6 pb-16 pt-11'>
+      <h1 className='text-2xl font-semibold'>프로필 생성</h1>
+      <div className='flex w-full flex-col gap-6'>
+        <div className='mt-10 flex flex-col items-center'>
+          <Image src='/images/CH1.png' width={187} height={187} alt='프로필 이미지' />
+          <div className='mt-3 flex flex-col items-center gap-1'>
+            <input className='mb-1 w-[84px] appearance-none border-0 border-b border-b-[#B8B8B8] bg-transparent p-0 text-center text-xl focus:ring-0' />
+            <span className='text-xs'>0/4</span>
+          </div>
+        </div>
+        <div className='mx-auto grid w-fit grid-cols-3 gap-x-3 gap-y-4'>
+          <Image src='/images/CH1.png' width={80} height={80} alt='프로필 이미지' />
+          <Image src='/images/CH2.png' width={80} height={80} alt='프로필 이미지' />
+          <Image src='/images/CH3.png' width={80} height={80} alt='프로필 이미지' />
+          <Image src='/images/CH4.png' width={80} height={80} alt='프로필 이미지' />
+          <Image src='/images/CH5.png' width={80} height={80} alt='프로필 이미지' />
+          <Image src='/images/CH6.png' width={80} height={80} alt='프로필 이미지' />
+        </div>
+        <Link
+          className='mt-28 flex h-14 w-full items-center justify-center rounded-[50px] bg-[#482BD9]'
+          href={ROUTE.HOME}
+        >
+          달 탐사 시작하기
+        </Link>
+      </div>
+    </main>
+  )
+}

app/(route)/(index)/page.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import Image from 'next/image'
+
+import { useState } from 'react'
+
+import { KAKAO } from '@/app/_constants/kakao'
+
+import ChooseProfile from './_components/choose-profile'
+
+type Step = 'login' | 'profile'
+
+export default function Home() {
+  const [step, setStep] = useState<Step>('login')
+
+  if (step === 'profile') {
+    return <ChooseProfile />
+  }
+
+  return (
+    <main className='flex h-full min-h-screen flex-col items-center justify-between pb-24 pt-28'>
+      <div className='flex flex-col items-center gap-5'>
+        <Image src='/images/logo.png' width={155} height={155} alt='도달 로고' />
+        <span>1:1 매칭 목표 달성 서비스</span>
+      </div>
+      <button
+        className='flex h-11 w-[260px] items-center justify-center gap-1 rounded-xl bg-dodal-kakao p-4 text-black'
+        onClick={() => {
+          setStep('profile')
+        }}
+        // href={`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO.REST_API_KEY}&redirect_uri=${KAKAO.REDIRECT_URI}`}
+      >
+        <svg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26' fill='none'>
+          <path
+            d='M14.2321 3.4668C7.89336 3.4668 2.75488 7.27945 2.75488 11.9825C2.75488 15.0231 4.90311 17.6912 8.13461 19.1977C7.95881 19.7683 7.00487 22.8682 6.96691 23.1117C6.96691 23.1117 6.94407 23.2947 7.06998 23.3645C7.1959 23.4343 7.344 23.3801 7.344 23.3801C7.70509 23.3326 11.5313 20.8034 12.1936 20.3643C12.8552 20.4524 13.5364 20.4982 14.2321 20.4982C20.5708 20.4982 25.7093 16.6857 25.7093 11.9825C25.7093 7.27945 20.5708 3.4668 14.2321 3.4668Z'
+            fill='black'
+            fillOpacity='0.9'
+          />
+        </svg>
+        <span>카카오로 시작하기</span>
+      </button>
+    </main>
+  )
+}

app/(route)/home/layout.tsx

@@ -0,0 +1,10 @@
+import Header from '@/app/_components/shared/header'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <main>
+      <Header />
+      {children}
+    </main>
+  )
+}

app/(route)/home/page.tsx

@@ -0,0 +1,11 @@
+export default function HomePage() {
+  return (
+    <div className='px-8 py-4'>
+      <h1>오늘의 도달률</h1>
+      <div className='mt-4 space-x-1 text-2xl'>
+        <span className='text-[88px] font-extrabold text-[#8A72FF]'>100</span>
+        <span>%</span>
+      </div>
+    </div>
+  )
+}

app/(route)/layout.tsx

@@ -1,24 +1,29 @@
-import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
 
 import type { Metadata } from 'next'
 
 import '@/app/_styles/globals.css'
 import Providers from '@/app/_components/providers/QueryClientProvider'
 
-const inter = Inter({ subsets: ['latin'] })
+import { cn } from '../_styles/utils'
+
+const myFont = localFont({
+  src: '../_assets/fonts/PretendardVariable.woff2',
+  display: 'swap',
+})
 
 export const metadata: Metadata = {
   title: '도달도달',
-  description: '도달도달',
+  description: '1:1 매칭 목표 달성 서비스',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang='en'>
       <head>
-        <link rel='icon' href='../favicon.png' sizes='any' />
+        <link rel='icon' href='../../favicon.ico' sizes='any' />
       </head>
-      <body className={inter.className}>
+      <body className={cn(myFont.className, 'mx-auto max-w-3xl text-white')}>
         <Providers>{children}</Providers>
       </body>
     </html>

app/_components/shared/header.tsx

@@ -0,0 +1,21 @@
+export default function Header() {
+  return (
+    <header className='sticky flex h-16 w-full items-center justify-between px-6'>
+      <div />
+      <div>
+        <svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'>
+          <path
+            d='M9.75372 10.4628C9.77799 10.2201 9.79012 10.0988 9.80342 9.99392C10.3 6.07631 13.5809 3.10714 17.5285 3.00279C17.6342 3 17.7561 3 18 3C18.2439 3 18.3658 3 18.4715 3.00279C22.4191 3.10714 25.7 6.07631 26.1966 9.99392C26.2099 10.0988 26.222 10.2201 26.2463 10.4628L26.6762 14.762C26.8009 16.0093 26.8633 16.6329 27.019 17.2322C27.1393 17.6954 27.301 18.1469 27.502 18.5813C27.7621 19.1432 28.1098 19.6647 28.8051 20.7076L30.9271 23.8906C31.8396 25.2593 32.2958 25.9437 32.0132 26.4719C31.7305 27 30.908 27 29.263 27H6.73703C5.09201 27 4.2695 27 3.98684 26.4719C3.70419 25.9437 4.16044 25.2593 5.07293 23.8906L7.19492 20.7076C7.89023 19.6647 8.23788 19.1432 8.49798 18.5813C8.69903 18.1469 8.86069 17.6954 8.98103 17.2322C9.13671 16.6329 9.19907 16.0093 9.3238 14.762L9.75372 10.4628Z'
+            fill='white'
+          />
+          <path
+            d='M15.1022 30.9441C15.2731 31.1036 15.6498 31.2445 16.1737 31.345C16.6976 31.4455 17.3396 31.5 18 31.5C18.6604 31.5 19.3024 31.4455 19.8263 31.345C20.3502 31.2445 20.7269 31.1036 20.8978 30.9441'
+            stroke='white'
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+        </svg>
+      </div>
+    </header>
+  )
+}

app/_constants/route.ts

@@ -1,7 +1,7 @@
 export const ROUTE = {
-  HOME: '/',
+  INDEX: '/',
+  HOME: '/home',
   LOGIN: '/login',
-  SIGNUP: '/signup',
   OAUTH: {
     KAKAO: {
       CALLBACK: '/oauth/callback/kakao',

app/_styles/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  background-color: #140a29;
+}

tailwind.config.ts

@@ -11,6 +11,10 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      backgroundColor: {
+        'dodal-main': '#140A29',
+        'dodal-kakao': '#FEE500',
+      },
     },
   },
   plugins: [require('@tailwindcss/forms')],