[FE][Team17] 1주차 PR #26
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 노션에 정리한 디렉토리구조를 토대로 컴포넌트 구조를 셋업했습니다 - CRA를 통해 app생성 및 레거시 파일을 삭제 했습니다.
Chore : 디렉토리 및 컴포넌트 파일 셋업
- 공통 스타일 컴포넌트를 Styles안에 관리했습니다. - 현재 svg같은 icons들을 따로 icons 폴더 안에 두었습니다. - mock API를 이용해서 받아온 데이터를 통해 렌더까지 구현한 상태입니다.
Feat : MainItems View 제작 및 스타일 적용 중
- BestItems, Header 컴포넌트 기초 코드 추가
Feat: 디렉터리 내 파일 기본 세팅 진행
- MainItemsImage의 픽셀 308px -> 296px 로 변경 - DetailModalWrapper -> DetailModalWindow로 네이밍 수정
- Detail Modal 구성중입니다. - Badge의 switch문에 default case를추가하였습니다.
Feat: Header, Best Items UI 추가
…into team17-FE-Swing
Chore : 컨플릭트 해결 후 merge
- 목데이터를 이용한 렌더까지 구현완료 - 공통 스타일 컴포넌트 관리 방법 리펙토링 필요함 - utils에 sortBadges.js 파일 추가
Feat : 모달창 구현 중
Team17 fe daisy
Feat: Styled Component 중복 코드 제거
chore : FE폴더로 파일 전체 이동
- 변경 된 스타일 컴포넌트 정책 반영 - theme.js 오류 수정 - 전체 해상도 1440px로 조정
Feat : 메인 아이템 및 모달창 뷰 구현 완료
crongro
approved these changes
Apr 26, 2021
| @@ -0,0 +1,13 @@ | |||
| import DetailModalWindow from "./DetailModalWindow/DetailModalWindow"; | |||
| import * as S from "./DetailModalStyles"; | |||
There was a problem hiding this comment.
(그냥 궁금)
alias 를 사용한 이유는 뭔가요? DetailModalBackground만 사용하면 직접 DetailModalBackground만 표현해도 될거 같아서요.
| @@ -0,0 +1,203 @@ | |||
| import styled from "styled-components"; | |||
| import * as CS from "../Styles/commonStyles"; | |||
There was a problem hiding this comment.
여기서는 CS라는 alias가 괜찮은 목적인거 같아요.
아래에서 많이 쓰이고 있고요.
| @@ -0,0 +1,12 @@ | |||
| import * as S from "../../DetailModalStyles"; | |||
| import * as CS from "../../../Styles/commonStyles"; | |||
There was a problem hiding this comment.
CRA 기반의 프로젝트에서 path alias를 적용하기 위해서 웹팩설정등을 하려면 eject 를 해야할텐데요.
그렇지 않고 몇가지 방법이 있나보네요.
https://medium.com/@suraj.93p/creating-path-aliases-in-create-react-app-with-react-app-rewired-c2cde81b472
| const Counter = () => { | ||
| const [count, setCount] = useState(0); | ||
| return ( | ||
| <CS.Box.FLEX_ROW_BOX> |
Comment on lines
+20
to
+26
| fetch(url) | ||
| .then((res) => res.json()) | ||
| .then((json) => { | ||
| if (json && json.data) { | ||
| setData(json.data); | ||
| } | ||
| }); |
There was a problem hiding this comment.
가급적 async/await 를 사용하시고요.
promise then.then 방식이라면 catch 메서드를 체이닝으로 마지막에 연결지으시고요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises#chaining
| getData(); | ||
| }, []); | ||
|
|
||
| if (!data) return null; |
|
|
||
| useEffect(() => { | ||
| getData(); | ||
| tests(); |
There was a problem hiding this comment.
test는 의미없는거 같고..
혹시 여러개 처리 해야하는 것이면, useEffect를 여러개 선언하세요.
Comment on lines
+13
to
+20
| <MainItemsCardImage image={items.image} alt={items.alt} /> | ||
| <MainItemsCardTitle title={items.title} /> | ||
| <MainItemsCardDescription description={items.description} /> | ||
| <S.MainItemsPriceWrapper> | ||
| <MainItemsCardSPrice sPrice={items.s_price} /> | ||
| <MainItemsCardNPrice nPrice={items.n_price} /> | ||
| </S.MainItemsPriceWrapper> | ||
| <MainItemsCardBadge badge={items.badge} /> |
There was a problem hiding this comment.
여기코드를 보면 MainItemsCard라는 이름이 계속 앞에 붙어있어서 어떤 속성인지 잘 안드러나는데요.
default반환값은 alias 가 바로 되니가, 이런식으로 짧은 이름으로 받으면 어때요?
//before
import MainItemsCardSPrice from "./MainItemsCardSPrice";
//after
import CardSPrice from "./MainItemsCardSPrice";
sallyjellyy
pushed a commit
that referenced
this pull request
Apr 29, 2021
wheejuni
pushed a commit
that referenced
this pull request
Apr 29, 2021
crongro
pushed a commit
that referenced
this pull request
Apr 29, 2021
* First Commit * [FE][Team17] 1주차 PR (#26) * First Commit * Chore : 디렉토리 및 컴포넌트 파일 셋업 - 노션에 정리한 디렉토리구조를 토대로 컴포넌트 구조를 셋업했습니다 - CRA를 통해 app생성 및 레거시 파일을 삭제 했습니다. * Feat : MainItems View 제작 및 스타일 적용 중 - 공통 스타일 컴포넌트를 Styles안에 관리했습니다. - 현재 svg같은 icons들을 따로 icons 폴더 안에 두었습니다. - mock API를 이용해서 받아온 데이터를 통해 렌더까지 구현한 상태입니다. * Feat: 디렉터리 내 파일 기본 세팅 진행 - BestItems, Header 컴포넌트 기초 코드 추가 * style : 폴더 이름 변경 및 이미지 픽셀 세부 조정 - MainItemsImage의 픽셀 308px -> 296px 로 변경 - DetailModalWrapper -> DetailModalWindow로 네이밍 수정 * Feat : Detail Modal 구현 중 - Detail Modal 구성중입니다. - Badge의 switch문에 default case를추가하였습니다. * Feat: Header, Best Items UI 추가 * Feat : 모달창 구현 중 - 목데이터를 이용한 렌더까지 구현완료 - 공통 스타일 컴포넌트 관리 방법 리펙토링 필요함 - utils에 sortBadges.js 파일 추가 * Feat: Header animation 추가 * Feat: BE API 사용하여 데이터 repalce * Feat: Styled Component 중복 코드 제거 * chore : FE폴더안으로 전체 파일 이동 * chore : FE폴더로 파일 이동 * Feat : 메인 아이템 및 모달창 뷰 구현 완료 - 변경 된 스타일 컴포넌트 정책 반영 - theme.js 오류 수정 - 전체 해상도 1440px로 조정 Co-authored-by: Dami Kim <dami.k.dev@gmail.com> Co-authored-by: Dami Kim <56783350+damilog@users.noreply.github.com> * Feat : 모달창 기능 구현 완료 - 썸네일 누를 시, 하이라이트 되며 메인이미지 변경 - 아이템의 재고 현황에 맞는 버튼 활성화 및 스타일 변경 - count에 따른 총 주문 금액 변경 - 주문하기 버튼 누를 시 모달창 close 이벤트 생성 예정 * Merge pull request #32 from swing-park/team17-FE-Swing Feat : 모달창 기능 구현 완료 * Feat: commonStyles 적용, Tab click 이벤트 추가(fetch 미구현) * Feat: BestItems Hover 기능 추가 * Feat: BestItems Tab UI 클릭시 데이터 fetch 기능 추가 * Feat: 가격 단위, 뱃지 변경 기능 추가 * Merge pull request #34 from swing-park/team17-FE-Daisy Team17 fe daisy - dev merge * Feat: 실종된 Header 추가 * Feat: Header Style 문제 해결, Slider 컴포넌트 추가 * Feat: bestItems 랜덤 정렬, hover text fetch 받은 data로 적용 * Feat : 모달 창 상세 기능 구현 완료 , 모든 카테고리 보기 기능 구현 완료 , 호버 박스 기능 적용 - 카드를 누르면 detail modal을 띄우는 메서드 구현 - 주문하기 or 모달창 클로즈 버튼 누르면 모달창 close - 모든 카테고리 버튼 누르면 모든 카테고리가 뜨며, 숨김 버튼으로 전환됨. - 숨기기 버튼을 누르면 원 상태로 복귀 - 특가와 기존 가격이 같으면 기존 가격만 렌더되도록 하는 기능 구현 - 카드에 호버하면 delivery_type이 보이는 호버 박스 보여주기 - 카운트가 0이거나 stock을 초과하면 주문하기 버튼 비활성화 - 카운트는 사용자가 상한선,하한선을 지정할 수 있음 * Feat: Best Items에 Detail Modal 기능 추가 * Style: 불필요한 코드 제거 * Refactor : proxy설정 제거 , 스타일 컴포넌트 이름 재정의 , 기타 리뷰받은 것 리펙토링 * Fix: setupProxy 제거, 8080 붙인 url로 수정 * Feat: slider 컴포넌트 추가 * Fix: Slider 컴포넌트 버그 해결 * Feat : Slider -> MainItems에 적용 완료 * Feat : put요청 기능 구현 완료 , 슬라이드 컴포넌트 모달창에 적용 완료 - PUT요청 시 실제 주문 수량 반영됨 - 슬라이드에 optionalFn 받을 수 있게 추가함 - 컴포넌트에 맞도록 모달 슬라이더 UI 조정 * Fix: Slider 컴포넌트 내 optionalFn 예외 처리로 오류 해결 * Style: Header MenuWrapper Style 수정 * Style: 클릭이 일어나는 요소에 cursor 속성 추가 Co-authored-by: Dami Kim <dami.k.dev@gmail.com> Co-authored-by: Dami Kim <56783350+damilog@users.noreply.github.com>
crongro
pushed a commit
that referenced
this pull request
May 3, 2021
* [#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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
1주차 PR
현재 스타일 컴포넌트 재사용을 위해 공통 스타일 컴포넌트를 만들어 두었습니다.
Styles안에 있는 파일들에 대해 리뷰해 주시면 감사하겠습니다 !
또한 컴포넌트로 나뉜 것들중 비슷한 구조를 가진 컴포넌트 들이 있습니다.
컴포넌트의 하위 컴포넌트로 나눠서 같은 구조여도 따로 만들면 좋을 지, 아니면 공통되는 컴포넌트를 끌어와서 쓰는 게 맞는지 질문드립니다 !
감사합니다 !