Feature 071

src/App.tsx

@@ -1,12 +1,21 @@
-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,
+  GuideSummaryPage,
+  GuideCategoryPage,
+  GuideSearchPage,
+} from '@/pages/Guide';
 import CategoryPage from '@/pages/CategoryPage';
 import FindEmailPage from '@/pages/FindEmailPage';
 import FindPasswordPage from '@/pages/FindPasswordPage';
@@ -22,19 +31,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 +85,14 @@ const App = () => {
               </>
             )}
 
+            <Route path="/guide" element={<GuideLayout />}>
+              <Route path="/guide/home" element={<GuideHomePage />} />
+              <Route path="/guide/summary" element={<GuideSummaryPage />} />
+              <Route path="/guide/category" element={<GuideCategoryPage />} />
+              <Route path="/guide/search" element={<GuideSearchPage />} />
+              <Route path="/guide" element={<GuidePage />} />
+            </Route>
+
             <Route path="/summary/:videoId" element={<SummaryPage />} />
             <Route path="/" element={<HomePage />} />
           </Route>

src/components/Home/InsightVideos.tsx

@@ -60,7 +60,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
   }, [userToken]);
 
   return (
-    <InsightVideosContainer userToken={userToken}>
+    <InsightVideosContainer>
       <div className="insight-container">
         <div className="text-container">
           <h2 className="insight-title">이런 인사이트는 어때요?</h2>

src/components/layout/Layout.tsx

@@ -13,18 +13,20 @@ const Layout = () => {
   const isSideBarOpen = useRecoilValue(isSideBarOpenState);
 
   const isShowFooter = useMemo(
-    () => ['/'].includes(pathname) || /^\/category/g.test(pathname),
+    () => /^(\/|\/category|\/guide)/g.test(pathname),
     [pathname],
   );
 
   return (
     <>
       <Header />
 
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', width: '100vw' }}>
         {isSideBarOpen && <SideBar />}
 
-        <Outlet />
+        <div style={{ flex: '1 1 auto' }}>
+          <Outlet />
+        </div>
       </div>
 
       {isShowFooter && <Footer />}

src/components/layout/footer/Footer.tsx

@@ -3,13 +3,10 @@ import AboutViNO from './AboutViNO';
 import SendEmail from './SendEmail';
 
 import FooterLogo from '@/assets/logo-footer.png';
-import { isSideBarOpenState } from '@/stores/ui';
-import { useRecoilValue } from 'recoil';
 
 const Footer = () => {
-  const isSideBarOpen = useRecoilValue(isSideBarOpenState);
   return (
-    <FooterStyle.Container width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}>
+    <FooterStyle.Container>
       <img src={FooterLogo} alt="Footer 로고 이미지" />
       <SendEmail />
       <AboutViNO />

src/components/layout/header/index.tsx

@@ -22,15 +22,13 @@ const Header = () => {
   const [isSideBarOpen, setIsSideBarOpen] = useRecoilState(isSideBarOpenState);
   const [isDarkSection, setIsDarkSection] = useState(false);
 
-  const isDark = ['/'].includes(pathname) && isDarkSection;
-
   const observer = useMemo(() => {
     return new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          const { height, y } = entry.boundingClientRect;
+          const { isIntersecting } = entry;
 
-          setIsDarkSection(!(y < height * -0.9));
+          setIsDarkSection(isIntersecting);
         });
       },
       { threshold: 0.1 },
@@ -44,7 +42,11 @@ const Header = () => {
   useEffect(() => {
     const darkSectionList = document.querySelectorAll('.dark-section') || [];
 
-    darkSectionList.forEach((el) => observer.observe(el));
+    if (darkSectionList.length) {
+      darkSectionList.forEach((el) => observer.observe(el));
+    } else {
+      setIsDarkSection(false);
+    }
 
     return () => {
       observer.disconnect();
@@ -54,12 +56,11 @@ const Header = () => {
   return (
     <HeaderStyle.Container
       id="header"
-      color={isDark ? 'gray500' : 'white'}
-      width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}
+      color={isDarkSection ? 'gray500' : 'white'}
     >
       <HeaderStyle.Area>
         <HeaderStyle.Button
-          color={isDark ? 'white' : 'gray500'}
+          color={isDarkSection ? 'white' : 'gray500'}
           onClick={toggleSideBarState}
         >
           {isSideBarOpen ? (
@@ -70,7 +71,10 @@ const Header = () => {
         </HeaderStyle.Button>
 
         <Link to="/">
-          <img src={isDark ? LightLogoImage : DarkLogoImage} alt="Logo" />
+          <img
+            src={isDarkSection ? LightLogoImage : DarkLogoImage}
+            alt="Logo"
+          />
         </Link>
       </HeaderStyle.Area>
 
@@ -79,20 +83,20 @@ const Header = () => {
           <>
             <HeaderStyle.IconLink
               to="/search"
-              color={isDark ? 'white' : 'gray500'}
+              color={isDarkSection ? 'white' : 'gray500'}
             >
               <SearchIcon width={28} height={28} />
             </HeaderStyle.IconLink>
 
-            <Alarm isDark={isDark} />
+            <Alarm isDark={isDarkSection} />
 
             <Profile />
           </>
         ) : (
           <HeaderStyle.LoginButton
             to="/sign-in"
-            background={isDark ? 'green400' : 'gray500'}
-            text={isDark ? 'gray500' : 'white'}
+            background={isDarkSection ? 'green400' : 'gray500'}
+            text={isDarkSection ? 'gray500' : 'white'}
           >
             로그인/회원가입
           </HeaderStyle.LoginButton>

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/GuideCategoryPage.tsx

@@ -0,0 +1,21 @@
+import { Section } from '@/styles/GuidePage';
+
+const GuideCategoryPage = () => {
+  return (
+    <>
+      <Section>
+        <div className="info-box">
+          <h2 className="subtitle">카테고리 정리</h2>
+
+          <h1 className="title">
+            변환된 영상들을
+            <br />
+            <span>나의 편의에 맞게 분류</span>할 수 있어요
+          </h1>
+        </div>
+      </Section>
+    </>
+  );
+};
+
+export default GuideCategoryPage;

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;