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

deprecated-hongbiii · 2021-04-27T10:22:33Z

오늘 한 일

프론트엔드 화면 완성
- 모달 - Portal 사용해서 구현하는 것으로 수정
- 모달 내부 UI 배치
- 모달에 캐로셀 적용
- npm에 등록한 제니의 캐로셀 적용 (Main page & 모달창에 적용했음 😆)
- 자잘한 CSS 작업 (자잘하지 않았따...🔥)
- <모든 카테고리 보기> 구현
컴포넌트 이름 및 구조 수정

앞으로 할 일

OAuth 공부, 구현
DB, 배포...

질문

현재는 모달창이 데이터를 받아 온 이후에 상태값이 true가 되어 출력되도록 구현했는데, 이렇게 되면 만약 서버에서 데이터를 불러오는 시간이 오래 걸릴 경우 사용자가 렉 걸린 것처럼 인식할 수도 있겠다는 생각을 하였습니다.
이 방법보다는 useEffect를 사용해서 일단 모달을 띄워 놓고 로딩화면이라도 출력한 다음에 데이터를 받아오는게 더 나은 방법인가요?

리뷰어님 오늘도 감사합니당~~~~ 🤗

- 캐러셀 구현 - 캐러셀 틀을 잡기 위해 구조 살짝 변경 - 컴포넌트 트리 참고 - products.length가 8의 배수가 아닌 경우를 생각해서 로직을 짰는데 아직 테스트는 안해봄

- 4의 배수가 아닐 때 캐러셀 애니메이션 테스트함 - left 버튼을 누를 때 문제가 있었는데 index 업데이트를 수정하여 고침

- 왼쪽 버튼을 누르면 이전 슬라이드가, 오른쪽 버튼을 누르면 이후 슬라이드가 나오도록 수정

- 아델라의 캐로셀 코드를 demo 브랜치에 머지

- 리렌더링 때문에 깜빡거림

- 공통적으로 사용되는 styled component를 common.jsx에 분리 - 카드에 있는 정보를 모달에 전달

…to feature/modal

- 컴포넌트 구조 변경 - utils를 구별하려고 했는데 components 안에있는 utils가 rename이 안되어서 외부 utils, 내부 utils로 둠 - 별로 좋지 않은 느낌인거 같고, 아무래도 이 부분은 팀원들과 함께 논의하면서 진행해야 할거같아서 내꺼에만 저장해놓기! - Portal - index.html에 global-modal 이라는 id값을 가진 돔 생성 - Modal이라는 포탈을 만들어서 띄워주기 - 띄워지는거 확인

- Card의 자식으로 Portal-modal을 집어넣음 - 모달이 뜰 때 fetch로 해당 상품의 정보를 가져오는 방식으로 구현 - 혹시라도 실시간으로 재고 상황이 달라질까 싶어서 매번 fetch 하는 형식으로 구현했는데, 좋은 방법인지는 모르겠음 - StyledLi 밖에서 setModalState를 해주어야 함 - 그렇지 않으면 클릭하는 모든 부분이 StyledLi라서 클릭 이벤트가 자꾸 발생해 false로 바꿔도 다시 true가 되어 모달창이 꺼지지 않는 일 발생 - 현재 useEffect 안쓰고 그냥 fetch를 사용했고, 동작은 하는데, 좋은 방법처럼 느껴지지는 않음 - 근데 useEffect안에 fetch를 사용하는 것이 원칙일까.. 좀 더 공부해볼 필요가 있는 것 같음

- 너무 무거워지는 것 같아서 products라는 폴더 만들고 하위 컴포넌트들을 나눠 저장 - 제니의 퍼블리싱 작업 합침 - 근데 작은 사진들을 클릭했을 때 썸네일에 안뜨는 문제 발생함 - 자잘한 버그가 있는 것 같음. 추후 재확인 필요

- 제니의 퍼블리싱 작업을 합침 - 불필요한 주석 제거

- JennyCarousel 설치해서 적용 - 자잘한 css 수정 (title의 margin, section의 width..)

- 모달 창 크기 수정 - 모달 창 내 캐러셀 삽입 (with 제니캐러셀) - 모든 카테고리 보기 구현

- 4개 => 5개로 (개수 지정 가능하도록 수정) - RecommendCarouselTitle position absolute를 통해 재배치 및 부모 position relative 주기

Feature/jentest

crongro · 2021-04-28T07:24:12Z

현재는 모달창이 데이터를 받아 온 이후에 상태값이 true가 되어 출력되도록 구현했는데, 이렇게 되면 만약 서버에서 데이터를 불러오는 시간이 오래 걸릴 경우 사용자가 렉 걸린 것처럼 인식할 수도 있겠다는 생각을 하였습니다.

로딩화면은 늘 적용할 수 있는 방법이겠고요.
그것보다 데이터를 pre-loading, 즉 적절한 타이밍에 미리 몰래 가져와서 캐시해 두고 '빡' 보여주는 건 어떨까 합니다.

crongro

컴포넌트의 크기도 그렇고 styled component 들을 작게 잘 만드셨네요.

reallyawesome-jennyrousel 빌드된 코드만 살짝 봤는데요. 범용적으로 잘 동작할것 같아요.
useRef 사용이 보이던데, 되도록 안하는 방식이 좋고요.
좀더 범용적으로 동작 가능한지 잘 생각하시면서 기능을 보강해보세요.

crongro · 2021-04-28T07:24:34Z

banchan/package.json

@@ -13,6 +13,7 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
+    "reallyawesome-jennyrousel": "^0.1.9",


crongro · 2021-04-28T07:27:01Z

banchan/src/components/componentUtils/Price.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import theme from '../utils/styles/theme.js';
+import theme from '../componentUtils/styles/theme.js';


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

crongro · 2021-04-28T07:31:59Z

banchan/src/components/componentUtils/button/IconButton.jsx

      {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) => {


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

crongro · 2021-04-28T07:34:42Z

banchan/src/components/componentUtils/card/Card.jsx

+// import theme from "../styles/theme.js";
+import Price from "../Price";
+import Label from "../Label";
+import { CenterContainer, LabelList, StyledDescription, StyledTitle } from "../styles/common.jsx";


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

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

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

crongro · 2021-04-28T07:35:14Z

banchan/src/components/componentUtils/card/Card.jsx

+    const data = await fetch(URLS.base + `detail/${product.detail_hash}`);
+    const json = await data.json();
+    setDetail({ ...json.data });
+    setModalState(true);


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

crongro · 2021-04-28T07:49:22Z

banchan/src/components/componentUtils/card/Thumbnail.jsx

+          {product.delivery_type.reduce((acc, val, index, array) => {
+            acc.push(
+              <p>
+                {val}
+                {index < array.length - 1 && <Divider />}
+              </p>
+            );
+            return acc;
+          }, [])}


reduce 활용도 좋죠.

crongro · 2021-04-28T08:03:52Z

banchan/src/components/componentUtils/modal/Modal.jsx

+  const modal = document.querySelector("#global-modal");
+  return ReactDOM.createPortal(children, modal);


어떤 이유인지 모르겠으나 이런방법이 꼭 필요할까요?

예외적인경우는 괜찮긴하고요. state를 변경하면서 렌더링 변경이 가능한지 고민해보시면 좋겠습니다.

포탈을 추천받아서 한번 사용해보고 싶었습니다!~

5b1790b 지난 번 PR에서는 MainPage.jsx에 Modal을 렌더링 했었는데, 포탈이라는 게 있다는 걸 처음 알아서 한번 바꿔봤습니당 ㅎㅎ

포탈을 쓰니까 z-index를 안써줘도 된다는 점과 포탈을 이용해서 카드의 자식으로 모달을 넣어주니 데이터를 props로 바로 받을 수 있어서 편했던 것 같아요. 이렇게 카드마다 모달이 떠야 할 때는 포탈을 쓰는 게 별로 좋지 않은 방법인가요??

crongro · 2021-04-28T08:12:26Z

banchan/src/components/componentUtils/modal/ModalCard.jsx

+    <ModalCardBackGround>
+      <CardContent>
+        <ProductImage imageUrl={productImg} thumbnailList={thumbnailList} />
+        <ProductInformation {...{ product, getTotalPrice, increaseCount, decreaseCount, count }} />


spread syntax 잘 사용하셨네요.

crongro · 2021-04-28T08:13:45Z

banchan/src/components/componentUtils/modal/ModalCard.jsx

+          SLIDE_WIDTH={160}
+          SLIDE_HEIGHT={300}
+          BACKGROUND_COLOR={theme.colors.lightGrayBG}
+          BUTTON_SIZE={20}
+          NUM_OF_DATAS={mockData.length}
+          NUM_OF_SLIDES={5}
+          BUTTON_TYPE="VERTICAL"
+          SLIDE_MARGIN={8}


옵션이 풍부하네요.
옵선명은 소문자로 해도 될까요? 다른 재사용 컴포넌트도 한번 참고해보세요.

crongro · 2021-04-28T08:15:21Z

banchan/src/components/componentUtils/modal/products/ProductBuyInfo.jsx

+      <ProductBuyInfoLi>
+        <ProductBuyInfoTitle>적립금</ProductBuyInfoTitle>
+        {product.point}
+      </ProductBuyInfoLi>
+      <ProductBuyInfoLi>
+        <ProductBuyInfoTitle>배송정보</ProductBuyInfoTitle>
+        {product.delivery_info}
+      </ProductBuyInfoLi>
+      <ProductBuyInfoLi>
+        <ProductBuyInfoTitle>배송비</ProductBuyInfoTitle>
+        {product.delivery_fee}
+      </ProductBuyInfoLi>


데이터를 가지고 map이나 reduce로 만드시죠.
반복 컴포넌트 같습니다.

Fix: dish url

* [#1] feat : create CRA - CRA를 설치했습니다 * [#1] feat : mediumCard index.jsx prop 추가 - 상동 * [#1] feat : node-sass 추가 - node sass를 추가했습니다 * [#1] feat : 폴더 구조 정리 - atoms, molecules, images 등 파일 구조 수정했습니다 * [#5] feat : reset scss 추가 - reset scss 추가 - 기본 글꼴 추가 * [#5] feat : button, icon, tag components 추가 - atoms의 button, icon, tag component를 재사용 가능한 형태로 생성했습니다. * [#5] feat: set moculses structure - LargeCard 구조설정 - MediumCard 구조 설정 * [#5] chore : 잘못 생성된 파일 수정 - 파일 명을 sidedish -> frontend로 바꾸는 과정에서 폴더 구성이 꼬여서 수정 * [#5] feat: molcules- LargeCard,MediumCard 구조 생성 * [#13] feat : MainDish, More 컴포넌트 생성 - 신규 컴포넌트 생성: maindish, more organisms * [#11] feat: fetch를 위한 util dir 생성 - util/loadData 생성 : fetch로 data가져오기 - util/url 생성: 기본 url주소 변수 설정 * [#11] feat: HeaderLeft 생성 * [#13] feat : MediumCard TagType 추가 - 메인요리에 medium카드를 사용하기 위해 medium카드 일부 속성을 수정했습니다. * [#13] feat : useFetch 컴포넌트 추가 - fetch기능을 분리하기 위해 util-useFetch컴포넌트를 생성 * [#11] feat: Header 생성 - HeaderLeft 구조 생성 - HeaderRight 구조 생성 - BestDish 구조 생성 중 * [#11] feat: useFatch fetch오류 해결 * [#12] feat: BestDish useTabs hook 사용 * [#13] feat : 카드 캐로셀 기능 완성 - setTimeout으로 렌더링을 지연시켜 캐로셀 기능을 완성 * [#12] feat: BestDish UI 및 기능구성 - Tab 버튼 클릭시 rendering - Header Style 일부 수정 (HeaderRight,HeaderLeft,Span,Icon) * deploy : build 210423 * [#13] feat: CSS style 수정 - innerTitle 설정 * chore: add gitginore * chore: Add basic gradlew files * [#13] feat: MainDish,SideDish,BestDish CSS style디테일 설정 - mainDish의 <Icon>,<Image> margin 설정 * [#13] fix : tag 버튼 오류, carousel 렌더링 지연 방식 변경 - tag 가 이벤트 특가만 나타나는 오류 수정 - carousel 렌더링 지연 방식을 setTimeOut -> onTransitionEnd 로 변경 * deploy : build 210424 * [#25] feat : Detail UI 컴포넌트 생성 - Detail UI 를 위한 InfoGeneral, InfoImages, InfoNumber, InfoPrice, InfoProduct molecules 컴포넌트 생성 * [#24] feat: ADD tab click event(color change) - Fix MediumCard Tag 부분 * [#25] fix : icon onClick 이벤트 실행 로직 수정 - icon이 left, right 일 경우에만 moveSlide이벤트가 실행되도록 수정 * [#24] feat: ADD Img MouseOver event - useState를 통한 isHover로 상태변경 가능 * [#24] feat: Fix CSS Detail in HoverEvent * deploy : build 210427 * [#24] feat: ADD HeaderDrop event - Header MouseOver 시 Drop event 추가 - Header DropMenu MouseOver 시 hover event 추가 - Private Component 이름 통일변경 (ex Div -> WrapDiv) - Component들의 inex.style.jsx 추가 (Styled div 분리) * [#25] fix : MainDish Carousel 스타일 적용 함수 분리 - MainDish 스타일 및 매직넘버 삭제 * [#37] refactor : 코드리뷰 반영 - useFatch 구조 변경 : loadData 컴포넌트 생성해서 데이터만 받아오고 useEffect는 각 컴포넌트에서 실행 - tag 내용 및 컨텐츠 적용 방식 수정 - span 스타일 컴포넌트 적용방식을 className 사용으로 변경 * [#25] feat : Detail UI 컴포넌트 수정 - pages 컴포넌트 생성 * [#25] feat : Modal 컴포넌트 생성 - 모달 컴포넌트 생성 및 클릭 후 모달 오픈, close 버튼 클릭시 숨김 기능 구현 * [#25] feat: Modal data fetch 연결 * deploy : build 210428 * deploy : rebuild 210428 * deploy : rebuild 210428 * deploy : rebuild 210428 * build : rebuild 210428 * [#26] feat : 상세페이지 내 이미지 이벤트 추가 - 이미지 및 썸네일 추가 - 썸네일 클릭 시 메인 이미지 변경 이벤트 추가 * [#26] feat : large 카드에 모달 이벤트 추가 - large 카드에도 모달 이벤트를 추가했으나, 아직 베스트 반찬에는 데이터 api를 못받아오고 있으므로 실행은 되지 않게끔 주석처리 했습니다 * [#27] feat: Detail - Info UI 생성 및 fetch data 연결 * deploy :build 210429 * [#27] feat: Fix syntax error * build : build 210429 * [#26] refactor : carousel 컴포넌트 생성 - 라이브러리화를 위해 carousel 컴포넌트 생성 * build : rebuild 210429 * build : rebuild 210429 * [#26] refactor : carousel 컴포넌트 완성 carousel, carousel style 컴포넌트를 mainDish 컴포넌트에서 분리 완료 * [#26] feat : OtherCard, DetailOther 컴포넌트 생성 - 디테일 Carousel 작업을 위해 상기 컴포넌트 생성 * [#27] feat: Datail CSS UI 수정 - UI: BestMenu 오른쪽마진 수정 - UI: HoverCard 가운데 정렬 수정 - UI: Mouse cursor 디테일 설정 - feat: useTabs 삭제 및 component내부로 수정 - faet: getComma 파일생성 ( 원, (,) 넣는 함수) * deploy : rebuild 210429 * deploy : build 210430 * [#27] FE API data fetch 연결 확인 * [#45] FE API data fetch 연결 확인 * [#26] feat : OtherCard 스타일 적용 완성 - Other Card의 레이아웃 완성 * [#26] feat : OtherCard 케로셀 적용 중 * [#45] feat: 디테일한 CSS UI 구성 * [#26] feat : OtherCard 케로셀 완료 - portal을 적용해서 기존 캐러셀 컴포넌트를 재활용할 수 없는 관계로 캐로셀을 중복해서 사용함 * [#45] feat: fetch Data API and 합치기 * [#45]feat: Details 파일명 변경 및 데이터 전달 * [#45] feat:Details close error 해결 * [#45]feat: CSS style 수정 * [#45] feat: Image data 수정 * fix : Change directory name to camel case Co-authored-by: ink-0 <71919983+ink-0@users.noreply.github.com> Co-authored-by: woody <woojihye2339@gmail.com> Co-authored-by: Tree <gmldbs1109@naver.com> Co-authored-by: Ubuntu <ubuntu@ip-172-31-44-162.ap-northeast-2.compute.internal>

adelakim5 and others added 22 commits April 21, 2021 21:44

[Add] Carousel

c75cc1d

- 캐러셀 구현 - 캐러셀 틀을 잡기 위해 구조 살짝 변경 - 컴포넌트 트리 참고 - products.length가 8의 배수가 아닌 경우를 생각해서 로직을 짰는데 아직 테스트는 안해봄

[Fix] Carousel

8e42c5f

- 4의 배수가 아닐 때 캐러셀 애니메이션 테스트함 - left 버튼을 누를 때 문제가 있었는데 index 업데이트를 수정하여 고침

[Fix] Direction of carousel-button

1c99905

- 왼쪽 버튼을 누르면 이전 슬라이드가, 오른쪽 버튼을 누르면 이후 슬라이드가 나오도록 수정

[Fix] Merge conflict

ccfab6b

- 아델라의 캐로셀 코드를 demo 브랜치에 머지

[Add] hover ver.1

ac9082b

- 리렌더링 때문에 깜빡거림

[Feat] 카드 이미지에 hover 시 배송 타입 노출

27cd014

[Add] Modal skeleton code

24fae61

[Refactor] Modal 컴포넌트 분리

c3b9535

- 공통적으로 사용되는 styled component를 common.jsx에 분리 - 카드에 있는 정보를 모달에 전달

[Fix] 할인 전후 가격 잘못 넣어서 수정

7c86069

[Add] Modal에 클릭한 상품의 데이터를 넣어줌

70a202a

Merge branch 'feature/demo' of https://github.com/dyongdi/sidedish in…

e2b8c6e

…to feature/modal

[Refactor] Integration

2c0ee6d

- 제니의 퍼블리싱 작업을 합침 - 불필요한 주석 제거

[Add] Install reallyawesome-jennyrousel

add6642

- JennyCarousel 설치해서 적용 - 자잘한 css 수정 (title의 margin, section의 width..)

[Modify] Modal, Carousel

81b3fce

- 모달 창 크기 수정 - 모달 창 내 캐러셀 삽입 (with 제니캐러셀) - 모든 카테고리 보기 구현

Merge branch 'feature/modal-adela-integrating' into dev

e2b8e11

[Refactor] 모달창 JennyCarousel 수정

3a3dfa5

- 4개 => 5개로 (개수 지정 가능하도록 수정) - RecommendCarouselTitle position absolute를 통해 재배치 및 부모 position relative 주기

[Refactor] 불필요한 주석 삭제

f2a1cc1

[Chore] 컴포넌트 디렉토리 이름 수정

00242f4

Merge pull request #18 from dyongdi/feature/jentest

4858938

Feature/jentest

deprecated-hongbiii added the review-FE FE 리뷰 label Apr 27, 2021

deprecated-hongbiii assigned adelakim5, deprecated-hongbiii and wjddnjswjd12 Apr 27, 2021

adelakim5 removed their assignment Apr 28, 2021

deprecated-hongbiii assigned adelakim5 Apr 28, 2021

crongro approved these changes Apr 28, 2021

View reviewed changes

crongro merged commit 2bdef3a into codesquad-members-2021:aja Apr 28, 2021

adelakim5 deleted the dev branch April 28, 2021 11:59

wheejuni pushed a commit that referenced this pull request Apr 29, 2021

Merge pull request #45 from swing-park/fix-dish-url

ab9efe8

Fix: dish url

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

deprecated-hongbiii commented Apr 27, 2021

crongro commented Apr 28, 2021

crongro left a comment

crongro Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

adelakim5 Apr 28, 2021 •

edited

Loading

adelakim5 Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

adelakim5 Apr 28, 2021

deprecated-hongbiii Apr 28, 2021

deprecated-hongbiii Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

crongro Apr 28, 2021

		const modal = document.querySelector("#global-modal");
		return ReactDOM.createPortal(children, modal);

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

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

Conversation

deprecated-hongbiii commented Apr 27, 2021

오늘 한 일

앞으로 할 일

질문

리뷰어님 오늘도 감사합니당~~~~ 🤗

crongro commented Apr 28, 2021

crongro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adelakim5 Apr 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adelakim5 Apr 28, 2021 •

edited

Loading