5. Code Review

3) Scene

(2) ProductDetail

(1) ProductDetail.js

// 렌더 부분
<ProductDetailHeader goBack={goBack} />
<ProductDetailTab goToSelectProduct={goToSelectProduct} />

• 헤더와 탭으로 나뉜다. 스택에서 헤더를 지웠으므로 헤더를 만들어줘야한다.
  렌더부분은 헤더와 탭 네비게이션이 있는 컴포넌트 2개만 존재한다.

<Stack.Screen
  name='productDetail'
  component={ProductDetail}
  options={{
  title: '제품상세',
  headerShown: false,
  }}
/>

• 스택들의 헤더는 제품명이 들어가고 보라색 헤더라인도 없다. 따라서 원래 있던 헤더를 없애고 새로 만들어줄 필요가 있다.

const ProductDetailHeader = (props) => {
  return (
    <>
      <StatusBar barStyle='dark-content' />
      <StyledStatusBar />
      <ViewContainer>
        <StyledTouchableOpacity>
          <AntDesign name='left' size={20} onPress={props.goBack} />
        </StyledTouchableOpacity>
        <HeaderName>{props.state.name}</HeaderName>
      </ViewContainer>
    </>
  );
};

• 위의 코드가 productDetail의 헤더
• ProductDetailHeader 는 모든 스택에서 재활용해서 사용하기 위해 만들어둔 헤더(아래)와는 다르게 Redux state에서 상품명을 가져오고 있다.

const StackHeader = (props) => {
  return (
    <>
      <StatusBar barStyle='dark-content' />
      <StyledStatusBar />
      <ViewContainer>
        <StyledTouchableOpacity>
          <AntDesign name='left' size={20} onPress={props.goBack} />
        </StyledTouchableOpacity>
        <HeaderName>{props.title}</HeaderName>
      </ViewContainer>
    </>
  );
};

• 이게 스택에서 재활용해서 사용하기 위해 만들어둔 헤더이다.

export default function ProductDetailTab(props) {
  return (
    <>
      <TabStack.Navigator
        initialRouteName={'상품설명'}
        tabBarOptions={{
          activeTintColor: Theme.colors.mainColor,
          inactiveTintColor: Theme.colors.grayColor,
          pressColor: Theme.colors.mainColor,
          indicatorStyle: {
            borderBottomWidth: 2,
            borderBottomColor: Theme.colors.mainColor,
          },
          style: {
            borderBottomColor: '#d8d8d8',
            borderBottomWidth: 0.5,
          },
          labelStyle: { width: 100 },
        }}>
        <TabStack.Screen name='상품설명' component={ProductInformation} />
        <TabStack.Screen name='상품이미지' component={ProductImage} />
        <TabStack.Screen name='상세정보' component={ProductDescription} />
        <TabStack.Screen name='구매후기' component={ProductReview} />
        <TabStack.Screen name='상품문의' component={ProductInquire} />
      </TabStack.Navigator>
      <ViewContainer>
        <BuyButtonBox onPress={props.goToSelectProduct}>
          <BuyButtonText>구매하기</BuyButtonText>
        </BuyButtonBox>
      </ViewContainer>
    </>
  );
}

• 이게 마지막 탭 네비게이션인 제품 상세 페이지의 네비게이션!!

{discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}

• 가격 계산은 위와 같이 한다. 이전에 쓴 쉼표찍는 방법 게시글 참조

(2) WriteReview.js

: Detail 페이지의 탭들 중 후기 작성은 재미있는 라이브러리들이 많다.

import * as ImagePicker from 'expo-image-picker';

• 먼저 ImagePicker 이다. 이미지를 첨부할때 사용되는 라이브러리이다.

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    if (!result.cancelled) {
      const prevImage = [...addImage];
      prevImage.push(result.uri);
      setAddImage(prevImage);
    }
  };

• Input의 라벨을 클릭할 수 있도록 만들어두었고 클릭시 위와 같은 함수가 실행된다.

  const currentDate = () => {
    setDate(new Date().toString());
  };

• Input받은 값은 아니지만 나중에 후기 리스트에서 날짜도 보여주기 위해 함께 담아보자.

(3) ProductReview.js

: ProductReview page(리스트)에서 후기 작성에서 작성한 내용을 볼 수 있는 페이지이다.

• 마찬가지로 큰 기능은 없으므로 패스

(4) WriteInquire.js

: 문의하기 기능이 있는 페이지인데 이메일 전송 라이브러리를 사용했다.

import * as MailComposer from 'expo-mail-composer';

• expo-mail-composer는 이메일 보내기가 가능한 라이브러리이다.

  const handleEmail = () => {
    MailComposer.composeAsync({
      recipients: ['kaaiinn4@gmail.com'],
      subject: title,
      body: bodyText,
    });
  };

• 생각보다 간단했다. 위 코드처럼 input으로 받아온 데이터를 composeAsync로 내용만 전달하면 되도록 사용법이 간단하다.

(2) Recommend.js

: 하단 탭의 두번째 씬이다. 사실 큰 기능은 없다. 그치만 꼭 만들어보고 싶었다.

• 큰 기능이 없는 추천페이지에 메거진처럼 쭉 스크롤하며 볼 수 있는 페이지를 하나 만들어보고 싶었다. 상품만 나열되어있는 앱은 반드시 제품을 구매할때를 제외하고는 들어오지 않을 것 같았다.

---

(카트, 검색기능 등등은 이전 프로젝트에도 많이 있으므로 생략)

---

6. 소감

• Bottom에 존재하는 5개의 탭, 홈에 있는 5개의 탭, 상세 페이지에 있는 5개의 탭, 그리고 장바구니와 같은 10종류 이상의 스택 스크린 페이지까지 정말 수 많은 스택을 네스팅 구조를 결정하는 것에 가장 많은 고민을 했었다. Bottom 탭을 메인 네비게이터로 만드는 실패로 일주일 이상의 시간을 소비하기도 했다.
  하지만, 덕분에 이제는 스택 구조화에는 어느 누구보다 자신감이 생겼다.

• 인턴쉽 기간에 동시에 진행한 프로젝트였다. 때문에 기간 내 모든 시간을 이 프로젝트에 투자하지 못했고 개인적으로 조금 더 완성도 높이지 못한 아쉬움이 있었다. 하지만 동시에 여러개의 프로젝트를 진행 해보는 경험이 추후 협업에 큰 도움이 될 것 같다.