-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
전남대FE_경주원_3주차 과제 #160
전남대FE_경주원_3주차 과제 #160
Conversation
* Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]>
const deleteObserver = () => { | ||
const unobserve = observer.observe(loaderRef.current); | ||
observer && unobserve(); | ||
loaderRef.current.style = "display:none"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분에서 can not read properties of null style
에러가 떠서 코드 추가해줬습니다
if (!loaderRef || !loaderRef.current) return;
loaderRef.current.style.display = "none";
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이번주도 과제하시느라 고생하셨어요!
항상 코드를 작성하실때 고민하시고 열심히 하시는게 느껴져서 굉장히 좋네요 👍
남겨주신 질문 답변도 드리겠습니다!
- lazy loading과 react hot reload
저도 겪어본 적이 없어서 잘은 모르겠지만, lazy import가 원인이라고 생각하셔서 관련 키워드로 검색한 결과를 하나 가져오긴 했습니다!
gaearon/react-hot-loader#1447
vitejs/vite#4298
https://nextjs.org/docs/architecture/fast-refresh#limitations
핫로딩이라고 부르는 HMR(Hot Module Replacement)은 생각보다 다양한 원인에 의해 이루어지지 않을 수 있습니다.
관련된 이슈를 미리 찾아주는 eslint 룰도 따로 있던 것으로 알고있기는 합니다..!
- Suspense의 위치
Suspense
의 용법에 관련해서는 정답이 없습니다. 비동기처리를 어떤 UI/UX를 가지고 해줄 것인지에 따라 충첩된 Suspense
를 사용할 수도 있고 최상위에서 하나의 Suspense
만 사용할 수도 있습니다.
여러개의 로더가 있을 경우에는 중첩된 Suspense
를 이용할 수도 있겠네요!
다만 충첩의 경우에는 API 호출이 워터폴로 이루어질 수 있으니 잘 확인해보시는게 좋을 것 같아요!
- Loader component 디렉토리 관리
지금의 구조에서는 더 괜찮은 방법은 없어보이기도 하네요. 저같은 경우에는 featues
폴더를 만들어 각각 페이지(피쳐) 별로 따로 구현하거나 로더를 모아두는 폴더를 따로 만들어 구현할 것 같습니다!
다만 정답이 없는 부분이니 생각하시는대로 구현하셔도 될 것 같습니다.
- prop 에러
찾아보셨겠지만 문서에 관련 이슈에 대해서 젹혀있기는 하네요!
https://legacy.reactjs.org/warnings/unknown-prop.html
일단 스타일은 이렇게 작성하는 것이 맞아보이고 (true
라는 속성은 없으니) 굳이 해당 인자가 필요한지가 궁금하기는 하네요. fixed
가 아니라 absolute
로 작성하게 된다면 스토리북 상에서도 문제가 없을 것 같아서요!
position: ${({ isStorybookMode }) => isStorybookMode ? 'static' : "fixed"};
이 부분은 이 코드 변경으로 해결이 안된다고 하시면 저도 조금 더 찾아보겠습니다!
"react-helmet-async": "^1.3.0", | ||
"react-hook-form": "^7.45.1", | ||
"react-loader-spinner": "^5.3.4", | ||
"react-query": "^3.39.3", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그냥 react-query
가 아닌 @tanstack/react-query
를 설치하는 것이 좋아보여요!
react-query
는 3버전에서 업데이트가 되고 있지 않습니다!
switch (error.response.status) { | ||
case 401: | ||
// Promise chaining | ||
return new Promise(() => {}); | ||
case 404: | ||
return new Promise(() => {}); | ||
default: | ||
return Promise.reject(error); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 이후 어떤 처리가 들어갈지는 모르겠지만 깔끔하네요!
!localStorage.getItem("accessTokenDate") || | ||
!localStorage.getItem("accessToken") |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
localStorage.getItem
를 호출하는 부분이 많아 보이는데요.
if
문 이전에 각각 한 번만 호출해도 충분할 것 같아요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영해두겠습니다!!
return ( | ||
<Styled.Container {...props}> | ||
<Styled.Logo | ||
src="https://st.kakaocdn.net/commerce_ui/front-talkstore/real/20230707/130532/assets/images/pc/pc_logo.png" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cdn
주소도 환경변수로 빼는 것도 좋을 것 같네요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제가 cdn 주소를 따로 관리해야겠다고 생각한다면 먼저 constant로 관리하는 방법이 떠오를 것 같은데, 환경변수로 빼는 것을 추천해주신 이유가 궁금합니다!! 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
실무에서는 서비스 페이즈(개발, 테스트, 운영)가 나뉘어 있을 수 있는데요. 각각 cdn의 주소가 다를 수 있을 수 있기 때문에 확장성의 이유입니다! 사실 이 프로젝트에서는 꼭 필요한 부분은 아니긴 할 수 있어요!
return ( | ||
<Container> | ||
{path.map((p) => ( | ||
<> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key
가 누락되어 있습니다! Fragment
를 이용해 렌더링해 추가해주시면 좋을 것 같습니다.
const navigate = useNavigate(); | ||
|
||
const onCardClick = (id) => { | ||
navigate(`${routes.product}/${id}`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/product/:id
과 같이 작성하고 generatePath
함수를 같이 이용하면 좋아보이네요~!
import { useInfiniteQuery } from "react-query"; | ||
import productAPI from "@/api/productAPI.js"; | ||
|
||
function useGetInfiniteProductsQuery({ observer, loaderRef }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ref 자체를 받는 것이 아니라 ref.current
를 받는 것도 좋아보이네요!
const { data, fetchNextPage } = useInfiniteQuery( | ||
"getAllProducts", | ||
async ({ pageParam = 0 }) => { | ||
const { data } = await productAPI.getAllProducts({ | ||
pageIndex: pageParam, | ||
}); | ||
return data.response; | ||
}, | ||
{ | ||
getNextPageParam: (lastPage, allPages) => { | ||
if (lastPage.length === 0) { | ||
return deleteObserver(); | ||
} | ||
return allPages.length; | ||
}, | ||
suspense: true, | ||
retry: 1, | ||
} | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
query, mutation 관련 훅들도 따로 분리해보는 것도 좋아보입니다! 또한 쿼리키도 상수화 해서 쓰면 좋을 것 같아요!
time={2000} | ||
style={{ position: "relative", left: "-5rem" }} | ||
/> | ||
<ErrorBoundary fallback={<div>api 통신 오류</div>}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fallback
이 <div>api 통신 오류</div>
인 것은 잘못된 것 같습니다!
다른 오류일 수도 있을 것 같아요. 어떻게 fallback
컴포넌트를 확장할지 고민해보시는 것도 좋을 것 같아요!
<Suspense key={info.id} fallback={<ProductInfoCardLoader />}> | ||
<ProductInfoCard | ||
key={info.id} | ||
id={info.id} | ||
image={info.image} | ||
description={info.description} | ||
productName={info.productName} | ||
price={info.price} | ||
/> | ||
</Suspense> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ProductInfoCard
내부에서 다른 비동기 작업이 없는 것 같은데 Suspense
를 이용한 이유가 있을까요?
아마 지금 적용이 되는 것은 lazy
를 이용한 import
가 있어서 일 것 같은데요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
카드 각각에 스켈레톤이 적용되는지 확인해보고 싶어서 굳이 필요하진 않지만 학습의 개념으로 적용해보았습니다 ㅎㅎ 4주차 pr에는 프로덕션에 맞춰 제거하도록 하겠습니다!!
This reverts commit 689c6e2.
이 방법이 더 적합한 방법이라고 생각하며 |
* Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 * feat: GlobalTemplate.jsx style 변경 * chore: .eslintrc.cjs rules 변경 * fix: GlobalTemplate.jsx style 수정 * feat: atom component Stars.jsx 생성 * fix: useGetInfiniteProductsQuery.js can not read properties of null 에러 해결 * remove: public/assets/images 삭제 * fix: useGetInfiniteProductsQuery.js deleteObserver 함수 수정 * feat: router.jsx에 Product.jsx 추가 * feat: changeNumToMonetaryUnit.js 함수 분리 * feat: Storybook sorting 추가 * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * feat: 3주차 피드백 1차 적용 * feat: 개별 상품 페이지 * feat: 장바구니 페이지 * feat: week4 수정 사항 추가 * feat: style 변경 * feat: 장바구니 페이지 주문 버튼에 건수 추가 * feat: 주문하기 페이지 사용자 배송지 정보 생성 * Update README.md * feat: 주문하기 페이지 및 주문 확인 페이지 * feat: GlobalNavBar.jsx style 반응형으로 변경 * feat: Home.jsx grid 반응형으로 변경 * feat: NotFound.jsx 생성 및 라우터 추가 * feat: Home.jsx style 반응형 추가 * feat: Product.jsx style 반응형 추가 * feat: Product.jsx 로그인 모달창 추가 * feat: main.jsx QueryClientProvider, jotai Provider App.jsx로 이동 * feat: 반응형 style 변경 * remove: isLoggedIn.atom.js 삭제 * feat: useBodyStyleFixed.js 생성 * rename: usePostOrderMutation.js => useSaveOrderMutation.js * feat: OrderRequest.jsx 비제어스럽게 리팩토링 * feat: ProductOptionResult.jsx style 추가 * feat: router.jsx errorElement 추가 * feat: useGetCartItemsQuery.js propTypes 추가 * feat: 옵셔널 체이닝 줄이기 * rename: postOrder => saveOrder * feat: routes.js staticServerUri 추가 * feat: Dockerfile, default.conf 생성 * fix: Mixed Content https, http error 해결 * fix: index.html * fix: change routes.js staticServerUri * remove: Dockerfile, default.conf * fix: index.html * feat: add index.html meta http-equiv * docs: 카테캠 2단계 수료식 발표자료 추가 * docs: README.md 작성 * Update README.md --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* Update README.md * test * test * Update README.md * Update README.md * Update README.md * atoms components * src/components/molecules/ * organisms component * hooks * pages * api * store * css atoms * update READ.md * redux, axios, router, styled-components * redux, axios, router, styled-components * update App.jsx * update index.js * update README.md * 오류 수정 * READMD.md * Label.jsx 수정 * carousel image1 * carousel image2 * carouselItem3 * image * card component * 카드 스켈레톤 * footer component * loader component * 2주차 수정 hook 추가 * 2주차 수정 * Carousel Photo component * layout * ProductCard * ProductGrid * main template * api * convert * install * 2주차 수정 * react-quer 설정 * style 수정 * error status * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * 지난주차 불필요한 파일 삭제 * 이미지 파일 삭제 * 이전 주차 수정 중 * tailwind 적용 * 이전 주차 수정중 * 404, 주문 페이지 * 별점 적용 * 로컬 스토리지 분리 * CartItem / Counter * CartList * 개별 상품 페이지 옵션 * 장바구니 api * 개별 상품 정보 * 개별상품 페이지 * onclick 수정 * keyframe styled-components * 스타일 수정 * 삼항 연산자 삭제 * CartList 수정 * 코드 정리 * Update README.md * @tanstack/react-query 설정 * 페이지 경로 추가 * 장바구니 페이지 수정 * 개별 페이지 수정 * api 요청 * 주문 페이지 * 결제 실패 에러 처리 * 테스트 라이브러리 설치 * 장바구니 페이지 에러 처리 * 파일명 오류 수정 * git test * 불필요한 파일 삭제 * Dockerfile * default.conf 작성 * 배포 설정 파일 * staticserver 설정 * staticserver * setting * commit * commit * api static * test * test * commit * 이미지 경로 수정 * 이미지 불러오기 테스트 * 로그인 401 오류 수정 * commit * commit * commit * commit * commit * commit * commit * commit * commit * commit * 불필요한 파일 삭제 * README.md 파일 작성 * README.md 수정 * README.md 수정 --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]> Co-authored-by: rhalswn3521 <[email protected]>
* Initial commit * Update README.md * Update README.md * 커밋메시지 * 커밋 메시지 * README 업데이트입니 * 2주차과제 아직 미완성 * 수정1 * 수정2 * 과제 끝 * README.md 충돌 수정 * 리드미 충돌 제거 * 충돌 수정 * 수정 * 3주차 과제 미완성 * 충돌 때문에 한번더 * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * 수정1 * 아직 수정중입니다. * 수정1 * 수정2 * 수정3 * Update README.md * 아직 미완성 * 6주차 --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* Initial commit * Update README.md * feat: 파일생성 * Page composition and directory * Update README.md * Update STEP2_README * Update STEP2_README.md * STEP2_README.md Modify * Step2 Homework 1 * Homework * folder out * Register Page * Login Page * Redux * atoms comment * images Addition * MainPage * Card * detailSlice delete * lecture week-3 * Revert "lecture week-3" This reverts commit 07e8de2. * feedback * Skeleton * add components * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * CartPage * feedback * react-query-devtools * Error status * Cart Remove * feedback * Update README.md * loading error solve * week-5 * lecture-06 * feedback * Grid revise * add staticServerUrl --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* feat: 과제1 과제 1 작성 * feat : ADD Directory 디렉토리 구조 수정 * Update README.md * feat : 과제 제출... * feat : Add toggle component * minus modules * remove modules * components * Delete * edit carousel * feat:readme * feat:Delete week folder * Delete * week2:로그인/회원가입 구현 * feat:JWT token * feat:Components * Add package.json * Delete .DS_Store * feat:src * Add gitignore * index.js * conflict * conflict * conflict * conflict * conflict * conflict * conflict * conflict * conflict * conflict * feat:Add redux * feat:Add globalStyles * feat:주석 처리 추가 * package.json * p * Update package-lock.json * Update package.json * test * feat-AddStore * feat:Add loader * feat:Add skeleton * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * add detailPage,loading,404 * feat:Add tailwind" * d * dd * a * Test1 * feat : 과제 제출... * feat : Add toggle component * minus modules * remove modules * components * Delete * edit carousel * readme2 * Delete * conflict * conflict * conflict * Add package.json * Delete .DS_Store * conflict * 6 * 7 * conflict * conflict * conflict * conflict * conflict * conflict * 9 * 11 * package.json * p * Update package-lock.json * Update package.json * 12 * 13 * 14 * 15 * 16 * 17 * d * a * feat:src * Update README.md * 5주차과제 * 6주차 * feat:dockfile" * Rename Dokerfile to Dockerfile * filename * uri * staticpath * config * json * d * d * d * s * j * ddd * dd * aaaa * tttt * imgage * location * order * jwt * d * ordercomplete * feat: add images path * feat:image * ordercomplete * imagsfsfaf * ddddd * feat:imagesrc * ddd * err * d * dd * dddsfa * asdfasdf * id * tajeefjlakewfewfadsfds * 왜안돼 * route * aaaa * jwljewfajlewfkw * eslint * fix lint" * readme * fix-readme --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* Update README.md * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * Update README.md * cra 마이그레이션 * eslintrc 수정 * eslint 에러 수정 * package.json 수정 * api url 수정 * api url 수정2 * image 추가 & url 수정 * tailwind 적용 * feat: 주문 완료 페이지 구현 --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* docs: 페이지별 구성 및 요구사항 작성 * Update README.md * feat: React 프로젝트 생성 * docs: README.md 템플릿 업데이트 * docs: 과제1 - 페이지별 구성 및 요구사항 작성 * chore: package 추가 * feat: 과제2 - Carousel Component 구현 * feat: 과제2 - RadioButton Component 구현 * feat: 과제2 - ToggleButton Component 구현 * feat: 과제2 - CheckList Component 구현 * feat: 과제3 - 컴포넌트 테스트 페이지 구현 * docs: 과제1 - 디렉터리 구조 추가 * feat: 과제1 - Atomic Component 구현 * feat: 과제1 - Molecules Component 구현 - InputGroups * feat: 과제1 - Organisms Component 구현 - LoginForm - RegisterForm * feat: 과제1 - 상품 조회 통신 모듈 구현 - user과 product로 분리 * feat: 과제1 - redux-thunk을 사용한 비동기 처리 - userSlice - productSlice * feat: GNB Component 구현 * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * feat: 과제1 - 옵션 선택 리스트 구현 - OptionList (atom) * feat: 과제1 - 옵션 수량 결정 구현 - Counter (atom) * Update README.md * feat: 5주차 과제1 - 주문 결제 페이지 구현 및 스타일 적용 - OrderTemplate - OrderPage * feat: [2주차] Atom 컴포넌트 props에 대한 주석 명시 - Box - Button - Container - Input - Label - Title * fix: [2주차] 회원가입 에러 수정 - RegisterForm.jsx * feat: [2주차] 상태관리 모듈을 활용해 로그인 상태를 구현 - LoginForm.jsx --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
* Initial commit * Update README.md * Update README.md * 전남대FE_강성준_1주차과제 * feat: 2주차 * 전남대FE_강성준_2주차과제 * 전남대FE_성준_2주차 * 전남대FE_강성준_2주차과제 * 전남대FE_강성준_3주차과제 * 전남대FE_경주원_3주차 과제 (#160) * Initial commit * Update README.md * init project * docs: 과제 1 * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * 전남대FE_경주원_1주차 과제 (#29) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 --------- Co-authored-by: Jellie <[email protected]> * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 * feat: add atom component LogoButton.jsx * feat: add style in GlobalNavBar.jsx * feat: storybook 모든 story에 decorator withRouter 추가 * feat: head icon 카카오톡 쇼핑하기 icon으로 변경 * feat: template 컴포넌트 GlobalTemplate 생성 * feat: Home에 GlobalTemplate 적용 * 전남대FE_경주원_2주차 과제 (#112) * Initial commit * Update README.md * init project * docs: 과제 1 * Update README.md * feat: Toast component * feat: Breadcrumb component * feat: Carousel component * feat: Radio Button component * feat: Toggle Button component * feat: CheckList component * docs: README.md 과제 제출 설명 추가 * Update .gitignore * Delete .idea directory * rename: 주차별 디렉토리 삭제 * feat: 라우터 설정 * fix: import React from 'react' 제거 * feat: Storybook styled-components 적용 * feat: atom 컴포넌트 Input 생성 * feat: atom 컴포넌트 Label 생성 * remove: atom 컴포넌트 Input.jsx 삭제 * feat: molecules 컴포넌트 LabeledInput.jsx 생성 * docs: week1 images 추가 * feat: organisms 컴포넌트 Form.jsx 생성 * feat: template 컴포넌트 AuthTemplate.jsx 생성 * feat: atom 컴포넌트 Button.jsx 생성 * feat: Form.jsx LabeledInput.jsx style 추가 * feat: preview.jsx에 HelmetProvider decorator 추가 * feat: instance 설정 및 authAPI.js 생성 * feat: SignIn.jsx 페이지 생성 * feat: SignIn.jsx 페이지 생성 * feat: organisms 컴포넌트 GlobalNavBar.jsx 생성 * rename: CreatePortal.jsx의 fuction명을 CreatePortal로 변경 * fix: .env 변경 및 api 통신 에러 처리 추가 --------- Co-authored-by: Jellie <[email protected]> * feat: 절대 경로 설정 및 2주차 코드리뷰 1차 반영 * feat: jotai atomWithStorage로 변경 * feat: 2주차 과제 코드리뷰 2차 피드백 * feat: atom 컴포넌트 Badge 생성 * feat: organism 컴포넌트 Carousel ...props 추가 * feat: GlobalNavBar.jsx style 추가 * feat: GlobalTemplate.jsx.jsx style 변경 * fix: instance.js localStorage 오타 수정 * feat: molecule 컴포넌트 ThumbCard 생성 * feat: organism 컴포넌트 ProductInfoCard 생성 * feat: public/assets/images 생성 * feat: 상품 조회 API * feat: Home style 적용 * feat: 페이지 전체에 대한 Global Loader 생성 및 적용 * fix: Carousel.jsx z-index 수정 * fix: ThumbCard.jsx src 변경 * feat: ProductInfoCard.loader.jsx 생성 * feat: hook useGetInfiniteProductsQuery.js 생성 * feat: hook useIntersectionObserver.js 생성 * feat: Home 무한 스크롤 api 통신 기능 및 스켈레톤 로더 추가 * feat: router.jsx 개별 상세 페이지 추가 * feat: axios interceptors를 활용한 상태코드별 에러 캐칭 --------- Co-authored-by: Jellie <[email protected]> * Revert "전남대FE_경주원_3주차 과제 (#160)" This reverts commit 689c6e2. * 전남대FE_강성준_4주차과제 * tailwindcss * Update README.md * 전남대FE_강성준_5주차과제 * 6주차 * 전남대FE_강성준_6주차과제 * 전남대FE_강성준_6주차과제 * 전남대FE_강성준_6주차과제 * 수정제 * Dockfile 추가 * 파일 구성 수정 * 파일 구성 수정 * 파일 구성 수정3 * 충돌해결시도 * gkg * 삭제완료 * 수정 * 수정 * 수정 * 수정 * 수정 * 수정완료 * 이미지 수정 --------- Co-authored-by: Jellie <[email protected]> Co-authored-by: Joowon Kyung <[email protected]> Co-authored-by: Donghyun-manager <[email protected]>
안녕하세요 멘토님! 3주차 과제 pr입니다. 항상 꼼꼼한 리뷰 감사합니다. 😄 👍 이번 주차도 잘 부탁드려요!
3주차 과제 요구사항
과제 1
상품 목록 페이지 개발
react-query
의useInfiniteQuery
를 통해 페이지네이션을 이용한 무한 스크롤 기능을 구현했습니다.아쉬운 점은 pageIndex를 모두 클라이언트단에서 관리하고 api가 page에 대한 정보(pageIndex, pageSize, ...)를 제공하지 않아서, 무한 스크롤
Loader
관리를 마지막으로 통신한 데이터가 빈 배열일 때display: none;
으로 변경하는 방법밖에 없었다는 것입니다.useIntersectionObserver.js
: Intersection Obsercer API를 커스텀 훅으로 관리합니다useGetInfiniteProductsQuery.js
: 코드 가독성을 위해<Home />
에서 사용되는 api를react-query
를 활용한 커스텀 훅으로 분리해줬습니다.아쉬운 점은 반응형으로 구현하지 않았다는 점입니다. 최대한 카카오톡 쇼핑하기의 디자인을 따르고 있는데, 이 부분은 따로 수정을 고려 중입니다. 다만 홈을 반응형으로 구현하면 나머지 페이지도 반응형으로 구현하고 싶을 것 같아서... 그러면 시간을 많이 투자해야하기에 고민 중입니다!
과제 2
스켈레톤과 로더
<Suspense />
와react-content-loader
를 활용해 상품 목록 카드에 스켈레톤을 적용했습니다.App.jsx
에서<RouterProvider />
를<Suspense />
로 감싸 글로벌 로더를 적용했습니다.과제 3
백엔드 상태 코드 반응
axios
의interceptors
를 활용해response
에 대한 전처리 코드를 추가했습니다.상태코드별 전처리 코드도 추가했지만, 아직 특별한 에러 캐칭이 필요한 것 같지는 않아서 상태코드별로
switch... case...
문만 추가한 상태입니다main.jsx
에서queryClient
에QueryCache
를 사용해react-query
의 전처리를 추가했습니다. 다만 이 부분도 특별한 에러 캐칭이 필요한 것 같지는 않아서 빈 코드만 추가해뒀습니다.2주차 과제 피드백
질문
1. lazy loading과 react hot reload
router.jsx
에 lazy loading을 추가한 이후로 프로젝트 변경 후 저장할 때 자동으로 브라우저에서 refresh되는hot-reload
(이렇게 부르는 게 맞나요?) 기능이 작동하지 않고 있습니다. 😭App.jsx
혹은main.jsx
를 수정할 때는hot-reload
기능이 정상 작동해lazy loading
이 원인이라고 파악했습니다.현재까지 프로젝트 변경 후 저장할 때마다 터미널에
r
을 입력해 진행했는데, 너무 불편해서 얼른 고치고 싶습니다. 혹시라도 원인이나 관련 자료를 알고 계신다면 알려주세요. 🥺2. Suspense의 위치
현재
<ProductInfoCard />
의 Suspense를Home.jsx
에서 적용 중인데 이것이 맞는 방법인지 궁금합니다. 제가 생각한 방법은 두 가지입니다.현재 2번 방법을 택한 이유는 상위 컴포넌트인
Home.jsx
에서 api 통신을 진행 중이고,ProductInfoCard
가 presentational component의 역할이라고 생각했기 때문입니다. 멘토님이시라면 어떻게 관리하실지 궁금합니다.3. Loader component 디렉토리 관리
현재 ProductInfoCardLoader와 GlobalLoader 컴포넌트가 있는데요. ProductInfoCardLoader는 ProductInfoCard가 속한 @/components/organisms/product-info-card에 속해있습니다. 반면 GlobalLoader는 페이지의 로더이므로 @/pages에 속해있습니다. 이러한 디렉토리 구조가 너무 일관성이 없다고 느껴지기도 하는데 멘토님이시라면 어떤 디렉토리 구조를 구성하실 건가요?
4. prop 에러
다음과 같은 에러가 계속 뜨는데, 프로젝트 실행에는 전혀 지장이 없습니다. 해당 에러를 해결하고 싶은데 구글링한 정보를 참고해도 에러가 해결되지 않아서 한번 봐주시면 감사하겠습니다. 관련 파일은
@/pages/Home.jsx
,@/components/organisms/global-nav-bar/GlobalNavBar.jsx
,@/components/templates/global-template/GlobalTemplate.jsx
입니다!추가사항
react-query
와Suspense
를 둘 다 처음 사용해봐서 관련 코드를 자세히 보고 피드백해주시면 감사하겠습니다.이번 주차도 미리 감사드립니다!! 👍