feat: 로그인 페이지 ui

spark-web/src/app/router/App.tsx

@@ -3,7 +3,7 @@ import Analysis from '@/pages/Analysis';
 import Detail from '@/pages/Detail';
 import GrowthPrediction from '@/pages/GrowthPrediction';
 import Home from '@/pages/Home';
-// import Login from '@/pages/Login';
+import Login from '@/pages/Login';
 import OnBoarding from '@/pages/OnBoarding';
 import Popular from '@/pages/Popular';
 import Result from '@/pages/Result';
@@ -27,7 +27,7 @@ export default function RouterApp() {
         </Route>
         <Route element={<PageLayout />}>
           <Route path="/onboarding" element={<OnBoarding />} />
-          {/* <Route path="/login" element={<Login />} /> */}
+          <Route path="/login" element={<Login />} />
           <Route element={<ProtectedLayout />}>
             <Route path="/detail" element={<Detail />} />
             <Route path="/user-info" element={<UserInfo />} />

spark-web/src/assets/svg/LargeClose.tsx

@@ -1,6 +1,6 @@
 import { SvgProps } from './nav/SettingIcon';
 
-export const LargeClose = ({ color, className, ...props }: SvgProps) => {
+export const LargeClose = ({ className, ...props }: SvgProps) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

spark-web/src/assets/svg/YoutubeIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgProps } from './nav/SettingIcon';
+
+export const YoutubeIcon = ({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.3177 4.99222C21.2336 5.23717 21.9578 5.96137 22.2027 6.87727C22.65 8.53867 22.65 11.9999 22.65 11.9999C22.65 11.9999 22.65 15.4612 22.2027 17.1226C21.9578 18.0385 21.2336 18.7627 20.3177 19.0076C18.6563 19.4549 12 19.4549 12 19.4549C12 19.4549 5.34376 19.4549 3.68236 19.0076C2.76646 18.7627 2.04226 18.0385 1.79731 17.1226C1.35001 15.4612 1.35001 11.9999 1.35001 11.9999C1.35001 11.9999 1.35001 8.53867 1.79731 6.87727C2.04226 5.96137 2.76646 5.23717 3.68236 4.99222C5.34376 4.54492 12 4.54492 12 4.54492C12 4.54492 18.6563 4.54492 20.3177 4.99222ZM9.87006 14.3292C9.87006 14.7141 10.2866 14.9546 10.6199 14.7623L14.6574 12.433C14.9909 12.2406 14.9909 11.7593 14.6574 11.5668L10.6199 9.23754C10.2866 9.04524 9.87006 9.28581 9.87006 9.67064V14.3292Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

spark-web/src/assets/svg/nav/SettingIcon.tsx

@@ -1,4 +1,6 @@
-export interface SvgProps {
+import type { ComponentProps } from 'react';
+
+export interface SvgProps extends ComponentProps<'svg'> {
   color?: string;
   className?: string;
   fill?: string;

spark-web/src/colors.ts

@@ -2,6 +2,7 @@ export const COLORS = {
   // Gray Scale
   black: '#1C1C1E', // Black
   gray: '#5E6166', //gray
+  gray5: '#8D9199',
   highEmphasis: '#333333', // High Emphasis Gray
   subText: '#616166', // Gray5
   midEmphasis: '#B9B9B9', // Mid Emphasis Gray
@@ -36,4 +37,7 @@ export const COLORS = {
   gradient6: '#0068FF', // Info1
   gradient7: '#335BFF', // Info2
   gradient8: '#C9DEFE', // Info3
+
+  // red Color
+  red1: '#F00',
 } as const;

spark-web/src/domains/Popular/components/PopularCard/index.tsx

@@ -1,5 +1,5 @@
 import EyeIcon from '@/assets/svg/EyeIcon';
-import { DateFormatter } from '@/shared/function';
+import { DateFormatter } from '@/domains/Popular/lib/utils';
 
 interface PopularCard {
   videoInformation: any;

spark-web/src/shared/function/DateFormatter/index.ts → spark-web/src/domains/Popular/lib/utils.ts

@@ -1,4 +1,4 @@
-export default function DateFormatter(publishedAt: string): string {
+export function DateFormatter(publishedAt: string): string {
   return new Intl.DateTimeFormat('ko-KR', {
     year: 'numeric',
     month: '2-digit',

spark-web/src/pages/Home.tsx

@@ -104,8 +104,8 @@ export default function Home() {
             </div>
           </Card.Header>
         </Card>
+        <Spacing size="large" />
       </div>
-      <Spacing size="larage" />
     </main>
   );
 }

spark-web/src/pages/Login.tsx

@@ -0,0 +1,41 @@
+import channelLogin from '@/assets/login/channel_login.json';
+import { YoutubeIcon } from '@/assets/svg/YoutubeIcon';
+import { Spacing, Text } from '@/shared/ui';
+import LottieAnimation from '@/shared/ui/components/AnimationLottie';
+
+export default function Login() {
+  return (
+    <main className="flex flex-col px-5 pt-5 pb-10 bg-line min-h-[812px]">
+      <section className="text-center">
+        <Text
+          as="title"
+          title="정확한 분석을 위해"
+          className="text-[24px] font-extrabold"
+        />
+        <Text
+          as="title"
+          title="SNS 계정 연동이 필요해요."
+          className="text-[24px] font-extrabold"
+        />
+      </section>
+      <Spacing size="lsmall" />
+      <LottieAnimation
+        animationData={channelLogin}
+        className="rounded-xl overflow-hidden"
+      />
+      <Spacing className="h-[76px]" />
+      <div className="flex items-center bg-red1 px-[26px] py-3 rounded-[26px]">
+        <YoutubeIcon />
+        <button className="text-white text-center w-full">
+          Youtube 채널 가지고 오기
+        </button>
+      </div>
+      <Spacing className="h-[10px]" />
+      <Text
+        as="description"
+        title="시작함으로써 이용약관 및 개인정보 수집 및 이용에 동의하게 됩니다."
+        className="text-center text-gray5 px-[26px] text-[11px]"
+      />
+    </main>
+  );
+}

spark-web/src/shared/components/NavigationHeader/index.tsx

@@ -11,7 +11,10 @@ interface LeftContentProps extends RouteInfo {
 function Root({ className, children }: Omit<LeftContentProps, 'location'>) {
   return (
     <header
-      className={clsx('flex justify-between px-5 pt-5 items-center', className)}
+      className={clsx(
+        'flex justify-between px-5 pt-5 items-center bg-inherit',
+        className,
+      )}
     >
       {children}
     </header>

spark-web/src/shared/hooks/useMoveLocation.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router';
 
-const routeMap = {
+const _routeMap = {
   home: '/',
   login: '/login',
   setting: '/setting',
@@ -17,7 +17,7 @@ const routeMap = {
 } as const;
 
 export interface RouteInfo {
-  location: (typeof routeMap)[keyof typeof routeMap] | 'back';
+  location: (typeof _routeMap)[keyof typeof _routeMap] | 'back';
 }
 
 export const useMoveLocation = (location: RouteInfo['location']) => {

spark-web/src/shared/ui/components/Spacing.tsx

@@ -1,11 +1,18 @@
+import clsx from 'clsx';
+
 const SIZE = {
-  larage: '16',
+  large: 'h-20',
+  medium: 'h-16',
+  xlsmall: 'h-12',
+  lsmall: 'h-10',
+  xsmall: 'h-8',
 } as const;
 
 interface SpacingProps {
-  size: keyof typeof SIZE;
+  size?: keyof typeof SIZE;
+  className?: string;
 }
 
-export default function Spacing({ size }: SpacingProps) {
-  return <div className={`h-${SIZE[size]}`} />;
+export default function Spacing({ size = 'medium', className }: SpacingProps) {
+  return <div className={clsx(SIZE[size], className)} />;
 }

spark-web/src/shared/ui/layout/PageLayout.tsx

@@ -2,12 +2,16 @@ import { Outlet, useLocation } from 'react-router';
 import { BackIcon } from '@/assets/svg/nav/BackIcon';
 import { CloseIcon } from '@/assets/svg/nav/CloseIcon';
 import { NavigationHeader } from '@/shared/components';
+import { RouteInfo } from '@/shared/hooks';
 
 // TODO: switch 문 말고 다른걸로 대체
 function CurrentLocation() {
   const location = useLocation();
   const currentPathname = location.pathname;
 
+  const isSamePathname = (path: RouteInfo['location']) =>
+    currentPathname === path;
+
   switch (currentPathname) {
     case '/analysis': {
       return (
@@ -21,7 +25,9 @@ function CurrentLocation() {
     case '/login':
     case '/detail': {
       return (
-        <NavigationHeader>
+        <NavigationHeader
+          className={`${isSamePathname('/login') && 'bg-line'}`}
+        >
           <div />
           <NavigationHeader.RightContent location="/">
             <CloseIcon />