Merge branch 'develop' of https://github.com/primus-teoSprint/fe into…

… feat/#6

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

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

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

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

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

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

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

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