-
Notifications
You must be signed in to change notification settings - Fork 5
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 #3 from waterkail/이현승
feat: 헤더
- Loading branch information
Showing
7 changed files
with
133 additions
and
49 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| name: Feature request | ||
| about: Suggest an idea for this project | ||
| title: "[Feat] 제목" | ||
| labels: '' | ||
| assignees: '' | ||
|
|
||
| --- | ||
|
|
||
| ## ⭐어떤 기능인가요? | ||
|
|
||
| > 기능에 대해 간결하게 설명해주세요 | ||
| ## ⭐작업 상세 내용 | ||
|
|
||
| - [ ] TODO | ||
| - [ ] TODO | ||
| - [ ] TODO |
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,17 @@ | ||
| ## #️⃣연관된 이슈 | ||
|
|
||
| > ex) #이슈번호1, #이슈번호2 | ||
| ## 📝작업 내용 | ||
|
|
||
| - 이번 PR에서 작업한 내용을 간략히 설명해주세요 | ||
|
|
||
|
|
||
| ### 📸스크린샷 | ||
|
|
||
|
|
||
| *** | ||
| ### 💬리뷰 요구사항 | ||
|
|
||
| > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요 | ||
| > |
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 |
|---|---|---|
| @@ -1,10 +1,21 @@ | ||
| // Header.jsx | ||
| import styles from './Header.module.scss'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| function Header() { | ||
| return ( | ||
| <header> | ||
| <h1>Header</h1> | ||
| <header className={styles.header}> | ||
| <nav className={styles.frame}> | ||
| <Link to="/"> | ||
| <h1 className={`${styles.title}`}>Rolling</h1> | ||
| </Link> | ||
| <Link to="/post"> | ||
| <button type="button">롤링 페이퍼 만들기</button> | ||
| </Link> | ||
| </nav> | ||
| </header> | ||
| ); | ||
| } | ||
| //위 버튼은 컴포넌트 스타일을 적용할 것임 | ||
|
|
||
| export default Header; |
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,36 @@ | ||
| @import url(../global.scss); | ||
|
|
||
| $headerH: 65px; | ||
|
|
||
| .header { | ||
| display: flex; | ||
| padding: 12px 24px; | ||
| border-bottom: 1px solid #ededed; | ||
| justify-content: center; | ||
| height: $headerH; | ||
| } | ||
|
|
||
| .frame { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| max-width: 1248px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .title { | ||
| display: flex; | ||
| align-items: center; | ||
| color: #4a494f; | ||
| font-family: Poppins; | ||
| font-size: 19.971px; | ||
| line-height: normal; | ||
| &::before { | ||
| content: ''; | ||
| background-image: url('../assets/Rolling_icon.png'); | ||
| display: inline-block; | ||
| width: 27.818px; | ||
| height: 27.658px; | ||
| margin-right: 8px; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,41 +1,39 @@ | ||
| :root { | ||
| --purple1: #f8f0ff; | ||
| --purple2: #ecd9ff; | ||
| --purple3: #dcb9ff; | ||
| --purple4: #c894fd; | ||
| --purple5: #ab57ff; | ||
| --purple6: #9935ff; | ||
| --purple7: #861dee; | ||
| --purple8: #6e0ad1; | ||
| --purple9: #5603a7; | ||
| --orange1: #fff0d6; | ||
| --orange2: #ffe2ad; | ||
| --orange3: #ffc583; | ||
| --orange4: #ffae65; | ||
| --orange5: #ff8832; | ||
| --blue1: #e2f5ff; | ||
| --blue2: #b1e4ff; | ||
| --blue3: #7cd2ff; | ||
| --blue4: #34b9ff; | ||
| --blue5: #00a2fe; | ||
| --green1: #e4fbdc; | ||
| --green2: #d0f5c3; | ||
| --green3: #9be282; | ||
| --green4: #60cf37; | ||
| --green5: #2ba600; | ||
| --gray1: #f6f6f6; | ||
| --gray2: #eeeeee; | ||
| --gray3: #cccccc; | ||
| --gray4: #999999; | ||
| --gray5: #555555; | ||
| --gray6: #4a4a4a; | ||
| --gray7: #3a3a3a; | ||
| --gray8: #2b2b2b; | ||
| --gray9: #181818; | ||
| --white: #ffffff; | ||
| --black: #000000; | ||
| --error: #dc3a3a; | ||
| --surface: #f6f8ff; | ||
| $purple1: #f8f0ff; | ||
| $purple2: #ecd9ff; | ||
| $purple3: #dcb9ff; | ||
| $purple4: #c894fd; | ||
| $purple5: #ab57ff; | ||
| $purple6: #9935ff; | ||
| $purple7: #861dee; | ||
| $purple8: #6e0ad1; | ||
| $purple9: #5603a7; | ||
| $orange1: #fff0d6; | ||
| $orange2: #ffe2ad; | ||
| $orange3: #ffc583; | ||
| $orange4: #ffae65; | ||
| $orange5: #ff8832; | ||
| $blue1: #e2f5ff; | ||
| $blue2: #b1e4ff; | ||
| $blue3: #7cd2ff; | ||
| $blue4: #34b9ff; | ||
| $blue5: #00a2fe; | ||
| $green1: #e4fbdc; | ||
| $green2: #d0f5c3; | ||
| $green3: #9be282; | ||
| $green4: #60cf37; | ||
| $green5: #2ba600; | ||
| $gray1: #f6f6f6; | ||
| $gray2: #eeeeee; | ||
| $gray3: #cccccc; | ||
| $gray4: #999999; | ||
| $gray5: #555555; | ||
| $gray6: #4a4a4a; | ||
| $gray7: #3a3a3a; | ||
| $gray8: #2b2b2b; | ||
| $gray9: #181818; | ||
| $white: #ffffff; | ||
| $black: #000000; | ||
| $error: #dc3a3a; | ||
| $surface: #f6f8ff; | ||
|
|
||
| --font-family: "Pretendard", sans-serif; | ||
| } | ||
| $font-family: "Pretendard", sans-serif; |
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 |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import App from "./App"; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import App from './App'; | ||
|
|
||
| ReactDOM.render( | ||
| const root = ReactDOM.createRoot(document.getElementById('root')); | ||
| root.render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode>, | ||
| document.getElementById("root") | ||
| </React.StrictMode> | ||
| ); |
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