scss -> styled component 변환, footer 컴포넌트화, 버그수정 2개 #24
There are no files selected for viewing
This file contains hidden or 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,6 +1,4 @@ | ||
| /.idea | ||
| /node_modules | ||
| /.vscode | ||
| .prettierrc.json |
This file contains hidden or 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,39 @@ | ||
| { | ||
| "name": "my-app", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "-": "0.0.1", | ||
| "@testing-library/jest-dom": "^5.16.4", | ||
| "@testing-library/react": "^13.3.0", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "@types/styled-components": "^5.1.25", | ||
| "babel-eslint": "^8.2.6", | ||
| "eslint": "^4.19.1", | ||
| "g": "^2.0.1", | ||
| "react": "^18.1.0", | ||
| "react-dom": "^18.1.0", | ||
| "react-scripts": "5.0.1", | ||
| "recoil": "^0.7.3", | ||
| "styled-components": "^5.3.5", | ||
| "web-vitals": "^2.1.4" | ||
| }, | ||
| "scripts": { | ||
| "start": "react-scripts start", | ||
| "build": "react-scripts build", | ||
| "test": "react-scripts test", | ||
| "eject": "react-scripts eject" | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| } |
This file contains hidden or 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 hidden or 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,16 +1,32 @@ | ||
| import SearchBox from './SearchBox/SearchBox'; | ||
| import SearchResult from './SearchResult/SearchResult'; | ||
| import Footer from './Footer/footer'; | ||
| import Loading from './Loading'; | ||
|
|
||
| import styled, { ThemeProvider } from 'styled-components'; | ||
| import { theme } from './theme'; | ||
| import { GlobalStyle } from './GlobalStyle'; | ||
|
|
||
| const AppDiv = styled.div` | ||
| display: flex; | ||
| width: 1170px; | ||
| margin: 0 auto; | ||
| justify-content: center; | ||
| `; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <> | ||
| <ThemeProvider theme={theme}> | ||
| <GlobalStyle /> | ||
| <h1>🔍 프로그래머스 해설 은행</h1> | ||
| <AppDiv className="app"> | ||
| <Loading /> | ||
| <SearchBox /> | ||
| <SearchResult /> | ||
| <Footer /> | ||
| </AppDiv> | ||
|
Comment on lines
+23
to
+28
Member
There was a problem hiding this comment. App 내부에 AppDiv 가 있는 것이 어색한 것 같아요! 이제 React 컴포넌트와 styled 컴포넌트를 활용하기 때문에 아마 className을 저희가 명시적으로 지정할 일이 거의 없을 것 같아요! |
||
| </ThemeProvider> | ||
| </> | ||
| ); | ||
| } | ||
This file contains hidden or 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,20 @@ | ||
| import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer'; | ||
|
Member
There was a problem hiding this comment. styled component 를 import 해서 다른 곳에서 사용하는 형태가 styled component의 취지를 해진다고 생각해요! 또한 Footer 라는 작은 컴포넌트 하나를 위해서 6개의 파일이 생성되어있는데, 이러한 구조가 맞는지? 더 간단하게 설계할 수 없을 지 생각해보는 것이 좋을 것 같아요!! |
||
|
|
||
| export default function Contributor() { | ||
| return ( | ||
| <FooterDiv className="contributor"> | ||
| <FooterTitle className="contributorTitle footerTitle" title="기여자"> | ||
| Contributor | ||
| </FooterTitle> | ||
| <FooterInAnchor href="https://github.com/codeisneverodd"> | ||
| codeisneverodd | ||
| </FooterInAnchor> | ||
| <FooterInAnchor href="https://github.com/chaerin-dev"> | ||
| chaerin.dev | ||
| </FooterInAnchor> | ||
| <FooterInAnchor href="https://github.com/yongchanson"> | ||
| yongchanson | ||
| </FooterInAnchor> | ||
| </FooterDiv> | ||
| ); | ||
| } | ||
This file contains hidden or 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,14 @@ | ||
| import { FooterDiv, FooterInAnchor } from '../footer'; | ||
|
|
||
| export default function CopyRight({ repoLink }) { | ||
| return ( | ||
| <> | ||
|
Member
There was a problem hiding this comment. 큰 상관은 없지만 전체를 감싸는 노드가 있다면 불필요한 구문인 것 같네요! |
||
| <FooterDiv> | ||
| 해당 페이지의 해답을 자신의 저작물에 추가할 수 있지만 반드시 본{' '} | ||
| <FooterInAnchor href={repoLink}>Repository</FooterInAnchor>의 주소를 | ||
| 명시하여야합니다. | ||
| </FooterDiv> | ||
| <FooterDiv>모든 문제의 저작권은 프로그래머스에 있습니다.</FooterDiv> | ||
| </> | ||
| ); | ||
| } | ||
This file contains hidden or 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,14 @@ | ||
| import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer'; | ||
|
|
||
| export default function Issues({ repoLink }) { | ||
| return ( | ||
| <FooterDiv className="Issues"> | ||
| <FooterTitle className="IssuesTitle footerTitle" title="이슈제보"> | ||
| Issues | ||
| </FooterTitle> | ||
| <FooterInAnchor href={repoLink + '/issues'}> | ||
| https://github.com/codeisneverodd/programmers-coding-test/issues | ||
| </FooterInAnchor> | ||
| </FooterDiv> | ||
| ); | ||
| } |
This file contains hidden or 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 gitHubLogoPath from '../../images/github.png'; | ||
| import programmersLogoPath from '../../images/programmers.png'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const LogoBoxDiv = styled.div` | ||
| position: absolute; | ||
| right: 0px; | ||
| bottom: 0px; | ||
| a { | ||
| font-size: 0; | ||
| } | ||
| .footerLogo { | ||
| height: 50px; | ||
| max-width: 50px; | ||
| margin: 0 10px 8px 4px; | ||
| overflow: hidden; | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| } | ||
| `; | ||
|
|
||
| const FooterLogo = styled.img` | ||
| height: 50px; | ||
| max-width: 50px; | ||
| margin: 0 10px 8px 4px; | ||
| overflow: hidden; | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export default function LogoBox({ repoLink }) { | ||
| return ( | ||
| <LogoBoxDiv className="logoBox"> | ||
| <a href={repoLink} target="_blank"> | ||
| <FooterLogo | ||
| className="footerLogo" | ||
| src={gitHubLogoPath} | ||
| alt="깃허브 로고" | ||
| title="깃허브 레포지토리" | ||
| /> | ||
| </a> | ||
| <a href="https://programmers.co.kr/learn/challenges" target="_blank"> | ||
| <FooterLogo | ||
| className="footerLogo" | ||
| src={programmersLogoPath} | ||
| alt="프로그래머스 로고" | ||
| title="프로그래머스" | ||
| /> | ||
| </a> | ||
| </LogoBoxDiv> | ||
| ); | ||
| } |
This file contains hidden or 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,14 @@ | ||
| import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer'; | ||
|
|
||
| export default function Repo({ repoLink }) { | ||
| return ( | ||
| <FooterDiv className="repo"> | ||
| <FooterTitle className="repoTitle footerTitle" title="깃허브 레포지토리"> | ||
| Repository | ||
| </FooterTitle> | ||
| <FooterInAnchor href={repoLink}> | ||
| https://github.com/codeisneverodd/programmers-coding-test | ||
| </FooterInAnchor> | ||
| </FooterDiv> | ||
| ); | ||
| } |
This file contains hidden or 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,63 +1,53 @@ | ||
| import Repo from './components/Repo'; | ||
| import Issues from './components/Issuse'; | ||
| import Contributor from './components/Contributor'; | ||
| import CopyRight from './components/CopyRight'; | ||
| import LogoBox from './components/LogoBox'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const FooterBox = styled.div` | ||
| position: absolute; | ||
| top: 1200px; | ||
| min-width: 1200px; | ||
| width: 100%; | ||
| background: ${props => props.theme.bgFooter}; | ||
| padding: 10px; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| font-family: 'Noto Sans KR', sans-serif; | ||
| overflow: hidden; | ||
| `; | ||
|
|
||
| export const FooterTitle = styled.div` | ||
| color: ${props => props.theme.bgBtn2}; | ||
| cursor: default; | ||
| margin-right: 10px; | ||
| `; | ||
|
|
||
| export const FooterDiv = styled.div` | ||
| display: flex; | ||
| position: relative; | ||
| justify-content: center; | ||
| `; | ||
| export const FooterInAnchor = styled.a` | ||
| padding: 0 5px; | ||
| text-decoration-line: none; | ||
| color: inherit; | ||
| `; | ||
|
|
||
| export const repoLink = | ||
| 'https://github.com/codeisneverodd/programmers-coding-test'; | ||
|
|
||
| export default function Footer() { | ||
| return ( | ||
| <FooterBox id="footerBox"> | ||
| <div className="footer"> | ||
| <Repo repoLink={repoLink} /> | ||
| <Issues repoLink={repoLink} /> | ||
| <Contributor /> | ||
| <CopyRight repoLink={repoLink} /> | ||
|
Comment on lines
+45
to
+48
Member
There was a problem hiding this comment. 질문 남겨주셨던 제 생각에는 repoLink는 상수값이기 때문에 props 보다는 `const REPO_LINK = 'https~~' 로 다른 곳에 선언을 해두고 import 해서 사용하는 것이 더 간단한 방법일 것 같아요! ThemeProvider의 theme은 styled component 내부에서 사용될 props를 위해 사용되는 것인데 repoLink는 styled componenet가 아닌 그냥 React component를 위해 사용되는 것으로 보입니다! |
||
| </div> | ||
| <LogoBox repoLink={repoLink} /> | ||
| </FooterBox> | ||
| ); | ||
| } | ||
This file contains hidden or 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,23 @@ | ||
| import { createGlobalStyle } from 'styled-components'; | ||
|
|
||
| export const GlobalStyle = createGlobalStyle` | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| background: ${props => props.theme.background}; | ||
| color: ${props => props.theme.textColor}; | ||
|
Comment on lines
+10
to
+11
Member
There was a problem hiding this comment. styled component를 정말 잘 활용해주셨네요 👍 👍 |
||
| height:100%; | ||
| } | ||
| h1 { | ||
| text-align: center; | ||
| margin: 30px 0 60px 0; | ||
| padding: 20px 0; | ||
| color: ${props => props.theme.textColor}; | ||
| border-bottom: 4px solid ${props => props.theme.borderLevelTitle}; | ||
| } | ||
| `; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ThemeProvider가 전체를 감싸고 있기 때문에 불필요할 것 같습니다!