3차 main 머지

.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,

app/(route)/indicators/_components/result/result.module.css

@@ -44,6 +44,8 @@
   color: #424242;
   font-size: 11px;
   font-weight: 300;
+  line-height: normal;
+
 }
 
 .title {

app/(route)/list/_components/nav/LIstCompo.tsx

@@ -0,0 +1,39 @@
+'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 } = 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={data?.title || ''}
+              subTitle={data?.subTitle || ''}
+              description={data?.description || ''}
+              toolImg={data?.toolImg || ''}
+              toolId={index}
+              company={data?.company}
+              key={index}
+            />
+          )
+        })}
+        <span>데이터를 모두 불러왔습니다.</span>
+      </div>
+    </div>
+  )
+}
+
+export default ListCompo

app/(route)/list/page.tsx

@@ -1,21 +1,13 @@
 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 />
+    </div>
   )
 }
 

app/(route)/main/page.module.css

@@ -48,3 +48,6 @@
   width: 100%;
   padding-bottom: 300px;
 }
+.slide {
+  width: 390px;
+}

app/(route)/main/page.tsx

@@ -1,13 +1,31 @@
 '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'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
+  const { data, isFetching } = useQuery<AxiosResponse<Root>>({
+    queryKey: ['getTools'],
+    queryFn: () => axios.get('http://222.121.148.192/api/toolDetails'),
+  })
+
+  if (isFetching) {
+    return <div>...loading</div>
+  }
+
+  const resData = data?.data.data.tool
+
   return (
     <main className={S.wrapper}>
       <Nav />
@@ -19,19 +37,45 @@ function Main() {
           <Title title="인기 많은 툴" />
         </div>
         <div className={S.toolCardWrapper}>
-          {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
+          <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' }} key={index}>
+                  <ToolCard
+                    title={data?.title || ''}
+                    subTitle={data?.subTitle || ''}
+                    description={data?.description || ''}
+                    toolImg={data?.toolImg || ''}
+                    toolId={index}
+                    company={data?.company}
+                  />
+                </SwiperSlide>
+              )
+            })}
+          </Swiper>
         </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}
+                keyword={data.keyword}
+              />
+            )
+          })}
         </div>
       </div>
     </main>

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()

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

app/(route)/toolDetail/[toolId]/page.tsx

@@ -5,26 +5,44 @@ import Nav from '@/app/_common/nav'
 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 { 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 +65,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>
+                      <div className={S.method}>{method}</div>
+                    </li>
+                  )
+                })}
               </ul>
             </div>
           </>
@@ -65,19 +86,27 @@ function ToolDetail() {
             <Title title="실제 사례" />
 
             <div className={S.columnWrapper}>
-              {/* <Image
-                src={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>
-
       <Modal
         open="검증하기"
         title="아이디어 불패의 법칙"

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;
+}

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>