diff --git a/app/(route)/list/_components/.gitkeep b/app/(route)/list/_components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/(route)/list/_components/nav/index.tsx b/app/(route)/list/_components/nav/index.tsx
new file mode 100644
index 0000000..f61fc44
--- /dev/null
+++ b/app/(route)/list/_components/nav/index.tsx
@@ -0,0 +1,20 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { GoArrowLeft } from 'react-icons/go'
+import S from './nav.module.css'
+
+function Nav({ title }: { title: string }) {
+  const router = useRouter()
+
+  return (
+    <nav className={S.nav}>
+      <button onClick={() => router.back()}>
+        <GoArrowLeft />
+      </button>
+      <span className={S.title}>{title}</span>
+      &nbsp;
+    </nav>
+  )
+}
+
+export default Nav
diff --git a/app/(route)/list/_components/nav/nav.module.css b/app/(route)/list/_components/nav/nav.module.css
new file mode 100644
index 0000000..e0e6ffe
--- /dev/null
+++ b/app/(route)/list/_components/nav/nav.module.css
@@ -0,0 +1,12 @@
+.nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 25px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.5rem;
+}
diff --git a/app/(route)/list/list.module.css b/app/(route)/list/list.module.css
new file mode 100644
index 0000000..aeef3f1
--- /dev/null
+++ b/app/(route)/list/list.module.css
@@ -0,0 +1,9 @@
+.wrapper{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    padding-bottom: 50px;
+}
\ No newline at end of file
diff --git a/app/(route)/list/page.tsx b/app/(route)/list/page.tsx
index 369eee8..c4db493 100644
--- a/app/(route)/list/page.tsx
+++ b/app/(route)/list/page.tsx
@@ -1,5 +1,22 @@
+import Nav from './_components/nav'
+import S from './list.module.css'
+
+//TODO: 주석처리 사항들에 데이터 가져오기
 function List() {
-  return
+  return (
+    <>
+      <Nav title="검증 툴 리스트" />
+      <div className={S.wrapper}>
+        {/* <ToolCard
+            title=""
+            subTitle=""
+            description=""
+            toolImg=""
+          /> */}
+        <span>데이터를 모두 불러왔습니다.</span>
+      </div>
+    </>
+  )
 }
 
 export default List
diff --git a/app/(route)/search/_components/.gitkeep b/app/(route)/search/_components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/(route)/search/page.tsx b/app/(route)/search/page.tsx
index ae7a4ac..8c37175 100644
--- a/app/(route)/search/page.tsx
+++ b/app/(route)/search/page.tsx
@@ -1,5 +1,18 @@
+import SearchBar from '../../_components/search/index'
+import CommonS from '../../page.module.css'
+import Nav from '../list/_components/nav'
+
+//TODO: 검색 결과 카드(toolCard) 가져오기
 function Search() {
-  return
+  return (
+    <>
+      <Nav title="검색 결과" />
+      <div className={CommonS.wrapper}>
+        <SearchBar />
+        <span>데이터를 모두 불러왔습니다.</span>
+      </div>
+    </>
+  )
 }
 
 export default Search
diff --git a/app/(route)/signin/Signin.module.css b/app/(route)/signin/Signin.module.css
index c7e0db4..08624b6 100644
--- a/app/(route)/signin/Signin.module.css
+++ b/app/(route)/signin/Signin.module.css
@@ -2,39 +2,84 @@
   background: #6c76f4;
   width: 100%;
   height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .wordwrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-top: 140px;
 }
 
-.word {
+.largeword {
   color: #fff;
-  text-align: center;
-  font-size: 36px;
+  font-size: 29px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
 }
 
-.intosignup {
-  width: 360px;
-  height: 60px;
-  border-radius: 7px;
-  background: #fff;
+.smallword {
+  color: #fff;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
 
-  display: flex;
-  align-items: center;
+.img {
+  width: 370px;
+  height: 370px;
+  margin-top: 10px;
+}
+
+.kakaologin {
+  display: inline-flex;
+  height: 60px;
+  padding: 16.5px 95px 15px 94px;
   justify-content: center;
+  align-items: flex-start;
+  gap: 7px;
+  flex-shrink: 0;
+  margin-top: 10px;
+
+  border-radius: 8px;
+  background: #fee500;
+
+  color: #1a1a1a;
 
-  color: #04030d;
   text-align: center;
-  font-size: 20px;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+
+  cursor: pointer;
+}
+.kakaologin:hover {
+  opacity: 0.7;
+}
+
+.nonmember {
+  width: 160px;
+  height: 55px;
+  flex-shrink: 0;
 
+  color: #fff;
+
+  font-size: 15px;
   font-style: normal;
   font-weight: 600;
-  letter-spacing: 0.1px;
+  line-height: normal;
+  text-align: center;
+
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.nonmember:hover {
+  opacity: 0.7;
 }
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
index 70660f7..43da119 100644
--- a/app/(route)/signin/_components/Login.tsx
+++ b/app/(route)/signin/_components/Login.tsx
@@ -1,21 +1,46 @@
+'use client'
+
 import rocketLogo from '../../../_assets/_images/rocketLogo.png'
 import Image from 'next/image'
+import styles from '../Signin.module.css'
+import { RiKakaoTalkFill } from 'react-icons/ri'
+import { useRouter } from 'next/navigation'
 
 function Login() {
+  const router = useRouter()
+
+  const handleClickNonMember = () => {
+    router.push('/main')
+  }
+
+  const handleClicksignin = () => {
+    router.push('/main')
+  }
+
   return (
-    <div>
-      <p>안녕하세요</p>
-      <p>프리무스입니다</p>
-      <p>서비스 이용을 위해서 로그인 해주세요</p>
-      <Image
-        src={rocketLogo}
-        alt="로켓로고"
-        layout="responsive"
-        width={370}
-        height={370}
-      />
-      <div>카카오로 시작하기</div>
-      <div>비회원으로 둘러보기</div>
+    <div className={styles.background}>
+      <div className={styles.wordwrap}>
+        <p className={styles.largeword}>안녕하세요</p>
+        <p className={styles.largeword}>프리무스입니다</p>
+        <p className={styles.smallword}>서비스 이용을 위해서 로그인 해주세요</p>
+      </div>
+
+      <div className={styles.img}>
+        <Image
+          src={rocketLogo}
+          alt="로켓로고"
+          layout="responsive"
+          width={370}
+          height={370}
+        />
+      </div>
+
+      <div className={styles.kakaologin} onClick={handleClicksignin}>
+        <RiKakaoTalkFill className={styles.icon} /> 카카오로 시작하기
+      </div>
+      <div className={styles.nonmember} onClick={handleClickNonMember}>
+        비회원으로 둘러보기
+      </div>
     </div>
   )
 }
diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
new file mode 100644
index 0000000..8c3263b
--- /dev/null
+++ b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -0,0 +1,87 @@
+'use client'
+
+import Nav from '@/app/_common/nav'
+import Title from '@/app/_common/text/title'
+import { useState } from 'react'
+import S from './toolDetail.module.css'
+
+//
+//TODO: 주석 처리 실제 데이터로 변경하기
+function ToolDetail() {
+  const [clickBtn, setClickBtn] = useState(false)
+
+  return (
+    <div className={S.wrapper}>
+      <Nav />
+      <div className={S.introWrapper}>
+        <div className={S.imgWrapper}>
+          {/* <Image
+            src={toolImg}
+            alt="아이디어 툴 이미지"
+            width={80}
+            height={80}
+          /> */}
+        </div>
+        {/* <Title title={title} />
+        <p> {createdBy}</p> */}
+      </div>
+
+      <div className={S.contentWrapper}>
+        <div className={S.btnWrapper}>
+          <button
+            className={`${S.btn} ${!clickBtn ? S.clickBtn : ''}`}
+            onClick={() => setClickBtn((prevState) => !prevState)}
+          >
+            Description
+          </button>
+          <button
+            className={`${S.btn} ${clickBtn ? S.clickBtn : ''}`}
+            onClick={() => setClickBtn((prevState) => !prevState)}
+          >
+            Company
+          </button>
+        </div>
+
+        {!clickBtn ? (
+          <>
+            <div className={S.marginWrapper}>
+              <Title title="개요" />
+              {/* <p>{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>
+            ))} */}
+              </ul>
+            </div>
+          </>
+        ) : (
+          <div className={S.marginWrapper}>
+            <Title title="실제 사례" />
+
+            <div className={S.columnWrapper}>
+              {/* <Image
+                src={toolImg}
+                alt="아이디어 툴 이미지"
+                width={60}
+                height={60}
+                placeholder="blur"
+                blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="
+              /> */}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* <Link href={`/verification/${toolId}`}>
+          <div>검증하기</div>
+        </Link> */}
+    </div>
+  )
+}
+
+export default ToolDetail
diff --git a/app/(route)/toolDetail/[toolId]/toolDetail.module.css b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
new file mode 100644
index 0000000..be7ac0d
--- /dev/null
+++ b/app/(route)/toolDetail/[toolId]/toolDetail.module.css
@@ -0,0 +1,115 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 18px;
+  padding-bottom: 50px;
+}
+
+.introWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  margin: 10px 0 30px 0;
+}
+
+.imgWrapper {
+  display: flex;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 10px;
+}
+
+.marginWrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 30px 0;
+  gap: 20px;
+}
+
+.li {
+  all: unset;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+  min-height: 100px;
+  height: auto;
+}
+
+.circle {
+  background-color: #c3c7ff;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.contentWrapper {
+  width: 420px;
+  padding: 25px 30px;
+  height: 100vh;
+  background-color: var(--gray-100);
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+}
+
+.btnWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f6f7f8;
+  width: 100%;
+  height: 55px;
+  padding: 0px 13px;
+  border-radius: 6px;
+}
+
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 160px;
+  height: 14px;
+  font-weight: 700;
+  padding: 10px 0;
+  border-radius: 6px;
+}
+
+.clickBtn {
+  background-color: white;
+}
+
+.verificationBtn {
+  position: absolute;
+  bottom: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 95%;
+  min-height: 58px;
+  padding: 10px 0;
+  background-color: var(--purple-700);
+  color: white;
+
+  font-size: 1.2rem;
+  font-weight: 700;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
diff --git a/app/(route)/toolDetail/page.tsx b/app/(route)/toolDetail/page.tsx
deleted file mode 100644
index dd6f8f3..0000000
--- a/app/(route)/toolDetail/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function ToolDetail() {
-  return
-}
-
-export default ToolDetail
diff --git a/app/_assets/_images/logo.png b/app/_assets/_images/logo.png
new file mode 100644
index 0000000..3e0b5e9
Binary files /dev/null and b/app/_assets/_images/logo.png differ
diff --git a/app/_common/.gitkeep b/app/_common/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/_common/nav/index.tsx b/app/_common/nav/index.tsx
new file mode 100644
index 0000000..64756e1
--- /dev/null
+++ b/app/_common/nav/index.tsx
@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import logo from '../../_assets/_images/logo.png'
+import S from './nav.module.css'
+
+//TODO: 사용자 프로필 이미지 가져오기
+function Nav() {
+  return (
+    <div className={S.nav}>
+      <Link href="/">
+        <Image src={logo} alt="로고" width={100} height={100} />
+      </Link>
+
+      <Link href="/mypage">
+        <div className={S.userProfileWrapper}>
+          {/* <Image
+            src="https://github.com/primus-teoSprint/FE/assets/63100352/b9d091d3-628e-4c16-a609-68b9e0acc3e4"
+            alt="사용자 프로필"
+            width={25}
+            height={25}
+          /> */}
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default Nav
diff --git a/app/_common/nav/nav.module.css b/app/_common/nav/nav.module.css
new file mode 100644
index 0000000..b529fe4
--- /dev/null
+++ b/app/_common/nav/nav.module.css
@@ -0,0 +1,18 @@
+.nav {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 18px 0px;
+}
+
+.userProfileWrapper {
+  display: flex;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  overflow: hidden;
+  border-radius: 50%;
+  object-fit: cover;
+}
diff --git a/app/_common/text/title.module.css b/app/_common/text/title.module.css
new file mode 100644
index 0000000..ccfe73e
--- /dev/null
+++ b/app/_common/text/title.module.css
@@ -0,0 +1,4 @@
+.text {
+  font-size: 1.6rem;
+  font-weight: 700;
+}
diff --git a/app/_common/text/title.tsx b/app/_common/text/title.tsx
new file mode 100644
index 0000000..c8e69f4
--- /dev/null
+++ b/app/_common/text/title.tsx
@@ -0,0 +1,11 @@
+import S from './title.module.css'
+
+interface TitleProp {
+  title: string
+}
+
+function Title({ title }: TitleProp) {
+  return <span className={S.text}>{title}</span>
+}
+
+export default Title
diff --git a/app/_components/card/toolCard/index.tsx b/app/_components/card/toolCard/index.tsx
new file mode 100644
index 0000000..3c72ba5
--- /dev/null
+++ b/app/_components/card/toolCard/index.tsx
@@ -0,0 +1,63 @@
+'use client'
+import { defaultFadeInRightVariants } from '@/app/_constants/motion'
+import { ToolCardProps } from '@/app/_types/tool'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import S from './toolCard.module.css'
+
+function ToolCard({
+  toolImg,
+  title,
+  subTitle,
+  description,
+  company,
+  toolId,
+}: ToolCardProps) {
+  return (
+    <Link href={`/toolDetail/${toolId}`}>
+      <motion.div
+        variants={defaultFadeInRightVariants}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        className={S.wrapper}
+      >
+        <div className={S.rowWrapper}>
+          <div className={S.imgWrapper}>
+            <Image
+              src={toolImg}
+              alt="아이디어 툴 이미지"
+              width={60}
+              height={60}
+              placeholder="blur"
+              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=="
+            />
+          </div>
+
+          <div className={S.columnWrapper}>
+            <span className={S.title}>{title}</span>
+            <p className={S.subTitle}>{subTitle}</p>
+          </div>
+        </div>
+        <div className={S.descriptionWrapper}>
+          <span className={S.description}>{description}</span>
+        </div>
+
+        <div className={S.companyWrapper}>
+          {company?.map((item, index) => (
+            <Image
+              key={index}
+              src={item}
+              alt="실제 사례 이미지"
+              width={50}
+              height={50}
+            />
+          ))}
+        </div>
+      </motion.div>
+    </Link>
+  )
+}
+
+export default ToolCard
diff --git a/app/_components/card/toolCard/keyWordToolCard/index.tsx b/app/_components/card/toolCard/keyWordToolCard/index.tsx
new file mode 100644
index 0000000..9131eeb
--- /dev/null
+++ b/app/_components/card/toolCard/keyWordToolCard/index.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { defaultFadeInUpVariants } from '@/app/_constants/motion'
+import { ToolCardProps } from '@/app/_types/tool'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import CommonS from '../toolCard.module.css'
+import S from './keyWordToolCard.module.css'
+
+function KeyWordTool({
+  toolId,
+  toolImg,
+  title,
+  subTitle,
+  keyword,
+}: ToolCardProps) {
+  return (
+    <Link href={`/toolDetail/${toolId}`}>
+      <motion.div
+        variants={defaultFadeInUpVariants}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        className={S.wrapper}
+      >
+        <div className={CommonS.rowWrapper}>
+          <div className={CommonS.imgWrapper}>
+            <Image
+              src={toolImg}
+              alt="아이디어 툴 이미지"
+              width={60}
+              height={60}
+            />
+          </div>
+          <div className={CommonS.columnWrapper}>
+            <span className={S.title}>{title}</span>
+            <p className={CommonS.subTitle}>{subTitle}</p>
+          </div>
+        </div>
+
+        <div className={S.marginWrapper}>
+          <div className={CommonS.companyWrapper}>{keyword}</div>
+        </div>
+      </motion.div>
+    </Link>
+  )
+}
+
+export default KeyWordTool
diff --git a/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
new file mode 100644
index 0000000..ec6f108
--- /dev/null
+++ b/app/_components/card/toolCard/keyWordToolCard/keyWordToolCard.module.css
@@ -0,0 +1,29 @@
+.wrapper {
+  background-color: var(--gray-100);
+  padding: 3px 4px;
+  font-weight: 300;
+  padding: 15px 17px;
+  border-radius: 12px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.keywordWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+
+  border-radius: 10px;
+  background-color: #40607c;
+  color: white;
+  padding: 5px 2px;
+  font-weight: 500;
+}
+
+.marginWrapper {
+  margin-top: 13px;
+}
diff --git a/app/_components/card/toolCard/toolCard.module.css b/app/_components/card/toolCard/toolCard.module.css
new file mode 100644
index 0000000..cfb5f88
--- /dev/null
+++ b/app/_components/card/toolCard/toolCard.module.css
@@ -0,0 +1,72 @@
+.wrapper {
+  background-color: var(--gray-100);
+  padding: 3px 4px;
+  font-weight: 300;
+  padding: 22px 17px;
+  min-height: 280px;
+  border-radius: 12px;
+  width: 390px;
+}
+
+.evenWrapper {
+  background-color: #f8f9ff;
+}
+
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.imgWrapper {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 15px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.3rem;
+}
+
+.subTitle {
+  font-size: 0.75rem;
+}
+
+.descriptionWrapper {
+  height: 140px;
+  font-weight: 400;
+  overflow: auto;
+  margin-top: 10px;
+}
+
+.description {
+  width: 100%;
+  overflow: auto;
+  font-size: 0.93rem;
+  margin-top: 6px;
+  color: #0f0f0f;
+  line-height: 20px;
+}
+
+.companyWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.companyWrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
diff --git a/app/_components/layout/layout.module.css b/app/_components/layout/layout.module.css
index 00e2b01..a094f51 100644
--- a/app/_components/layout/layout.module.css
+++ b/app/_components/layout/layout.module.css
@@ -2,5 +2,7 @@
   max-width: 480px;
   width: 100%;
   margin: 0 auto;
-  height: 100vh;
+  min-height: 100vh;
+  height: auto;
+  background-color: white;
 }
diff --git a/app/_components/search/index.tsx b/app/_components/search/index.tsx
new file mode 100644
index 0000000..c6a7e75
--- /dev/null
+++ b/app/_components/search/index.tsx
@@ -0,0 +1,16 @@
+import { CiSearch } from 'react-icons/ci'
+import S from './search.module.css'
+
+function Search() {
+  return (
+    <div className={S.wrapper}>
+      <CiSearch />
+      <input
+        placeholder="분석검증 툴을 검색해보세요."
+        className={S.inputWrapper}
+      />
+    </div>
+  )
+}
+
+export default Search
diff --git a/app/_components/search/search.module.css b/app/_components/search/search.module.css
new file mode 100644
index 0000000..bd92594
--- /dev/null
+++ b/app/_components/search/search.module.css
@@ -0,0 +1,19 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  background-color: var(--gray-100);
+  padding: 0 11px;
+  width: 100%;
+  height: 50px;
+  border-radius: 11px;
+}
+
+.inputWrapper {
+  all: unset;
+  margin-left: 6px;
+  font-size: 0.9rem;
+  width: 100%;
+}
+.inputWrapper::placeholder {
+  color: #c2c2c2;
+}
diff --git a/app/_constants/.gitkeep b/app/_constants/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/_constants/motion.ts b/app/_constants/motion.ts
new file mode 100644
index 0000000..2923c8e
--- /dev/null
+++ b/app/_constants/motion.ts
@@ -0,0 +1,81 @@
+import { Variants } from 'framer-motion'
+
+export const defaultEasing = [0.6, -0.05, 0.01, 0.99]
+
+export const defaultFadeInLeftVariants = {
+  initial: {
+    x: -90,
+    opacity: 0,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  animate: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  exit: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+}
+
+export const defaultFadeInRightVariants = {
+  initial: {
+    x: 80,
+    opacity: 0,
+    transition: { duration: 0.4, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  animate: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  exit: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+}
+
+export const defaultFadeInVariants: Variants = {
+  initial: {
+    opacity: 0,
+    transition: { duration: 0.5, ease: defaultEasing },
+  },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.5, ease: defaultEasing },
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.5, ease: defaultEasing },
+  },
+}
+
+export const defaultFadeInUpVariants = {
+  initial: {
+    y: 20,
+    opacity: 0,
+    transition: { duration: 0.01, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: { duration: 0.8, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  exit: {
+    y: 130,
+    opacity: 0,
+    transition: { duration: 0.9, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+}
diff --git a/app/_style/globals.css b/app/_style/globals.css
index cd43f5f..b07a7bc 100644
--- a/app/_style/globals.css
+++ b/app/_style/globals.css
@@ -8,6 +8,9 @@
 html,
 body {
   color: black;
+  -ms-overflow-style: none; 
+  scrollbar-width: none; 
+  background-color: rgb(245,245,245);
 }
 
 button,
@@ -16,3 +19,8 @@ a {
   all: unset;
   cursor: pointer;
 }
+
+::-webkit-scrollbar {
+  display: none;
+}
+
diff --git a/app/_types/tool.ts b/app/_types/tool.ts
new file mode 100644
index 0000000..0311ff2
--- /dev/null
+++ b/app/_types/tool.ts
@@ -0,0 +1,24 @@
+interface ToolInform {
+  toolImg: string
+  title: string
+  subTitle?: string
+  createdBy?: string
+}
+
+interface ToolCardProps extends ToolInform {
+  description?: string
+  company?: string[]
+  keyword?: string[]
+  toolId?: number
+}
+
+interface ToolDetailProps extends ToolCardProps {
+  content: string
+  verificationMethod: string[]
+}
+
+interface ToolExample extends ToolCardProps {
+  exampleContent: string
+}
+
+export type { ToolCardProps, ToolDetailProps, ToolExample, ToolInform }
diff --git a/app/page.module.css b/app/page.module.css
index ec81ef8..4944c6f 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -1,2 +1,38 @@
 .wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 18px;
+  padding-bottom: 50px;
+}
+
+.inWrapper {
+  margin-top: 40px;
+  width: 100%;
+}
+
+.marginWrapper {
+  margin: 40px 0;
+}
+
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 40px 0;
+}
+
+.toolCardWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 18px;
+  overflow: auto;
+}
+
+.keyWordCardWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
diff --git a/app/page.tsx b/app/page.tsx
index 9e5b93c..700186a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,37 @@
+'use client'
+
+import Link from 'next/link'
+import Nav from './_common/nav'
+import Title from './_common/text/title'
+import Search from './_components/search'
 import S from './page.module.css'
 
+//TODO: 주석처리 사항들에 데이터 가져오기
 function Home() {
   return (
     <main className={S.wrapper}>
-      <div>hello world!!</div>
+      <Nav />
+      <div className={S.inWrapper}>
+        <Search />
+        <div className={S.marginWrapper}>
+          <Title title="인기 많은 툴" />
+        </div>
+        <div className={S.toolCardWrapper}>
+          {/* <ToolCard
+            title=""
+            subTitle=""
+            description=""
+            toolImg=""
+          /> */}
+        </div>
+        <div className={S.rowWrapper}>
+          <Title title="검증 툴 리스트" />
+          <Link href="/list">자세히 보기</Link>
+        </div>
+        <div className={S.keyWordCardWrapper}>
+          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
+        </div>
+      </div>
     </main>
   )
 }