Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Team23] 프론트엔드 UI 완성 #45

Merged
merged 22 commits into from
Apr 28, 2021
Merged

[Team23] 프론트엔드 UI 완성 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c75cc1d
[Add] Carousel
adelakim5 Apr 21, 2021
8e42c5f
[Fix] Carousel
adelakim5 Apr 21, 2021
1c99905
[Fix] Direction of carousel-button
adelakim5 Apr 22, 2021
ccfab6b
[Fix] Merge conflict
deprecated-hongbiii Apr 23, 2021
ac9082b
[Add] hover ver.1
deprecated-hongbiii Apr 23, 2021
27cd014
[Feat] 카드 이미지에 hover 시 배송 타입 노출
deprecated-hongbiii Apr 23, 2021
24fae61
[Add] Modal skeleton code
deprecated-hongbiii Apr 23, 2021
c3b9535
[Refactor] Modal 컴포넌트 분리
deprecated-hongbiii Apr 23, 2021
7c86069
[Fix] 할인 전후 가격 잘못 넣어서 수정
deprecated-hongbiii Apr 23, 2021
70a202a
[Add] Modal에 클릭한 상품의 데이터를 넣어줌
deprecated-hongbiii Apr 23, 2021
e2b8c6e
Merge branch 'feature/demo' of https://github.com/dyongdi/sidedish in…
adelakim5 Apr 26, 2021
e3e19fe
[Modify] Apply Portal for modal
adelakim5 Apr 26, 2021
2a35a71
[Modify] Locate Portal-modal into Card
adelakim5 Apr 26, 2021
487e287
[Refactor] 제니의 퍼블리싱 작업 합치기 & 리팩토링
adelakim5 Apr 26, 2021
2c0ee6d
[Refactor] Integration
adelakim5 Apr 27, 2021
add6642
[Add] Install reallyawesome-jennyrousel
adelakim5 Apr 27, 2021
81b3fce
[Modify] Modal, Carousel
adelakim5 Apr 27, 2021
e2b8e11
Merge branch 'feature/modal-adela-integrating' into dev
adelakim5 Apr 27, 2021
3a3dfa5
[Refactor] 모달창 JennyCarousel 수정
wjddnjswjd12 Apr 27, 2021
f2a1cc1
[Refactor] 불필요한 주석 삭제
adelakim5 Apr 27, 2021
00242f4
[Chore] 컴포넌트 디렉토리 이름 수정
deprecated-hongbiii Apr 27, 2021
4858938
Merge pull request #18 from dyongdi/feature/jentest
deprecated-hongbiii Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18,964 changes: 18,940 additions & 24 deletions banchan/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions banchan/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"reallyawesome-jennyrousel": "^0.1.9",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오썸~

"styled-components": "^5.2.3",
"web-vitals": "^1.0.1"
},
Expand Down
1 change: 1 addition & 0 deletions banchan/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="global-modal"></div>
</body>
</html>
12 changes: 7 additions & 5 deletions banchan/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import "./App.css";
import StateProvider from "./components/StateProvider";
import { createGlobalStyle } from "styled-components";
import { ThemeProvider } from "styled-components";
import theme from "./components/utils/styles/theme";
import './App.css';
import StateProvider from './components/StateProvider';
import { createGlobalStyle } from 'styled-components';
import { ThemeProvider } from 'styled-components';
import theme from './components/componentUtils/styles/theme';

export const GlobalStyle = createGlobalStyle`
*{
padding:0;
margin:0;
}

body{
font-family: 'Noto Sans KR';
box-sizing:border-box;

}

ol, ul {
list-style: none;
}
Expand Down
3 changes: 0 additions & 3 deletions banchan/src/components/StateProvider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
// import { useState } from "react";
import Header from "./header/Header";
import MainPage from "./main/MainPage";
// import Test from "./Test";

const StateProvider = () => {
// const [loginState, setLoginState] = useState(false);
Expand All @@ -11,7 +9,6 @@ const StateProvider = () => {
<>
<Header />
<MainPage />
{/* <Test /> */}
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion banchan/src/components/utils/Label.jsx → ...n/src/components/componentUtils/Label.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { LABEL_TYPE } from "../../utils/variables.js";
import theme from "./styles/theme.js";
import { LABEL_TYPE } from "./variables.js";

const Label = ({ badgeName }) => <StyledLabel type={LABEL_TYPE[badgeName]}>{badgeName}</StyledLabel>;

Expand Down
2 changes: 1 addition & 1 deletion banchan/src/components/utils/Price.jsx → ...n/src/components/componentUtils/Price.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from 'styled-components';
import theme from '../utils/styles/theme.js';
import theme from '../componentUtils/styles/theme.js';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

참고로 전 util하면 유용한 JS 코드만 있어야 할 것 같은 편견이 있네요.

import { CenterContainer } from './styles/common.jsx';

const Price = ({ product }) => {
Expand Down
14 changes: 9 additions & 5 deletions ...rc/components/utils/button/IconButton.jsx → ...ents/componentUtils/button/IconButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import styled from "styled-components";
import theme from "../styles/theme";
import { BUTTON_TYPE } from "../variables.js";
import { Button } from "../styles/common";
import { BUTTON_TYPE } from "../../../utils/variables";

const IconButton = ({ type, fn, disabled = false }) => {
const IconButton = ({ type, fn, disabled = false, margin = 0 }) => {
return (
<StyledIconButton type={type} onClick={fn} disabled={disabled}>
<StyledIconButton type={type} onClick={fn} disabled={disabled} margin={margin}>
{BUTTON_TYPE[type]}
</StyledIconButton>
);
};

const StyledIconButton = styled(Button)`
cursor: pointer;
color: ${(props) =>
props.disabled || props.type === "SEARCH" ? props.theme.colors.lightGray : props.theme.colors.darkGray};
color: ${(props) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기서도 destructuring을 사용하시죠. props가 자주 쓰이고 있네요.
$( ({type, theme, disabled}) => ....

if (props.type === "CLOSE") return props.theme.colors.white;
if (props.disabled || props.type === "SEARCH") return props.theme.colors.lightGray;
return props.theme.colors.darkGray;
}};
font-size: ${({ type }) => (type === "UP" || type === "DOWN" ? theme.fontSizes.M : "30px")};
margin: ${({ margin }) => `${margin}px`};
`;

export default IconButton;
9 changes: 4 additions & 5 deletions ...rc/components/utils/button/TextButton.jsx → ...ents/componentUtils/button/TextButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from "styled-components";
import theme from "../styles/theme";
import { BUTTON_TYPE } from "../variables.js";
import { Button } from "../styles/common";
import { BUTTON_TYPE } from "../../../utils/variables";

const TextButton = ({ type, fn, disabled = false }) => {
return (
Expand All @@ -14,14 +14,13 @@ const TextButton = ({ type, fn, disabled = false }) => {
const StyledTextButton = styled(Button)`
font-size: ${theme.fontSizes.M};
font-weight: bold;
background: ${(props) =>
props.disabled ? theme.colors.lightGrayBG : theme.colors.green};
color: ${(props) =>
props.disabled ? theme.colors.gray : theme.colors.white};
background: ${(props) => (props.disabled ? theme.colors.lightGrayBG : theme.colors.green)};
color: ${(props) => (props.disabled ? theme.colors.gray : theme.colors.white)};
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
width: 440px;
height: 58px;
text-align: center;
box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.25);
`;

export default TextButton;
72 changes: 72 additions & 0 deletions banchan/src/components/componentUtils/card/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import styled from "styled-components";
// import theme from "../styles/theme.js";
import Price from "../Price";
import Label from "../Label";
import { CenterContainer, LabelList, StyledDescription, StyledTitle } from "../styles/common.jsx";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 아이들이 common.jsx 에 있는 이유는 뭔가요?
아니면 다른 컴포넌트와 달리 저기에 들어갈 수 있는 조건이 있는걸까요?

Copy link

@adelakim5 adelakim5 Apr 28, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여러군데에서 사용하기 때문입니다! 조건이 있다면 최소 두군데 이상에서 동일한 스타일이 적용될때..

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여러군데에서 사용되는 스타일 컴포넌트를 모아두었습니다. 조건이라한다면 최소 두 군데 이상에서 사용된다는 점..?

import { useState } from "react";
import Modal from "../modal/Modal.jsx";
import ModalCard from "../modal/ModalCard.jsx";
import { URLS } from "../../../utils/variables.js";
import IconButton from "../button/IconButton.jsx";
import Thumbnail from "./Thumbnail";

// const mockImage = "https://recipe1.ezmember.co.kr/cache/recipe/2020/09/23/5e308abb30b00ecb9c1b9b398db5b4451.jpg";

const Card = ({ product, cardSize, margin = 0, type, onModal }) => {
const [modalState, setModalState] = useState(false);
const [detail, setDetail] = useState({});

const requestProductDetailInfo = async () => {
const data = await fetch(URLS.base + `detail/${product.detail_hash}`);
const json = await data.json();
setDetail({ ...json.data });
setModalState(true);
Comment on lines +20 to +23
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

에러 처리에 대해서 공부하시고 적용 몇 군데 해보세요.

};

return (
<>
<StyledLi cardSize={cardSize} margin={margin} onClick={requestProductDetailInfo}>
<Thumbnail {...{ product, cardSize, type }} />
<StyledTitle>{product.title}</StyledTitle>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

담번엔 Styled를 붙이지 말아보세요.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵...!

<StyledDescription>{product.description}</StyledDescription>
<Price product={product} />
<LabelList>{product.badge && product.badge.map((e) => <Label badgeName={e} />)}</LabelList>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 문법을 활용해보세요.
product.badge?.map()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

</StyledLi>
<Modal>
{modalState && (
<ModalBackground>
<ModalContainer>
<ModalCard product={{ ...product, ...detail }} />
<IconButton type="CLOSE" fn={() => setModalState(false)} margin={10} />
</ModalContainer>
</ModalBackground>
)}
</Modal>
</>
);
};

const StyledLi = styled.li`
width: ${(props) => props.cardSize};
margin: 0 ${(props) => props.margin}px;
list-style: none;
`;

const ModalBackground = styled(CenterContainer)`
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
`;

const ModalContainer = styled.div`
display: flex;
align-items: flex-start;
position: absolute;
left: 50%;
transform: translateX(-48%);
`;

export default Card;
64 changes: 64 additions & 0 deletions banchan/src/components/componentUtils/card/Thumbnail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { CenterContainer } from "../styles/common";
import styled from "styled-components";

const mockImage = "https://recipe1.ezmember.co.kr/cache/recipe/2020/09/23/5e308abb30b00ecb9c1b9b398db5b4451.jpg";

const Thumbnail = ({ product, cardSize, type }) => {
return (
<StyledThumbnail>
<HoverLayer cardSize={cardSize}>
<DeliveryTypeList>
{product.delivery_type.reduce((acc, val, index, array) => {
acc.push(
<p>
{val}
{index < array.length - 1 && <Divider />}
</p>
);
return acc;
}, [])}
Comment on lines +11 to +19
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reduce 활용도 좋죠.

</DeliveryTypeList>
</HoverLayer>
<StyledImg cardSize={cardSize} src={type === "베스트" ? mockImage : product.image} alt="card-image" />
</StyledThumbnail>
);
};

export default Thumbnail;

const StyledThumbnail = styled.div`
position: relative;
`;

const HoverLayer = styled(CenterContainer)`
color: ${(props) => props.theme.colors.white};
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: ${(props) => props.cardSize};
height: ${(props) => props.cardSize};
border-radius: ${(props) => props.theme.borders.radius};
font-size: ${(props) => props.theme.fontSizes.XL};
font-weight: bold;

&:hover {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
opacity: 1;
}
`;

const DeliveryTypeList = styled.div``;

const Divider = styled.div`
border: 1px solid ${(props) => props.theme.colors.white};
width: 90px;
margin: 16px 0;
`;

const StyledImg = styled.img`
border-radius: ${(props) => props.theme.borders.radius};
margin-bottom: 16px;
width: ${(props) => props.cardSize};
height: ${(props) => props.cardSize};
`;
Loading