**기간** 22.04.16 ~ 22.06.05 (약 7주) / 팀 프로젝트
**설명** 직장인, 학생 등 커피를 좋아하는 사람을 위해 본인만의 커피 인증서 만들기 위한 프로젝트
**팀원** 오민석, 김보라, 구민정(멘토)
**피그마** https://bit.ly/3kiGVZj
**깃허브** https://github.com/oh930428/purplestone
**배포 URL** https://purplestone.herokuapp.com
**깃허브(storybook)** https://github.com/oh930428/purplestone-storybook
**배포 URL(storybook)**https://purplestone-storybook.herokuapp.com/
https://github.com/oh930428/purplestone/pull/14
카테고리+프로세스 카드(커피 옵션들이 나열되있는 팝업들)와, 카드안에 있는 옵션들의 테이블을 다르게 구성해야 하는 것을 알았습니다. 카테고리+팝업 데이터에는 type을 추가하였고, 카드안에 있는 초기 옵션들은 properties 라는 이름의 폴더 안에 object 형태로 저장하여, 리듀서 안에서 import하고 initstate로 지정했습니다.
팝업 안의 옵션을 클릭하면, 해당 옵션의 type만 dispatch로 넘겨주고 reducer작성시 선택한 옵션의 type을 이용해서, 해당 오브젝트에 접근하고 선택한 option으로 변경하여 해결했습니다.
https://github.com/oh930428/purplestone/pull/38
카테고리 클릭시 active를 걸고, 팝업 안의 옵션을 선택시 active가 지워져야 하는데 아무리 해도 지워지지 않는 버그가 있었습니다.
카테고리 로직
// category.tsx
/**
* Category 선택시, 선택한 카테고리 아이템의 UI가 변경된다. (active)
* @param {any} e 현재 클릭한 노드
*/
const handleActive = (e: any) => {
const target = e.currentTarget || e.currentTarget.parentNode;
const categoryItem = document.querySelectorAll('.category-item');
const newCategoryItem = Array.from(categoryItem);
for (let item of newCategoryItem) {
if (item.classList.contains('active')) {
item.classList.remove('active');
setIsPupupCard(false);
}
}
target.classList.toggle('active');
setIsPupupCard(true);
};
카테고리 안에 자식요소로 팝업이 들어가 있어서, 이벤트 버블링으로 인해 제대로 동작하지 않는 것처럼 보였던 것이었습니다.
e.stopPropagation(); // 이벤트 버블링 막음 으로 해결하였습니다.
https://github.com/oh930428/purplestone/pull/19
처음 로직
list 요소의 가장 아래에 빈 div을 생성하고, ref을 달아준다. 이 ref를 통해서 교차시점을 확인하여, 감지시 새롭게 데이터롤 불러온다.
변경 로직
list의 마지막 요소에만 선택적으로 ref를 달아주고, ref가 있을 때, 새롭게 데이터를 fetch한다.
첫째, 개인의 효율성과 생산성을 높인 것입니다.
기능 구현에서 막히는 부분은 서칭을 통해 학습, 새로운 기술의 적용은 효율성과 생산성을 높여 목표 완수에 필요한 시간을 크게 단축 시켰습니다.
둘째, 좋은 협업이 무엇인지 느꼈습니다. 최신 이슈를 공유하는 등 소통을 기본으로 하여 효율적인 업무 분담에 성공했습니다. 또, 혼자서 해결하기 힘들었던 부분이나 막히는 부분을 팀원과 고민하여 해결해나갔던 경험을 통해 팀 플레이, 그리고 좋은 협업이 무엇 인지를 느낄 수 있었습니다.