[Feat] 홈 드래그앤드롭, API 연동

[yyypearl]

연관 이슈

close #17

개요

✅ 작업 내용

• 홈 drag and drop
• 궤도 이동 애니메이션 추가
• 나의 행성 관리 drag and drop
• 나의 행성 관리 취소 버튼 추가
• 전체 선택 기능
• Toast 추가 (Recoil 관리)
• Space, SpaceLetter API 연동
• 행성 이미지 변경
• 편지 쓰기 작성 UI
  (* 원래 다른 브랜치에서 했어야 했는데, 그냥 작업하던 곳에서 우선 했습니다!)
• 그 외 자잘한 수정 등

🖥 구현 결과

지금 서버가 안 돼서 나중에 구현 영상 첨부할게요!

리뷰 요구사항

• /planet 페이지의 Planet 컴포넌트 페이징 관련 리뷰 요청 부탁합니다! 좀 자연스러운 애니메이션을 위해서 스와이프를 넣으려 했는데 (주석처리 해두었음) 지금 내가 페이징 처리를 /planet 페이지 내에서 pagination 컴포넌트랑 planet 컴포넌트를 둘 다 따로 넣어두었거든. 그래서 스와이프를 하려면 가로로 Planet 컴포넌트를 페이지 개수만큼 쫙 깔고 (현재 페이지 외에는 안 보이는 화면 바깥에 위치) 페이지 이동하면 좌우로 움직이면서 보이게? 구현하는 방법 정도를 생각해서 해봤는데 지금은 이상하게 겹쳐져서 나와서 우선 적용 안하게 만들어뒀어. 근데 뭐가 효율적인 방법일지 모르겠어서.. 이 방식으로 css 좀 만져서 수정하면 될지, 아니면 페이징 구조를 바꿔야 할지 언니 의견을 듣고 싶었어!

 <PlanetWrapper>
                <Droppable droppableId="droppable-planet">
                  {(provided) => (
                    <div ref={provided.innerRef} {...provided.droppableProps}>
                      <Planet
                        planetType={0}
                        planet={planetName}
                        orbits={currentOrbits}
                        onEditPlanetName={handleEditPlanetName}
                      />
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
              </PlanetWrapper>
              <PageWrapper>
                {show && (
                  <Toast
                    text={message}
                    icon={false}
                    top="0px"
                    left="50%"
                    padding="11px 0px"
                    close={close}
                  />
                )}
                <Pagination
                  currentPage={currentPage}
                  totalPage={totalPage}
                  onPrevPage={handlePrevPage}
                  onNextPage={handleNextPage}
                />

📝 기타 사항

• Button에서 나는 children props를 추가했는데, 언니는 icon props를 추가했더라고! 둘 다 그대로 두었는데, 혹시 icon이 특정하게 정해진 것이 많이 쓰이면 따로 icon 타입을 정해서 넘겨도 될 거 같고, 좀 다양하게 쓰인다 하면 children으로 넘겨도 될 거 같더라고! 그래서 이거는 하나로 합쳐도 될 거 같은 느낌이 들었어!
• Space랑 SpaceLetter API 다 연결했는데, 궤도 데이터랑 행성 내 편지 데이터가 아직 없어서 그거는 데이터 들어오고 다시 봐야할 거 같아요

[github-actions]

🎉 Deploy Preview

https://lettering-4t66c2z02-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[hyo-4]

진주 넘 수고했어!!!! 양이 어마어마하네 ..,,😱
페이지 전체 불러오고 애니메이션 더해서 스와이프하는 방식이 좋을 거 같아!!

[hyo-4]

에러가 일어나면 리프레시 토큰 재발급 api를 호출하도록 변경하면 되지않을까?