-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #288 from junghwa1996/Next-양정화-sprint9
[양정화] sprint9
- Loading branch information
Showing
109 changed files
with
5,818 additions
and
3,820 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import styled from 'styled-components'; | ||
| import { Container } from '../../styles/Common.styles'; | ||
| import font from '@/styles/fontStyle.styles'; | ||
| import { media } from '@/styles/media.styles'; | ||
|
|
||
| const ICON_FACEBOOK = '/ic_facebook.png'; | ||
| const ICON_INSTAGRAM = '/ic_instagram.png'; | ||
| const ICON_TWITTER = '/ic_twitter.png'; | ||
| const ICON_YOUTUBE = '/ic_youtube.png'; | ||
| import Link from 'next/link'; | ||
| import IconLink from '../shared/IconLink'; | ||
|
|
||
| const snsLink = [ | ||
| { | ||
| id: 1, | ||
| name: 'facebook', | ||
| to: 'https://www.facebook.com/', | ||
| src: ICON_FACEBOOK, | ||
| }, | ||
| { id: 2, name: 'twitter', to: 'https://x.com/', src: ICON_TWITTER }, | ||
| { | ||
| id: 3, | ||
| name: 'youtube', | ||
| to: 'https://www.youtube.com/', | ||
| src: ICON_YOUTUBE, | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'instagram', | ||
| to: 'https://www.instagram.com/', | ||
| src: ICON_INSTAGRAM, | ||
| }, | ||
| ]; | ||
|
|
||
| function Footer() { | ||
| return ( | ||
| <StyledFooter> | ||
| <FooterContainer> | ||
| <FooterItem className='text-copyright'> | ||
| <p>©codeit - 2024</p> | ||
| </FooterItem> | ||
| <FooterItem className='link-page'> | ||
| <Link href='/privacy'>Privacy Policy</Link> | ||
| <Link href='/faq'>FAQ</Link> | ||
| </FooterItem> | ||
| <FooterItem className='link-sns'> | ||
| {snsLink.map((sns) => ( | ||
| <IconLink key={sns.id} to={sns.to} name={sns.name} src={sns.src} /> | ||
| ))} | ||
| </FooterItem> | ||
| </FooterContainer> | ||
| </StyledFooter> | ||
| ); | ||
| } | ||
|
|
||
| export default Footer; | ||
|
|
||
| export const StyledFooter = styled.footer` | ||
| height: 16rem; | ||
| padding-top: 3.2rem; | ||
| background-color: var(--gray-900); | ||
| `; | ||
|
|
||
| export const FooterContainer = styled(Container)` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| ${media.mo` | ||
| flex-wrap: wrap; | ||
| gap: 2.5rem 0; | ||
| justify-content: center; | ||
| `} | ||
| `; | ||
|
|
||
| export const FooterItem = styled.div` | ||
| ${font('16')} | ||
| ${media.mo` | ||
| flex-basis: 100%; | ||
| `} | ||
| &.text-copyright { | ||
| ${media.mo` | ||
| order: 2; | ||
| flex: 1; | ||
| `} | ||
| p { | ||
| color: var(--gray-400); | ||
| ${media.mo` | ||
| color: #676767; | ||
| `} | ||
| } | ||
| } | ||
| &.link-page { | ||
| display: flex; | ||
| gap: 3rem; | ||
| ${media.mo` | ||
| flex: 1; | ||
| flex-basis: 50%; | ||
| `} | ||
| a { | ||
| color: var(--gray-200); | ||
| ${media.mo` | ||
| color: #cfcfcf; | ||
| `} | ||
| } | ||
| } | ||
| &.link-sns { | ||
| display: flex; | ||
| gap: 1.2rem; | ||
| ${media.mo` | ||
| flex: 1; | ||
| flex-basis: 50%; | ||
| justify-content: flex-end; | ||
| `} | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { useRouter } from 'next/router'; | ||
| import styled from 'styled-components'; | ||
| import useDeviceType from '@/utils/deviceType'; | ||
| import { useAuth } from '@/context/AuthContext'; | ||
|
|
||
| import { Container } from '@/styles/Common.styles'; | ||
| import { media } from '@/styles/media.styles'; | ||
|
|
||
| import Navigation from './Navigation'; | ||
| import ProfileImage from '../shared/ProfileImage'; | ||
| import Logo from '../shared/Logo'; | ||
| import Button from '../shared/Button'; | ||
|
|
||
| function Headers() { | ||
| const router = useRouter(); | ||
| const deviceType = useDeviceType(); | ||
| const { hasLogin } = useAuth(); | ||
|
|
||
| return ( | ||
| <HeaderContainer> | ||
| <StlyedContainer> | ||
| <Logo size='sm' /> | ||
| {router.pathname !== '/' && <Navigation />} | ||
| {hasLogin ? ( | ||
| <> | ||
| <ProfileImage /> | ||
| </> | ||
| ) : ( | ||
| <Button | ||
| href='/login' | ||
| color='blue' | ||
| size={deviceType === 'mo' ? 'small' : 'medium'}> | ||
| 로그인 | ||
| </Button> | ||
| )} | ||
| </StlyedContainer> | ||
| </HeaderContainer> | ||
| ); | ||
| } | ||
|
|
||
| export default Headers; | ||
|
|
||
| const HeaderContainer = styled.div` | ||
| position: fixed; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 7rem; | ||
| border-bottom: 1px solid #dfdfdf; | ||
| background-color: #fff; | ||
| z-index: 999; | ||
| `; | ||
|
|
||
| const StlyedContainer = styled(Container)` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| height: 100%; | ||
| gap: 3.2rem; | ||
| ${media.mo` | ||
| gap: 0.8rem; | ||
| `} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { useRouter } from 'next/router'; | ||
| import Link from 'next/link'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import font from '@/styles/fontStyle.styles'; | ||
| import { media } from '@/styles/media.styles'; | ||
|
|
||
| function Navigation() { | ||
| const router = useRouter(); | ||
|
|
||
| const navLinks = [ | ||
| { name: '자유게시판', path: '/boards' }, | ||
| { name: '중고마켓', path: '/items' }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <StyledGnb> | ||
| {navLinks.map((link) => { | ||
| const isActive = router.pathname === link.path; | ||
|
|
||
| return ( | ||
| <li key={link.name}> | ||
| <StyledLink href={link.path} $isActive={isActive} shallow> | ||
| {link.name} | ||
| </StyledLink> | ||
| </li> | ||
| ); | ||
| })} | ||
| </StyledGnb> | ||
| ); | ||
| } | ||
|
|
||
| export default Navigation; | ||
|
|
||
| const StyledGnb = styled.ul` | ||
| display: flex; | ||
| flex: 1; | ||
| `; | ||
|
|
||
| const StyledLink = styled(Link)<{ $isActive: boolean }>` | ||
| color: ${({ $isActive }) => | ||
| $isActive ? 'var(--blue-100)' : 'var(--gray-600)'}; | ||
| padding: 2.1rem 1.5rem; | ||
| ${font('18b')} | ||
| text-align: center; | ||
| text-decoration: none; | ||
| ${media.mo` | ||
| padding: 2.1rem 0.4rem; | ||
| ${font('16b')} | ||
| `} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import styled from 'styled-components'; | ||
| import { formatRegistrationDate } from '@/utils/format'; | ||
|
|
||
| import font from '@/styles/fontStyle.styles'; | ||
| import { media } from '@/styles/media.styles'; | ||
|
|
||
| import UserInfo from '@/components/shared/UserInfo'; | ||
| const IMG_BEST = '/img_badge.svg'; | ||
|
|
||
| interface Writer { | ||
| nickname: string; | ||
| } | ||
|
|
||
| export interface BoardCardProps { | ||
| title: string; | ||
| likeCount: number; | ||
| updatedAt: string; | ||
| image: string; | ||
| writer: Writer; | ||
| } | ||
|
|
||
| function BoardCard({ | ||
| title = '타이틀', | ||
| likeCount = 0, | ||
| updatedAt = '', | ||
| writer = { nickname: '닉네임' }, | ||
| image = '', | ||
| }: BoardCardProps) { | ||
| return ( | ||
| <BoardCardContainer> | ||
| <BoardCardBestBege src={IMG_BEST} alt='Best 뱃지' /> | ||
| <BoardCardTitleArea> | ||
| <h3>{title}</h3> | ||
| <BoardCardProdImagesArea> | ||
| <img src={image} alt='상품 이미지' /> | ||
| </BoardCardProdImagesArea> | ||
| </BoardCardTitleArea> | ||
| <UserInfo wide> | ||
| <UserInfo.UserName userName={writer.nickname} /> | ||
| <UserInfo.Heart count={likeCount} size='sm' wide /> | ||
| <UserInfo.Date date={formatRegistrationDate(updatedAt)} /> | ||
| </UserInfo> | ||
| </BoardCardContainer> | ||
| ); | ||
| } | ||
|
|
||
| const BoardCardContainer = styled.div` | ||
| background-color: var(--gray-50); | ||
| border-radius: 0.8rem; | ||
| padding: 0 2.4rem 1.6rem; | ||
| width: 38.4rem; | ||
| height: auto; | ||
| ${media.ta` | ||
| width: 34rem; | ||
| `} | ||
| ${media.mo` | ||
| width: 34.3rem; | ||
| `} | ||
| `; | ||
|
|
||
| const BoardCardBestBege = styled.img` | ||
| width: 10.2rem; | ||
| height: 3rem; | ||
| margin-bottom: 1.6rem; | ||
| `; | ||
|
|
||
| const BoardCardTitleArea = styled.div` | ||
| display: flex; | ||
| gap: 0.8rem; | ||
| justify-content: space-between; | ||
| margin-bottom: 1.8rem; | ||
| ${media.tamo` | ||
| margin-bottom: 4rem; | ||
| gap: 4rem; | ||
| `} | ||
| h3 { | ||
| ${font('20sb')} | ||
| ${media.tamo` | ||
| ${font('18sb')} | ||
| `} | ||
| } | ||
| `; | ||
|
|
||
| export const BoardCardProdImagesArea = styled.div` | ||
| width: 7.2rem; | ||
| height: 7.2rem; | ||
| border-radius: 0.6rem; | ||
| overflow: hidden; | ||
| border: 1px solid var(--gray-200); | ||
| `; | ||
|
|
||
| export default BoardCard; |
Oops, something went wrong.