[POBTIL] 4일차

SWP·2022년 5월 5일

TIL

POBTIL

목록 보기

4/21

오늘 한 일

~~딥다이브 day3 읽기~~
~~독서 15분 누워서읽는알고리즘~~
팀과제
+~~창열기애니메이션 구현~~
+카테고리기능추가
+~~2시 회의~~

공부했던 내용

1. 창열기애니메이션 구현

+구현할 기능 -> 버튼 클릭시 추가모달이 열리는데, 흰 원이 점점 커지며 그게 배경이 되고, 그 후에 각 요소들이 박스단위로 위에서 아래로 내려오면서 밝아지면서 보이는 애니메이션

keyframe 및 scss의 @for 반복문 사용

겪은 문제

1. circle이 타원형 => 패딩값때문
2. 원이 scale로 커지는데, 커지다가 우리한테 보이는 영역이 꽉차고부터 조금 더 커짐. 그 차이 부분때문에, 모달창 요소 fadeInDown 애니메이션이 딜레이가 발생해 흰화면이 잠깐 더 뜨는 문제
3. 2를 해결하려고 fadeInDown을 조금 더 빨리주게 되면 배경의 하위 태그의 스케일이 아직 커진 상태
=> expandBubble로 따로 컴포넌트화해서 absolute로 뺴주고, 그 위에 배경이 투명인, 기존 요소들을 배치해서 해결

2. 카테고리 구현

            <button
              type='button'
              className={cx(
                styles.categoryBtn,
                { [styles.pickBusiness]: categoryPick === 'business' },
                { [styles.pickPersonal]: categoryPick === 'personal' }
              )}
              aria-label='Category button'
            />
            <button
              type='button'
              className={styles.categoryOptionBtn}
              aria-label='Business button'
              onClick={() => handleCategoryClick('business')}
            >
              <p>business</p>
            </button>

+기존에 버튼에 마우스 호버 시 카테고리 옵션이 내려오고 클릭시 카테고리 옵션이 없어지며 버튼의 색상이 해당 카테고리 색상으로 변경되는 것을 구현하려 했음.

categoryPick을 state로 관리하고 옵션버튼을 클릭하면, 카테고리버튼의 색이 변경되야하는데, 원래 사용하던 스타일드컴포넌트에서는 props로 값을 넘겨줄 수 있었는데, scss에서는 어떻게 넘겨줄 지 몰라서 일단 state값에 따라 클래스를 달리 주는 것으로 구현해둔 상태 => 회의에서 카테고리옵션을 픽하는 형식을 바꾸는게 확장성 및 디자인이 좋아서 바꾸기로 함.

2-2 클릭시 마다 배열 순환하며 변경되게끔

카테고리 배열순환_ 처음에는 출력X

구현방법: idx와 pick을 따로 state로 관리해서 초기값을 각각 0과 idx로 준뒤
클릭했을 때 length보다 크면 배열의 첫번째꺼의 타이틀로 바꿔주고, 1번으로 시작
이때 첫클릭시 초기 idx 0값이 0값이라 클릭시 현재 idx에 해당하는 타이틀을 먼저 찾고
idx+1을 해주는 방식으로 진행. 하고 다 넘어오면 0값으로 pick을 주고, idx를 1로 해줘서 다음번 클릭시 인덱스 1이 출력되게끔.

const handleChangeCategory = () => {
   if (idx >= CategoryType.length) {
     setCategoryPick(CategoryType[0].title)
     incrementIndex(1)
   } else {
     setCategoryPick(CategoryType[idx].title)
     incrementIndex(idx + 1)
   }
 }

3. PR후 MERGE

브랜치에서 작업 후 master 페이지 => new pull request => requset폴더에서 각자 작업한 것을 올리기 => 거기에 따른 코멘트 및 승인을 할 수 있음 => 일정 인원 이상시 conflict 해결 후 다시 merge => 작동확인
브랜치 삭제후 터미널에서 아래 작업 후 브라우저에서 작동확인하기
git checkout master // 마스터에 들어가기
git pull origin master // 마스터꺼 풀 땡겨받기
브랜치는 기능단위로, PR 후 MERGE되면 삭제 => 새로운 기능 단위로 다시 브랜치 생성 // 아직 기능을 완료하지 못했지만 충돌이 많이 일어날 것 같아 미리 한번 다같이 화면공유하며 merge작업 후 충돌해결함