[Team23] Tab section 구현, 컴포넌트 트리 구조 추가 #17

deprecated-hongbiii · 2021-04-22T12:53:20Z

어제, 오늘 한 일

각자 캐러셀 연습 (브랜치를 따로 파서 작업했고, 아직 머지는 안 했습니다. 내일 할 예정입니다. 😎)
Tab section 만들기
아직 하드코딩 되어 있는 부분은 추후 수정 예정입니다. 🤗 (width, height, margin 등등..)

궁금한 점

배치를 위해 div 요소가 필요한데, 통일감을 위해서 아무 내용이 없는 Styled component로 만들었습니다. 이렇게 하는 것이 더 나은지 아니면 <div></div> 로 쓰는 게 나은지 궁금합니다.

컴포넌트 트리

👉 바로가기

PR Review 받은것 수정완료

- 탭 같이 만들어봄 - 지금 TabSection에서 fetch가 안불러와지는 것 같음. 각자 문제 찾아 볼 예정

- style 작업 수행 - active 상태값에 따라 다른 스타일이 먹도록 구현 - 트리플 프로그래밍!

- 라벨 붙임 - 라벨 스타일 조정 - 베스트 라벨 추가

hyeyoon

안녕하세요. 리뷰를 맡은 윤입니다.

무의미한 div들을 사용하는 것은 문제가 있을 수 있으나, 배치를 위해서라면 styled-components를 사용해서 배치하는 것은 괜찮을 것 같아요. 😀 만약 html5의 다양한 시멘틱 태그들을 활용하면 더 좋을 것 같구요. (네비게이션 메뉴에는 <nav>, 섹션에는 <section> 활용 등)

고생하셨습니다!

hyeyoon · 2021-04-23T12:24:11Z

banchan/src/App.jsx

@@ -17,10 +21,10 @@ export const GlobalStyle = createGlobalStyle`

 function App() {
  return (
-    <>
+    <ThemeProvider theme={theme}>


[p5] 테마 활용 좋네요. 👍

hyeyoon · 2021-04-23T12:26:12Z

banchan/src/components/header/headerLeft/HeaderLeft.jsx

 import HeaderNavbar from "./HeaderNavbar.jsx";
+import { CenterContainer } from "../../utils/styles/common.jsx";


[p4] path를 편리하게 관리하기 위해 alias를 활용하면 좋을 것 같아요. eject 후 빌드 설정을 수정하는 방법이 있고, craco 와 같은 라이브러리를 활용하는 방법도 있습니다! 😀

hyeyoon · 2021-04-23T12:33:43Z

banchan/src/components/header/headerLeft/NavListItems.jsx

-    }
-    color: ${(props) => props.theme.colors.gray};
-    font-weight: "400";
-  `;

  const handleMouseEnter = () => {
    setIsMouseOver((isMouseOver) => (isMouseOver = true));


[p5] setIsMouseOver(true);로 바로 설정해도 되지 않나요? 혹시 이렇게 작성하신 이유가 있을까요? 🧐

아 그러네요? 당시엔 잘 안보였던 것 같습니다.. 감사합니다 :)

hyeyoon · 2021-04-23T12:35:52Z

banchan/src/components/header/headerLeft/NavListItems.jsx

-    </ThemeProvider>
+    <NavLI onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <NavLITitle>{list.title}</NavLITitle>
+      {isMouseOver && <NavLIBox>{listSubElements}</NavLIBox>}


[p5] 개인적으로는 현재 마우스 오버 이벤트가 컴포넌트를 보여주고, 숨기기 위한 처리라면 css hover로 처리하는 것도 좋지 않을까 싶습니다! (혹 다른 이벤트나 동작을 추가할 경우가 아니라면요!) 😀. 성능적인 면에서도 css로 조절이 가능한 부분은 최대한 css를 활용하시는 것을 추천합니다.

hyeyoon · 2021-04-23T12:38:17Z

banchan/src/components/header/headerRight/HeaderRight.jsx

+const SearchBox = styled(CenterContainer)`
+  justify-content: space-between;
+  border-radius: ${(props) => props.theme.borders.radius};
+  background: ${(props) => props.theme.colors.lightGrayBG};


[p5] css를 styled components의 장점을 활용해서 사용하시는 부분이 좋네요. 👍

hyeyoon · 2021-04-23T12:41:04Z

banchan/src/components/main/CarouselSection.jsx

    )
      .then((response) => response.json())
      .then((result) => setProducts(result.body))
-      .then((error) => console.log('error', error));
+      .then((error) => console.log("error", error));


[p4] fetch api를 편리하게 사용하기 위한 custom hook을 만들어보시는 것도 추천합니다.

hyeyoon · 2021-04-23T12:43:24Z

banchan/src/components/main/tab/TabSection.jsx

+      const response = await fetch(tempUrl);
+      const json = await response.json();
+      setBestSidedishes(json.body);
+    };


[p4] api를 핸들링할 때 에러 처리는 꼭 추가하는 것이 좋습니다. 위에도 언급한 것처럼 fetch를 위한 custom hook을 만들어서 적용하면 좋을 것 같아요.

hyeyoon · 2021-04-23T12:44:24Z

banchan/src/components/main/tab/TabSection.jsx

+  }, []);
+
+  const handleTab = (id) => {
+    setActiveTab(id);


[p4] setActiveTab 함수를 실행시키는 역할만 하는 경우 밑에 onClick에서 바로 setActiveTab 함수를 호출해도 좋을 것 같아요.

hyeyoon · 2021-04-23T12:47:02Z

banchan/src/components/utils/Card.jsx

+        src={type === "베스트" ? mockImage : product.image}
+        alt="card-image"
+      />
+      <StyledTitle>{product.title}</StyledTitle>


[p5] 스타일링만을 위한 컴포넌트라도 네이밍을 <Title></Title>, <Description></Description>과 같이 가져가도 괜찮을 것 같아요.

hyeyoon · 2021-04-23T12:52:46Z

banchan/src/components/utils/styles/common.jsx

+const CardList = styled.ul`
+  display: flex;
+  justify-content: center;
+`;


자주 사용하는 스타일을 따로 분리해서 관리하는 부분 좋습니다 👍

hyeyoon · 2021-04-23T12:58:05Z

리뷰 종료 후 머지까지 하는 가이드를 받아서, 머지하겠습니다 😀

[0422] Complete Header component

[iOS] Toast 기능 추가(#17)

[Be] preparation/mockup api

Be

Feature UI

Fix : DB 스키마 변경하라

- DishDTO, BestResponseDTO 생성

- delivery 테이블 필드 delivery_type, delivery_fee, delivery_condition의 디폴트 값 설정 - data.sql에 수정된 스키마에 맞추어 쿼리문 수정

- Mockup API 네이밍을 참고해서, DishDTO에서 ItemDTO로 클래스명 수정

- 사용하지 않는 클래스 SectionResponseDTO.java 삭제

- DishRepository::findById, DishRepository::findAll 메소드를 오버라이드 - 커스텀 쿼리를 사용하여, 클라이언트의 요청에 맞는 데이터(ItemDTO)를 추출

- 특정 section에 속한 dish 데이터를 가져오는 기능 구현 - DishController::showDishsBySection 메소드 구현 - DishService::showDishsBySection 메소드 구현 - DishRepository::findAllBySection 구현 및 커스텀 쿼리 추가

- Mockup API의 네이밍에 맞게 Dish라는 명칭을 Item으로 수정

- 불필요한 메소드 ItemController::showDishByHash 삭제

* [#1] init: 🎉 개발 환경 구축 * [#3] feat: ✨ Header 만들기 * [#5] feat: ✨ BestTab UI 구현 - BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx * [#7] feat: ✨ Slide UI 구현 - App.jsx - SlideContainer import - BestItem.jsx - 삭제 (미사용) - BestItems.jsx - ItemCard prop 추가 - BestTab.jsx - 스타일 수정 - SlideContainer.jsx - UI 구현 - SlideItems.jsx - UI 구현 - SlideArrowBtn.jsx - UI 구현 - ItemCard.jsx - 스타일 수정 - prop 추가 - Label.jsx - prop 추가 - 기본 값 추가 * [#8] feat: ✨ ShowMoreBtn UI 구현 - App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현 * [#10] feat: ✨ Header Dropdown 구현 - App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현 * [#13] feat: ✨ API에 fetch 요청 로직 구현 * [#13] feat: ✨ API 요청, 베스트 기능구현 - BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가 * [#15] feat: ✨ 상세 modal 페이지 UI 구현 - App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현 * [#16] feat: ✨ 모달 페이지 이벤트 구현중 * [#16] feat: ✨ 수량정보 컴포넌트 분리 * [#19] refactor: 🔨 리팩토링, 부족한 부분 추가 구현 - 파일 및 폴더 구조 변경 - common 폴더 생성 - Context.jsx - useContext 사용하여 prop drilling 개선 - 팝업 이벤트 구현 - 수량 변경 - 주문하기 - 주문결과 안내 메시지 UI * [#19] refactor: 🔨 리팩토링 * [#17] feat: ✨ dj-slider 폴더구조 구축 * [#17] feat: ✨ 슬라이드 1/2 구현 중 * [#23] refactor: 🔨 코드 리뷰 코멘트 반영 및 개선 * [#17] feat: ✨ 슬라이드 구현중/일부사항 수정 - util.js - price에 comma 붙이는 기능 구현 - PopUpItemCountContainer.jsx - price에 comma 붙이는 기능 import - ItemCard.jsx - price에 comma 붙이는 기능 import - 이미지 background로 수정 - Label.jsx - 라벨 배경색상 적용 * [#17] feat: ✨ 슬라이드 구현중 - 모듈화 - 시연을 위한 기능 구현을 위해 보류 * [#25] feat: ✨ 슬라이드 2/2 구현, API 데이터 동기화 - 슬라이드 명칭을 캐로셀로 변경 - API 데이터 동기화 - 캐로셀의 ItemCard를 children으로 변경 - 모듈화를 위함! - 아이템카드 mini, large 프로퍼티 추가 - 상세모달 캐로셀 추가 - 상세모달 스크롤 추가 - 모든 카테고리 보기 기능 구현 * [#27] feat: ✨ BestTab Skeleton UI 만들기 - Main.jsx - 시연을 위한 loop 설정 추가 - BestTab.jsx - SkeletonTab import - BestTabNavigator.jsx - 주석 제거 - SkeletonTab.jsx - Skeleton UI 구현 - DicoJsonCarousel.jsx - Carousel 구현중 * [#29] feat: ✨ PopUp Skeleton UI 만들기 - Context.jsx - 주석 제거 - BestTab.jsx - 주석 제거 - PopUpContainer.jsx - Skeleton import - PopUpItemsSlide.jsx - 주석 제거 - SkeletonPopUpContainerBody.jsx - Skeleton UI 구현 * feat: ✨ carousel loop 기능 구현 * [#31] feat: ✨ README.md 작성완료 Co-authored-by: kowoohyuk <kowoohyuk91@gmail.com>

wjddnjswjd12 and others added 12 commits April 21, 2021 14:48

[Modify] ThemeProvider App.jsx에서 사용

d3ecca9

[Modify] Style 요소들 수정

19a4077

Merge pull request #10 from dyongdi/feature/practice

a5c4d83

PR Review 받은것 수정완료

[Refactor] 공통부분들 묶기

e8dfa3c

[Add] Search Icon

b1330fe

[Add] TabSection

f7cb509

- 탭 같이 만들어봄 - 지금 TabSection에서 fetch가 안불러와지는 것 같음. 각자 문제 찾아 볼 예정

[Fix] 탭에 뜨는 데이터 오류 고침

2f5389a

[Chore] 오류 발견

da94eff

Merge branch 'dev' of https://github.com/dyongdi/sidedish into dev

a0bf96b

[Add] TabSection

489ae39

- style 작업 수행 - active 상태값에 따라 다른 스타일이 먹도록 구현 - 트리플 프로그래밍!

[Modify] Label

7d7896c

- 라벨 붙임 - 라벨 스타일 조정 - 베스트 라벨 추가

[Modify] 데모를 위해 mockImage 띄워두기

21d004c

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

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

hyeyoon self-requested a review April 23, 2021 12:14

hyeyoon self-assigned this Apr 23, 2021

hyeyoon approved these changes Apr 23, 2021

View reviewed changes

hyeyoon merged commit 631fc3a into codesquad-members-2021:aja Apr 23, 2021

jjunyjjuny pushed a commit that referenced this pull request Apr 26, 2021

Merge pull request #17 from GleamingStar/Seong-Header

9c7c77f

[0422] Complete Header component

adelakim5 deleted the dev branch April 26, 2021 05:23

ehgud0670 pushed a commit that referenced this pull request Apr 27, 2021

feat : add Toaster by CocoaPods(#17)

305a946

ehgud0670 pushed a commit that referenced this pull request Apr 27, 2021

Merge pull request #19 from rla36/iOS/feat/toast

50d24cc

[iOS] Toast 기능 추가(#17)

ksundong pushed a commit that referenced this pull request Apr 28, 2021

Merge pull request #17 from Dae-Hwa/BE/preparation/mockup-api

c812856

[Be] preparation/mockup api

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

Merge pull request #17 from d-h-k/BE

c8a5c31

Be

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

Merge pull request #17 from ghis22130/feature-UI

6e33b4c

Feature UI

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

Merge pull request #17 from swing-park/fix-db-schema

fe0e43c

Fix : DB 스키마 변경하라

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17]Feat : Create DTO

e9e8524

- DishDTO, BestResponseDTO 생성

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17] feature: Set default value at delivery table

cc2c9ac

- delivery 테이블 필드 delivery_type, delivery_fee, delivery_condition의 디폴트 값 설정 - data.sql에 수정된 스키마에 맞추어 쿼리문 수정

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17] refactor: Renaming DishDTO to ItemDTO

7447544

- Mockup API 네이밍을 참고해서, DishDTO에서 ItemDTO로 클래스명 수정

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17] refactor: Delete unused class

2962327

- 사용하지 않는 클래스 SectionResponseDTO.java 삭제

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17] refactor: Renaming Dish to Item

971b284

- Mockup API의 네이밍에 맞게 Dish라는 명칭을 Item으로 수정

ksundong pushed a commit that referenced this pull request May 1, 2021

[#17] refactor: Remove unused method

5715f70

- 불필요한 메소드 ItemController::showDishByHash 삭제

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Team23] Tab section 구현, 컴포넌트 트리 구조 추가 #17

[Team23] Tab section 구현, 컴포넌트 트리 구조 추가 #17

deprecated-hongbiii commented Apr 22, 2021 •

edited

Loading

hyeyoon left a comment

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

adelakim5 Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon Apr 23, 2021

hyeyoon commented Apr 23, 2021

		import HeaderNavbar from "./HeaderNavbar.jsx";
		import { CenterContainer } from "../../utils/styles/common.jsx";

[Team23] Tab section 구현, 컴포넌트 트리 구조 추가 #17

[Team23] Tab section 구현, 컴포넌트 트리 구조 추가 #17

Conversation

deprecated-hongbiii commented Apr 22, 2021 • edited Loading

어제, 오늘 한 일

궁금한 점

컴포넌트 트리

hyeyoon 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

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

hyeyoon commented Apr 23, 2021

deprecated-hongbiii commented Apr 22, 2021 •

edited

Loading