From c4920a962aaeb07049cdde4538358296ce49004c Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 01:11:13 +0900
Subject: [PATCH 1/9] =?UTF-8?q?[#31]=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/result/result.module.css      |  4 +-
 app/(route)/main/page.tsx                     | 48 ++++++++++++++++---
 .../card/toolCard/toolCard.module.css         |  1 +
 app/_constants/toolcard.ts                    | 21 ++++++++
 next.config.mjs                               |  9 +++-
 5 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 app/_constants/toolcard.ts

diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
index d742453..3c9c475 100644
--- a/app/(route)/indicators/_components/result/result.module.css
+++ b/app/(route)/indicators/_components/result/result.module.css
@@ -46,7 +46,8 @@
   font-style: normal;
   font-weight: 300;
   line-height: normal;
-  
+}
+
 .title {
   font-size: 1.2rem;
   font-weight: 700;
@@ -55,5 +56,4 @@
 .subTitle {
   font-size: 0.9rem;
   font-weight: 400;
-
 }
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index ffc9c58..b05931f 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -5,9 +5,27 @@ import Nav from '../../_common/nav/index'
 import Title from '../../_common/text/title'
 import Search from '../../_components/search'
 import S from './page.module.css'
+import { useQuery } from '@tanstack/react-query'
+import axios, { AxiosResponse } from 'axios'
+import { Data, Tool, Root } from '../../_constants/toolcard'
+import ToolCard from '@/app/_components/card/toolCard'
+import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['getTools'],
+    queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
+  })
+
+  console.log(data)
+
+  if (isFetching) {
+    return <div>...loading</div>
+  }
+
+  const resData = data?.data.data.tool
+
   return (
     <main className={S.wrapper}>
       <Nav />
@@ -19,19 +37,35 @@ function Main() {
           <Title title="인기 많은 툴" />
         </div>
         <div className={S.toolCardWrapper}>
-          {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
+          {resData?.map((data: Tool, index: number) => {
+            return (
+              <ToolCard
+                title={data?.title || ''}
+                subTitle={data?.subTitle || ''}
+                description={data?.description || ''}
+                toolImg={data?.toolImg || ''}
+                toolId={index}
+                key={index}
+              />
+            )
+          })}
         </div>
         <div className={S.rowWrapper}>
           <Title title="검증 툴 리스트" />
           <Link href="/list">자세히 보기</Link>
         </div>
         <div className={S.keyWordCardWrapper}>
-          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
+          {resData?.map((data: Tool, index) => {
+            return (
+              <KeyWordTool
+                title={data?.title || ''}
+                subTitle={data?.subTitle || ''}
+                toolImg={data?.toolImg || ''}
+                key={index}
+                toolId={index}
+              />
+            )
+          })}
         </div>
       </div>
     </main>
diff --git a/app/_components/card/toolCard/toolCard.module.css b/app/_components/card/toolCard/toolCard.module.css
index cfb5f88..e3df775 100644
--- a/app/_components/card/toolCard/toolCard.module.css
+++ b/app/_components/card/toolCard/toolCard.module.css
@@ -30,6 +30,7 @@
   border-radius: 50%;
   overflow: hidden;
   margin-right: 15px;
+  display: flex;
 }
 
 .title {
diff --git a/app/_constants/toolcard.ts b/app/_constants/toolcard.ts
new file mode 100644
index 0000000..eacbae3
--- /dev/null
+++ b/app/_constants/toolcard.ts
@@ -0,0 +1,21 @@
+export interface Root {
+  data: Data
+  total: number
+}
+
+export interface Data {
+  tool: Tool[]
+}
+
+export interface Tool {
+  toolImg: string
+  title: string
+  subTitle: string
+  createdBy: string
+  description: string
+  company: string[]
+  keyword: string[]
+  content: string
+  verificationMethod: string[]
+  exampleContent: string[]
+}
diff --git a/next.config.mjs b/next.config.mjs
index 1d61478..b249cc2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,11 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: [
+      'github.com',
+      'stlab-storage-main.s3.ap-northeast-2.amazonaws.com',
+    ], // 이미지 호스트를 여기에 추가합니다.
+  },
+}
 
 export default nextConfig

From 07a93d75db2c2bef7757c2e51216d4719ac7f548 Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 01:27:01 +0900
Subject: [PATCH 2/9] =?UTF-8?q?[#31]=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/main/page.module.css |  3 +++
 app/(route)/main/page.tsx        | 37 ++++++++++++++++++++------------
 package-lock.json                | 21 +++++++++++++++++-
 package.json                     |  3 ++-
 4 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/app/(route)/main/page.module.css b/app/(route)/main/page.module.css
index e6c799d..2ecb47b 100644
--- a/app/(route)/main/page.module.css
+++ b/app/(route)/main/page.module.css
@@ -48,3 +48,6 @@
   width: 100%;
   padding-bottom: 300px;
 }
+.slide {
+  width: 390px;
+}
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index b05931f..ee7f2e4 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -10,6 +10,8 @@ import axios, { AxiosResponse } from 'axios'
 import { Data, Tool, Root } from '../../_constants/toolcard'
 import ToolCard from '@/app/_components/card/toolCard'
 import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
@@ -18,8 +20,6 @@ function Main() {
     queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
   })
 
-  console.log(data)
-
   if (isFetching) {
     return <div>...loading</div>
   }
@@ -37,18 +37,27 @@ function Main() {
           <Title title="인기 많은 툴" />
         </div>
         <div className={S.toolCardWrapper}>
-          {resData?.map((data: Tool, index: number) => {
-            return (
-              <ToolCard
-                title={data?.title || ''}
-                subTitle={data?.subTitle || ''}
-                description={data?.description || ''}
-                toolImg={data?.toolImg || ''}
-                toolId={index}
-                key={index}
-              />
-            )
-          })}
+          <Swiper
+            spaceBetween={20}
+            slidesPerView={'auto'}
+            onSlideChange={() => console.log('slide change')}
+            onSwiper={(swiper) => console.log(swiper)}
+          >
+            {resData?.map((data: Tool, index: number) => {
+              return (
+                <SwiperSlide style={{ width: '390px' }}>
+                  <ToolCard
+                    title={data?.title || ''}
+                    subTitle={data?.subTitle || ''}
+                    description={data?.description || ''}
+                    toolImg={data?.toolImg || ''}
+                    toolId={index}
+                    key={index}
+                  />
+                </SwiperSlide>
+              )
+            })}
+          </Swiper>
         </div>
         <div className={S.rowWrapper}>
           <Title title="검증 툴 리스트" />
diff --git a/package-lock.json b/package-lock.json
index 563d72b..86e4b9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "react-hook-form": "^7.51.2",
         "react-icons": "^5.0.1",
         "recoil": "^0.7.7",
-        "sharp": "^0.33.3"
+        "sharp": "^0.33.3",
+        "swiper": "^11.1.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -5045,6 +5046,24 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz",
+      "integrity": "sha512-Pm78CgU7Wvg+w/MgIL/1NwMSLgx0XqFof25EnVyX8iZFCYJv5CppH7LHkBj43qW2k5Cp3Iz7FcdBxrox7XX2AQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
diff --git a/package.json b/package.json
index b180fc8..3263272 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
     "recoil": "^0.7.7",
-    "sharp": "^0.33.3"
+    "sharp": "^0.33.3",
+    "swiper": "^11.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

From a2382c61de10c060d148e459d97ea275dc007c8d Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 02:00:18 +0900
Subject: [PATCH 3/9] =?UTF-8?q?[#31]=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/main/page.tsx                     |  5 +-
 .../card/toolCard/keyWordToolCard/index.tsx   | 10 +++-
 .../keyWordToolCard.module.css                | 47 ++++++++++++++++++-
 .../card/toolCard/toolCard.module.css         |  2 +-
 4 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index ee7f2e4..55b6ee6 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -45,14 +45,14 @@ function Main() {
           >
             {resData?.map((data: Tool, index: number) => {
               return (
-                <SwiperSlide style={{ width: '390px' }}>
+                <SwiperSlide style={{ width: '390px' }} key={index}>
                   <ToolCard
                     title={data?.title || ''}
                     subTitle={data?.subTitle || ''}
                     description={data?.description || ''}
                     toolImg={data?.toolImg || ''}
                     toolId={index}
-                    key={index}
+                    company={data?.company}
                   />
                 </SwiperSlide>
               )
@@ -72,6 +72,7 @@ function Main() {
                 toolImg={data?.toolImg || ''}
                 key={index}
                 toolId={index}
+                keyword={data.keyword}
               />
             )
           })}
diff --git a/app/_components/card/toolCard/keyWordToolCard/index.tsx b/app/_components/card/toolCard/keyWordToolCard/index.tsx
index 9131eeb..44be7fc 100644
--- a/app/_components/card/toolCard/keyWordToolCard/index.tsx
+++ b/app/_components/card/toolCard/keyWordToolCard/index.tsx
@@ -40,7 +40,15 @@ function KeyWordTool({
         </div>
 
         <div className={S.marginWrapper}>
-          <div className={CommonS.companyWrapper}>{keyword}</div>
+          <div className={CommonS.companyWrapper}>
+            {keyword?.map((value, index) => {
+              return (
+                <div key={index} className={S.keyword}>
+                  {value}
+                </div>
+              )
+            })}
+          </div>
         </div>
       </motion.div>
     </Link>
diff --git a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
index ec6f108..fdd9d2a 100644
--- a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
+++ b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
@@ -23,7 +23,52 @@
   padding: 5px 2px;
   font-weight: 500;
 }
-
 .marginWrapper {
   margin-top: 13px;
 }
+
+.keyword {
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.keyword:nth-child(even) {
+  background: #40607c;
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.keyword:nth-child(odd) {
+  background: #6c76f4;
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
diff --git a/app/_components/card/toolCard/toolCard.module.css b/app/_components/card/toolCard/toolCard.module.css
index e3df775..9861b09 100644
--- a/app/_components/card/toolCard/toolCard.module.css
+++ b/app/_components/card/toolCard/toolCard.module.css
@@ -60,7 +60,7 @@
 
 .companyWrapper {
   display: flex;
-  flex-direction: row;
+  align-items: center;
   gap: 4px;
   width: 100%;
   overflow: auto;

From e6095ca7ddfd2b12c8695716dfa10c02612e6319 Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 02:51:15 +0900
Subject: [PATCH 4/9] =?UTF-8?q?[#31]=ED=88=B4=EB=94=94=ED=85=8C=EC=9D=BC?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20api=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/main/page.tsx                |  2 +-
 app/(route)/toolDetail/[toolId]/page.tsx | 48 +++++++++++++++++-------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index 55b6ee6..074100b 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -7,7 +7,7 @@ import Search from '../../_components/search'
 import S from './page.module.css'
 import { useQuery } from '@tanstack/react-query'
 import axios, { AxiosResponse } from 'axios'
-import { Data, Tool, Root } from '../../_constants/toolcard'
+import { Tool, Root } from '../../_constants/toolcard'
 import ToolCard from '@/app/_components/card/toolCard'
 import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
 import { Swiper, SwiperSlide } from 'swiper/react'
diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
index 79d053c..f684df5 100644
--- a/app/(route)/toolDetail/[toolId]/page.tsx
+++ b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -5,26 +5,43 @@ import Title from '@/app/_common/text/title'
 import { useState } from 'react'
 import S from './toolDetail.module.css'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query'
+import axios, { AxiosResponse } from 'axios'
+import { Tool, Root } from '../../../_constants/toolcard'
+import Image from 'next/image'
 
 //TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
 //TODO: 주석 처리 실제 데이터로 변경하기
 function ToolDetail() {
   const [clickBtn, setClickBtn] = useState(false)
 
+  const params = useParams()
+  const toolId = params.toolId as string
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['toolDetail'],
+    queryFn: () => axios.get(`http://222.121.148.192/api/toolDetails`),
+  })
+  if (isFetching) {
+    return <div>...loading</div>
+  }
+
+  const resData = data?.data.data.tool[Number(toolId)]
+
   return (
     <div className={S.wrapper}>
       <Nav />
       <div className={S.introWrapper}>
         <div className={S.imgWrapper}>
-          {/* <Image
-            src={toolImg}
+          <Image
+            src={resData?.toolImg || ''}
             alt="아이디어 툴 이미지"
             width={80}
             height={80}
-          /> */}
+          />
         </div>
-        {/* <Title title={title} />
-        <p> {createdBy}</p> */}
+        <Title title={resData?.title || ''} />
+        <p> {resData?.createdBy}</p>
       </div>
 
       <div className={S.contentWrapper}>
@@ -47,16 +64,19 @@ function ToolDetail() {
           <>
             <div className={S.marginWrapper}>
               <Title title="개요" />
-              {/* <p>{content}</p> */}
+              <p>{resData?.content}</p>
             </div>
             <div className={S.marginWrapper}>
               <Title title="검증 방식" />
               <ul>
-                {/* {verificationMethod.map((method, index) => (
-              <li className={S.li}>
-                  <div className={S.circle}></div> {method}
-                </li>
-            ))} */}
+                {resData?.verificationMethod.map((method, index) => {
+                  return (
+                    <li className={S.li} key={index}>
+                      <div className={S.circle}></div>
+                      {method}
+                    </li>
+                  )
+                })}
               </ul>
             </div>
           </>
@@ -65,14 +85,14 @@ function ToolDetail() {
             <Title title="실제 사례" />
 
             <div className={S.columnWrapper}>
-              {/* <Image
-                src={toolImg}
+              <Image
+                src={resData?.toolImg || ''}
                 alt="아이디어 툴 이미지"
                 width={60}
                 height={60}
                 placeholder="blur"
                 blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="
-              /> */}
+              />
             </div>
           </div>
         )}

From 84e0717af2eb3b4b7287809646a3639e53612dc4 Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 03:38:17 +0900
Subject: [PATCH 5/9] =?UTF-8?q?[#31]=20=EB=94=94=ED=85=8C=EC=9D=BC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/toolDetail/[toolId]/page.tsx      | 31 +++++++-----
 .../toolDetail/[toolId]/toolDetail.module.css | 47 +++++++++++++++++++
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
index f684df5..83983d2 100644
--- a/app/(route)/toolDetail/[toolId]/page.tsx
+++ b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import axios, { AxiosResponse } from 'axios'
-import { Tool, Root } from '../../../_constants/toolcard'
+import { Root } from '../../../_constants/toolcard'
 import Image from 'next/image'
 
 //TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
@@ -73,7 +73,7 @@ function ToolDetail() {
                   return (
                     <li className={S.li} key={index}>
                       <div className={S.circle}></div>
-                      {method}
+                      <div className={S.method}>{method}</div>
                     </li>
                   )
                 })}
@@ -85,21 +85,30 @@ function ToolDetail() {
             <Title title="실제 사례" />
 
             <div className={S.columnWrapper}>
-              <Image
-                src={resData?.toolImg || ''}
-                alt="아이디어 툴 이미지"
-                width={60}
-                height={60}
-                placeholder="blur"
-                blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="
-              />
+              {resData?.company.map((company, index) => {
+                return (
+                  <div className={S.examplewrap} key={index}>
+                    <div className={S.img}>
+                      <Image
+                        src={company || ''}
+                        alt="아이디어 툴 이미지"
+                        width={120}
+                        height={40}
+                      />
+                    </div>
+                    <div className={S.examplecontent}>
+                      {resData.exampleContent[index]}
+                    </div>
+                  </div>
+                )
+              })}
             </div>
           </div>
         )}
       </div>
 
       <Link href={`/verification/ibulsin?step=1`}>
-        <div>검증하기</div>
+        <div className={S.verification}>검증하기</div>
       </Link>
     </div>
   )
diff --git a/app/(route)/toolDetail/[toolId]/toolDetail.module.css b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
index be7ac0d..8a25a08 100644
--- a/app/(route)/toolDetail/[toolId]/toolDetail.module.css
+++ b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
@@ -54,6 +54,10 @@
   overflow: hidden;
 }
 
+.method {
+  width: 340px;
+}
+
 .contentWrapper {
   width: 420px;
   padding: 25px 30px;
@@ -113,3 +117,46 @@
   flex-direction: column;
   gap: 20px;
 }
+.examplewrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.examplecontent {
+  color: #000;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.img {
+  width: 140px;
+  height: 50px;
+  display: flex;
+}
+.verification {
+  border-radius: 15px;
+  background: #6c76f4;
+  display: flex;
+  width: 365px;
+  height: 60px;
+  padding: 13px 8px;
+  align-items: flex-start;
+  gap: 4px;
+  flex-shrink: 0;
+  color: #fff;
+
+  text-align: center;
+  font-family: 'Noto Sans';
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+  bottom: 10px;
+}

From 70bf37db4209d4ecfff057d3fd0164acdca84918 Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 15:31:02 +0900
Subject: [PATCH 6/9] =?UTF-8?q?[#31]=20=ED=88=B4=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../list/_components/nav/LIstCompo.tsx        | 28 +++++++++++++++++++
 app/(route)/list/page.tsx                     | 17 ++++-------
 2 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 app/(route)/list/_components/nav/LIstCompo.tsx

diff --git a/app/(route)/list/_components/nav/LIstCompo.tsx b/app/(route)/list/_components/nav/LIstCompo.tsx
new file mode 100644
index 0000000..468b0d1
--- /dev/null
+++ b/app/(route)/list/_components/nav/LIstCompo.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import S from '../../list.module.css'
+import axios, { AxiosResponse } from 'axios'
+import { useQuery } from '@tanstack/react-query'
+import { Root, Tool } from '@/app/_constants/toolcard'
+import ToolCard from '@/app/_components/card/toolCard'
+
+function ListCompo() {
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['getToolList'],
+    queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
+  })
+
+  const resData = data?.data.data.tool
+
+  return (
+    <div>
+      <div className={S.wrapper}>
+        {resData?.map((data: Tool, index) => {
+          return <ToolCard title="" subTitle="" description="" toolImg="" />
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default ListCompo
diff --git a/app/(route)/list/page.tsx b/app/(route)/list/page.tsx
index c4db493..ef548b6 100644
--- a/app/(route)/list/page.tsx
+++ b/app/(route)/list/page.tsx
@@ -1,21 +1,14 @@
 import Nav from './_components/nav'
-import S from './list.module.css'
+import ListCompo from './_components/nav/LIstCompo'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function List() {
   return (
-    <>
+    <div>
       <Nav title="검증 툴 리스트" />
-      <div className={S.wrapper}>
-        {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
-        <span>데이터를 모두 불러왔습니다.</span>
-      </div>
-    </>
+      <ListCompo></ListCompo>
+      <span>데이터를 모두 불러왔습니다.</span>
+    </div>
   )
 }
 

From aa528cb00b87b028a69c76a7ea9a770dafb8755e Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 15:36:01 +0900
Subject: [PATCH 7/9] =?UTF-8?q?[#31]=20=ED=88=B4=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/list/_components/nav/LIstCompo.tsx | 12 +++++++++++-
 app/(route)/list/page.tsx                      |  3 +--
 next.config.mjs                                |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/(route)/list/_components/nav/LIstCompo.tsx b/app/(route)/list/_components/nav/LIstCompo.tsx
index 468b0d1..3626e05 100644
--- a/app/(route)/list/_components/nav/LIstCompo.tsx
+++ b/app/(route)/list/_components/nav/LIstCompo.tsx
@@ -18,8 +18,18 @@ function ListCompo() {
     <div>
       <div className={S.wrapper}>
         {resData?.map((data: Tool, index) => {
-          return <ToolCard title="" subTitle="" description="" toolImg="" />
+          return (
+            <ToolCard
+              title={data?.title || ''}
+              subTitle={data?.subTitle || ''}
+              description={data?.description || ''}
+              toolImg={data?.toolImg || ''}
+              toolId={index}
+              company={data?.company}
+            />
+          )
         })}
+        <span>데이터를 모두 불러왔습니다.</span>
       </div>
     </div>
   )
diff --git a/app/(route)/list/page.tsx b/app/(route)/list/page.tsx
index ef548b6..8ea00f2 100644
--- a/app/(route)/list/page.tsx
+++ b/app/(route)/list/page.tsx
@@ -6,8 +6,7 @@ function List() {
   return (
     <div>
       <Nav title="검증 툴 리스트" />
-      <ListCompo></ListCompo>
-      <span>데이터를 모두 불러왔습니다.</span>
+      <ListCompo />
     </div>
   )
 }
diff --git a/next.config.mjs b/next.config.mjs
index b249cc2..f793614 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,6 +4,7 @@ const nextConfig = {
     domains: [
       'github.com',
       'stlab-storage-main.s3.ap-northeast-2.amazonaws.com',
+      'primus-storage-main.s3.ap-northeast-2.amazonaws.com',
     ], // 이미지 호스트를 여기에 추가합니다.
   },
 }

From bec2aa8708d2f425a32b041d13caf1479d79629d Mon Sep 17 00:00:00 2001
From: chaduhwan <enghks2973@naver.com>
Date: Mon, 8 Apr 2024 15:57:44 +0900
Subject: [PATCH 8/9] =?UTF-8?q?[fix]=20bulid=20eslint=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(route)/list/_components/nav/LIstCompo.tsx | 3 ++-
 app/(route)/onboard/_components/WatchWord.tsx  | 8 +++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/(route)/list/_components/nav/LIstCompo.tsx b/app/(route)/list/_components/nav/LIstCompo.tsx
index 3626e05..6d1ee50 100644
--- a/app/(route)/list/_components/nav/LIstCompo.tsx
+++ b/app/(route)/list/_components/nav/LIstCompo.tsx
@@ -7,7 +7,7 @@ import { Root, Tool } from '@/app/_constants/toolcard'
 import ToolCard from '@/app/_components/card/toolCard'
 
 function ListCompo() {
-  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+  const { data } = useQuery<AxiosResponse<Root>>({
     queryKey: ['getToolList'],
     queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
   })
@@ -26,6 +26,7 @@ function ListCompo() {
               toolImg={data?.toolImg || ''}
               toolId={index}
               company={data?.company}
+              key={index}
             />
           )
         })}
diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx
index 87672ee..174ad41 100644
--- a/app/(route)/onboard/_components/WatchWord.tsx
+++ b/app/(route)/onboard/_components/WatchWord.tsx
@@ -24,17 +24,15 @@ function WatchWord({
     return () => {
       animationRef.current?.removeEventListener('animationend', animationend)
     }
-  }, [])
+  }, [handleView]) // handleView를 의존성 배열에 추가
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      {
-        onAnimationEnd && onAnimationEnd()
-      }
+      onAnimationEnd && onAnimationEnd()
     }, 2000)
 
     return () => clearTimeout(timer)
-  }, [])
+  }, [onAnimationEnd]) // onAnimationEnd를 의존성 배열에 추가
 
   const handleAnimationEnd = () => {
     onAnimationEnd && onAnimationEnd()

From 13f9f47250bb069a24551b63670a24872158bcef Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 16:56:34 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                                |  1 +
 app/(route)/main/page.tsx                     | 14 +++----
 app/(route)/signin/_components/Login.tsx      |  2 +-
 .../keyWordToolCard.module.css                | 40 ++++---------------
 4 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 0469b97..8eb2b86 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -43,6 +43,7 @@
     "linebreak-style": "off",
     "no-use-before-define": "off",
     "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
     "import/prefer-default-export": "off",
     "jsx-a11y/label-has-associated-control": [
       2,
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
index 074100b..6c4b5ae 100644
--- a/app/(route)/main/page.tsx
+++ b/app/(route)/main/page.tsx
@@ -1,17 +1,17 @@
 'use client'
 
+import ToolCard from '@/app/_components/card/toolCard'
+import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
+import { useQuery } from '@tanstack/react-query'
+import axios, { AxiosResponse } from 'axios'
 import Link from 'next/link'
+import 'swiper/css'
+import { Swiper, SwiperSlide } from 'swiper/react'
 import Nav from '../../_common/nav/index'
 import Title from '../../_common/text/title'
 import Search from '../../_components/search'
+import { Root, Tool } from '../../_constants/toolcard'
 import S from './page.module.css'
-import { useQuery } from '@tanstack/react-query'
-import axios, { AxiosResponse } from 'axios'
-import { Tool, Root } from '../../_constants/toolcard'
-import ToolCard from '@/app/_components/card/toolCard'
-import KeyWordTool from '@/app/_components/card/toolCard/keyWordToolCard'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import 'swiper/css'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
index 96a82d9..885e42f 100644
--- a/app/(route)/signin/_components/Login.tsx
+++ b/app/(route)/signin/_components/Login.tsx
@@ -36,7 +36,7 @@ function Login() {
 
   useEffect(() => {
     animateDiagonal()
-  }, [])
+  }, [controls])
 
   const handleLogin = () => {
     const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
diff --git a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
index fdd9d2a..3cc588d 100644
--- a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
+++ b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
@@ -15,12 +15,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100px;
-
+  width: 100%;
+  overflow: auto;
   border-radius: 10px;
   background-color: #40607c;
   color: white;
-  padding: 5px 2px;
   font-weight: 500;
 }
 .marginWrapper {
@@ -28,47 +27,22 @@
 }
 
 .keyword {
-  width: 100px;
+  width: 120px;
   height: 30px;
-  flex-shrink: 0;
+
   border-radius: 9px;
   color: #fff;
   font-size: 12px;
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
   align-items: center;
   display: flex;
   justify-content: center;
 }
 
 .keyword:nth-child(even) {
-  background: #40607c;
-  width: 100px;
-  height: 30px;
-  flex-shrink: 0;
-  border-radius: 9px;
-  color: #fff;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  background-color: #40607c;
 }
+
 .keyword:nth-child(odd) {
-  background: #6c76f4;
-  width: 100px;
-  height: 30px;
-  flex-shrink: 0;
-  border-radius: 9px;
-  color: #fff;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  background-color: #6c76f4;
 }