[ 📝 Devlog ] 이유진 / 2022-10-05

[nuuco]

- 오늘은 어떤 작업을 진행했나요?

• 줌 인 줌 아웃 기능 구현 완료
• 줌 인 상태에서 방(유닛) 이동 기능 구현 완료
• 받아오는 roobits 데이터가 '객체 안의 배열' 형태에서 '이중 배열'로 바뀜에 따른 코드 수정
• 루빗이 없는 경우(roobits: [] 인 경우) 빈 방을 보여주도록 수정

- 오늘 작업 내용중 어려웠던 부분이 있었나요?

• 줌 기능을 transform 으로 구현하는 데 많은 수식이 필요했습니다.
• 원하는 방(유닛) 중심으로 확대가 되어야 해서 해당 유닛의 중심점을 계산해 transform-origin 으로 넣어주어야 했습니다.
• 또한 해당 중심점으로 이동하고, 유닛 크기에 따라 스케일 비율을 다르게 적용해야 했습니다.
• 때문에 translate() scale() 마다 다른 값이 필요해서 값을 계산하는 데 오래 걸렸습니다...😂
• 유닛이 1개, 2개일 때 또한 각각 다른 식을 파악해 적용해야 되었습니다.
• 완벽하진 않지만 대략적인 스타일드 컴포넌트 css 변수는 다음과 같이 작성했습니다.

  /** 줌 인 줌 아웃 구현을 위한 변수 */
    --floor: ${(props) => parseInt(props.idx / 3) || 0};
    --nth: ${(props) => props.idx % 3 || 0};
    --zoom-translate-x: calc(
      50% - (var(--item-width) * var(--nth)) - (var(--item-width) / 2)
    );
    --zoom-translate-y: calc(
      -50% + (var(--item-height) * var(--floor)) + (var(--item-height) / 2)
    );
    --zoom-transform-origin: calc(
        var(--item-width) * var(--nth) + (var(--item-width) / 2)
      )
      calc(100% - (var(--item-height) * var(--floor)) - (var(--item-height) / 2));
    --zoom-scale: calc(100 / (90 / (var(--total-floor) + 0.1)));
  
    /**scale은 number(단위 없는 정수나 소수) 만 받기 때문에 length(px, vh, rem 등) 자료형을 넣으면 작동이 안 된다. */
  
    /** 줌 인 줌 아웃 - 유닛이 한 개인 경우 */
    --one-zoom-translate-x: 0;
    --one-zoom-translate-y: calc(-50% + (var(--one-item-height) / 2));
    --one-zoom-transform-origin: 50% calc(100% - (var(--one-item-height) / 2));
    --one-zoom-scale: calc(100 / (90 / (var(--total-floor) - 0.5)));
  
    /** 줌 인 줌 아웃 - 유닛이 두 개인 경우 */
    --two-zoom-translate-x: calc(25% - (50% * var(--nth)));
    --two-zoom-translate-y: calc(-50% + (var(--two-item-height) / 2));
    --two-zoom-transform-origin: calc(
        var(--two-item-width) * var(--nth) + (var(--two-item-width) / 2)
      )
      calc(100% - (var(--two-item-height) / 2));
    --two-zoom-scale: calc(100 / (90 / (var(--total-floor) - 0.5)));

• 다만 현재 문제는 scale 로 줌 기능을 구현하다보니 유닛에 포함된 글자 크기가 컨트롤 하기 어려워졌습니다. (글자가 너무 커짐) 해당 부분은 추가 처리가 필요합니다.

- 내일은 어떤 작업을 계획하고 있나요?

• 룸 페이지 닉네임, body 표시 구현하기 (1순위)
• 룸 페이지에 날씨별 배경 넣기
• 룸 페이지 텍스트 관련 컴포넌트 추가 (룸 제목, 디데이 표시하기)
• 모달 디자인 적용 및 수정
• 공유 버튼 기능 추가
• 기타 스타일드 컴포넌트 수정 및 적용
• 룸 종료 페이지
• 메인 페이지 레퍼런스 찾기 - 대충이라도 진행
• 유닛 방 배경 이미지 수정 (고양이에 맞게 사물 위치 변경, 창문 추가, 시간 나면 소품 추가)

---

달려보겠씁니다ㅏㅏ....!!😊