들어가기
이번 과제는 ‘쇼핑몰 상품 관리 페이지 만들기’였습니다. 처음 과제를 받았을 때 설계서에 써있는 내용들이 너무 많아서 어떤 것을 어떻게 해야 할 지 모를 정도로 정신이 없었습니다. 하지만 팀원들과 해야할 부분을 분담하고 마지막 날에는 모두 같이 27시간 동안 잠도 자지 않으면서 열심히 과제를 마무리했습니다. 과제의 양이 많아서 나중에는 코드의 질에 대해서 신경을 쓰지 못한 부분이 있었지만, 시간 안에 끝냈다는 점에서 보람을 느꼈고 많이 익숙해져서 다음에는 더 빨리해 낼 수 있도록 열심히 노력해야겠다고 느꼈습니다.
과제 내용
과제는 ‘쇼핑몰 상품 관리 페이지 만들기’로 다시 말하면 ‘어드민 페이지 만들기’입니다. 항목이 여러 가지가 있었는데 그 중에서 제가 맡은 부분은 ‘상품 노출, 판매 기간 설정’ 컴포넌트와 ‘상품 배송 옵션’ 컴포넌트였습니다.
공통 컴포넌트
‘상품 노출, 판매 기간 설정’, ‘상품 배송 옵션’ 컴포넌트에서 공통으로 들어가야 하는 부분은 날짜를 선택하는 ‘Date Picker’였습니다. ‘Date Picker’를 직접 구현하기 위해서는 시간이 오래 걸리기 때문에 일단 ‘Native Date Picker’를 사용해서 컴포넌트를 완성했습니다.
상품 노출, 판매 기간 설정 컴포넌트
이름은 ‘상품 노출’과 ‘판매 기간 설정’은 형태가 완전 똑같아서 공통으로 사용할 수 있도록 컴포넌트의 이름을 ‘ExposePeriod’라고 정했습니다. 그리고 ‘ExposePeriodForm’이라는 컴포넌트를 만들어서 ‘ExposePeriod’에서 상품 노출 기한과, 판매 기한에 따라 이름과 상태를 다르게 받을 수 있도록 했습니다.
상품 배송 설정 컴포넌트
Toggle 버튼이 마일리지 적립과 기타 설정에도 들어가서 공통으로 사용할 수 있도록 했습니다.
&& 연산자를 사용해 선 주문 예약 배송을 체크하고 상태가 ‘true’가 되면 나머지 항목은 자동으로 ‘false’로 변하게 했습니다.
useEffect(() => {
preOrder &&
setVisit(false);
setUserDelivery(false);
}, [preOrder]);
고민한 부분 : React-Datepicker
Native Date Picker를 사용해서 완성시켰지만 Native로 하는 경우 Date Picker의 커스터마이징이 불가능하고 브라우저, 기기 간의 디자인이 모두 달라 디자인의 통일성이 떨어진다는 단점이 있었습니다. 따라서 React Datepicker 라이브러리를 활용해서 날짜 선택 부분을 구현했습니다.
Datepicker를 사용하는 부분이 4군데가 있기 때문에 각 위치에 따라 재사용을 할 수 있도록 ‘FormDatePicker’라는 컴포넌트를 따로 만들었습니다.
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import styles from './FormDatePicker.module.css';
const FormDatePicker = ({ changeHandler, name, dateType }) => {
const [isDate, setIsDate] = useState(null);
return (
<>
<div className={dateType === 'time' ? styles.datePickerWrapper : styles.miniWrapper}>
<DatePicker
className={dateType === 'time' ? styles.selectDate : styles.selectDateMini}
selected={isDate}
dateFormat={dateType === 'time' ? ' yyyy.MM.dd HH:mm' : ' yyyy.MM.dd'}
placeholderText={dateType === 'time' ? ' YYYY.MM.DD YY:MM' : ' YYYY.MM.DD'}
showTimeInput
name={`${name}-date`}
onChange={date => {
setIsDate(date);
changeHandler(date);
}}
autoComplete="off"
/>
<span className={styles.i}>
<i className="fas fa-chevron-down" />
</span>
</div>
</>
);
};
export default FormDatePicker;
Datepicker를 사용할 때 Date Type을 ‘시간’까지인지 ‘날짜’까지인지 확인해서 다른 모양으로 나오게 했습니다.
힘들었던 부분: Git 오류
이번 과제에서 협업을 하면서 Git Flow를 사용했는데 자꾸 Pull Request를 할 때 일부 파일이 이전 버전으로 돌아가거나 겹치는 부분이 있었습니다. 이것에 대해서 3시간에 한 번씩 만나서 pull하는 시기를 맞추어 조정했지만 계속 발생하여 코딩했던 부분이 원래대로 돌아가서 다시 수정하는 것에 시간을 정말 많이 사용했습니다. 다음 협업 때는 중간에 git 상태가 엉키는 경우에 서로 완벽하게 조율하고 프로젝트를 이어나가는 협의가 필요하다고 느꼈습니다.
마치며
설계서 분석, 세팅, 프로젝트 협의를 하는데 하루가 걸렸고 그 다음 날부터 27시간 연속으로 3시간에 한 번씩 중간보고를 진행하면서 코딩하는 과정이 많이 힘들기는 했지만, 함께 페이지를 완성해 나가는 과정이 너무 즐거웠습니다. 이번에 Toggle버튼과 라디오 버튼으로 값을 받는 것을 처음 구현해 봤는데 조금 익숙해졌기 때문에 다음에는 더 빠르게 구현할 수 있겠다고 느꼈습니다.
링크
github : https://github.com/wantedPreOnboarding/19_02nd_slr_admin
Comments