-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FE][Team19] Sidedish 1주차 PR #31
Changes from all commits
e8f1390
c7655be
c0aa248
72df72f
875b6d6
d48fb37
05f641c
2b7ab1a
65ec0e1
a819c98
a2ca5f7
a9858a0
64fe99d
968ecc8
f81d4f2
23f093c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,7 @@ | ||
# sidedish | ||
그룹프로젝트 #2 | ||
## Team19 (a.k.a DJ) | ||
### 조원 | ||
Json | ||
|
||
Dico | ||
|
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
{ | ||
"name": "sidedish", | ||
"version": "0.1.0", | ||
"private": true, | ||
"dependencies": { | ||
"@testing-library/jest-dom": "^5.11.10", | ||
"@testing-library/react": "^11.2.6", | ||
"@testing-library/user-event": "^12.8.3", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2", | ||
"react-icons": "^4.2.0", | ||
"react-scripts": "4.0.3", | ||
"styled-components": "^5.2.3", | ||
"web-vitals": "^1.1.1" | ||
}, | ||
"scripts": { | ||
"start": "react-scripts start", | ||
"build": "react-scripts build", | ||
"test": "react-scripts test", | ||
"eject": "react-scripts eject" | ||
}, | ||
"eslintConfig": { | ||
"extends": [ | ||
"react-app", | ||
"react-app/jest" | ||
] | ||
}, | ||
"browserslist": { | ||
"production": [ | ||
">0.2%", | ||
"not dead", | ||
"not op_mini all" | ||
], | ||
"development": [ | ||
"last 1 chrome version", | ||
"last 1 firefox version", | ||
"last 1 safari version" | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<meta | ||
name="description" | ||
content="Web site created using create-react-app" | ||
/> | ||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> | ||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<!-- | ||
Notice the use of %PUBLIC_URL% in the tags above. | ||
It will be replaced with the URL of the `public` folder during the build. | ||
Only files inside the `public` folder can be referenced from the HTML. | ||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
work correctly both with client-side routing and a non-root public URL. | ||
Learn how to configure a non-root public URL by running `npm run build`. | ||
--> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import BestTab from "./component/bestTab/BestTab.jsx"; | ||
import Header from "./component/header/Header.jsx"; | ||
import PopUpContainer from "./component/popUp/PopUpContainer.jsx"; | ||
import ShowMoreBtn from "./component/ShowMoreBtn.jsx"; | ||
import SlideContainer from "./component/slideContainer/SlideContainer.jsx"; | ||
import GlobalStyle from "./style.js"; | ||
|
||
function App() { | ||
return ( | ||
<> | ||
<GlobalStyle /> | ||
<Header /> | ||
<BestTab /> | ||
<SlideContainer /> | ||
<ShowMoreBtn /> | ||
<PopUpContainer/> | ||
</> | ||
); | ||
} | ||
|
||
export default App; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
const api = () => { | ||
const URL = "https://codesquad-2021-api.herokuapp.com/sidedish"; | ||
const api = (path="", data="") => { | ||
const req = { | ||
method : 'GET', | ||
headers: { | ||
"Content-Type": "application/json", | ||
} | ||
}; | ||
return fetch(URL + path, req); | ||
} | ||
return async(path, data) => { | ||
const result = await api(path, data); | ||
let json = await result.json(); | ||
if (!json || json.length === 0) json = null; | ||
return json; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 에러처리가 있었으면 좋겠습니다! 또한, 여유가 된다면 fetching 상태를 성공(fulfilled), 실패(rejected), 대기 (pending)과 같이 나누어 각 상황에 맞는 대처가 가능하게 짜보는 건 어떨까요 ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
먼저 try, catch로 변경했습니다! |
||
} | ||
} | ||
|
||
export default api(); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import styled from "styled-components"; | ||
|
||
const ShowMoreBtnStyle = styled.div` | ||
margin: 0 -4rem; | ||
font-size: 1.125rem; | ||
font-weight: 600; | ||
padding: 2.321225rem; | ||
text-align: center; | ||
background-color: #F5F5F7; | ||
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.05); | ||
cursor: pointer; | ||
`; | ||
|
||
export default function ShowMoreBtn() { | ||
return <ShowMoreBtnStyle>모든 카테고리 보기</ShowMoreBtnStyle>; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 큰 기능이 없으면 개별 export로 ShowMoreBtn을 export 해도 되지 않을까요! ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
개별 export나 main에 포함하는 방향도 고려해보겠습니다! |
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import styled from "styled-components"; | ||
import ItemCard from "../util/ItemCard"; | ||
|
||
const BestItemsStyle = styled.div` | ||
background-color: #EEF4FA; | ||
display: grid; | ||
grid-template-columns: repeat(3, 1fr); | ||
grid-gap: 1.5rem; | ||
padding: 2.5rem; | ||
`; | ||
|
||
export default function BestItems({ childs }) { | ||
|
||
const getRandom = (n, max) => { | ||
const set = new Set(); | ||
while(set.size < n) { | ||
set.add(Math.floor(Math.random() * max)); | ||
} | ||
return Array.from(set); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 랜덤으로 출력을 위한 방식이 인상깊습니다 😃 |
||
|
||
const getSalePrice = (price, discountRate) => { | ||
return price - (price * (discountRate / 100)); | ||
} | ||
|
||
return ( | ||
<BestItemsStyle> | ||
{ | ||
getRandom(3, childs.length).map(idx => ( | ||
<ItemCard | ||
src={childs[idx].img} | ||
title={childs[idx].title} | ||
description={childs[idx].description} | ||
salePrice={getSalePrice(childs[idx].price, childs[idx].discount)} | ||
normalPrice={childs[idx].price} | ||
labels={childs[idx].label} | ||
key={idx}/> | ||
)) | ||
} | ||
</BestItemsStyle> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { useState, useEffect } from 'react'; | ||
import styled from "styled-components"; | ||
import BestTabContainer from "./BestTabContainer"; | ||
import BestTabNavigator from "./BestTabNavigator"; | ||
import api from '../../api'; | ||
|
||
const BestTabStyle = styled.div` | ||
h2 { | ||
margin-bottom: 2rem; | ||
} | ||
margin-bottom: 5rem; | ||
`; | ||
|
||
export default function BestTab() { | ||
const [active, setActive] = useState(0); | ||
const [bestItems, setBestItems] = useState(null); | ||
|
||
useEffect(() => { | ||
if (!bestItems) { | ||
(async() => { | ||
const data = await api('/best'); | ||
setBestItems(data); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 에러처리가 추가되면 좋을 것 같습니다! 😃 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
이 부분도 try, catch로 변경했습니다! |
||
})(); | ||
} | ||
return; | ||
}, [bestItems]); | ||
|
||
if(!bestItems) return null; | ||
|
||
return ( | ||
<BestTabStyle> | ||
<h2>후기가 증명하는 베스트 반찬</h2> | ||
<BestTabNavigator bestItems={bestItems} active={active} setActive={setActive}/> | ||
<BestTabContainer bestItem={bestItems[active]}/> | ||
</BestTabStyle> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import styled from "styled-components"; | ||
import BestItems from "./BestItems"; | ||
|
||
const BestTabContainerStyle = styled.div``; | ||
|
||
export default function BestTabContainer({ bestItem }) { | ||
return ( | ||
<BestTabContainerStyle> | ||
{<BestItems childs={bestItem.childs}/>} | ||
</BestTabContainerStyle> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import styled from "styled-components"; | ||
|
||
const BestTabNavigatorStyle = styled.div` | ||
display: grid; | ||
grid-gap: 0.5rem; | ||
grid-template-columns: repeat(5,13rem); | ||
`; | ||
|
||
const BestTabNavigatorItemStyle = styled.div.attrs(props => ({ | ||
weight: props.active ? 600 : 400, | ||
color: props.active ? "#333" : "#828282" | ||
}))` | ||
font-size: 1.125rem; | ||
background-color: #EEF4FA; | ||
padding: 1rem 2rem; | ||
text-align: center; | ||
font-weight: ${(props) => props.weight}; | ||
color: ${(props) => props.color}; | ||
cursor: pointer; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
두 번 처리하는 것보다 밑에서 한 번에 하는게 깔끔하겠네요! |
||
&:hover { | ||
color: #333; | ||
} | ||
`; | ||
|
||
export default function BestTabNavigator({ bestItems, active, setActive }) { | ||
return ( | ||
<BestTabNavigatorStyle> | ||
{bestItems.map((bestItem, i) => ( | ||
<BestTabNavigatorItemStyle | ||
key={i} | ||
onClick={() => setActive(i)} | ||
active={(i === active)}>{bestItem.title} | ||
</BestTabNavigatorItemStyle> | ||
))} | ||
{/* | ||
<BestTabNavigatorItemStyle>풍성한 고기반찬</BestTabNavigatorItemStyle> | ||
<BestTabNavigatorItemStyle>편리한 반찬세트</BestTabNavigatorItemStyle> | ||
<BestTabNavigatorItemStyle>간편한 덮밥요리</BestTabNavigatorItemStyle> | ||
<BestTabNavigatorItemStyle>우리아이 영양반찬</BestTabNavigatorItemStyle> */} | ||
</BestTabNavigatorStyle> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import styled from "styled-components"; | ||
import HeaderLeft from "./HeaderLeft"; | ||
import HeaderRight from "./HeaderRight"; | ||
|
||
const HeaderStyle = styled.header` | ||
display: flex; | ||
margin-top: 1rem; | ||
margin-bottom: 5rem; | ||
justify-content: space-between; | ||
align-items: center; | ||
`; | ||
|
||
export default function Header() { | ||
return ( | ||
<HeaderStyle> | ||
<HeaderLeft/> | ||
<HeaderRight/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Left와 Right라는 모호한 명칭보다는 Navigation과 같은 해당 컴포넌트를 아우를 수 있는 단어를 쓰는 것을 권장드립니다 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Left와 Right에 들어가는 주요 컴포넌트로 이름을 변경하는게 더 명확하겠네요! |
||
</HeaderStyle> | ||
) | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import styled from "styled-components"; | ||
import Navigations from "./Navigations"; | ||
|
||
const HeaderLeftStyle = styled.div` | ||
display: flex; | ||
align-items: center; | ||
width: 60vw; | ||
`; | ||
|
||
const LogoStyle = styled.div` | ||
font-size: 2.5rem; | ||
font-weight: 900; | ||
margin-right: 4rem; | ||
padding-bottom: 0.2rem; | ||
`; | ||
|
||
export default function HeaderLeft() { | ||
return ( | ||
<HeaderLeftStyle> | ||
<LogoStyle>BANCHAN</LogoStyle> | ||
<Navigations/> | ||
</HeaderLeftStyle> | ||
); | ||
} |
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.
Header이하의 컴포넌트들을 묶는 건 어떨까요 ? 혹은 MainPage와 같은 컴포넌트를 만들어 하위에 두는 것도 좋을 것 같습니다!
다른 페이지가 추가되는 경우 유용할 것 같습니다. 또한, 각 섹션별(
BestTab
,SildeContainer
, ...) 간격을 조정하는데 좀 더 일괄적으로 다룰 수 있는 장점이 있을 것 같습니다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.
Main 이라는 컴포넌트를 하나 만들어서 묶는 방식으로 수정하겠습니다!
🙏