[최영선] Sprint8

[choi-youngsun]

배포 사이트

https://pandamarket-choiys.netlify.app/

요구사항

기본

• 스프린트 미션 1 ~ 7에 대해 typescript를 적용해주세요

주요 변경사항

1. 지난 코드리뷰 반영 : utill함수 모듈화 등
2. 메인 페이지 리액트로 옮기기 + css수정
3. 스프린트 5~7 부분 스타일드 컴포넌트로 리팩토링
4. FileInput 완성
5. AddItems 완성 (태그 제외)
6. Nav 디자인 완성 및 리팩토링
7. ProductDetail 페이지 완성
8. ItemList에 페이지네이션 구현

스크린샷

AddItems

Productdetail

호버, x버튼 구현 동영상

아이템리스트

멘토에게

• 지난 과제 부족한 부분부터 보완하고 TS 시작하겠습니다!
• 좋아요순, 최신순 정렬을 못하고 있습니다..

[arthurkimdev]

영선님만의 속도로 과제 제출하신 점 좋습니다! 앞으로도 영선님 속도에 맞춰 제출해주시면 좋겠어요. 수고하셨습니다. 🙏

[arthurkimdev]

useFetch 좋아요! 파트 2때, 사용하신 react-query 내 useQuery가 정말 편하게 많은걸 해준다는걸 느끼셨죠!? 이렇게 직접 만들면서 사용해야하거든요~

[arthurkimdev]

확실히 이전보다 styled-components 숙련도가 올라왔네요! 👍

[arthurkimdev]

해당 파일처럼 스타일링 관련된 컴포넌트가 많아서, 중요한 컴포넌트에 관심을 가지기 어려운 상태가 있을 수 있어요.
그렇다면, 파일을 나누는 방법이 있어요.
FileInput 디렉토리를 하나 만들고, 그 안에 style만 하는 파일과, 로직이 담긴 컴포넌트를 2개로 나누는 방법이예요.

ㄴ AddItems (폴더)
    ㄴ AddItemPage.css
    ㄴ AddItemPage.js
    ㄴFileInput (폴더)
       ㄴ FileInput.js
       ㄴ FileInput.styled.js

[arthurkimdev]

import React from "react";
import {
  StyledLabel,
  StyledPreviewImg,
  StyledFileInputBox,
  StyledFileInputPlaceholder,
  StyledFileInput,
  StyledCancelButton,
  StyledFileArea,
  StyledImgArea,
} from "./FileInput.styled";

function FileInput({ name, value, onChange }) {
  return (
    <div>
      ...
    </div>
  );
}

export default FileInput;

[arthurkimdev]

아래처럼 관심사를 분리해서 API 호출 로직을 별도로 분리하는 방법이 있어요.
그러면 결국 useComments hook을 만들어서 다른곳에서도 재사용 가능하도록 할 수 있구요.
가독성도 좋아지고, 유지보수에도 좋아요.

[arthurkimdev]

// api.js
export const getComments = async (productId) => {
  try {
    const result = await getCommentById(productId);
    return result.list;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

// useComments.js
import { useFetch } from './useFetch';
import { getComments } from './api';

export const useComments = (productId) => {
  return useFetch(() => getComments(productId), [productId]);
};

그럼 최종적으로 아래처럼 바꿀 수 있어요.

// 컴포넌트에서 사용
const { data: comments, error, loading } = useComments(productId);

[arthurkimdev]

grid 사용 좋아요👍