[NDD-85] 랜딩 페이지 구현, 웹팩 file-loader, svgr 설정 (9h/8h)

FE/package.json

@@ -25,6 +25,7 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.2.35",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
@@ -37,6 +38,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "msw": "^2.0.3",
     "prettier": "^3.0.3",

FE/src/components/common/Logo/Logo.tsx

@@ -0,0 +1,27 @@
+import logo from '@assets/images/logo.png';
+import { css } from '@emotion/react';
+import Typography from '@foundation/Typography/Typography';
+
+const Logo: React.FC = ({}) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        column-gap: 1rem;
+      `}
+    >
+      <img
+        src={logo}
+        alt={'곰돌이 로고'}
+        css={css`
+          width: 2.5rem;
+        `}
+      />
+      <Typography variant="title2">곰터뷰</Typography>
+    </div>
+  );
+};
+
+export default Logo;

FE/src/components/foundation/Button/Button.styles.ts

@@ -17,6 +17,6 @@ export const buttonSize = {
   lg: css`
     padding: 0.7rem 1.2rem;
     border-radius: 1rem;
-    ${theme.typography.title2}
+    ${theme.typography.title3}
   `,
 };

FE/src/components/foundation/Typography/Typography.tsx

@@ -1,6 +1,7 @@
 import React, { ElementType, ReactNode } from 'react';
 import { css, Theme } from '@emotion/react';
 import { theme } from '@styles/theme';
+import { HTMLElementTypes } from '@/types/utils';
 
 type Props = {
   component?: ElementType;
@@ -9,7 +10,7 @@ type Props = {
   paragraph?: boolean;
   color?: string;
   children: ReactNode;
-};
+} & HTMLElementTypes<HTMLDivElement>;
 
 const Typography: React.FC<Props> = ({
   component,
@@ -18,8 +19,9 @@ const Typography: React.FC<Props> = ({
   paragraph,
   color,
   children,
+  ...args
 }) => {
-  const Component = component || (paragraph ? 'p' : 'span');
+  const Component = component || (paragraph ? 'pre' : 'span');
 
   return (
     <Component
@@ -37,6 +39,7 @@ const Typography: React.FC<Props> = ({
         `,
         theme.typography[variant],
       ]}
+      {...args}
     >
       {children}
     </Component>

FE/src/components/landingPage/GoogleLoginButton.tsx

@@ -0,0 +1,33 @@
+import GoogleLogo from '@assets/svg/google-logo.svg';
+import { css } from '@emotion/react';
+import { theme } from '@styles/theme';
+import Typography from '@foundation/Typography/Typography';
+
+const GoogleLoginButton: React.FC = () => {
+  return (
+    <button
+      css={css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        column-gap: 0.75rem;
+        padding: 0.59375rem 0.75rem;
+        border-radius: 50rem;
+        border: 1px solid ${theme.colors.border.default};
+        transition: transform 0.15s ease-in-out;
+        background-color: ${theme.colors.surface.default};
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+      `}
+    >
+      <GoogleLogo />
+      <Typography variant="body1" color={theme.colors.text.default}>
+        Google로 시작하기
+      </Typography>
+    </button>
+  );
+};
+
+export default GoogleLoginButton;

FE/src/components/landingPage/Header.tsx

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import Logo from '@common/Logo/Logo';
+import GoogleLoginButton from '@components/landingPage/GoogleLoginButton';
+
+const Header: React.FC = () => {
+  return (
+    <div
+      css={css`
+        position: fixed;
+        top: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2rem;
+      `}
+    >
+      <Logo />
+      <GoogleLoginButton />
+    </div>
+  );
+};
+
+export default Header;

FE/src/components/landingPage/LandingImage.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import LandingBear from '@assets/images/landing-bear.png';
+
+const LandingImage: React.FC = () => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        justify-self: end;
+        align-self: end;
+      `}
+    >
+      <img
+        src={LandingBear}
+        alt={'노트북을 하는 곰돌이의 뒷모습'}
+        css={css`
+          height: 40vw;
+          min-height: 30rem;
+        `}
+      />
+    </div>
+  );
+};
+
+export default LandingImage;

FE/src/components/landingPage/Layout.tsx

@@ -1,15 +1,73 @@
-import Layout from '@/components/layout/Layout';
+import { css } from '@emotion/react';
+import Header from '@components/landingPage/Header';
+import Layout from '@components/layout/Layout';
+import { theme } from '@styles/theme';
 
 type LandingPageLayoutProps = {
   children: React.ReactNode;
 };
 
 const LandingPageLayout: React.FC<LandingPageLayoutProps> = ({ children }) => {
   return (
-    <Layout full direction="row">
-      {children}
+    <Layout
+      full
+      direction="column"
+      css={css`
+        row-gap: 10rem;
+        background: ${theme.gradient.linear.skyblue};
+      `}
+    >
+      <Header />
+      <div
+        css={[
+          css`
+            display: grid;
+            grid-template-columns: auto auto;
+            grid-template-rows: 3fr 1fr;
+            justify-content: space-evenly;
+            justify-items: center;
+            align-items: center;
+            gap: 2rem;
+            padding: 2rem;
+            margin: auto 0;
+
+            > *:nth-child(3) {
+              grid-area: 1 / 2 / 3 / 3;
+            }
+          `,
+          LandingPageResponsiveStyles,
+        ]}
+      >
+        {children}
+      </div>
     </Layout>
   );
 };
 
+const LandingPageResponsiveStyles = css`
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    justify-items: start;
+
+    > *:nth-child(1) {
+      grid-area: 1 / 1 / 1 / 2;
+    }
+
+    > *:nth-child(2) {
+      grid-area: 2 / 1 / 2 / 2;
+    }
+
+    > *:nth-child(3) {
+      grid-area: 1 / 1 / 3 / 3;
+    }
+  }
+
+  @media (max-width: 576px) {
+    justify-items: center;
+    > *:nth-child(3) {
+      display: none;
+    }
+  }
+`;
+
 export default LandingPageLayout;

FE/src/components/landingPage/StartButton.tsx

@@ -0,0 +1,40 @@
+import { Link } from 'react-router-dom';
+import { PATH } from '@constants/path';
+import Button from '@foundation/Button/Button';
+import { css } from '@emotion/react';
+import { theme } from '@styles/theme';
+
+type StartButton = {
+  text?: string;
+};
+
+const InterviewStartButton: React.FC<StartButton> = ({
+  text = '비회원으로 시작하기',
+}) => {
+  // 로그인 여부에 따라 버튼의 문구가 달라집니다.
+  return (
+    <div>
+      <Link to={PATH.INTERVIEW_SETTING}>
+        <Button
+          size="lg"
+          css={css`
+            position: relative;
+            padding: 1.5rem 3rem;
+            border-radius: 3.125rem;
+            background: ${theme.gradient.linear.blue};
+            box-shadow: ${theme.shadow.buttonLargeShadow(10)};
+            z-index: 2;
+
+            &:hover {
+              transform: translateY(4px);
+              box-shadow: ${theme.shadow.buttonLargeShadow(6)};
+            }
+          `}
+        >
+          {text}
+        </Button>
+      </Link>
+    </div>
+  );
+};
+export default InterviewStartButton;