Skip to content
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

Merged
merged 67 commits into from
Jul 18, 2023
Merged

Conversation

j8won
Copy link
Contributor

@j8won j8won commented Jul 14, 2023

안녕하세요 멘토님! 3주차 과제 pr입니다. 항상 꼼꼼한 리뷰 감사합니다. 😄 👍 이번 주차도 잘 부탁드려요!

3주차 과제 요구사항

과제 1

  • 상품 목록 페이지 개발

    • 백엔드 API 문서 참고
    • 페이지네이션 이용
    • 데이터 로딩 과정에서 로더 구현
    • 데이터를 불러올 때 react-query 사용
  • react-queryuseInfiniteQuery를 통해 페이지네이션을 이용한 무한 스크롤 기능을 구현했습니다.

  • 아쉬운 점은 pageIndex를 모두 클라이언트단에서 관리하고 api가 page에 대한 정보(pageIndex, pageSize, ...)를 제공하지 않아서, 무한 스크롤 Loader 관리를 마지막으로 통신한 데이터가 빈 배열일 때 display: none;으로 변경하는 방법밖에 없었다는 것입니다.

  • useIntersectionObserver.js: Intersection Obsercer API를 커스텀 훅으로 관리합니다

  • useGetInfiniteProductsQuery.js: 코드 가독성을 위해 <Home />에서 사용되는 api를 react-query를 활용한 커스텀 훅으로 분리해줬습니다.

  • 아쉬운 점은 반응형으로 구현하지 않았다는 점입니다. 최대한 카카오톡 쇼핑하기의 디자인을 따르고 있는데, 이 부분은 따로 수정을 고려 중입니다. 다만 홈을 반응형으로 구현하면 나머지 페이지도 반응형으로 구현하고 싶을 것 같아서... 그러면 시간을 많이 투자해야하기에 고민 중입니다!

과제 2

  • 스켈레톤과 로더

    • 컴포넌트에 props를 전달해 데이터 로딩 중 스켈레톤 적용
    • 상품 목록 카드에 스켈레톤 적용
    • 페이지 전체에 대한 로딩이 진행될 때 글로벌 로더 적용
  • <Suspense />react-content-loader를 활용해 상품 목록 카드에 스켈레톤을 적용했습니다.

  • App.jsx에서 <RouterProvider /><Suspense />로 감싸 글로벌 로더를 적용했습니다.

과제 3

  • 백엔드 상태 코드 반응

    • api 응답에 대한 전처리 코드
    • 200, 300, 400, 500번대의 상태코드별 에러 캐칭이 필요하다면 해당 함수에서 먼저 실행
    • react-query에서 전처리 시도해보기
  • axiosinterceptors를 활용해 response에 대한 전처리 코드를 추가했습니다.

  • 상태코드별 전처리 코드도 추가했지만, 아직 특별한 에러 캐칭이 필요한 것 같지는 않아서 상태코드별로 switch... case...문만 추가한 상태입니다

  • main.jsx에서 queryClientQueryCache를 사용해 react-query의 전처리를 추가했습니다. 다만 이 부분도 특별한 에러 캐칭이 필요한 것 같지는 않아서 빈 코드만 추가해뒀습니다.

2주차 과제 피드백

  • 2주차 과제에서 피드백 받은 부분은 대부분 적용했습니다.
  • 아직 적용하지 않은 것은 저번에 말씀해주신 jwt decoder를 활용해 localStorage에 accessToken만 저장하는 것입니다. 과제 요구사항을 실습멘토님께 확인한 결과 48 hours로 진행해도 괜찮다고 하셔서 곧 적용할 예정입니다.

질문

1. lazy loading과 react hot reload

router.jsx에 lazy loading을 추가한 이후로 프로젝트 변경 후 저장할 때 자동으로 브라우저에서 refresh되는 hot-reload(이렇게 부르는 게 맞나요?) 기능이 작동하지 않고 있습니다. 😭

  • 이는 App.jsx 혹은 main.jsx를 수정할 때는 hot-reload 기능이 정상 작동해 lazy loading이 원인이라고 파악했습니다.
  • 터미널에도 서버가 restart했다는 알림이 뜨지 않아요.

현재까지 프로젝트 변경 후 저장할 때마다 터미널에 r을 입력해 진행했는데, 너무 불편해서 얼른 고치고 싶습니다. 혹시라도 원인이나 관련 자료를 알고 계신다면 알려주세요. 🥺

2. Suspense의 위치

현재 <ProductInfoCard />의 Suspense를 Home.jsx에서 적용 중인데 이것이 맞는 방법인지 궁금합니다. 제가 생각한 방법은 두 가지입니다.

  1. Suspense와 내부 컴포넌트를 하나의 파일에서 관리하기
function ProductInfoCard() {
  return (
    <Suspense fallback={<ProductInfoCardLoader />}>
       // component
    </Suspense>
  );
}
  1. 현재와 같이 Suspense를 상위 컴포넌트에서 관리하기
    현재 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 does not recognize the `isStorybookMode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isstorybookmode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
image

추가사항

  • 컴포넌트명이나 변수명이 어색한 점이 있으면 알려주세요.
  • 성능 개선을 위한 좋은 아이디어가 있다면 알려주세요.
  • react-querySuspense를 둘 다 처음 사용해봐서 관련 코드를 자세히 보고 피드백해주시면 감사하겠습니다.

이번 주차도 미리 감사드립니다!! 👍

talentforest and others added 30 commits June 28, 2023 10:23
* 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";
Copy link
Contributor Author

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";

Copy link

@alstn2468 alstn2468 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번주도 과제하시느라 고생하셨어요!
항상 코드를 작성하실때 고민하시고 열심히 하시는게 느껴져서 굉장히 좋네요 👍

남겨주신 질문 답변도 드리겠습니다!

  1. 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 룰도 따로 있던 것으로 알고있기는 합니다..!

  1. Suspense의 위치

Suspense의 용법에 관련해서는 정답이 없습니다. 비동기처리를 어떤 UI/UX를 가지고 해줄 것인지에 따라 충첩된 Suspense를 사용할 수도 있고 최상위에서 하나의 Suspense만 사용할 수도 있습니다.
여러개의 로더가 있을 경우에는 중첩된 Suspense를 이용할 수도 있겠네요!
다만 충첩의 경우에는 API 호출이 워터폴로 이루어질 수 있으니 잘 확인해보시는게 좋을 것 같아요!

  1. Loader component 디렉토리 관리

지금의 구조에서는 더 괜찮은 방법은 없어보이기도 하네요. 저같은 경우에는 featues 폴더를 만들어 각각 페이지(피쳐) 별로 따로 구현하거나 로더를 모아두는 폴더를 따로 만들어 구현할 것 같습니다!
다만 정답이 없는 부분이니 생각하시는대로 구현하셔도 될 것 같습니다.

  1. 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",

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버전에서 업데이트가 되고 있지 않습니다!

https://tanstack.com/query/latest/docs/react/installation

Comment on lines +44 to +52
switch (error.response.status) {
case 401:
// Promise chaining
return new Promise(() => {});
case 404:
return new Promise(() => {});
default:
return Promise.reject(error);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 이후 어떤 처리가 들어갈지는 모르겠지만 깔끔하네요!

Comment on lines +13 to +14
!localStorage.getItem("accessTokenDate") ||
!localStorage.getItem("accessToken")

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

localStorage.getItem를 호출하는 부분이 많아 보이는데요.
if 문 이전에 각각 한 번만 호출해도 충분할 것 같아요!

Copy link
Contributor Author

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"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cdn 주소도 환경변수로 빼는 것도 좋을 것 같네요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 cdn 주소를 따로 관리해야겠다고 생각한다면 먼저 constant로 관리하는 방법이 떠오를 것 같은데, 환경변수로 빼는 것을 추천해주신 이유가 궁금합니다!! 🤔

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) => (
<>

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}`);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/product/:id과 같이 작성하고 generatePath 함수를 같이 이용하면 좋아보이네요~!

https://v5.reactrouter.com/web/api/generatePath

import { useInfiniteQuery } from "react-query";
import productAPI from "@/api/productAPI.js";

function useGetInfiniteProductsQuery({ observer, loaderRef }) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref 자체를 받는 것이 아니라 ref.current를 받는 것도 좋아보이네요!

Comment on lines +11 to +29
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,
}
);

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>}>

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 컴포넌트를 확장할지 고민해보시는 것도 좋을 것 같아요!

Comment on lines +87 to +96
<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>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProductInfoCard 내부에서 다른 비동기 작업이 없는 것 같은데 Suspense를 이용한 이유가 있을까요?
아마 지금 적용이 되는 것은 lazy를 이용한 import가 있어서 일 것 같은데요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

카드 각각에 스켈레톤이 적용되는지 확인해보고 싶어서 굳이 필요하진 않지만 학습의 개념으로 적용해보았습니다 ㅎㅎ 4주차 pr에는 프로덕션에 맞춰 제거하도록 하겠습니다!!

@alstn2468 alstn2468 merged commit 689c6e2 into Kakao-tech-campus-FE:main Jul 18, 2023
j8won referenced this pull request in j8won/step2-FE-kakao-shop-1 Jul 19, 2023
@j8won
Copy link
Contributor Author

j8won commented Jul 20, 2023

@alstn2468

  1. prop 에러
    굳이 해당 인자가 필요한지가 궁금하기는 하네요. fixed가 아니라 absolute로 작성하게 된다면 스토리북 상에서도 문제가 없을 것 같아서요!

이 방법이 더 적합한 방법이라고 생각하며 absolute를 적용할 예정이지만!! 다른 prop에도 같은 에러가 발생해 더 찾아본 결과 styled-components 때문에 발생하는 에러였습니다!! styled-components DOM issue를 참고해 해결해주었습니다 ㅎㅎ 이번주 피드백도 감사합니다 👍

alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 10, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 11, 2023
* 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]>
alstn2468 pushed a commit that referenced this pull request Aug 11, 2023
* 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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants