[project] 프로젝트 3주차

프로젝트 3주차가 시작되었다.

기본적인 페이지들은 모두 그렸고 관리자 페이지와 모바일페이지 마무리 작업에 들어갔다.

3주차에서는 기존계획에서 틀어진 부분이 있어서 구현 방향을 조금 다르게 해야하는 부분이 있었다.

상품 카테고리별 분류

1개의 물품리스트에서 8개의 카테고리로 분류하는것이 sleepy 프로젝트의 기획중 중요한 부분이였는데 초기에는 tags 필드에 미리 정해진 값만 들어갈수 있도록 셀렉트 박스로 구현한뒤 카테고리에 맞는 태그들만 보여주는 방식으로 계획했다.

코드 예시

{item.tags[0] === props.tagId && (
          <DetailProductWrapper key={item._id}>
            <ProductImageWrapper
              onPress={() =>
                navigation.navigate("상품 상세보기", {
                  id: props.onPressDetail(item),
                })
              }

              .
              .
              .
              .

map 안쪽에 이런식으로 나눠서 보여주려고 계획했는데 문제가 발생했다.
1페이지에 총 10개의 상품만이 담기기 때문에 1페이지에 해당 카테고리의 상품이 없으면 데이터를 더 불러와야 했다.

이부분은 useEffect로 구현을 해봤는데

 useEffect(() => {
    console.log("9999", data);

    const result = data?.fetchUseditems.some((el) => {
      return el.tags[0] === tagId;
    });

    console.log("33332232111", result);
    console.log("989898", tagId);

    if (result === false) {
      onLoadMore();
    } else {
      return;
    }
    console.log("443432", aaa);
  }, [data?.fetchUseditems]);

이렇게 하니 해당 카테고리가 나오는 페이지까지 데이터는 불러왔다.

하지만 Flatlist에 있는 renderitem이 업데이트가 되지 않고 여전히 1페이지의 데이터만 나오게 되었다.

이문제를 결국 해결하지 못해 방향을 바꿨다.

검색해서 가져오기

다른방법은 제목에 카테고리 + # 을 시크릿 태그로 집어넣고 해당 카테고리들은 검색한 내용들을 불러오게 되었다.

검색으로 가져오기 때문에 스크롤도 더욱더 매끄러워지고 원하는대로 구현이 가능했다.

const [myCategory, setMyCategory] = useState(tagId + "#");

 const { data, refetch, fetchMore } = useQuery(FETCH_USED_ITEMS, {
    variables: {
      page: 1,
      search: myCategory,
    },
  });

React-Dropzone 구현

normal, advanced를 전부 구현하고 nightmere 단계의 기능들을 구현하기 시작했다.

나는 상품등록시 ReactDropzone을 이용해 다수의 이미지를 손쉽게 업로드하는 방식으로 구현하기로 했다.

이미지 등록 자체를 어려워했고 잘 이해하지 못했는데 조금은 나아진 느낌이다.

예시코드

const readImage = (acceptedFiles) => {
    console.log("=====", acceptedFiles);
    // 인풋 태그에 파일이 있는 경우
    let newArr = [];
    if (acceptedFiles) {
      // FileReader 인스턴스 생성
      for (let i = 0; i < acceptedFiles.length; i++) {
        const reader = new FileReader();
        // 이미지가 성공적으로 읽힌 경우 onload가 실행됩니다.
        reader.onload = (data: any) => {
          newArr[i] = data.target?.result;
          setDropzoneUrl([...newArr]);
        };
        reader.readAsDataURL(acceptedFiles[i]);
        props.onChangeFiles(acceptedFiles);
      }
    }
    console.log("111", dropzoneUrl);
  };

<Dropzone
        onDrop={readImage}
        accept="image/*"
        minSize={1024}
        maxSize={3072000}
        multiple

        {({ getRootProps, getInputProps }) => (
          <DropZoneWrapper {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drag'n'drop images, or click to select files</p>
          </DropZoneWrapper>
        )}
      </Dropzone>

임시이미지와, 이미지 저장할때가 좀 어려웠고 이미지 업로드에 대한 이해도가 아주 조금은 올라간거 같다.