Skip to content

Commit b5a6c0a

Browse files
minimo-9minimo-9
authored
Merge pull request #22 from codeit-maso/feature/jeon
✨ feature: 최상단 헤더 컴포넌트, 라우터 추가, 이미지 svg로 변경
2 parents 4edf0e3 + 09b4895 commit b5a6c0a

9 files changed

Lines changed: 93 additions & 17 deletions

File tree

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
1111
/>
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<link
14+
rel="stylesheet"
15+
as="style"
16+
crossorigin
17+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
18+
/>
1319
<title>Vite + React</title>
1420
</head>
1521
<body>

‎src/App.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import './base.scss';
1+
import "./base.scss";
2+
import { Route, Routes } from "react-router-dom";
3+
import Header from "./components/layout/Header/Header";
4+
import Test from './pages/List-page/Test';
25

3-
function App() {
6+
export default function App() {
47
return (
5-
<div className="app">
6-
<h1>롤링 페이퍼 프로젝트</h1>
7-
</div>
8+
<>
9+
<Header/>
10+
<Routes>
11+
<Route path="/" element={<Test/>}/>
12+
</Routes>
13+
</>
814
);
915
}
10-
11-
export default App;

‎src/assets/images/rolling-logo.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/styles/variables.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@ $green-300: #9be282;
2727
$green-400: #60cf37;
2828
$green-500: #2ba600;
2929

30-
$grayscale-100: #f6f6f6;
31-
$grayscale-200: #eeeeee;
32-
$grayscale-300: #cccccc;
33-
$grayscale-400: #999999;
34-
$grayscale-500: #555555;
35-
$grayscale-600: #4a4a4a;
36-
$grayscale-700: #3a3a3a;
37-
$grayscale-800: #2b2b2b;
38-
$grayscale-900: #181818;
30+
$gray-100: #f6f6f6;
31+
$gray-200: #eeeeee;
32+
$gray-300: #cccccc;
33+
$gray-400: #999999;
34+
$gray-500: #555555;
35+
$gray-600: #4a4a4a;
36+
$gray-700: #3a3a3a;
37+
$gray-800: #2b2b2b;
38+
$gray-900: #181818;
3939

4040
// 기본 색상
4141
$white: #ffffff;
@@ -127,3 +127,5 @@ $font-weight-bold: 700;
127127
font-size: $font-size-12;
128128
font-weight: $font-weight-regular;
129129
}
130+
131+

‎src/base.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,5 @@ a {
3434

3535
button {
3636
cursor: pointer;
37+
font-family: "Pretendard", sans-serif;
3738
}

‎src/components/layout/Header/Header.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Link } from "react-router-dom";
2+
import { useLocation } from "react-router-dom";
3+
import styles from "./Header.module.scss";
4+
import logo from "../../../assets/images/rolling-logo.svg";
5+
6+
export default function Header(){
7+
const location = useLocation();
8+
const showButton = ['/', '/list'];
9+
const isLocation = showButton.includes(location.pathname);
10+
11+
return(
12+
<>
13+
<header className={styles.header}>
14+
<Link to="/">
15+
<img className={styles.logo} src={logo} alt="rolling logo"></img>
16+
</Link>
17+
{isLocation && <Link to="/post" className={styles.button}>롤링 페이퍼 만들기</Link>}
18+
</header>
19+
<div className={styles.underline}></div>
20+
</>
21+
)
22+
}
23+

‎src/components/layout/Header/Header.module.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import '../../../assets/styles/variables.scss';
2+
3+
.header{
4+
display: flex;
5+
justify-content: space-between;
6+
align-items: center;
7+
width:100%;
8+
max-width: 1207px;
9+
margin:0 auto;
10+
}
11+
12+
.underline{
13+
height: 1px;
14+
background-color: #EDEDED;
15+
}
16+
17+
.logo{
18+
width: 106px;
19+
margin: 16px 0;
20+
}
21+
22+
.button{
23+
@include font-16-regular;
24+
padding: 7px 16px;
25+
border: 1px solid $gray-300;
26+
border-radius: 6px;
27+
white-space: nowrap;
28+
}

‎src/main.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import { StrictMode } from 'react';
22
import { createRoot } from 'react-dom/client';
3+
import { BrowserRouter } from 'react-router-dom';
34
import App from './App.jsx';
45

56
createRoot(document.getElementById('root')).render(
67
<StrictMode>
7-
<App />
8+
<BrowserRouter>
9+
<App/>
10+
</BrowserRouter>
811
</StrictMode>,
912
);

‎src/pages/List-page/Test.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function Test(){
2+
return(
3+
<div style={{fontSize:"30px"}}>Route test component ^_^ </div>
4+
)
5+
}

0 commit comments

Comments
 (0)