main-project 21~23일차 (22.09.28 ~ 30. 판매점 페이지)

✅ 오늘 한 일

등록과 수정의 경우 일단 JSON Server로 진행했다. 후에 formdata로 API에 보내줘야한다고 하니 formdata에 대해서 알아봐야한다.

레저용품 판매점 등록 구현

• 처음에 toastui 에디터를 사용해서 사용자에게 편의성을 제공하고 싶었으나 수정을 하는 부분에서 에디터에 기본값을 불러오지 못하는 오류가 생겨서 textarea로 변경했다.
• JS로 사용할 경우 이러한 경우가 종종 발생하는 것 같다. TS로 리팩토링 할 때, 추가해봐야 겠다.
• 코드를 잘 못 작성해서 카테고리가 고정되는 상황이 발생했지만 코드를 조금 더 세밀하게 봐서 기본값을 지정해주고 변경하는 코드를 작성하지 않았다는 것을 찾아서 해결했다.
• 작성 후 등록버튼을 누를 경우 작성된 내용이 담긴 상세페이지로 이동하도록 했다.

레저용품 판매점 수정 구현

• 판매점 등록 페이지랑 흡사하지만 디폴트값을 지정해야 했다. 하지만 위에서 적은 오류가 생겨서 textarea로 변경했다 ;ㅅ;
• 수정 후 수정버튼을 누를 경우 수정된 페이지로 이동하도록 했다.

드롭다운 애니메이션 수정

• 문제: 드롭다운이 너무 길게 늘어졌다가 줄어드는 문제 있었다.
• 해결:
  • 키프레임 대신 transition을 사용했다.
  • 높이 값을 0과 15.725rem으로 주는 데 transition으로 높이 변경하는데 걸리는 시간을 지정했다.

// 기본 코드
height: ${props => props.height};
  animation-name: ${props => props.class};
  animation-duration: 1.3s;

@keyframes up {
    0% {
      height: 15.725rem;
    }
    100% {
      height: 0px;
    }
  }

  @keyframes down {
    0% {
      height: 0px;
    }
    100% {
      height: 15.725rem;
    }
  }

// 변경 코드
height: ${(props) => (props.className === "up" ? "0px" : "15.725rem")};
transition: height 1.3s;

🥲 어려웠던 일

• formdata를 처음 작성하다보니 테스트를 하는 과정에서 많은 오류를 발생했지만 결국 어떻게하는지 알아냈다.
• 애니메이션이 길게 늘어지는 오류가 있었지만 키프레임과 애니메이션에 대해 알아보니 해결됐다.

📌 해야할 일

• 백엔드 API와 프론트 연결
• 배포
• 발표준비