프로젝트
문제 게시글에 상품 이미지가 없거나 빈 배열일 때도 캐러셀이 보이는 버그입니다. props로 받은 이미지 중 이미지 주소가 없는 경우를 걸러서 newImages 배열을 만드는 로직이 있지만 애초에 받아온 배열이 ["", ""] 같은 상황일 경우 빈 배열이 만들어지게 됩니다. ItemImages 컴포넌트를 조건부 렌더링으로 newImages 배열에 값이 있을 때만 생성하고 있는데, 이 코드는 이미지만 조건부 렌더링할 뿐, 캐러셀은 그대로 렌더링되기 때문에 버그가 발생합니다. 해결 lodash 라이브러리의 isEmpty 메소드를 활용해서 newImages 배열이 비어있을 경우 프래그먼트를 반환하도록 코드를 수정했습니다. 수정 후에 상품 이미지가 없는 게시글에는 캐러셀이 보이지 않고, 이미지가 있는 게시..
문제 자유게시판의 댓글을 수정하는 과정에서 취소 버튼을 눌러도 취소가 되지 않는 버그가 발생했습니다. 기존 코드는 취소 버튼을 클릭하면 새로고침을 하는 것과 같은 동작을 하도록 해서 state를 초기화 하는 방법으로 댓글 수정을 취소했습니다. 로그인 기능을 localstorage에 저장하다가 refreshToken을 사용하면서 새로고침해도 캐싱된 데이터때문에 state들이 변하지 않아 리렌더링이 발생하지 않아 버그가 발생했습니다. 해결 댓글 수정은 수정버튼을 눌렀을 때 isEdit라는 state를 true로 바꿔 댓글을 수정 모드로 바꾸는 방법으로 구현되어 있습니다.댓글 수정을 취소하려면 단순히 isEdit를 false로 바꾸면 되기 때문에 onClick 함수에 props로 받아온 setIsEdit를..
문제 헤더 부분에서 새로고침하면 현재 페이지 강조가 사라지는 버그와자유게시판, 중고마켓, 공지사항 선택 후 로그인 페이지나 마이페이지로 가면 페이지 강조가 사라지지 않는 버그를 발견했습니다. 기존의 코드에서 현재 페이지 기록을 state로 관리해서 생기는 버그였습니다.새로고침하면 state가 초기화되기 때문에 페이지 강조가 사라졌고,로그인 페이지나 마이페이지로 가도 헤더는 레이아웃으로서 메인 컨텐츠 밖에 있기 때문에 페이지 강조가 사라지지 않았습니다. 해결 recoil을 사용해서 현재 페이지를 전역 변수로 저장해둠으로서 다른 컴포넌트에서도 사용할 수 있게끔 수정했습니다.useEffect를 사용, 의존성 배열에 router.pathname을 넣어 페이지가 변경될 때마다 전역 변수인 currentPag..
추가 내가 등록한 상품과 찜한 상품을 확인할 수 있습니다.검색 기능을 사용할 수 있습니다.상품명을 클릭하면 상품 페이지로 이동합니다.판매된 상품은 분홍색과 취소선으로 표시됩니다.삭제된 상품은 취소선으로 표시됩니다. 전체내역을 통해 포인트 충전, 사용 내역을 한번에 볼 수 있습니다.충전내역에서 포인트를 충전한 내역을 볼 수 있습니다.구매내역에서 상품을 구매한 내역을 볼 수 있습니다. 구매한 상품의 이름을 클릭하면 상품 페이지로 이동합니다.판매내역은 상품내역과 동일합니다.포인트가 증가하는 내역(충전, 판매)은 전체내역에서 분홍색으로 표시됩니다. 포인트 충전 시 충전할 금액을 사용자가 입력합니다.결제는 카카오페이로 진행됩니다(테스트 결제임). 마이프로필에서는 프로필이미지와 비밀번호를 변경할 수 있습니다...
추가 중고마켓 페이지는 로그인하지 않으면 접근하지 못하게 되어있습니다.경고창 출력 후 로그인 페이지로 자동 이동합니다. 찜 횟수가 가장 많은 세 상품을 인기있는 상품으로 보여줍니다.무한 스크롤을 사용해서 상품 정보를 보여줍니다.판매 중인 상품과 판매완료 상품을 따로 볼 수 있습니다.상품 이미지가 없는 경우 임시 이미지를 보여줍니다. 작성자가 아니라면 게시글을 수정하거나 삭제할 수 없습니다.상품 이미지는 캐러셀을 통해 보여줍니다.판매자가 거래하고 싶은 장소를 카카오맵을 통해 보여줍니다.찜 버튼은 토글형식으로 되어 있습니다.댓글의 작성자가 아니라면 댓글을 수정하거나 삭제할 수 없습니다. 작성자라면 게시글 생성일 오른쪽에 있는 ui로 게시글을 수정, 삭제할 수 있습니다. 본인이 작성한 댓글은 수정, ..
기존의 코드에서 react-hook-form 라이브러리와 커스텀 훅을 사용해서 리팩토링을 진행했습니다. 코드 길이를 줄일 수 있게 되면서 기존의 container, presenter로 구분되어 있던 파일들도 하나로 통합했습니다. 추가 커스텀 훅들을 정리해놓은 hooks 파일이 추가되었습니다. 수정 모든 파일을 수정했으나, 수정 내용을 모두 기록하기에는 그 내용이 너무 많아서 대표적으로 게시판 작성 컴포넌트의 수정 전과 후만 기록하도록 하겠습니다. 다른 컴포넌트들의 수정 내용은 게시판 작성 컴포넌트의 수정 과정과 거의 동일합니다. 기존의 인풋 폼에서 onChange함수를 통해 state와 연결해주던 코드를 useForm 훅을 사용해 리팩토링했습니다. state들을 길게 나열할 필요가 없어지고, onChan..
추가 로그인 페이지와 회원가입 페이지 이메일을 작성하지 않거나, 이메일 잘못입력할 경우 경고 메시지가 나타납니다. 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다. 비밀번호 확인과 비밀번호가 일치하지 않으면 경고 메시지가 나타납니다. 닉네임은 작성하지 않을 경우 기본으로 'ㅇㅇ'이 됩니다. 회원가입이 완료되면 로그인 페이지로 돌아갑니다. 이메일을 작성하지 않으면 경고 메시지가 나타납니다. 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다. 로그인이 완료되면 메인 페이지로 돌아갑니다. 로그인이 된 상태라면 헤더에 로그인 버튼은 사라지고, 프로필 이미지가 생깁니다. 프로필 이미지를 클릭하면 프로필 정보를 볼 수 있는 간이 메뉴가 나타납니다. 로그아웃 버튼을 클릭하면 로컬 스토리지에 저장된 accessT..
수정 디자인 전반을 변경했습니다. 헤더와 네비게이션을 합쳤습니다. 메뉴에서 필요없던 자기소개 게시판, 랜덤고양이 페이지를 삭제했습니다. 마이페이지는 이후 로그인 기능을 추가하고 프로필 이미지를 클릭했을 때 이동하도록 변경할 계획입니다. 네비게이션의 메뉴를 클릭했을 때 어느 메뉴에 접속해있는지 구분할 수 있도록 폰트 효과를 주었습니다. 회원가입 버튼을 삭제했습니다. 대신 회원가입 페이지가 따로 추가될 예정입니다. 캐러셀을 삭제했습니다. 광고나 이벤트 페이지가 없는 제 사이트에서 굳이 필요없다고 생각했습니다. 자유게시판 게시글에서 위치 정보와 [목록으로, 수정하기, 삭제하기] 버튼을 삭제했습니다. 위치 정보는 중고마켓 게시글에 추가할 계획입니다. 수정하기 삭제하기 버튼은 게시글 작성 날짜 옆 작은 버튼으로 ..
