-
Notifications
You must be signed in to change notification settings - Fork 3
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 #17 from whatever-mentoring/feature/home
design: 홈페이지 & 탭바
- Loading branch information
Showing
9 changed files
with
318 additions
and
74 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
File renamed without changes.
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,34 @@ | ||
import styled from 'styled-components'; | ||
|
||
const StyledNav = styled.nav` | ||
position: fixed; | ||
display: flex; | ||
gap: 10px; | ||
bottom: 0; | ||
width: min(100%, 430px); | ||
padding: 0 20px; | ||
background: var(--white); | ||
border-top: 1px solid var(--gray-100); | ||
a { | ||
padding: 13px 0; | ||
text-align: center; | ||
width: 100%; | ||
font-size: var(--text-s); | ||
svg { | ||
display: block; | ||
margin: 0 auto 4px; | ||
} | ||
path { | ||
stroke: var(--gray-200); | ||
} | ||
} | ||
a.current { | ||
path { | ||
stroke: var(--primary-500); | ||
} | ||
} | ||
`; | ||
|
||
export default StyledNav; |
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,26 @@ | ||
import StyledNav from './StyledNav'; | ||
import { Link, useLocation } from 'react-router-dom'; | ||
import navList from './navList'; | ||
|
||
const TabBar = () => { | ||
const { pathname } = useLocation(); | ||
|
||
return ( | ||
<StyledNav> | ||
{navList.map((v, i) => { | ||
return ( | ||
<Link | ||
to={v.path} | ||
key={i} | ||
className={pathname === v.path ? 'current' : ''} | ||
> | ||
{v.img} | ||
{v.name} | ||
</Link> | ||
); | ||
})} | ||
</StyledNav> | ||
); | ||
}; | ||
|
||
export default TabBar; |
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,158 @@ | ||
const navList = [ | ||
{ | ||
name: '홈', | ||
path: '/', | ||
img: ( | ||
<svg | ||
width="32" | ||
height="32" | ||
viewBox="0 0 32 32" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<g clip-path="url(#clip0_226_356)"> | ||
<path | ||
d="M17.3175 17.6823C13.3275 11.0311 18.6475 4.38105 29.9537 5.04605C30.625 16.3523 23.9687 21.6723 17.3175 17.6823Z" | ||
stroke="#02B550" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M11.0586 19.059C13.9086 14.309 10.1086 9.55898 2.0324 10.0327C1.5574 18.109 6.30865 21.909 11.0586 19.059Z" | ||
stroke="#02B550" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M7 15L15 23" | ||
stroke="#02B550" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M25 10L17.3438 17.6562C16.6007 18.3991 16.0113 19.2811 15.6091 20.2519C15.207 21.2226 15 22.263 15 23.3137V27" | ||
stroke="#02B550" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
</g> | ||
<defs> | ||
<clipPath id="clip0_226_356"> | ||
<rect width="32" height="32" fill="white" /> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
), | ||
}, | ||
{ | ||
name: '챌린지피드', | ||
path: '/feed', | ||
img: ( | ||
<svg | ||
width="32" | ||
height="32" | ||
viewBox="0 0 32 32" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<g clip-path="url(#clip0_226_365)"> | ||
<path | ||
d="M12 16H20" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M12 20H20" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M7 5H25C25.2652 5 25.5196 5.10536 25.7071 5.29289C25.8946 5.48043 26 5.73478 26 6V25C26 25.7956 25.6839 26.5587 25.1213 27.1213C24.5587 27.6839 23.7956 28 23 28H9C8.20435 28 7.44129 27.6839 6.87868 27.1213C6.31607 26.5587 6 25.7956 6 25V6C6 5.73478 6.10536 5.48043 6.29289 5.29289C6.48043 5.10536 6.73478 5 7 5Z" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M10 3V7" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M16 3V7" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M22 3V7" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
</g> | ||
<defs> | ||
<clipPath id="clip0_226_365"> | ||
<rect width="32" height="32" fill="white" /> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
), | ||
}, | ||
{ | ||
name: 'My', | ||
path: '/my', | ||
img: ( | ||
<svg | ||
width="32" | ||
height="32" | ||
viewBox="0 0 32 32" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<g clip-path="url(#clip0_226_376)"> | ||
<path | ||
d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M16 20C18.7614 20 21 17.7614 21 15C21 12.2386 18.7614 10 16 10C13.2386 10 11 12.2386 11 15C11 17.7614 13.2386 20 16 20Z" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
<path | ||
d="M7.9751 24.9214C8.72749 23.4394 9.87555 22.1947 11.292 21.3253C12.7085 20.4558 14.3381 19.9956 16.0001 19.9956C17.6621 19.9956 19.2917 20.4558 20.7082 21.3253C22.1246 22.1947 23.2727 23.4394 24.0251 24.9214" | ||
stroke="#C5C9C7" | ||
stroke-width="2" | ||
stroke-linecap="round" | ||
stroke-linejoin="round" | ||
/> | ||
</g> | ||
<defs> | ||
<clipPath id="clip0_226_376"> | ||
<rect width="32" height="32" fill="white" /> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
), | ||
}, | ||
]; | ||
|
||
export default navList; |
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,11 @@ | ||
import TabBar from '../../components/common/TabBar/TabBar'; | ||
|
||
const Feed = () => { | ||
return ( | ||
<> | ||
<TabBar></TabBar> | ||
</> | ||
); | ||
}; | ||
|
||
export default Feed; |
Oops, something went wrong.