Merge pull request #92 from teamViNO/feature-071

Feature 071 : 가이드 페이지 이미지 넣기 완성
teamViNO · Feb 17, 2024 · bdeb651 · bdeb651
2 parents d800813 + 05bccea
commit bdeb651
Show file tree

Hide file tree

Showing 17 changed files with 458 additions and 16 deletions.
diff --git a/src/assets/guideprogress1.svg b/src/assets/guideprogress1.svg
diff --git a/src/assets/guideprogress2.svg b/src/assets/guideprogress2.svg
diff --git a/src/assets/guideprogress3.svg b/src/assets/guideprogress3.svg
diff --git a/src/assets/guidesummary.svg b/src/assets/guidesummary.svg
diff --git a/src/assets/servicelist1.svg b/src/assets/servicelist1.svg
diff --git a/src/assets/servicelist2.svg b/src/assets/servicelist2.svg
diff --git a/src/assets/servicelist3.svg b/src/assets/servicelist3.svg
diff --git a/src/assets/servicelist4.svg b/src/assets/servicelist4.svg
diff --git a/src/assets/stepA.svg b/src/assets/stepA.svg
diff --git a/src/assets/stepB.svg b/src/assets/stepB.svg
diff --git a/src/assets/stepC.svg b/src/assets/stepC.svg
diff --git a/src/assets/stepD.svg b/src/assets/stepD.svg
diff --git a/src/pages/Guide/GuideCategoryPage.tsx b/src/pages/Guide/GuideCategoryPage.tsx
@@ -1,6 +1,5 @@
 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';
@@ -21,8 +20,6 @@ const GuideCategoryPage = () => {
 
         <div className="feature-list">
           <div className="feature-item">
-            <img src="/assets/category-feature1.png" alt="feature" />
-
             <h1>상위 카테고리</h1>
 
             <span className="description">

diff --git a/src/pages/Guide/GuideHomePage.tsx b/src/pages/Guide/GuideHomePage.tsx
@@ -1,5 +1,4 @@
 import ErrorIcon from '@/assets/icons/error.svg?react';
-
 import { QuestionTip } from '@/components/Guide';
 
 import {
@@ -9,6 +8,10 @@ import {
   Section,
 } from '@/styles/GuidePage';
 
+import GuideProgress1 from '@/assets/guideprogress1.svg?react';
+import GuideProgress2 from '@/assets/guideprogress2.svg?react';
+import GuideProgress3 from '@/assets/guideprogress3.svg?react';
+
 const GuideHomePage = () => {
   return (
     <>
@@ -22,7 +25,7 @@ const GuideHomePage = () => {
             <span>영상을 텍스트로 변환</span>할 수 있어요
           </h1>
         </div>
-
+        
         <GuideHome>
           <div className="item">
             <img src="/assets/home-guide1.png" alt="guide-image" width={446} />
@@ -97,17 +100,17 @@ const GuideHomePage = () => {
 
             <QuestionHome>
               <div className="item">
-                <img src="" alt="question-tip" />
+                <GuideProgress1 width={205}/>
                 <span>진행중</span>
               </div>
 
               <div className="item">
-                <img src="" alt="question-tip" />
+                <GuideProgress2 width={205}/>
                 <span>진행 완료</span>
               </div>
 
               <div className="item">
-                <img src="" alt="question-tip" />
+                <GuideProgress3 width={205}/>
                 <span>진행 오류</span>
               </div>
             </QuestionHome>

diff --git a/src/pages/Guide/GuidePage.tsx b/src/pages/Guide/GuidePage.tsx
@@ -1,10 +1,13 @@
 import { Section } from '@/styles/GuidePage';
-
+import ServiceList1 from '@/assets/servicelist1.svg?react'
+import ServiceList2 from '@/assets/servicelist2.svg?react'
+import ServiceList3 from '@/assets/servicelist3.svg?react'
+import ServiceList4 from '@/assets/servicelist4.svg?react'
 const GuidePage = () => {
   const serviceList = [
     {
       id: 'SIMPLE',
-      image: '',
+      image: ServiceList1,
       title: '한 눈에 읽는 영상',
       description: (
         <>
@@ -15,7 +18,7 @@ const GuidePage = () => {
     },
     {
       id: 'INSIGHT',
-      image: '',
+      image: ServiceList2,
       title: '쉽게 남기는 인사이트',
       description: (
         <>
@@ -27,7 +30,7 @@ const GuidePage = () => {
     },
     {
       id: 'SEARCH',
-      image: '',
+      image: ServiceList3,
       title: '다시 읽고 싶다면 간단하게 검색',
       description: (
         <>
@@ -39,7 +42,7 @@ const GuidePage = () => {
     },
     {
       id: 'CATEGORY',
-      image: '',
+      image: ServiceList4,
       title: '내용별 카테고리 정리',
       description: (
         <>
@@ -68,7 +71,7 @@ const GuidePage = () => {
       <div className="service-content">
         {serviceList.map((service) => (
           <div key={service.id} className="service-item">
-            <img src="" alt="service-item" />
+            <service.image/>
 
             <h1>{service.title}</h1>