[Project] 프로젝트 2주차

프로젝트 2주차 부터는 본격적으로 코딩을 시작했다.

기본적인 페이지이동, 상하단 탭바의 css등은 이미 마무리 지어서 파일을 git pull 받았기에 각자 정해진 폴더 내에서 css 작업부터 시작했다.

메인 페이지, 리스트 페이지

메인페이지, 리스트 페이지 2개의 페이지를 맡아서 css 작업을 진행했다.

진행해야할 페이지의 구조는 다음과 같다.

메인페이지

처음 보이는 부분은 로고 및 카테고리 이동 navigation 부분이 있다.

그 밑으로 베스트상품, 신상품들을 불러오는 구조이다.

css 작업에서는 크게 어려운 부분없이 잘 흘러갔다.

css 작업후 데이터를 불러오는 과정에서 어려움이 있었다.

2줄로 map 뿌리기

기존에는 항상 map을 차례로 보여주기만 하면 되었는데 이번에는 달랐다.

1 2
3 4
5 6
7 8
9 10

이러한 구조로 map을 뿌려야 했다.
즉 왼쪽열에는 홀수, 오른쪽열에는 짝수로 뿌려줘야했다.

또한 이러한 구조가 완성되면 처음에는 4개, 더보기를 클릭했을때 10개까지 보여지는 구조이다.

왼쪽 오른쪽 나눈후 한줄에 2개씩 나누어주는 부분이 좀 고생을 했다.

전체코드는 아래와 같다.

<NewProductWrapper>
      <NewProductTitle>금주의 신상품</NewProductTitle>
      <MiddleWrapper2>
        <DetailProductWrapper>
          {props.isEdit === false ? (
            <>
              {props.data?.fetchUseditems.slice(0, 4).map((el, index) => (
                <NewProductInfoWrapper key={el._id}>
                  {index % 2 === 0 && (
                    <>
                      <DetailProduct
                        onPress={() =>
                          navigation.navigate("상품 상세보기", {
                            id: props.onPressDetail(el),
                          })
                        }
                      >
                        <ProductImage
                          source={require("../../../public/images/home/product1.png")}
                        />
                      </DetailProduct>
                      <ContentsWrapper>
                        <ProductTitle>{el.name}</ProductTitle>
                        <FavoriteImage
                          source={require("../../../public/images/home/moon-off.png")}
                        />
                      </ContentsWrapper>
                      <ProductPrice>{el.price}원</ProductPrice>
                    </>
                  )}
                </NewProductInfoWrapper>
              ))}
            </>
          ) : (
            <>
              {props.data?.fetchUseditems.map((el, index) => (
                <NewProductInfoWrapper key={el._id}>
                  {index % 2 === 0 && (
                    <>
                      <DetailProduct
                        onPress={() =>
                          navigation.navigate("상품 상세보기", {
                            id: props.onPressDetail(el),
                          })
                        }
                      >
                        <ProductImage
                          source={require("../../../public/images/home/product1.png")}
                        />
                      </DetailProduct>
                      <ContentsWrapper>
                        <ProductTitle>{el.name}</ProductTitle>
                        <FavoriteImage
                          source={require("../../../public/images/home/moon-off.png")}
                        />
                      </ContentsWrapper>
                      <ProductPrice>{el.price}원</ProductPrice>
                    </>
                  )}
                </NewProductInfoWrapper>
              ))}
            </>
          )}
        </DetailProductWrapper>
        <DetailProductWrapper>
          {props.isEdit === false ? (
            <>
              {props.data?.fetchUseditems.slice(0, 4).map((el, index) => (
                <NewProductInfoWrapper key={el._id}>
                  {index % 2 !== 0 && (
                    <>
                      <DetailProduct
                        onPress={() =>
                          navigation.navigate("상품 상세보기", {
                            id: props.onPressDetail(el),
                          })
                        }
                      >
                        <ProductImage
                          source={require("../../../public/images/home/product1.png")}
                        />
                      </DetailProduct>
                      <ContentsWrapper>
                        <ProductTitle>{el.name}</ProductTitle>
                        <FavoriteImage
                          source={require("../../../public/images/home/moon-off.png")}
                        />
                      </ContentsWrapper>
                      <ProductPrice>{el.price}원</ProductPrice>
                    </>
                  )}
                </NewProductInfoWrapper>
              ))}
            </>
          ) : (
            <>
              {props.data?.fetchUseditems.map((el, index) => (
                <NewProductInfoWrapper key={el._id}>
                  {index % 2 !== 0 && (
                    <>
                      <DetailProduct
                        onPress={() =>
                          navigation.navigate("상품 상세보기", {
                            id: props.onPressDetail(el),
                          })
                        }
                      >
                        <ProductImage
                          source={require("../../../public/images/home/product1.png")}
                        />
                      </DetailProduct>
                      <ContentsWrapper>
                        <ProductTitle>{el.name}</ProductTitle>
                        <FavoriteImage
                          source={require("../../../public/images/home/moon-off.png")}
                        />
                      </ContentsWrapper>
                      <ProductPrice>{el.price}원</ProductPrice>
                    </>
                  )}
                </NewProductInfoWrapper>
              ))}
            </>
          )}
        </DetailProductWrapper>
      </MiddleWrapper2>
    </NewProductWrapper>