[Goody Kyle] 메인화면 UI #11

hayoung123 · 2021-04-22T01:52:32Z

구현한 사항

Feature/header

[Feat]: useFetch Closes #8

Feature/use fetch error fixed

Feature/tab UI

[Feat]: slidedish 폴더구조 생성

Feature/best style

Merge. Style/slide list

Merge/style Resolve #5 Resolve #7

#8 Feature/slide dish fetch & More button resolve #8

Feature/item hover

전체 UI 레이아웃 수정

crongro

잘 구현 중이시네요.

기능 개발이외에도 리액트 렌더링 등에 대해서도 두 분이 같이 공부하시면서 개발 이어나가세요.

crongro · 2021-04-22T05:20:32Z

sidedish/src/App.js

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


ThemeProvider 로 감싸도 fragment 가 필요한 것인가요?

fragment 가 무엇인지 잘 모르겠습니다.. 제가 아직 Provider에 대한 공부가 부족한 것 같습니다 ㅜㅜ

crongro · 2021-04-22T05:23:00Z

sidedish/src/component/BestSidedish/BestSidedish.jsx

+
+  useEffect(() => {
+    initBestSidedish(
+      `https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best`


https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/

여기까지는 다른 fetch 요청에서도 사용되는 동일한 URL 같은데요.
이 부분이 하드코딩되어 있기도 하니 분리해서 선언해두거나,
build time에 URL을 대치해서 번들링 하도록 하는 방법을 찾아보실래요?

피드백 주신 부분 반영하여 공통된 URL을 export 하는 다른 파일을 만들었습니다. 감사합니다.

crongro · 2021-04-22T05:23:27Z

sidedish/src/component/BestSidedish/BestSidedish.jsx

+    const response = await fetch(url);
+    const data = await response.json();
+    const parsedData = parseBestList(data);
+    setBestList(parsedData);
+    setFocusedCategory(parsedData[0].id);


비동기 함수를 동작시킬때, try - catch로 에러처리를 한번 해보시면 좋겠습니다.

trt - catch 에 대해서 잘 몰랐는데, 이번 기회에 카일 덕분에 조금은 감을 잡은 것 같습니다.
피드백 감사합니다 ㅎㅎ

crongro · 2021-04-22T05:27:11Z

sidedish/src/component/BestSidedish/BestSidedish.jsx

+
+const parseBestList = (data) => {
+  if (!data || !data.body) return;
+  return data.body.map(({ category_id, name }) => {


body 라는 속성명은 좀 두리뭉실해 보이네요.

저희가 백엔드 없이 코쿼에서 제공해주신 API를 썼는데, 그 API 의 데이터 속성이 body로 되어있었어서 이렇게 코딩을 했던 것 같습니다..

crongro · 2021-04-22T05:30:21Z

sidedish/src/component/BestSidedish/BestSidedish.jsx

+  return (
+    <div>
+      <Header>후기가 증명하는 베스트 반찬</Header>
+      {bestList && (


bestList false조건 대한 정확한 체크가 필요해보여요.
배열이면 길이 체크를 하던지요.

bestList 가 null 일 때로 조건을 바꿨습니다.ㅎㅎ

crongro · 2021-04-22T05:34:01Z

sidedish/src/component/DishItem/DishHover.jsx

+  const deliveryMsg = delivery_type.reduce((acc, msg, idx) => {
+    acc.push(
+      <div key={idx} className="deliveryMsg">
+        {msg}
+      </div>
+    );
+    if (idx !== delivery_type.length - 1) {
+      acc.push(<div key={`${msg}divider`} className="divider"></div>);
+    }
+    return acc;
+  }, []);


reduce사용도 좋네요.

map 뿐만 아니라 reduce를 사용해서도 DOM을 만들 수 있다는 걸 이번 기회에 kyle 덕분에 배운 것 같습니다~!

crongro · 2021-04-22T05:37:25Z

sidedish/src/component/DishItem/DishHover.jsx

+  width: ${({ size }) => (size === 'L' ? '384px' : '308px')};
+  height: ${({ size }) => (size === 'L' ? '384px' : '308px')};


https://styled-components.com/docs/basics#attaching-additional-props

size 체크 중복을 없애보죠.

중복이 보이면 늘 어떤식이든 제거해보려고 해보세요.

피드백 주신 부분 생각해보니,
width와 height 뒷 부분의 속성을 컴포넌트 함수 내부에서 변수로 바꾸고, 스타일에 prop 으로 넘겨주면 될 것 같아요.
감사합니다.

crongro · 2021-04-22T05:41:17Z

sidedish/src/component/SlideDish/SlideDish.jsx

+import useFetch from 'hooks/useFetch';
+
+const SlideDish = ({ category }) => {
+  const { data: slideData, loading } = useFetch(URL[category]());


useFetch 만들어서 적용했네요. 잘하셨어요.
error가 발생하면 error 도 반환해서 SlideDish컴포넌트에서 처리하면 더 좋을 듯.

지금은 error가 발생했을 때 에러를 던지기만 하지만,
말씀해주신 대로 에러에 따른 컴포넌트 렌더링을 따로 만들어뒀으면 더 좋을 것 같다는 생각도 듭니다.
감사합니다.

crongro · 2021-04-22T05:41:51Z

sidedish/src/fetchData.js

+    const data = await res.json();
+    cb(data);
+  } catch (err) {
+    console.log(err);


console 을 출력하려면 차라리 console.error 을 사용하세요.

넵 반영했습니다. 감사합니다.

너무 고생했습니다 :) (#11)

* [#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) * [#13] feat: CSS style 수정 - innerTitle 설정 * [#13] feat: MainDish,SideDish,BestDish CSS style디테일 설정 - mainDish의 <Icon>,<Image> margin 설정 * [#13] fix : tag 버튼 오류, carousel 렌더링 지연 방식 변경 - tag 가 이벤트 특가만 나타나는 오류 수정 - carousel 렌더링 지연 방식을 setTimeOut -> onTransitionEnd 로 변경 Co-authored-by: ink-0 <71919983+ink-0@users.noreply.github.com>

[BE] Course 반찬 추가

feat: Connect database close #3

feat : controller 추가

Feat: domain을 생성해라

* chore: Initialize structure 폴더 구조 짜봤습니다 ㅎㅎ * docs: Add database schema mwb,png file 오늘 관련 스키마 설계하여 mwb와 png파일 추가하였습니다. * [#1] chore: Test commit * Revert "[#1] chore: Test commit" This reverts commit 9546450. * chore folder 구성 * [#6] 캐러셀 슬라이드 구현 완료 * feat: header 정적 ui 작성 * feat: header 하위 레이어 이벤트 구현 * chore: 불필요한 파일, 주석 제거 * feat: tab ui * [#6]feat: Carousel Slide 완성 * [#11] feat: PopUp Modal frame 완성 * chore * feat: Carousel Slide Content * feat: Fetch tab ui data * feat: Modal * [#11] feat:PopUp Modal * fix: ui별 각각 스타일 적용 * feat: style, model tab ui 적용 * refactor: Carousel * feat: 모달 세부이미지 클릭 이벤트 적용 * feat: 캐로셀 리펙토링+모달 추가기능 합침 * feat: 주문하기 * feat: POST order && PopUp Carousel * feat: PopUp Carousel * refactor: PopUpModal * refactor: PopUpModal 클릭시 best Modal과 함께 뜨는 오류 수정 * chore: add gitignore * Update .gitignore * chore * chore Co-authored-by: 정이삭 <isaac56@naver.com> Co-authored-by: reminderclock <reminderclock@naver.com> Co-authored-by: reminderclock <71510362+reminderclock@users.noreply.github.com>

junzero741 · 2021-05-01T06:18:28Z

@crongro
꼼꼼한 피드백 감사합니다!
프로젝트를 정신없이 하다 보니 피드백 주신 부분에 대한 리플이 너무 늦었네요..
반성하겠습니다..

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

hayoung123 and others added 30 commits April 19, 2021 15:45

[Init] 컴포넌트 폴더 구조

09b0b8e

[Wip] 초기 협업 셋팅 진행중

cce5d2b

[Fix]: react abolute imports는 util파일은 안된다.

b46c8d9

[Feat]: Header 스켈레톤 구조

05de6a1

[Style] 헤더 스타일 완성

d385556

Merge pull request #3 from hayoung123/feature/header

da3c172

Feature/header

[Feat]: best side dish tab static UI

2ce4d76

[Feat]: Best Sidedish skeleton UI - #5

8790f30

[Feat]: useFetch close - #8

8be7be3

Merge pull request #9 from hayoung123/feature/useFetch

840c08c

[Feat]: useFetch Closes #8

[WIP]: fetch 로 전환중..

f201b7e

[Fix]:Best 데이터 fetch 오류 수정

a85517d

Merge pull request #11 from hayoung123/feature/useFetch

30a66dd

Feature/use fetch error fixed

[Feat]: tab 기능 구현

19de15d

[Fix]: useEffect 무한 렌더링 수정

2c3ea15

Merge pull request #12 from hayoung123/feature/tabUI

ae1fb59

Feature/tab UI

[Feat]: slidedish 폴더구조 생성

af9cd23

Merge pull request #13 from hayoung123/feature/tabUI

e17bfe6

[Feat]: slidedish 폴더구조 생성

[Style]: tab card style applied

2d4b92f

[Style]: best header and tab style applied

891e9d4

[Style]: best item list style applied

7a5867b

[Style]: distItem, slide 스타일

a1b5215

[Style]: max-witdh로 뼈대 css

81c672b

[Style]: dishItem 약간 수정

54faa6a

[Style]: best style minor fixed

9a40353

[Delete]: junk file delete - resolve #14

a8a92a7

Merge pull request #15 from hayoung123/feature/best-style

a87cf72

Feature/best style

Merge pull request #16 from hayoung123/style/slideList

679bbfd

Merge. Style/slide list

[Style] 전체적인 style

3ae3aa2

Merge pull request #17 from hayoung123/merge/style

7066d6c

Merge/style Resolve #5 Resolve #7

hayoung123 added 9 commits April 21, 2021 15:37

[Feat]: slideData fetch & url 따로 모음

d1bc2c6

[Feat]: 더보기 버튼

8568a0a

[Feat]: 더보기 접기 기능& 더보기 버튼 style

6da6f82

Merge pull request #18 from hayoung123/feature/slideDishFetch - resolve

0e7981b

#8 Feature/slide dish fetch & More button resolve #8

[Chore] 파일변경 및 사용안하는 파일 삭제

57ce282

[Feat]: dish hover 구현

dfef44a

Merge pull request #19 from hayoung123/feature/itemHover

ab75bdd

Feature/item hover

[Style]: 1280px로 변경

223bcaa

[Style]: flex에서 margin으로 변경

f4a4e41

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

hayoung123 added 2 commits April 22, 2021 10:55

[Chore]: 불필요한 부분 삭제

9b4dc57

Merge pull request #20 from hayoung123/kyle/carousel

7cc3bef

전체 UI 레이아웃 수정

crongro self-assigned this Apr 22, 2021

crongro self-requested a review April 22, 2021 03:04

crongro approved these changes Apr 22, 2021

View reviewed changes

crongro merged commit 91192f9 into codesquad-members-2021:goooyle Apr 22, 2021

pay-napster-x pushed a commit that referenced this pull request Apr 26, 2021

Merge pull request #21 from ghojeong/feature/sidedishEntity

8e59a4b

너무 고생했습니다 :) (#11)

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

Merge pull request #11 from Jiwon-JJW/BE/preparation/mockup-api-course

098dcab

[BE] Course 반찬 추가

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

Merge pull request #11 from ghis22130/mysql-connect

f0730eb

feat: Connect database close #3

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

Merge pull request #11 from Malloc72P/controller

d20b021

feat : controller 추가

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

Merge pull request #11 from swing-park/feature-create-domain

d9290c6

Feat: domain을 생성해라

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Goody Kyle] 메인화면 UI #11

[Goody Kyle] 메인화면 UI #11

hayoung123 commented Apr 22, 2021

crongro left a comment

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

crongro Apr 22, 2021

junzero741 May 1, 2021

junzero741 commented May 1, 2021

		width: ${({ size }) => (size === 'L' ? '384px' : '308px')};
		height: ${({ size }) => (size === 'L' ? '384px' : '308px')};

[Goody Kyle] 메인화면 UI #11

[Goody Kyle] 메인화면 UI #11

Conversation

hayoung123 commented Apr 22, 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

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

junzero741 commented May 1, 2021