Skip to content

Commit

Permalink
Merge pull request #54 from primus-teoSprint/feat/#52
Browse files Browse the repository at this point in the history 
[#52] 로그인/로그아웃 버튼 구현
  • Loading branch information
@03hoho03
03hoho03 authored Apr 8, 2024
2 parents 2d35f17 + e544deb commit 075cd67
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 140 deletions.
99 changes: 51 additions & 48 deletions app/(route)/main/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Title from '../../_common/text/title'
import Search from '../../_components/search'
import { Root, Tool } from '../../_constants/toolcard'
import S from './page.module.css'
import { Suspense } from 'react'

//TODO: 주석처리 사항들에 데이터 가져오기
function Main() {
Expand All @@ -27,58 +28,60 @@ function Main() {
const resData = data?.data.data.tool

return (
<main className={S.wrapper}>
<Nav />
<div className={S.inWrapper}>
<Link href="/search">
<Search />
</Link>
<div className={S.marginWrapper}>
<Title title="인기 많은 툴" />
</div>
<div className={S.toolCardWrapper}>
<Swiper
spaceBetween={20}
slidesPerView={'auto'}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
{resData?.map((data: Tool, index: number) => {
<Suspense fallback={<div>...loading</div>}>
<main className={S.wrapper}>
<Nav />
<div className={S.inWrapper}>
<Link href="/search">
<Search />
</Link>
<div className={S.marginWrapper}>
<Title title="인기 많은 툴" />
</div>
<div className={S.toolCardWrapper}>
<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}>
{resData?.map((data: Tool, index) => {
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>
<KeyWordTool
title={data?.title || ''}
subTitle={data?.subTitle || ''}
toolImg={data?.toolImg || ''}
key={index}
toolId={index}
keyword={data.keyword}
/>
)
})}
</Swiper>
</div>
<div className={S.rowWrapper}>
<Title title="검증 툴 리스트" />
<Link href="/list">자세히 보기</Link>
</div>
<div className={S.keyWordCardWrapper}>
{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>
</div>
</main>
</main>
</Suspense>
)
}

Expand Down
7 changes: 5 additions & 2 deletions app/(route)/mypage/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
'use client'

import Nav from '@/app/_common/nav'
import Title from '@/app/_common/text/title'
import IdeaCard from './_components/ideaCard'
import S from './mypage.module.css'
import { Suspense } from 'react'

//TODO: 사용자 명, 아이디어 검증 수가 들어갑니다.
//TODO: 완료된 아이디어, 입력 전 아이디어를 불러옵니다.(get)
function Mypage() {
return (
<>
<Suspense fallback={<div>로딩중...</div>}>
<div className={S.wrapper}>
<Nav />
<Title title="아이디어" />
Expand All @@ -24,7 +27,7 @@ function Mypage() {
<IdeaCard />
</div>
</div>
</>
</Suspense>
)
}

Expand Down
157 changes: 79 additions & 78 deletions app/(route)/toolDetail/[toolId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
import Modal from '@/app/_common/modal'
import Nav from '@/app/_common/nav'
import Title from '@/app/_common/text/title'
import { useState } from 'react'
import { Suspense, 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'
Expand All @@ -30,91 +29,93 @@ function ToolDetail() {
const resData = data?.data.data.tool[Number(toolId)]

return (
<div className={S.wrapper}>
<Nav />
<div className={S.introWrapper}>
<div className={S.imgWrapper}>
<Image
src={resData?.toolImg || ''}
alt="아이디어 툴 이미지"
width={80}
height={80}
/>
<Suspense fallback={<div>로딩중...</div>}>
<div className={S.wrapper}>
<Nav />
<div className={S.introWrapper}>
<div className={S.imgWrapper}>
<Image
src={resData?.toolImg || ''}
alt="아이디어 툴 이미지"
width={80}
height={80}
/>
</div>
<Title title={resData?.title || ''} />
<p> {resData?.createdBy}</p>
</div>
<Title title={resData?.title || ''} />
<p> {resData?.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>
<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 ? (
<>
{!clickBtn ? (
<>
<div className={S.marginWrapper}>
<Title title="개요" />
<p>{resData?.content}</p>
</div>
<div className={S.marginWrapper}>
<Title title="검증 방식" />
<ul>
{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>
</>
) : (
<div className={S.marginWrapper}>
<Title title="개요" />
<p>{resData?.content}</p>
</div>
<div className={S.marginWrapper}>
<Title title="검증 방식" />
<ul>
{resData?.verificationMethod.map((method, index) => {
<Title title="실제 사례" />

<div className={S.columnWrapper}>
{resData?.company.map((company, index) => {
return (
<li className={S.li} key={index}>
<div className={S.circle}></div>
<div className={S.method}>{method}</div>
</li>
<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>
)
})}
</ul>
</div>
</div>
</>
) : (
<div className={S.marginWrapper}>
<Title title="실제 사례" />

<div className={S.columnWrapper}>
{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="아이디어 불패의 법칙"
subTitle="선택한 해당 아이디어 툴로 검사를 진행하시겠습니까? :)"
buttonTitle="해당 툴로 검증하기"
buttonLink="/verification/ibulsin?step=1"
></Modal>
</div>
<Modal
open="검증하기"
title="아이디어 불패의 법칙"
subTitle="선택한 해당 아이디어 툴로 검사를 진행하시겠습니까? :)"
buttonTitle="해당 툴로 검증하기"
buttonLink="/verification/ibulsin?step=1"
></Modal>
</div>
</Suspense>
)
}

Expand Down
45 changes: 34 additions & 11 deletions app/_common/nav/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,49 @@
'use client'

import Image from 'next/image'
import Link from 'next/link'
import logo from '../../_assets/_images/logo.png'
import S from './nav.module.css'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'

//TODO: 사용자 프로필 이미지 가져오기
function Nav() {
const router = useRouter()
const [isAuth, setIsAuth] = useState(false)

useEffect(() => {
if (typeof window !== 'undefined') {
const item = localStorage.getItem('accessToken')
if (item) {
setIsAuth(true)
}
}
}, [])

const handleLogout = () => {
localStorage.removeItem('accessToken')
setIsAuth(false)
location.reload()
}
const handleLogin = () => {
router.push('/signin')
}

return (
<div className={S.nav}>
<Link href="/main">
<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>
{isAuth ? (
<button className={S.btn} type="button" onClick={handleLogout}>
로그아웃
</button>
) : (
<button className={S.btn} type="button" onClick={handleLogin}>
로그인
</button>
)}
</div>
)
}
Expand Down
Loading

0 comments on commit 075cd67

Please sign in to comment.