[FE][Team19] Sidedish 1주차 PR #31

ha3158987 · 2021-04-23T15:23:22Z

컴포넌트 구조

진행현황

[완료한 일]

Main페이지 UI 구현완료
- Header
- BestTab
- Slider
API 기능 구현 & DB 구축 (현재 공유가능🌷)

[해야할 일]

상세페이지 모달 UI
상세페이지 데이터 요청
Slider 모듈 npm 등록
상세페이지 구매 요청

[추가구현사항 - 가능하다면]

OAuth
Skeleton component 구현
TypeScript로 리팩토링
React 모듈 Boilerplate
반응형으로 전환

회고

Json

잘한 점

팀원인 디코와 원활하게 소통할 수 있어서 기뻤습니다.
오프라인이라 더 빠른 반응!
디코로부터 깃에 대한 새로운 내용들을 배워서 좋았습니다.
이슈 발행 후 개발
pr 메시지로 이슈 닫기
일과시간에만 진행한 점
야근을 하지 않음

개선할 점

디코가 제 수다를 많이 들어서 귀가 아프지 않았나 싶은 생각...
수다도 기승전결에 맞도록
너무 많은 추가 기능을 요구한 점
- 스켈레톤 컴포넌트
- API 구축
- 타입스크립트
- 리액트 npm 모듈 보일러플레이트

Dico

잘한 점

pair programming으로 원활한 커뮤니케이션(질문, 의견 제시 등)을 한 점
같이 여러가지 시도를 해보기로 결정한 점
매일 그 날 진행된 개발log + 회고log를 기록한 점
다이어그램으로 컴포넌트 구조를 시각화해 본 점
일과시간 내에는 충실하게 미션에 임하고, 그 외의 시간에는 각자의 공부시간을 가진 점

개선할 점

활발한 커뮤니케이션 속에 잡담이 꽤나 많이 섞인 점
제이슨이 열심히 설명해 준 부분들을 복습하거나 정리하는 데에 충분한 시간을 들이지 못한 점

[#1] 개발 환경 구축 완료

[#3] Header 구현 완료

- BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx

[#5] feat: ✨ BestTab 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 추가 - 기본 값 추가

- App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현

[#7] feat: ✨ Slide UI 구현

- App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현

[#10] feat: ✨ Header Dropdown 구현

- BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가

API 데이터 fetch 요청 + 베스트 반찬 tab 랜덤 출력

- App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현

[#15] feat: ✨ 상세 modal 페이지 UI 구현

snowjang24

안녕하세요 리뷰를 맡은 Snow입니다 ☃️

깔끔하게 작성한 코드와 컴포넌트 구조 덕분에 읽는데 어려움이 없었습니다.

리뷰 코멘트 남긴 부분에 대한 의견 대부분 강력한 수정 필요! 보다는 의견 위주로 남겼습니다. 😃

Slider의 경우, 패키지로 배포하기에는 다소 아쉬운 점이 보입니다. 다른 라이브러리처럼 파라메터로 값을 넘겨주어 어느정도 커스텀이 가능하게 끔 만들어보는 것도 많은 도움이 될 것 같습니다. Material UI나 다른 Carousel 혹은 Slider과 같은 라이브러리를 참고하면 좋을 것 같습니다!

커밋 메세지가 간결하고 깔끔하여 아주 보기 좋군요 👍

snowjang24 · 2021-04-26T06:48:32Z

src/App.js

+      <Header />
+      <BestTab />
+      <SlideContainer />
+      <ShowMoreBtn />


Header이하의 컴포넌트들을 묶는 건 어떨까요 ? 혹은 MainPage와 같은 컴포넌트를 만들어 하위에 두는 것도 좋을 것 같습니다!

다른 페이지가 추가되는 경우 유용할 것 같습니다. 또한, 각 섹션별(BestTab, SildeContainer, ...) 간격을 조정하는데 좀 더 일괄적으로 다룰 수 있는 장점이 있을 것 같습니다

Header이하의 컴포넌트들을 묶는 건 어떨까요 ? 혹은 MainPage와 같은 컴포넌트를 만들어 하위에 두는 것도 좋을 것 같습니다!

다른 페이지가 추가되는 경우 유용할 것 같습니다. 또한, 각 섹션별(BestTab, SildeContainer, ...) 간격을 조정하는데 좀 더 일괄적으로 다룰 수 있는 장점이 있을 것 같습니다

Main 이라는 컴포넌트를 하나 만들어서 묶는 방식으로 수정하겠습니다!
🙏

snowjang24 · 2021-04-26T06:52:05Z

src/style.js

+    outline:none;
+  }
+  * {
+    box-sizing: border-box;


Reset css나 Normalize에 대해 한 번 학습해보면 좋을 것 같습니다!

Global Style ~ 👍

snowjang24 · 2021-04-26T06:52:46Z

src/index.css

@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap");


display=swap을 통해 폰트가 로드되는 동안 글자가 표시되지 않는 이슈를 해결하셨군요 👀 👍

snowjang24 · 2021-04-26T06:53:12Z

src/component/util/Label.jsx

+  background-color: ${props => props.bgColor};
+`;
+// #86C6FF, #82D32D
+const COLOR = {


한글 변수명! 처음봐요! 👍
혹시 이렇게 쓰신 이유가 있나요? 궁금해서 ! 여쭤보는겁니다!

한글 변수명! 처음봐요! 👍
혹시 이렇게 쓰신 이유가 있나요? 궁금해서 ! 여쭤보는겁니다!

DB에서 label의 값을 한글 배열로 전달해주고 있어서 그 명칭에 맞춰서 작성했습니다!
그런데 생각해보니 그냥 영문이나 넘버로 처리하는게 어땠을까 싶네요..!

snowjang24 · 2021-04-26T06:54:27Z

src/component/slideContainer/SlideItems.jsx

+export default function SlideItems() {
+  return (
+    <SlideItemsStyle>
+      <ItemCard src = "http://web.archive.org/web/20190129014225im_/https://cdn.bmf.kr/_data/product/IF235/20ea0478c029ad4fda3fa2885d53c5d4.jpg" title = "[집밥의완성]초여름보양세트" description = "무더위에 대비하는 6월 한상차림 초여름 보양세트" salePrice="5000" normalPrice="6000" text="이벤트특가" color="#fff" bgColor="#82D32D"/>


Array와 map을 이용하면 좀 더 보기 좋을 것 같습니다!

임시인거죠? 🤔

Array와 map을 이용하면 좀 더 보기 좋을 것 같습니다!

임시인거죠? 🤔

넵! 슬라이드 모듈을 만들기 전에 UI적인 처리만 해뒀습니다!

snowjang24 · 2021-04-26T07:22:40Z

src/component/header/Header.jsx

+  return (
+    <HeaderStyle>
+      <HeaderLeft/>
+      <HeaderRight/>


Left와 Right라는 모호한 명칭보다는 Navigation과 같은 해당 컴포넌트를 아우를 수 있는 단어를 쓰는 것을 권장드립니다

Left와 Right라는 모호한 명칭보다는 Navigation과 같은 해당 컴포넌트를 아우를 수 있는 단어를 쓰는 것을 권장드립니다

Left와 Right에 들어가는 주요 컴포넌트로 이름을 변경하는게 더 명확하겠네요!
좋은 의견 감사합니다 👍

snowjang24 · 2021-04-26T07:30:14Z

src/component/util/ItemCard.jsx

+    line-height: 1rem;
+  }
+  div:first-child {
+    padding-bottom: 1rem;


이런방식으로 사용하게 되면 자식 Element 뿐만 아니라 자손 Element까지 적용될 것 같습니다. Child Selector과 descendant Selector에 대해 학습해보면 좋을 것 같습니다.

만약 decendant에 해당하는 모든 요소에 적용하기를 의도했다면 이 의견은 패스하셔도 좋습니다 😃

descendant Selector에 대해 학습해보면 좋을 것 같습니다.

자손 요소가 없는 요소라 Child Selector를 적용하지 않았습니다!
비슷한 부분에서 자손 요소가 있는데 처리를 안해서 다시 수정한 기억이 떠오르네요 :)

좋은 의견 감사합니다!! 🥇

snowjang24 · 2021-04-26T07:35:54Z

src/component/slideContainer/SlideContainer.jsx

+
+const SliderArrowBtnsStyle = styled.div`
+  position: absolute;
+  width: calc(100% + 7rem);


calc를 활용한 배치가 인상적이군요 👍

이러한 방식도 좋지만 Slider의 크기와 화면 크기가 동일한 경우에는 해당 버튼들이 안보일 수도 있다는 문제가 생길 것 같습니다. 물론 반응형에 대한 기획과 개발은 없지만

이런 경우, Slider에 좌우 마진을 추가하고 그 자리에 버튼을 넣는 방식으로 구현하면 어느정도 큰 수정을 하지 않고도 반응형을 대응할 수 있을 것 같습니다. 이러한 방법에 대해 한 번 고민해보시고,

그래도 해결이 안된다면 좀 더 자세한 힌트와 함께 도와드리겠습니다. 주저없이 질문해주세요!

calc를 활용한 배치가 인상적이군요 👍

이러한 방식도 좋지만 Slider의 크기와 화면 크기가 동일한 경우에는 해당 버튼들이 안보일 수도 있다는 문제가 생길 것 같습니다. 물론 반응형에 대한 기획과 개발은 없지만

이런 경우, Slider에 좌우 마진을 추가하고 그 자리에 버튼을 넣는 방식으로 구현하면 어느정도 큰 수정을 하지 않고도 반응형을 대응할 수 있을 것 같습니다. 이러한 방법에 대해 한 번 고민해보시고,

그래도 해결이 안된다면 좀 더 자세한 힌트와 함께 도와드리겠습니다. 주저없이 질문해주세요!

좋은 답변 감사합니다!
지금은 1200px 이상에서의 환경만 고려하고 있지만 반응형도 추가 개발 사항으로 고려하고 있어요!
수정하면 참고할 수 있도록 저장해두겠습니다! 💯

snowjang24 · 2021-04-26T07:40:49Z

src/component/header/Navigations.jsx

+          <li>절임/장아찌</li>
+        </ul>
+      </NavigationStyle>
+    </NavigationsStyle>


NavigationItem
NavigationList / NavigationGroup 과 같은 이름으로 확 눈에 띄게 만드는 것도 좋을 것 같습니다 👍
변수 이름이 길어지는 것에 대해 두려워할 필요가 없습니다!

snowjang24 · 2021-04-26T07:46:11Z

src/component/header/HeaderRight.jsx

+const HeaderRightStyle = styled.div`
+  display: flex;
+  align-items: center;
+  width: 40vw;


이 코드와 별개로, vw와 %의 차이에 대해 아시면 좋습니다!
스크롤바와 관련 있습니다 😃

이 코드와 별개로, vw와 %의 차이에 대해 아시면 좋습니다!
스크롤바와 관련 있습니다 😃

넵! 감사합니다!!! ::)

안녕하세요 리뷰를 맡은 Snow입니다 ☃️

깔끔하게 작성한 코드와 컴포넌트 구조 덕분에 읽는데 어려움이 없었습니다.

리뷰 코멘트 남긴 부분에 대한 의견 대부분 강력한 수정 필요! 보다는 의견 위주로 남겼습니다. 😃

Slider의 경우, 패키지로 배포하기에는 다소 아쉬운 점이 보입니다. 다른 라이브러리처럼 파라메터로 값을 넘겨주어 어느정도 커스텀이 가능하게 끔 만들어보는 것도 많은 도움이 될 것 같습니다. Material UI나 다른 Carousel 혹은 Slider과 같은 라이브러리를 참고하면 좋을 것 같습니다!

커밋 메세지가 간결하고 깔끔하여 아주 보기 좋군요 👍

안녕하세요,
상세하게 리뷰해주신 덕분에 코드가 보다 깔끔해진 것 같습니다!
Slider는 현재 구현 중에 있는데, 말씀해주신 것처럼 커스텀 기능을 추가한 다음 별도로 분리해서 모듈로 배포하는 것을 목표로 하고 있습니다 :)
양이 적지 않았을텐데 꼼꼼히 봐주셔서 감사합니다~!! 👏🌷

main 음식에 대한 테스트 api 생성

* [#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>

ha3158987 and others added 14 commits April 19, 2021 16:47

[#1] init: 🎉 개발 환경 구축

e8f1390

Merge pull request #2 from ha3158987/team19/1

c7655be

[#1] 개발 환경 구축 완료

[#3] feat: ✨ Header 만들기

c0aa248

Merge pull request #4 from ha3158987/team19/3

72df72f

[#3] Header 구현 완료

[#5] feat: ✨ BestTab UI 구현

875b6d6

- BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx

Merge pull request #6 from ha3158987/team19/5

d48fb37

[#5] feat: ✨ BestTab UI 구현

[#8] feat: ✨ ShowMoreBtn UI 구현

2b7ab1a

- App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현

Merge pull request #9 from ha3158987/team19/7

65ec0e1

[#7] feat: ✨ Slide UI 구현

[#10] feat: ✨ Header Dropdown 구현

a819c98

- App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현

Merge pull request #11 from ha3158987/team19/10

a2ca5f7

[#10] feat: ✨ Header Dropdown 구현

[#13] feat: ✨ API에 fetch 요청 로직 구현

a9858a0

Merge pull request #14 from ha3158987/team19/13

968ecc8

API 데이터 fetch 요청 + 베스트 반찬 tab 랜덤 출력

ha3158987 changed the title ~~[FE][Json & Dico] Sidedish 첫번째 PR~~ [FE][Team19] Sidedish 1주차 PR Apr 23, 2021

deprecated-hongbiii assigned kowoohyuk and ha3158987 Apr 24, 2021

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

snowjang24 self-requested a review April 26, 2021 06:46

snowjang24 self-assigned this Apr 26, 2021

ha3158987 and others added 2 commits April 26, 2021 16:48

[#15] feat: ✨ 상세 modal 페이지 UI 구현

f81d4f2

- App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현

Merge pull request #18 from ha3158987/team19/15

23f093c

[#15] feat: ✨ 상세 modal 페이지 UI 구현

snowjang24 reviewed Apr 26, 2021

View reviewed changes

crongro merged commit 9793aba into codesquad-members-2021:DJ Apr 26, 2021

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

Merge pull request #31 from skawnkk/be/feature/apiTest

166343c

main 음식에 대한 테스트 api 생성

ha3158987 mentioned this pull request Apr 29, 2021

Refactoring: 코드 리뷰 코멘트 반영 및 개선 ha3158987/sidedish#23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE][Team19] Sidedish 1주차 PR #31

[FE][Team19] Sidedish 1주차 PR #31

ha3158987 commented Apr 23, 2021 •

edited

Loading

snowjang24 left a comment

snowjang24 Apr 26, 2021

kowoohyuk Apr 27, 2021

snowjang24 Apr 26, 2021

snowjang24 Apr 26, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

snowjang24 Apr 26, 2021

snowjang24 Apr 26, 2021

kowoohyuk Apr 29, 2021

ha3158987 Apr 29, 2021

		@@ -0,0 +1,15 @@
		@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap");

[FE][Team19] Sidedish 1주차 PR #31

[FE][Team19] Sidedish 1주차 PR #31

Conversation

ha3158987 commented Apr 23, 2021 • edited Loading

컴포넌트 구조

진행현황

회고

Json

잘한 점

개선할 점

Dico

잘한 점

개선할 점

snowjang24 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

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

ha3158987 commented Apr 23, 2021 •

edited

Loading