Randomly 프로젝트 - 새폴더 모달창 구현 이외의 추가 기능들
🏡 GitHub : https://github.com/soohyun-dev/Randomly
이번주는 새폴더 추가 방식을 바꿔보았어요. 그리고 리팩터링을 진행하였습니다. 🫡
새폴더를 만들 수 있는 페이지입니다.
기존에는 질문 폴더 추가 버튼을 누르면 새폴더를 만들어주었지만, 새폴더라는 이름으로 무조건 사용해야 했어요.
저기 '3월 첫째주 금요일 스터디' 처럼 변경된 글씨는 운영진만 따로 임의대로 데이터를 변경해서 사용한거였습니다.
급하지 않은 기능 구현이라 생각했는데, 생각해보니 너무 불편한 방식이더라고요.
그래서 편의를 위해서 이번 기능 구현을 하였습니다.
어쩌면 빨리 했었어야하는 기능이였겠구나 싶네요.
❓어떤식으로 구현할까
새폴더의 이름을 어떻게 정할 수 있게 할 것인지에 대해 고민되었습니다.
새폴더를 만드는 것에 집중하면서 사용자가 정의하는대로 만들 수 있게....
이거에는 모달창을 통해 구현하는게 가장 적합하다고 생각했어요.
모달창을 통해 사용자의 포커스를 집중시키고 모달창 내의 input 태그에서 폴더 이름을 설정할 수 있게 하는 것이
가장 낫겠다라고 생각하였습니다.
🫡 구현
지난번 팀원 리뷰때 구현했던 모달창처럼 구현을 해봤습니다.
모달창 이외의 영역에 opacity를 주었고,
모달창 이외의 영역을 클릭하면 모달창이 닫히도록 구현하였습니다.
저번에 팀원 리뷰는 화면의 중앙부분이 꽉차게 되도록 구현하여서 몰랐던 부분인데,
모달창이 켜진 상태에서도 Navbar 창의 요소들이 눌려지는 것을 알게 되었습니다.
모달창이 열렸을때는 다른 작업이 수행될 수 있는 가능성을 최대한 줄이기 위해서
Navbar창의 요소를 클릭할 수 없게 구현하고 싶었습니다.
해당 기능을 구현하기 위해서 Navbar의 pointer-events 속성을 설정해주었어요.
만약 모달창이 열린 상태라면 none 값으로 설정하여 Navbar가 선택되는 것을 막아주었습니다.
이제는 default 값으로 새폴더가 설정되어있는 것을 지우고 마음대로 폴더 이름을 설정할 수 있습니다.
이렇게 생성도 잘되는 것을 확인할 수 있습니다.
팀원리뷰 수정, 삭제는 ❓
이전에 구현한 리뷰 평가를 등록하고나서 수정, 삭제도 가능하게 하는 것이 좋겠다라는 생각이 들었습니다.
수정은 필수가 아니더라도 삭제는 필수 기능이겠죠?
따라서 삭제 기능을 구현하려고 하니
사용자를 어떻게 구분하지? 로그인 없이도 작성할 수 있는건데? 라는 생각이 들었습니다.
흠... 사용자의 편의를 위해서 로그인 없이도 이용할 수 있게하였더니 반대로 작성자를 구분할 수 없게되더라고요.
작성자는 누구인지 모르더라도 적어도 그 포스팅을 다시 수정하거나 삭제할 때 권한을 줘야할 상대를 구분할 방법이 필요하였습니다.
여기에 가장 적합한 방법이 바로 등록시 비밀번호를 설정하는거겠죠?
따라서, 바로 구현하였습니다.
이제부터는 글 등록시 4자리 이상의 비밀번호를 설정해줘야지 제출이 가능합니다.
혹시나 비밀번호를 생각하는 것과 다르게 입력했을 경우를 방지해서 확인 칸까지 만들까 고민했지만,
굳이 필요없는 기능이라 생각하여 한번의 입력만 받기로 결정하였습니다.
이후부터는 포스팅 위쪽에 수정 버튼이 생성된 것을 확인할 수 있습니다.
수정 버튼 클릭시 비밀번호를 입력할 토글이 뜨게 되고 해당 포스팅의 올바른 비밀번호를 입력하면 삭제를 할 수 있습니다.
👨💻 느낀점
프로젝트를 다시 돌아보니 자잘자잘한 부분이지만 필수적인 기능들이 생각보다 많았습니다.
이번에 구현한 것 말고도 더 손봐야할 곳들이 많아서 계속적으로 유지보수하면서 리팩터링을 해나아갈 예정입니다.
직접 서비스를 사용해보니 이게 있으면 좋겠는데 ? 이건 좀 불편한데 ? 하는 부분들이 계속 생깁니다.
직접 서비스를 개발해서 사용하면 좋은 점이 바로 이거 아닐까요?
필요없다고 생각하는 부분들은 과감하게 빼버리고 필요한 기능들은 바로바로 추가하는 재미
사용자의 편의를 위해서 계속해서 고민해보면 나오는 기능 구현사항들은 정말 끝도 없이 개발할 수 있을 것 같습니다 😁