Merge pull request #13 from primus-teoSprint/feat/#1

[#3] devleop 머지

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

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

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

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

app/_common/text/title.module.css

@@ -0,0 +1,4 @@
+.text {
+  font-size: 1.6rem;
+  font-weight: 700;
+}

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