Merge pull request #83 from teamViNO/feature-071

Feature 071

src/components/Guide/QuestionTip.tsx

@@ -0,0 +1,25 @@
+type Props = {
+  image: string;
+  title: string | JSX.Element | JSX.Element[];
+  description: string | JSX.Element | JSX.Element[];
+  position: string;
+};
+
+const QuestionTip = ({ image, title, description, position }: Props) => {
+  return (
+    <div className="question-tip">
+      <img src={image} alt="question-tip" />
+
+      <div className="question-tip-content">
+        <div>
+          <h1>{title}</h1>
+          <span className="description">{description}</span>
+        </div>
+
+        <span className="position">{position}</span>
+      </div>
+    </div>
+  );
+};
+
+export default QuestionTip;

src/components/Guide/index.ts

@@ -0,0 +1 @@
+export { default as QuestionTip } from './QuestionTip';

src/components/layout/Layout.tsx

@@ -13,7 +13,7 @@ const Layout = () => {
   const isSideBarOpen = useRecoilValue(isSideBarOpenState);
 
   const isShowFooter = useMemo(
-    () => /^(\/|\/category|\/guide)/g.test(pathname),
+    () => pathname === '/' || /^(\/category)/g.test(pathname),
     [pathname],
   );
 

src/pages/Guide/GuideCategoryPage.tsx

@@ -1,4 +1,9 @@
-import { Section } from '@/styles/GuidePage';
+import ErrorIcon from '@/assets/icons/error.svg?react';
+import InfoIcon from '@/assets/icons/info-icon.svg?react';
+
+import { QuestionTip } from '@/components/Guide';
+
+import { CategoryGuide, QuestionSection, Section } from '@/styles/GuidePage';
 
 const GuideCategoryPage = () => {
   return (
@@ -13,7 +18,136 @@ const GuideCategoryPage = () => {
             <span>나의 편의에 맞게 분류</span>할 수 있어요
           </h1>
         </div>
+
+        <div className="feature-list">
+          <div className="feature-item">
+            <img src="/assets/category-feature1.png" alt="feature" />
+
+            <h1>상위 카테고리</h1>
+
+            <span className="description">
+              상위 카테고리로 자주 찾는 관심 분야를 넣는 건 어떨까요?
+            </span>
+
+            <div className="info">
+              <InfoIcon width={24} height={24} />
+
+              <span>
+                상위 카테고리를 하위 카테고리로 이동 시킬 시<br />
+                카테고리 구분 없이 콘텐츠만 이동됩니다!
+              </span>
+            </div>
+          </div>
+
+          <div className="feature-item">
+            <img src="/assets/category-feature2.png" alt="feature" />
+
+            <h1>하위 카테고리</h1>
+
+            <span className="description">
+              세분화된 내용별로 하위 카테고리로 분류하여 콘텐츠를 정리해요!
+            </span>
+          </div>
+        </div>
+
+        <CategoryGuide>
+          <img src="/assets/category-guide.png" alt="category-guide" />
+
+          <span className="description">
+            [기타] 폴더에는 어느 하위 카테고리에도 포함 되지 않은 콘텐츠들이
+            담겨있어요!
+          </span>
+
+          <span className="error">
+            <ErrorIcon width={24} height={24} />
+            [기타] 폴더는 임의로 삭제할 수 없어요
+          </span>
+        </CategoryGuide>
       </Section>
+
+      <QuestionSection>
+        <div className="question-box">
+          <h1>
+            <strong>
+              Q1
+              <br />
+              상위 카테고리를
+            </strong>
+            <br />
+            추가하고 싶어요!
+          </h1>
+
+          <div className="question-tips">
+            <QuestionTip
+              image="/assets/category-question1.png"
+              title="[+] 버튼을 통해 상위 카테고리 생성"
+              description={
+                <>
+                  + 버튼을 클릭하면 상위 카테고리를 생성할 수 있어요.
+                  <br />
+                  팝업창을 통해 카테고리명도 설정해요.
+                </>
+              }
+              position="좌측 메뉴바 > +"
+            />
+          </div>
+        </div>
+
+        <div className="question-box">
+          <h1>
+            <strong>
+              Q2
+              <br />
+              하위 카테고리를
+            </strong>
+            <br />
+            추가하고 싶어요!
+          </h1>
+
+          <div className="question-tips">
+            <QuestionTip
+              image="/assets/category-question2.png"
+              title="[더보기] 버튼을 통해 하위 카테고리 생성"
+              description={
+                <>
+                  [더보기] 버튼을 클릭해 하위 카테고리를 생성해요.
+                  <br />
+                  팝업창을 통해 카테고리명도 설정할 수 있어요.
+                </>
+              }
+              position="좌측 메뉴바 > 더보기"
+            />
+          </div>
+        </div>
+
+        <div className="question-box">
+          <h1>
+            <strong>
+              Q3
+              <br />
+              쉽게 영상의 카테고리 위치를
+            </strong>
+            <br />
+            변경하고 싶어요!
+          </h1>
+
+          <div className="question-tips">
+            <QuestionTip
+              image="/assets/category-question3-1.png"
+              title="카드에서 바로 카테고리 설정"
+              description="홈 화면에서 간편하게 카테고리를 지정을 할 수 있어요"
+              position="메인 홈 > 영상 카드 > 카테고리 변경 드롭 다운"
+            />
+
+            <QuestionTip
+              image="/assets/category-question3-2.png"
+              title="요약 상세 페이지에서 바로 카테고리 설정"
+              description="변환된 콘텐츠 페이지에서도 바로 카테고리 지정이 가능해요"
+              position="요약 상세 페이지 > 카테고리 변경 드롭 다운"
+            />
+          </div>
+        </div>
+      </QuestionSection>
     </>
   );
 };

src/pages/Guide/GuideHomePage.tsx

@@ -1,4 +1,13 @@
-import { Section } from '@/styles/GuidePage';
+import ErrorIcon from '@/assets/icons/error.svg?react';
+
+import { QuestionTip } from '@/components/Guide';
+
+import {
+  GuideHome,
+  QuestionHome,
+  QuestionSection,
+  Section,
+} from '@/styles/GuidePage';
 
 const GuideHomePage = () => {
   return (
@@ -13,7 +22,128 @@ const GuideHomePage = () => {
             <span>영상을 텍스트로 변환</span>할 수 있어요
           </h1>
         </div>
+
+        <GuideHome>
+          <div className="item">
+            <img src="/assets/home-guide1.png" alt="guide-image" width={446} />
+
+            <div className="content">
+              <h1>영상을 텍스트로 한 번에 변환</h1>
+
+              <div className="description">
+                <span>
+                  1. 링크 복붙 한 번으로 유튜브 영상을 텍스트로 변환해요
+                </span>
+                <span className="error" style={{ paddingLeft: 26 }}>
+                  <ErrorIcon width={24} height={24} />
+                  YouTube 영상의 링크만 변환 가능
+                </span>
+                <span>
+                  2. 링크를 삽입하고 <button>변환하기</button> 를 누르면 현재
+                  진행 상황을 확인할 수 있어요
+                </span>
+                <span>
+                  3. 진행 바에 마우스를 올리면 정확한 진행율을 확인하고 변환을
+                  멈출 수도 있어요
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="item">
+            <img src="/assets/home-guide2.png" alt="guide-image" width={446} />
+
+            <div className="content">
+              <h1>이런 인사이트는 어때요?</h1>
+
+              <div className="description">
+                <ul>
+                  <li>
+                    개인화된 추천으로 사용자가 자주 만난 키워드를 가진
+                    <br />
+                    맞춤 영상들을 소개해요
+                  </li>
+                  <li>
+                    나와 비슷한 관심사를 가진 사람들에게 영감을 준 콘텐츠들도
+                    <br />
+                    만날 수 있어요
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </GuideHome>
       </Section>
+
+      <QuestionSection>
+        <div className="question-box">
+          <h1>
+            <strong>
+              Q1
+              <br />
+              얼마만큼 변환 되었는지
+            </strong>
+            <br />
+            빠르게 알고 싶어요!
+          </h1>
+
+          <div className="question-tips">
+            <QuestionTip
+              image="/assets/home-question1.png"
+              title="알림으로 언제든지 변환 진행율 파악"
+              description="상단 바에 있는 [읽지 않은 알림]에서 어느 페이지에서든 실시간으로 영상변환 진행율을 파악할 수 있어요"
+              position="상단바 > 읽지 않은 알림"
+            />
+
+            <QuestionHome>
+              <div className="item">
+                <img src="" alt="question-tip" />
+                <span>진행중</span>
+              </div>
+
+              <div className="item">
+                <img src="" alt="question-tip" />
+                <span>진행 완료</span>
+              </div>
+
+              <div className="item">
+                <img src="" alt="question-tip" />
+                <span>진행 오류</span>
+              </div>
+            </QuestionHome>
+          </div>
+        </div>
+
+        <div className="question-box">
+          <h1>
+            <strong>
+              Q2
+              <br />
+              다른 일을 하는 동시에
+            </strong>
+            <br />
+            영상을 변환하고 싶어요!
+          </h1>
+
+          <div className="question-tips">
+            <QuestionTip
+              image="/assets/home-question2.png"
+              title="사이드 바에서 영상 변환"
+              description={
+                <>
+                  사이드 바에 있는 [영상 변환하기] 영역에서 다른 작업을 하는
+                  동시에 영상을 변환하고, 진행율을 확인할 수 있어요
+                  <span className="error">
+                    <ErrorIcon width={24} height={24} />
+                    단, 영상 2개를 동시에 변환하는 것은 불가능해요!
+                  </span>
+                </>
+              }
+              position="좌측 메뉴바 > 영상 변환하기"
+            />
+          </div>
+        </div>
+      </QuestionSection>
     </>
   );
 };