주문 취소 페이지에서 주문 취소 버튼을 누르면 다이얼로그가 뜨고 거기서 확인을 누르면 api가 실행이 돼 주문 취소 요청이 전달된다. 이때 formik으로 validation 체크를 진행해주어야 해서 formmik action을 사용해야 했다. 다이얼로그 컴포넌트를 가져와 다이얼로그 컴포넌트 내 버튼으로 함수를 넘겨주어 실행 시켜 주려고 하였다. 하지만 formikaction 객체와 해장 form의 값을 넘겨 줄 수 없어서 다른 방법을 찾아야 했다. 다이얼로그에 주문취소 컴포넌트에서 만든 버튼들을 넘겨주는 방식을 취해보았디만 역시 함수가 실행 되지 않았다. 그래서 새로운 컴포넌트를 만들고 useFormikContext 이용해서 submitForm을 가져와 다이얼 로그로 넘겨주는 방식으로 해결하였다. im..

Order 폴더네 컴포넌트에서 사용하는 값들의 타입을 전부 정의하는 작업을 했다. 타입 폴더에 Order.d.ts 파일을 만들어 namespace로 타입을 정의해 주었다. 중복되는 부분들은 따로 빼줄까 싶었지만 크게 중복되는 부분은 없어서 따로 처리하지는 않았다. 체크 API 연결시 데이터 값이 맞지 않아 에러가 발생하여서 수정해 주었다.

오늘은 css와 사투를 벌이고 왔다.... 컴포넌트 로직 짜는거 보다 css 적용하는게 더 힘든 것 같다. 이미지와 텍스트를 정렬해 주기 위해서 이미지와 텍스트를 로 감싸주고 각각을 로 감싸는 형태로 만들어 주었다. 제일 최상위 에 width:100% 속성을 준다.그리고 이미지와 텍스트를 감싸고 있는 각각의 에 display: inline-block 과 width 속성을 적용해준다. width 속성은 image에 30%, text에 70% 이런 식으로 합이 100%이하가 되도록 지정하면 된다. 그러면 일단 이미지와 텍스트가 가로로 정렬이 될것이다. 그리고 이미지 윗부분과 텍스트 윗부분이 일직선으로 정렬이 안되는 경우가 있을 수 있는데 이때 이미지와 텍스트에 vertical-align:top 속성을 주면 ..

js 파일을 ts로 변환하던중 getinitialProps를 사용해야하는 부분들이 있었다. getinitialProps은 FunctionComponent가 아니라 NextFuctionComponent로컴포넌트 타입을 지정해주어야 한다. 그런데 getinitialProps = ({ store }) 이런식으로 store를 불러오는 부분에서 store 에 대한 타입이 없다고 계속 에러가 발생 하였다. 이유는 store에 대한 타입이 없기 때문이였다. 그래서 getinitialProps = (ctx:any) 이렇게 지정을 해주고 ctx.store 이런 식으로 가져와서 사용해야 했다. 그리고 Next 버전업이 되면 NextFuctionComponent가 아니라 NextPage를 사용해야 하고 ctx에 스토어 자체..

새로운 서비스의 기획이 조금 수정이 돼서 검색 결과를 어떻게 보여줄지에 대해서 다시 고민을 해보았다. 웹으로 생각을 했을 경우에는 크게 상관이 없었는데 모바일로 보여줄 경우가 문제였다. 모바일은 작은 화면에 최대한 많은 정보를 띄워 주어야 하는데 수정된 기획에서 검색 결과 부분의 크기가 작았기 때문이다. 아직 확정된 것은 아니라서 수정은 가능했기에 최대한 사용자가 평하게 사용할 수 있는 방법을 찾아 보았다. 다양한 앱들과 모바일 버전 웹사이트의 검색을 찾아 보았는데 대부분 검색을 하면 한페이지 전체에 검색 결과를 보여 주었다. 그리고 추가로 추천 검색어 라던지 컨텐츠 등을 띄어서 보여주었다. 이러한 것을 보았을때 역시 전체 화면에 띄워주는 것이 최적의 방법이라는 생각이 들었고 추가로 검색하기전 페이지에서..

소셜 로그인 탈퇴 구현이 되어 있지 않아서 소셜 로그인 탈퇴에 대해서 알아 보았다. 우리 서비스에는 페이스북, 카카오 두가지 소셜로그인이 가능하다. 소셜로그인은 탈퇴라기 보다는 소셜에서 해당 서비스로의 연결을 끊는다는 개념이였다. 즉 내가 해야할 일은 소셜 로그인과의 연결을 끊어주고 우리 디비에 있는 회원정보를 삭제해주는 두가지 일을 진행해야 했다. 카카오 SDK를 사용하여 request 요청을 날려주면 되었다. request 요청을 날리기 전에 먼저 window.kakao.init을 해주어야 하는데 window.kakao 값을 계속 가져오지 못하였다. 다양한 시도를 하다가 class 형 컴포넌트에서 function 컴포넌트로 바꾸어주니 값을 가져올 수 있었다. (무슨 차이인지 아직도 잘 모르겠다... ..