WEEK 3 팀 회의록

8/5 ~ 8/9 Sprint3

8/5

Git

• git merge 과정에서 문제 발생
• 머지 과정에서 변경사항이 모두 날라가고 merge되었지만 diff를 잡아주지 못함
• 수동으로 해결

이번주 목표

• 이벤트1
• 이벤트2
• 이벤트1 결과
• 이벤트2 결과
• 메인 페이지의 이벤트 참여 섹션

Jest

애니메이션 테스트

👨🏻‍💻 WEEK 3 개인 회고록 강준우

StoryBook

Context

• state나 props가 아닌 context사용 시 어떻게 해야 하는지
• Mock Provider, Decorator 사용

decorators: [
    (Story: StoryFn, context: StoryContext) => {
      const { args } = context;
      const initialValues = {
        isAuth: args.isAuth ?? false,
        isRandomEnd: args.isRandomEnd ?? false,
      };
      return (
        <MockAppProvider values={initialValues}>
          <AppProvider>
            <Story {...context} />
          </AppProvider>
        </MockAppProvider>
      );
    },
  ],

• Mock Provider 안에 App Provider 사용한 이유
  • App Provider의 구조가 App Context 가 null이면 오류를 throw하기 때문
  • Story가 App Context 를 사용하고 있기 때문에 App Provider로 감싸주지 않으면 안됨

Custom Hook

Animation Hook

• 자주 사용하는 애니메이션 훅에 대한 고민

import React, { useRef } from "react";

interface UseAnimationProps {
  startKeyframes: Keyframe[];
  cancelKeyframes: Keyframe[];
  options: KeyframeAnimationOptions;
}

const useAnimation = ({
  startKeyframes,
  cancelKeyframes,
  options,
}: UseAnimationProps) => {
  const elementRef = useRef<HTMLDivElement | null>(null);
  const animationRef = useRef<Animation | null>(null);

  const startAnimation = () => {
    if (elementRef.current) {
      animationRef.current = elementRef.current.animate(
        startKeyframes,
        options,
      );
    }
  };

  const stopAnimation = () => {
    if (animationRef.current && elementRef.current) {
      animationRef.current = elementRef.current.animate(
        cancelKeyframes,
        options,
      );
    }
  };

  return { elementRef, animationRef, startAnimation, stopAnimation };
};

export default useAnimation;

8/6

디자인 이슈

• 화면 비율 문제
  • 비율만 맞추고 모든 화면에서 비슷한 레이아웃으로 보일 수 있도록 조정

CSS

Animation 이슈

• 애니메이션 후, 요소가 사라지거나 나타나면 기존 요소의 위치가 달라지면서 애니메이션이 부자연스러워지는 현상
  • 모든 요소에 absolute를 주어서 해결

요소 변화에 의한 Animation

• 컨테이너 변화에 의한 내부 요소 위치 변화에 애니메이션을 주는 방법
  • 없는 듯
  • 움직이고자 하는 요소에 absolute부여 후 일반적인 애니메이션으로 구현

Jest 이슈

• act로 감싸지 않았다는 에러
  • 학습 진행 예정

Toast Component

• 버튼을 누를 때마다 토스트가 갱신되었으면 함
• 갱신된 토스트는 4초뒤 페이드 아웃
• 페이드 아웃 한 뒤 html요소에서 제거
  • opacity를 이용한 속임수는 쓰고 싶지 않음
• Key 값을 계속 변경하여 리랜덜링을 계속하는 방식 선택
  • 토스트 컴포넌트가 간단해 성능에 영향이 미미할 것이라 예상

const [toastKey, setToastKey] = useState(0);
const onClickHandler = () => {
  if (expectation.length < 20) setError("short");
  setToastKey((current) => current + 1);
};

<Toast
  key={toastKey}
  content={ERROR_MSG[`${error}`]}
  position="bottom"
  value={4}
  delay={4000}
  duration={1000}
/>;

8/7

디자인 피드백

• glow가 어떻게 움직이는 건지?
  • 안움직여오 될듯
• border gradient 구현 문제
  • 보류
• 전체화면, 최대화면, fn f 화면 세가지 모두 다름? 어떤걸로?
  • 전체화면에 맞추기, 본인인증하고 이벤트 참여하기 버튼 h 줄여도 될듯
• 기대평 작성 후, 사용자에게 알려주는 모달?
  • 4B7C83이 색깔로 토스트 띄우기
• 인증 모달 토스트 생기면 위 요소가 위로 밀리는 것이 맞는지?
  • 인증하기 버튼 밑으로 가기

ForwardRef

• 컴포넌트에 ref를 전달할 때 필요

API

• CORS 이슈로 완료하지 못함

8/8

할일

• 모달, 이벤트 선택 페이지 구현

Webpack

환경변수

  "scripts": {
    "start": "webpack-dev-server --hot --config webpack.dev.js",
    "msw": "webpack-dev-server --hot --config webpack.dev.js --env MSW",
  },

• 환경변수를 받아오기 위해 webpack의 module.exports를 객체형에서 함수형으로 변경

module.exports, exports

• 둘은 같은 객체를 call by reference로 가르킨다. return되는 값은 항상 module.exports로, 만약 exports에 객체를 할당하게 되면, module,exports와 달라지므로 항상 프로퍼티로 할당해주어야 한다.
• [자바스크립트] module.export, exports

CSS

• Snap
  • 부모요소에 flex주면 자식 요소들의 크기가 망가짐

8/9

피드백

• 디렉토리 정리
  • 적절한 위치에 적절한 파일
• 네이밍
  • 파일 이름 일관성 유지
  • 예상 가능한 이름 사용

CSS 이슈

• 페이드 인 은 잘 되는데 페이드 아웃이 잘 안되는 이슈
• useAnimation Custom hook으로 페이드 인 애니메이션을 줌
• tailwind keyframs를 이용하여 페이드 아웃 애니메이션을 줌
• 이렇게 되면 서로 opacity를 다른 곳에서 접근하기 때문에 충돌이 일어나는 것으로 추정
  • useAnimation Hook을 변형해서 해결함

  const stopAnimation = () => {
    if (animationRef.current && elementRef.current) {
      animationRef.current = elementRef.current.animate(
        cancelKeyframes,
        cancelOptions ?? options,
      );
    }
  };