[티켓 예매 프로젝트] 4. 고민한 것들

지난 몇주간 프론트 개발을 진행하면서 했던 여러 고민들과 해결들, 그리고 이것저것들을 기록해본다. 제목을 뭐라 지어야할지 한참 동안 고민했다. 적절한 제목 추천 받습니다.

 

1. 레이아웃

스토리북을 도입하면서 이걸 어떻게 하면 잘 쓸 수 있을까 생각하다가 전체 페이지에서 쓰는 컨테이너와 레이아웃을 모듈화시켜보기로 했다. 디자인한 페이지들의 레이아웃을 보면 세가지로 나눌 수 있다.

 

각각 1:3:3:1 / 1:3:4 / 1:7

[제목과 설명/내용(주로 인풋)/다음으로 버튼]으로 이루어진 페이지, [제목과 설명/내용(예매 관련 정보)]로 이루어진 페이지, 그리고 [티켓 콘텐츠] 하나로만 이루어진 페이지. 그리고 모든 페이지들에는 상태에 따라 뒤로가기 버튼이 있을 수 있지만 그와 상관 없이 항상 그만큼의 여백을 두었다.

 

.InfoLayout {
  height: 100%;
  display: grid;
  grid-template-rows: 3fr 4fr;
}

.ProgressLayout {
  height: 100%;
  display: grid;
  grid-template-rows: 3fr 3fr 1fr;
}

.TicketLayout {
  height: 100%;
  display: grid;
  grid-template-rows: 7fr;
}

각 레이아웃에 맞게끔 내부 요소들을 그리드를 이용해 비율을 정해주었다. 어떤 레이아웃이든지 전체 그리드 fr들의 합이 7이 되도록 했다.

 

//Container.jsx

/**
 * 티켓 발급,인증 과정에서 TicketWarpContainer의 자식 컴포넌트로 들어갑니다
 * 상단 뒤로가기버튼 영역과 , 그 영역을 제외한 나머지 영역으로 나뉘어져 있습니다
 * grid : 1fr 7fr 입니다.
 * TopElemnt prop으로 TicketTop 컴포넌트를 받으며
 * children으로 TicketLayout, ProgressLayout, InfoLayout 중 하나의 레이아웃을 자식으로 받습니다.
 */
export const TicketContainer = ({ TopElement, children, ...props }) => {
  return (
    <div className="Ticket-Container" {...props}>
      <div className="Ticket-Inner-Container">
        <div className="Ticket-Inner-Top">
          {TopElement ? TopElement : <TopElement />}
        </div>
        <div className="Ticket-Inner-Content">{children}</div>
      </div>
    </div>
  );
};


//Container.css

.Ticket-Inner-Container {
  box-sizing: border-box;
  height: 100%;
  padding: 20px 6%;
  display: grid;
  grid-template-rows: 1fr 7fr;
  max-height: 620px;
  min-width: 300px;
}

그 다음 레이아웃을 자식으로 받아 컨테이너로 감싼다. 그 안에서 <div className="Ticket-Inner-Top"></div> 이라는 녀석이 뒤로가기 버튼이 있어야 할 영역을 맡아준다. 위에서 전체 그리드 fr들의 합이 7이 되도록 한 이유는 여기에 있다. 뒤로가기 버튼의 영역과 나머지 부분의 비율이 1:7이 되어야 하기 때문에. 이제 저 컨테이너와 레이아웃들을 모든 페이지에서 불러와 사용할 수 있다.

 

 

2. 컨테이너

기본적으로 모바일 화면에 맞춰서 기획했지만 큰 화면에서도 불편하지 않고도 이쁘게 보였으면 했다. 그렇다고 모든 페이지를 완전히 반응형으로 만들기에는 굳이 싶은 생각이 들었다.

꽤 이쁘다. 나름 가성비 있는 디자인이라고 생각이 든다. 넓은화면일때의 뒷 배경도 다크 계열로 바꿔야지 생각만 하다가 아직도 안했네. 

 

스토리북에서 직접 확인해 볼 수 있다.

 

모바일에서 100vh 스크롤이 생기는 문제.

웹이지만 앱처럼 쓸 수 있도록 한 디자인에서 가장 중요한게 스크롤이 생기지 않도록 하는 거였다. 그래서 컨테이너의 height를 100vh로 주었는데 이 부분에서 문제가 생겼다. 일반적인 데스크톱 브라우저에선 정상적으로 보였지만, 아이폰 사파리 같은 브라우저에서는 스크롤이 생겼다. 100vh일때 주소창과 하단바가 뷰포트에 포함되기 때문이라고 한다.

 

//index.js
const setScreenSize = () => {
  let vh = window.innerHeight * 0.01;

  document.documentElement.style.setProperty('--vh', `${vh}px`);
};
setScreenSize();

index.js에 다음과 같은 코드를 넣는다. window.innerHeight로 현재 뷰포트의 높이를 가져와 새로운 vh의 단위로 삼는다. setProperty 로 '--vh' 라는 css 변수를 만들어 사용할 수 있다.

 

.Ticket-Container-Wrap {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
}

css 속성은 위와 같이 가져와 사용할 수 있다. 첫 번째 인수에서 참조하는 사용자 지정 속성이 유효하지 않은 경우 함수는 두 번째 값을 사용한다. 참고. 이 부분은 레오가 해결해준 부분이다.

 

3. 모달

모달창은 개인적으로 좋아하는 디자인 중 하나이다. 많은 정보를 넣어야 할때 요긴하게 사용한다.

import React from 'react';

const ModalComponent = ({ children }, ref) => {
  return (
    <div className="modal hidden" ref={ref}>
      <div
        className="modal-overlay"
        onClick={() => {
          ref.current.classList.add('hidden');
        }}
      ></div>
      <div className="modal-content">{children}</div>
    </div>
  );
};

export default React.forwardRef(ModalComponent);

ModalComponent.js와,

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  position: absolute;

  width: 100%;
  height: 100%;
}

@media screen and (min-width: 600px) {
  .modal-overlay {
    width: calc(var(--containerWidth) - 3px);
    height: calc(var(--containerHeight) - 3px);
    border-radius: 15px;
  }
}

.hidden {
  display: none;
}

css 파일이다.

 

setProperty를 이용해서 모달 오버레이 설정하기.

위에서 배운 setProperty를 여기서 잘 써먹었다. position:absolute;와 함께 width와 height를 모두 100%로 채워 전체 화면을 어둡게 만들었다. 하지만 넓은 화면에선 모서리가 둥근 사각형 컨테이너 안에만 채워져야 한다.

 

export const handleResize = () => {
  const [container] = document.getElementsByClassName('Ticket-Container');
  if (!container) return;
  document.documentElement.style.setProperty(
    '--containerHeight',
    `${container.clientHeight}px`
  );
  document.documentElement.style.setProperty(
    '--containerWidth',
    `${container.clientWidth}px`
  );

컨테이너를 가져와 엘리먼트의 높이와 너비를 css 변수에 넣어두고,

 

  useEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => {
      // cleanup
      window.removeEventListener('resize', handleResize);
    };
  }, []);

컴포넌트에서 이벤트리스너에 콜백으로 달아주었다.

이제 브라우저 사이즈가 바뀔 때마다 매번 css 변수의 값이 바뀌면서 modal-overlay의 너비와 높이 값이 적절하게 유지된다.

 

하위 컴포넌트로 ref 전달하기.

저 모달 코드를 다른 곳에서도 사용해야할 일이 있어서 컴포넌트를 따로 뺐다. 그랬더니 잘 되던 모달이 갑자기 안되는게 아닌가.. className을 다루기 위해서 달아놨던 ref가 전달이 안돼서 생긴 문제였다.

 

https://ko.reactjs.org/docs/refs-and-the-dom.html

공식문서에서 그렇다고 하니.. forwardRef를 사용해보았다. export 하기 전에 함수형 컴포넌트를 forwardRef로 감싸서 보내주었다. 이제 부모 컴포넌트에서 모달 컴포넌트에 ref를 전달할 수 있다.

 

4. input 컴포넌트

배리에이션이 많아서 그런지 스토리북에서 input 컴포넌트를 만들면서 유난히 오래 걸렸다. 덕분에 맘에 드는 결과물이 나왔다.

 

자동 focus, 자동 blur

처음 티켓 예매 과정 디자인을 하면서 가장 힘들었던 부분은 '다음으로' 버튼이었다. 버튼의 위치도 위아래로 계속 움직여보고 버튼의 디자인도 바꿔보고 하면서 일단 이런 결과물이 나왔지만.. 좀 더 좋은 방법이 있었을텐데.

 

다음으로 넘어갈때 화면이 오른쪽에서 왼쪽으로 슬라이드하는 애니메이션이 있었으면 좋겠다는 의견과, 그렇기 때문에 버튼이 오른쪽 밑에 있었으면 좋겠다는 의견이 있어서 버튼 위치를 저렇게 놓았다. 엄지가 닿기에도 편한 위치였다. 보기엔 이뻤지만 문제가 하나 있었다. 모바일에서 저 페이지를 보면 키패드에 다음으로 버튼이 가려지게 된다.

 

인풋에 포커스가 되면 애니메이션과 함께 보라색 줄로 바뀐다. 처음 페이지가 렌더링될때 인풋에 자동으로 포커스가 되도록 했다. (모바일 화면에선 바로 키보드가 올라온다 라는 생각으로 코드를 넣었지만 실제로 키보드가 올라오지는 않았다. 브라우저단에서 막는가보다.)

인풋에 예를 들어 인증번호 길이인 6글자가 입력되면 다시 자동으로 포커스가 풀리도록 했다. focus()와 blur() 메소드로 동작한다. 모바일 화면에선 자동으로 키보드가 내려간다. 키보드를 직접 내려야 하는 불편함 없이 '다음으로' 버튼을 쉽게 누를 수 있다.

 

이 역시 스토리북에서 직접 사용해볼 수 있다.

 

굉장히 편하다. 정해준 length만큼 입력하면 아예 입력을 제한하면서 클라이언트단에서 보내는 값들을 한번 더 검사해주는 역할도 해준다. 꽤 이쁘기도 하니 매우 만족하는 부분이었다.

 

input border 애니메이션

애니메이션 자체보다 저 보라색 막대기 위치를 잡는게 어려웠다. 甴 의 형태로 그리드를 배치했다. grid-column: span 3; 으로 하나의 요소가 그리드 여러 칸을 차지하게 할 수 있었다. 이전까진 단순히 grid-template-으로 비율만 고정해주는 용도로 그리드를 썼었는데, 그리드가 이렇게 편하고 좋은거였다니.

 

애니메이션 자체는 이렇게 줄 수 있다.

.input-box ~ .border-animate {
  margin: 0 auto;
  width: 0%;
  height: 2px;
  transition: 0.4s;
}

.input-box:focus ~ .border-animate {
  width: 100%;
  height: 2px;
  background-color: #bf94e4;
}

~(물결) 선택자는 처음 알았다. A~B 로 사용했을 때 A태그와 형제관계에 있는 모든 B태그가 선택된다.

 

인증번호 재전송 3분 타이머

이게 생각보다 은근 까다롭더라.

export const Timer = ({ time, setTime }) => {
  const [isRunning, setIsRunning] = useState(true);
  const savedCallback = useRef();

  const callback = () => {
    setTime(time - 1);
  };
  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    const tick = () => {
      savedCallback.current();
      console.log('tick');
    };
    let timer;
    if (isRunning) {
      timer = setInterval(tick, 1000);
    }

    return () => clearInterval(timer);
  }, [isRunning]);

  useEffect(() => {
    if (time == 0) {
      setIsRunning(false);
    }
  }, [time]);

  return (
    <div className="indicator">
      {parseInt(time / 60)}:{('00' + parseInt(time % 60)).slice(-2)}
    </div>
  );
};

time 상태를 받아와서 setInterval()로 1초마다 상태를 업데이트해주려고 했는데 2:59에서 멈춰버리는 일이 생겼다.

 

문제는 useEffect가 count를 첫 렌더에서 잡아버리는 현상 때문에 일어납니다. 첫 렌더에서 count는 0입니다. 이펙트를 재적용하지 않아서 setInterval에 있는 클로저가 항상 첫 렌더의 count를 참조합니다. 그리고 count + 1은 계속 1이 되는 것이죠.

라고 한다. 참고. 매 렌더링마다 바뀌는 time 상태를 ref에 담아놓고 setInterval() 함수의 콜백에 사용한다. ref는 컴포넌트 사이클 안에서 값이 유지가 되기 때문에 재랜더링되는동안 값이 보호된다.

 

time이 0이 되면 isRunning state를 false를 바꾼다. useEffect 훅에서 isRunning 값이 바뀌는걸 보고 0이 되면 clearInterval()를 실행하며 타이머를 종료한다.