24.09.30 day73 작업 일지

주말 동안 테스팅을 하며 버그난 부분이나 부족한 페이지들을 추가했다. 이제 기획한 부분은 다 끝났고 요청받은 페이지 수정 부분과 보안 문제만 남은 것 같다.

 

재희님이 보내주는 루틴 데이터에 속성 타입을 추가하여 각각 루틴의 속성이 뭐가 있는지 확인할 수 있게 수정했다. 기존에 있던 attr_key값을 없애고 객체 안에 attr_skin_relation 배열을 담아 보내줬다. 근데 이 과정에서 데이터의 구조가 바뀌었기 때문에 인터페이스의 구조를 수정해야 했다. 그리고 attr_key를 가져와 data.js에 있는 배열에서 해당 key와 동일한 인덱스의 텍스트를 가져와 화면에 출력해줬다.

---

그에 맞게 상세 루틴도 데이터가 수정되어 인터페이스를 재수정하고 로직을 변경했다. 전체 루틴엔 속성값만 들어있으나  상세 루틴엔 태그값까지 추가되어 태그까지 수정해줬다. 아쉬운건 데이터베이스의 로직때문에 태그키만 받아올 수 있어서 해당 태그키로 태그 값을 가져와야 했기 때문에 루틴의 태그 개수만큼 api를 반복 요청해야했다. 그나마 상세 루틴이고 태그를 최대 10개로 막아놨기 때문에 렌더링 속도에 문제는 없지만 전체 루틴의 경우에는 한 루틴당 태그개수만큼 api를 요청해야해서 분명 무리가 갈 것이다. 그래서 전체 루틴에는 태그를 없애도록 회의했다.

그리고 제품의 이름이 길어질 경우 이미지가 쪼그라드는 버그가 있어서 css를 수정하여 제품 이미지를 크게 키우고 flex된 구조를 flex-direction: column으로 세로로 유지하게 했다.

작은 이미지보다 차라리 큰 편이 화면도 잘 채워지고 깔끔하더라.

---

빠진 부분을 살펴보다가 루틴의 수정과 삭제가 없는것을 확인했다. 게시글의 경우 CRUD가 있어야 하나 해당 부분을 구현하지 못해 추가했다. 

수정, 삭제 버튼의 경우 페이지 상단에 있으며 상세 루틴의 user_key와 세션스토리지에 저장된 user_key가 동일할 때만 보여지게 구현했다.

수정을 누를경우 루틴 추가 페이지와 동일한 구조의 수정 페이지로 이동하며 해당 루틴의 데이터값을 입력창에 채워줬다. 이 부분에서 진짜 빡셌었는데, 루틴을 추가할 때와 루틴 데이터를 받아올 때의 구조도 다르고 데이터도 달라 해당 값을 채우기 위해 api를 사용해 데이터를 채워야 했다. 성별의 경우 M, F, A로 받아오며 A일 경우엔 남성과 여성 둘 다 체크가 되야 했다. 여기서 가져온 값을 화면에 채우려 했으나 값이 체크가 되었는데 수정이 안되는 버그가 생겼다. 이유를 찾아보니 화면이 렌더링이 되며 서버에서 받아온 값을 props로 1페이지에 넘겨서 적용했으나 useEffect로 인해 입력값이 바뀔때마다 렌더링이 발생하여 다시 기존의 가져온 값이 적용되는 문제였다. 그래서 해당 값을 현재 페이지에서 추가를하고 1페이지에서는 값을 수정할 수 있게 변경했다.

그리고 더 큰 문제는 2페이지인 제품에 있었다.

제품의 경우 입력창에 입력한 값을 서버에 전송해서 검색기능으로 제품 데이터를 가져오는 방식이다. 그러기 위해선 입력창이 변동되는 걸 감지해야 하는데 단순히 값을 채울 때는 value에 그대로 들어가고 감지가 되지않기 때문에 api요청이 안된다. 된다고 해도 해당 검색결과에 맞는 데이터 중 원하는 제품을 선택해야 제품명이나 가격이 적용되는데 이 부분에서 자동으로 채워지게 하는 로직이 생각이 나질 않았다. 그래서 그냥 제품명 부분을 비워두고 제품은 다시 입력해야 넘어갈 수 있게 수정했다.

 

루틴 삭제는 단순하게 해당 routine_key값을 get방식을 이용해 서버에 전달해주면 서버에서 해당 루틴 키에 맞는 루틴데이터를 삭제하는 방식이였으나, 서버의 로직에 빈 부분이 있었는지 루틴 자체는 삭제되지 않고 루틴 안에 있는 제품 데이터와 루틴 단계만 삭제됐던 것 같다. 이 문제는 재희님이 제대로 수정해서 삭제가 성공적으로 되게 구현했다.

---

루틴 수정을 구현하면서 버그를 하나 찾았는데, api 요청을 맞춰보며 이전에 수정했던 루틴 추가 페이지가 초기화가 다시 안되는 버그가 생겼다.

분명 테스트까지 끝났는데 뭐가 문제인가 했더니 데이터를 초기화 시키는 조건이 전체 루틴 페이지에서 루틴 추가로 접근할 때만 초기화가 되는 조건이였다. 이건 루틴 추가가 전체 루틴에서만 접근이 가능하기 때문에 가능한 로직이였는데 루틴 수정이 생기며 같은 컴포넌트를 사용하며 생긴 문제였다. 그리고 본인이 페이지의 순서에 맞게 경로를 좀 수정했어서 해당 경로를 감지하지 못해 생긴 버그였다. 물론 바로 수정해버림

---

그리고 루틴 필터와 제품 필터에 라디오 버튼이 들어가있어서 한번 필터를 설정하면 초기화를 못하는 문제가 발생해 초기화 버튼을 구현했다.

해당 버튼을 클릭 시 코드의 useState로 관리되면 필터 데이터가 전부 null값이나 0으로 초기화 된다. 이 부분에서도 라디오버튼이 제대로 해제되지 않았는데 이건 컴포넌트 로직의 문제였다. 이전에 느낀 것 처럼 최상위 컴포넌트에서 데이터를 관리하며 자식 컴포넌트에 데이터를 props로 잘 넘기는게 깔끔한 코드였을 텐데 자식 컴포넌트에 데이터가 필요하다는 이유로 자식 컴포넌트 부분에서 api 요청을 하다보니 부모 컴포넌트에서 사용하려면 다시 끌고 올라와야 했기 때문에 좀 까다로웠다. 앞으로 코드를 짤 땐 부모 컴포넌트에서 관리를 해주려고 한다.

---

프로필 수정의 경우 재희님의 요청에 따라 비밀번호와 속성 타입만 변경할 수 있게 하고 나머지 부분은 수정을 못하게 구현했다.

기존의 프로필 수정 페이지를 프로필 정보 페이지로 바꾸고 비밀번호 변경과 속성 타입 변경을 버튼으로 만들어 클릭 시 수정 페이지에 접근 가능하게 했다.

마이페이지에선 프로필 수정 대신 프로필 정보로 바뀌었고

정보창엔 이메일, 생일, 성별을 확인 가능하며 비밀번호 변경 버튼과 피부 타입 변경 버튼이 있다.

비밀번호 변경의 경우 현재 비밀번호와 새 비밀번호를 서버에 보내 현재 비밀번호가 서버에 있는 비밀번호와 동일하면 새 비밀번호로 변경하는 방식으로 구현됐다.

비밀번호 표시를 구분지은 건 현재 비밀번호가 화면에 그대로 출력되는 것에 대비했다.

 

속성 타입의 경우 회원가입과 동일한 입력값을 사용하며 서버에서 받아오는 속성 값이 없기 때문에 새로 작성해서 서버에 보내는 방식으로 구현했다.

---

결제 페이지도 UI 없이 서버통신만 확인했기 떄문에 결제 페이지도 UI를 추가해줬다.

여기서 배송지 변경이 안되는 버그가 있었는데, 배송지 변경을 클릭하면 팝업창으로 작은 새 페이지로 뜨게 된다.

여기서 배송지를 선택해 클릭하면 데이터가 기존 페이지로 전송되야 하는데 그 부분에서 undefined로 데이터가 전달이 되지 않았다. 해당 부분을 수정하여 올바르게 작동되게 했다.

---

마지막은 주문 내역의 상세 페이지에 데이터를 받아 구현하는 것만 남았다.

여기서도 주문 상세 데이터를 받을 때  item키를 이용해 제품 목록을 받아와 화면에 뿌려줬다.

제품마다 재구매와 리뷰 작성 버튼을 추가하여 재구매를 클릭할 경우 해당 제품이 장바구니에 담기며 장바구니로 이동된다.

리뷰 작성을 누르면 해당 제품의 상세 페이지로 이동하여 리뷰를 작성할 수 있다.

---

그리고 전체 페이지의 경우 이미지가 비어있었는데, 해당 부분을 채우기 위해 2단계의 api요청을 거쳤다. 전체 주문 내역 데이터를 api로 받아와서 해당 주문 내역의 상세 데이터를 api로 받은 후 데이터에 있는 첫 번쨰 제품의 item_key를 기존의 전체 주문 내역 데이터에 각각 추가해줬다. 그렇게 가져온 item_key에 맞게 public의 item폴더에 item_key에 맞는 이미지를 가져와 출력해줬다.

---

그 외에는 공개적으로 접근 가능한 경로 제외 로그인이 필요한 페이지의 경우 싹 다 유저 토큰이 있을 떄만 접근 가능하게 막아뒀다.

그리고 UI 변경 요청에 따라 전체 루틴에 리뷰 데이터를 가져오기 애매해서 리뷰 개수 부분을 제거하고 루틴 상세 페이지에서 피부타입 일치 부분을 숨겼다. 그리고 루틴의 좋아요 버튼도 기능을 없앴기 때문에 안보이게 숨겨줬다.

 

드디어 2달간의 긴 프로젝트가 끝났다. 이제 포트폴리오를 위해 페이지를 캡쳐하며 QA를 진행해 버그가 발생하거나 불필요한 기능 혹은 UI수정 등을 진행 할 예정이다.

그간 고생 많았슴둥 재희넴🤪