OAuth๋ฅผ ๋ฐ์์ค๋ ์์
์ ๋จผ์ ์งํํ๊ธฐ ์ํด
๋ก๊ทธ์ธ ํ์ด์ง ๋จผ์ ์งํํ๊ธฐ๋ก ํ๋ค.
๋๋ ํค๋๋ฅผ ๋ด๋นํ๊ฒ ๋์๋ค.
import Logo from "../../assets/images/logo-stackoverflow.svg"
import { HeaderContainer, LogoContainer, LogoImg, Nav, LoginBtn } from "../common/Header.styled"
const Header = () => {
return (
<HeaderContainer>
<LogoContainer>
<a href="#">
<LogoImg src={Logo} alt="logo" />
</a>
</LogoContainer>
<Nav>
<LoginBtn>๋ก๊ทธ์ธ</LoginBtn>
</Nav>
</HeaderContainer>
)
}
export default Header
๋ก๊ทธ์ธ ์ ์ปดํฌ๋ํธ๋ง ๊ตฌํํ๊ณ
๋ง์ฝ ๋ก๊ทธ์ธ ํ, Router ๊น์ง ์งํํ๋ค๋ฉด ํ๊ทธ๋ ์ฝ๋ ๊ตฌ์กฐ๊ฐ ๋ณ๊ฒฝ ๋ ๊ฒ ๊ฐ๋ค.
import tw from "tailwind-styled-components";
export const HeaderContainer = tw.header`
w-full
flex
top-0
sticky
justify-between
items-center
drop-shadow-lg
bg-white
space-x-0
py-5
px-40
`;
export const LogoContainer = tw.h1`
`
export const LogoImg = tw.img`
w-52
`
export const Button = tw.button`
text-lg
text-white
rounded-full
px-6
py-2
transition duration-300 ease-in-out
`
export const Nav = tw.nav`
flex
gap-2
`
export const LoginBtn = tw(Button)`
bg-[#FFA564]
hover:bg-[#FF7E22]
`
๋ก๊ทธ์ธ ํ์ ๋ฐฐ์น๋ ์์ด์ผํ๊ธฐ์
<Nav>
์ display: flex๋ฅผ ๋ฏธ๋ฆฌ ๋ฃ์ด์ฃผ์๋ค.
tawilwind css์์ hover, active ์ฃผ๋๊ฑฐ ์ด๋ ค์ธ ์ค ์์๋๋ฐ
์๊ฐ๋ณด๋ค ๊ฐ๋จํ๊ฒ ์์ฑ ํ ์ ์์๋๊ฑฐ ๊ฐ๋ค.
export const LoginBtn = tw(Button)`
bg-[#FFA564]
hover:bg-[#FF7E22]
`
๋ง์ฝ ์ํ๋ ์์์ด ์์ ๊ฒฝ์ฐ
bg-[์์ ์ฝ๋]
์ด๋ฐ ์์ผ๋ก [์ํ๋ ๋ด์ฉ]
์ผ๋ก ์์ฑํ๋ฉด ๋๋ ๊ฒ ๊ฐ๋ค.
์์ง ๊ธฐ๋ฅ ๊ฐ๋ฐ์ด ์ด๋ฃจ์ด์ง์ง ์์ ๋ก๊ทธ์ธ ํ, Router๋ฅผ ์ ์ฉํ์ง ์์์ง๋ง ์ด์ ์ ๊ณ ๋ คํ๋ฉฐ ์์ ์ ์งํํ๋ค.
tawilwind css๋ฅผ ์ฒ์ ์ ํ๊ฒ ๋์๋๋ฐ ์ข ๋ ์ต์ํด์ง๋ค๋ฉด ์ฝ๋ ์์ฑ ์๊ฐ์ด ๋จ์ถ ๋ ๊ฒ ๊ฐ๋ค.
Git push ํ๊ณ PR ํ ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์ฑํ๋ ค๊ณ ํ๋ค.
clone ํ ํ๋ฉด์ ํ์ธํ๊ธฐ ์ํด npm run dev๋ฅผ ํ๋๋ฐ ์ค๋ฅ๊ฐ ๋ฌ๋ค.
๊ณตํต ์คํ์ผ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด ์ ์ฉํ๋ ค๊ณ ํ์ผ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
export const CommonColor = {
orange500 : "#FF7E22",
orange200 : "#FFA564",
green : "#03B800",
gray900 : "#797979",
gray700 : "#CACACA",
gray500 : "DCDCDC",
gray200 : "F7F7F7"
}
๊ณตํต ์์์ ๊ฐ์ฒด๋ก ๋ง๋ค์ด ๊ด๋ฆฌํ๋ ค๊ณ ํ๋ค.
export const LoginBtn = tw(Button)`
bg-[#FFA564]
hover:bg-[${CommonColor.orange500}]
`
ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด๋กํ๋๋ฐ ์๊พธ ์ค๋ฅ๊ฐ ๋ฌ๋ค.
๊ทผ๋ฐ hover:bg-[#FF7E22]
์ด๋ฐ์์ผ๋ก ์์ฑํ๋ฉด ๋๋ ๊ฑฐ์๋ค.
์์ธ
Tailwind๋ ์ฌ์ฉ๋์ง ์๋ CSS๋ ์ ๊ฑฐํฉ๋๋ค. ๋ฐ๋ผ์ ๋น์ ์ ์ฝ๋๊ฐ ์ปดํ์ผ๋ง ๋๋ ์์ ์์, Tailwind๋ ๋์ ํ ๋น์ ์ธ์ํ์ง ๋ชปํ๊ณ stylesheet์์ ์ง์๋ฒ๋ฆด ๊ฒ๋๋ค.์์ธ ํด๊ฒฐํ๋ ค๋ฉด
ํญ์ ์์ฑ๋ ํ๋์ ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ผ๋ ๊ณต์ ๋ฌธ์์ ๊ถ๊ณ
์์๋ณด๋ tawilwind์์๋ ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด๋ฅผ ์ง์ํ์ง ์๋ ๊ฒ ๊ฐ๋ค.
๋ฐ๋ก ๊ด๋ฆฌํ๊ธธ ์ํ๋ค๋ฉด tailwind.config.js๋ผ๋ ํ์ผ์ ๋ง๋ค์ด์ผ ํ๋๊ฒ ๊ฐ์๋ค.
์ฐ๋ฆฌ๋ ๋์ ์ด๋ฏธ ์์์ ์ ํด ๋์๊ธฐ ๋๋ฌธ์ ์ฐ์ ๋ hover:bg-[#FF7E22]
์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์งํํ๊ธฐ๋ก ํ๋ค.
์์ผ๋ก๋ Git push ํ๊ณ PR ํ ๋๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์ฑํ๋ ค๊ณ ํ๋ค.
ํด๋, ํ์ผ ์์ฑ, ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ์ ์ฆ๊ฐ ํ์๋ค๊ณผ ๊ณต์ ํ๋๋ก ํ๋ค.
API ์์ฒญํ๋ ๋ถ๋ถ์ด ์์ง ๋ถ์กฑํด ํํํ ๊ณต๋ถ๋ฅผ ์งํํด์ผ ๊ฒ ๋ค.
์ฐ๋ฆฌ ํ์๋ค์ด ๋ค๋ฅธ ํ์๋ค๊ณผ ๋น๊ตํ์ ๋ ์งํ์ด ๋น ๋ฅธ ๊ฑฐ ๊ฐ๋ค.
git์ ๋ํด ์์ง ์ต์ํ์ง ์์ ์ด๋ฐ์ ๋ง์ด ํค๋งธ๋๊ฑฐ ๊ฐ๋ค.
์ด๋ ๊ฒ์ branch๋ก ๋ฐ์ผํ๋์ง,
commit ์์ฑํ ๋ ๋ช
์นญ์ ์ด๋ค์์ผ๋ก ์์ฑํด์ผํ๋์ง,
images ํด๋๊ฐ ํ์ํ๋ฐ ๋ณธ์ธ branch์ ์์
ํด์ผํ๋์ง ๋ฑ ์ฌ๋ฌ ๊ณ ๋ฏผ์ ํ๋ ๋ ์ด์๋ค.
๊ทธ๋งํผ ๋ ํผ์๊ฐ ์๋ ์ฌ๋ฌ๋ช
์์ ์งํํ๋ ํ๋ก์ ํธ๋ก
ํ๋ ํ๋ ์์
ํ๋๋ฐ ์ ์คํด ์ง๊ณ ์ด๋ป๊ฒ ์์ฑ์ ํด์ผ
ํ์๋ค์ด ์์๋ณด๊ธฐ ์ฌ์ธ์ง ๊ณ ๋ฏผํ๊ฒ ๋๋ค.
ํ์ ์ ์์ฃผ ํด๋ณด๋ฉด ์ด๋ ์ ๋ ์ต์ํด ์ง์ง ์์๊น ์ถ๋ค.