feature-071: 가이드 페이지 > 메인

src/App.tsx

@@ -1,12 +1,14 @@
-import { useRecoilValue } from 'recoil';
+import { useEffect } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 import { ThemeProvider } from 'styled-components';
 
 // Styles
 import theme from '@/styles/theme';
 import GlobalStyle from '@/styles/GlobalStyle';
 
 // Pages
+import { GuideLayout, GuideHomePage, GuidePage } from '@/pages/Guide';
 import CategoryPage from '@/pages/CategoryPage';
 import FindEmailPage from '@/pages/FindEmailPage';
 import FindPasswordPage from '@/pages/FindPasswordPage';
@@ -22,19 +24,21 @@ import SocialAccountPage from '@/pages/SocialAccountPage';
 import SummaryPage from '@/pages/SummaryPage';
 
 // Layouts
-import Layout from './components/layout/Layout';
+import Layout from '@/components/layout/Layout';
 
 // Components
-import { ToastList } from './components/common';
+import { ToastList } from '@/components/common';
+
+// Hooks
+import useUpdateCategories from '@/hooks/useUpdateCategories';
 
 // Store
-import { userTokenState } from './stores/user';
-import { useEffect } from 'react';
-import useUpdateCategories from './hooks/useUpdateCategories';
+import { userTokenState } from '@/stores/user';
 
 const App = () => {
   const userToken = useRecoilValue(userTokenState);
   const { updateCategories } = useUpdateCategories();
+
   useEffect(() => {
     userToken && updateCategories();
   }, [updateCategories, userToken]);
@@ -74,6 +78,11 @@ const App = () => {
               </>
             )}
 
+            <Route path="/guide" element={<GuideLayout />}>
+              <Route path="/guide/home" element={<GuideHomePage />} />
+              <Route path="/guide" element={<GuidePage />} />
+            </Route>
+
             <Route path="/summary/:videoId" element={<SummaryPage />} />
             <Route path="/" element={<HomePage />} />
           </Route>

src/components/layout/sideBar/VinoGuide.tsx

@@ -1,12 +1,17 @@
+import { Link } from 'react-router-dom';
+
 import GuideSvg from '@/assets/icons/guide.svg?react';
+
 import * as VinoGuideStyle from '@/styles/layout/sideBar/VinoGuide.style';
 
 const VinoGuide = () => {
   return (
-    <VinoGuideStyle.Wrap>
-      <GuideSvg width={28} height={28} />
-      <VinoGuideStyle.Button>Vino 가이드</VinoGuideStyle.Button>
-    </VinoGuideStyle.Wrap>
+    <Link to="/guide">
+      <VinoGuideStyle.Wrap>
+        <GuideSvg width={28} height={28} />
+        <VinoGuideStyle.Button>Vino 가이드</VinoGuideStyle.Button>
+      </VinoGuideStyle.Wrap>
+    </Link>
   );
 };
 

src/pages/Guide/GuideHomePage.tsx

@@ -0,0 +1,21 @@
+import { Section } from '@/styles/GuidePage';
+
+const GuideHomePage = () => {
+  return (
+    <>
+      <Section>
+        <div className="info-box">
+          <h2 className="subtitle">홈 화면</h2>
+
+          <h1 className="title">
+            홈 화면에서 빠르게
+            <br />
+            <span>영상을 텍스트로 변환</span>할 수 있어요
+          </h1>
+        </div>
+      </Section>
+    </>
+  );
+};
+
+export default GuideHomePage;

src/pages/Guide/GuideLayout.tsx

@@ -0,0 +1,47 @@
+import { Link, Outlet, useLocation } from 'react-router-dom';
+
+import { Container, Visual } from '@/styles/GuidePage';
+
+const GuideLayout = () => {
+  const { pathname } = useLocation();
+
+  const linkList = [
+    { id: 'HOME', name: '홈 화면', to: '/guide/home' },
+    { id: 'SUMMARY', name: '영상 요약', to: '/guide/summary' },
+    { id: 'CATEGORY', name: '카테고리 정리', to: '/guide/category' },
+    { id: 'SEARCH', name: '검색', to: '/guide/search' },
+  ];
+
+  return (
+    <Container>
+      <Visual className="dark-section">
+        <div className="box">
+          <img
+            className="guide-logo"
+            src="/assets/guide-logo.png"
+            alt="guide-logo"
+          />
+
+          <h1 className="title">VINO 가이드</h1>
+        </div>
+
+        <ul className="link-list">
+          {linkList.map((link) => (
+            <li key={link.id}>
+              <Link
+                to={link.to}
+                className={pathname === link.to ? 'active' : ''}
+              >
+                {link.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </Visual>
+
+      <Outlet />
+    </Container>
+  );
+};
+
+export default GuideLayout;

src/pages/Guide/GuidePage.tsx

@@ -0,0 +1,83 @@
+import { Section } from '@/styles/GuidePage';
+
+const GuidePage = () => {
+  const serviceList = [
+    {
+      id: 'SIMPLE',
+      image: '',
+      title: '한 눈에 읽는 영상',
+      description: (
+        <>
+          단락으로 나누어져 이해 쏙쏙!
+          <br />한 눈에 읽고 이해해요!
+        </>
+      ),
+    },
+    {
+      id: 'INSIGHT',
+      image: '',
+      title: '쉽게 남기는 인사이트',
+      description: (
+        <>
+          난 이 부분이 인상 깊었어!
+          <br />
+          쉽고 빠르게 기록해요!
+        </>
+      ),
+    },
+    {
+      id: 'SEARCH',
+      image: '',
+      title: '다시 읽고 싶다면 간단하게 검색',
+      description: (
+        <>
+          영상 속 기억나는 단어 하나로도
+          <br />
+          쉽게 찾을 수 있어요!
+        </>
+      ),
+    },
+    {
+      id: 'CATEGORY',
+      image: '',
+      title: '내용별 카테고리 정리',
+      description: (
+        <>
+          다시 찾기 편하도록
+          <br />
+          카테고리로 영상을 분류해요!
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <Section>
+      <img src="/assets/guide-comment.png" alt="guide-comment" width={505} />
+
+      <div className="info-box" style={{ marginTop: 30, gap: 20 }}>
+        <h3 className="subtitle">TO. 영상보다 글이 편한 당신에게</h3>
+
+        <h1 className="title">
+          영상을 텍스트로 변환해서 쉽게 정리해요!
+          <br />
+          <span>영상 요약 & 정리 솔루션 서비스</span>
+        </h1>
+      </div>
+
+      <div className="service-content">
+        {serviceList.map((service) => (
+          <div key={service.id} className="service-item">
+            <img src="" alt="service-item" />
+
+            <h1>{service.title}</h1>
+
+            <span>{service.description}</span>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+};
+
+export default GuidePage;

src/pages/Guide/index.ts

@@ -0,0 +1,4 @@
+export { default as GuideLayout } from './GuideLayout';
+
+export { default as GuidePage } from './GuidePage';
+export { default as GuideHomePage } from './GuideHomePage';

src/styles/GuidePage.ts

@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const Visual = styled.section`
+  padding: 60px 0 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  width: 100%;
+  height: 360px;
+  background-color: ${(props) => props.theme.color.gray500};
+
+  & > .box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    & > img.guide-logo {
+      width: 60px;
+      height: auto;
+    }
+
+    & > h1.title {
+      color: ${(props) => props.theme.color.white};
+      ${(props) => props.theme.typography.Header3};
+    }
+  }
+
+  & > .link-list {
+    display: flex;
+    gap: 16px;
+
+    & > li a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 120px;
+      height: 52px;
+      border-radius: 100px;
+      background-color: rgba(0, 0, 0, 0);
+      color: ${(props) => props.theme.color.white};
+      text-decoration: none;
+      transition: 0.1s;
+      cursor: pointer;
+      ${(props) => props.theme.typography.Body2};
+
+      &.active {
+        background-color: ${(props) => props.theme.color.green400};
+        color: ${(props) => props.theme.color.gray500};
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+export const Section = styled.section`
+  padding: 80px 0 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  & > .info-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+    & h2 {
+      ${(props) => props.theme.typography.Subheader2};
+    }
+
+    & h3 {
+      ${(props) => props.theme.typography.Body1};
+    }
+
+    & .subtitle {
+      color: ${(props) => props.theme.color.green700};
+    }
+
+    & .title {
+      ${(props) => props.theme.typography.Header3};
+      text-align: center;
+      font-weight: normal;
+
+      & > span {
+        font-weight: bold;
+      }
+    }
+  }
+
+  & > .service-content {
+    margin-top: 80px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+
+    & > .service-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 445px;
+      height: 560px;
+      background-color: ${(props) => props.theme.color.gray100};
+      border-radius: 20px;
+
+      & > h1 {
+        color: ${(props) => props.theme.color.gray500};
+        ${(props) => props.theme.typography.Header6};
+      }
+
+      & > span {
+        margin-top: 14px;
+        font-size: 20px;
+        line-height: 1.4;
+        color: ${(props) => props.theme.color.gray400};
+        text-align: center;
+      }
+    }
+  }
+`;

src/styles/theme.ts

@@ -92,6 +92,7 @@ const color = {
   gray300: '#BBBBBB',
   gray200: '#E8E8E8',
   gray100: '#F3F3F3',
+  green700: '#9BB700',
   green600: '#BCDB00',
   green500: '#DFFF00',
   green400: '#E9FF3F',