프론트엔드 프로젝트 2차 - On&OFF 회고록

새해 직전에 끝낸 프로젝트이지만 이력서 수정과 팀레포에 올리고 수업을끝낸후 정리하느냐고 이제야 회고록을 쓰게되었다. 
강의를 사두고 못들어둔것도 들어야해서 듣다가 중간중간 회고록을 작성했다.

 

- Subject

프론트엔드 2차 프로젝트 이며 어떤주제와 기획과 아이디어를 내었다 예전부터 만들고 싶은 주제였고 이에 동의해준 팀원들에게 감사하다

처음 프로젝트를 기획하고 페이지를 구성할때 많은 양이 아닐거라고 생각했지만

막상 시작하고 보니 기능이 많고 의외로 작업할 부분이 많아서

프로젝트 마지막 이틀은 팀원들과 밤샘을하며 같이 작업을할정도였다.

 

- Tech Stack

TypeScript , React , React Hook Form, Tailwindcss, Zustand 사용

담당 작업은 마이페이지 전부와 모임신청자 관리 페이지를 담당하게되었다.

(+ 리액트훅폼을 사용한것중에 해쉬태그를 데이터로 넘겨야하는부분 도 작업했다.)

 

쥬스탠드같은경우는 회원정보만 담아서 전역적으로 사용하기때문에 쥬스탠드를 많이사용한건 아니다.

처음에 사용할 의도는 각 유저의 마이페이지가 있는데. 그 마이페이지의 주인인지 아닌지를 비교하기위해서 사용하려고했다

하지만 코치님 의견을 듣고 백엔드쪽에서 마이페이지 로그인유저와 같은 유저인지 판단하고 결과를 true/false 로 넘겨받아서 정하는 형식으로 쉽게 처리하였고 쥬스탠드는 각페이지에서 로그인상태를 체크하는 용도로만 사용하였다.

 

- My Page & User management

 

내가 담당한 마이페이지다 처음시작할때는 빨리하고 다른페이지도 해야지 했는데!

막상 하다보니 의외로 많은 기능과 데이터를 받고 보내야하는 부분이 많았다.

그래서 시간도 걸리고 백엔드 팀원과 대화하는 시간도 많이 들어간 부분이었다. 이미지에는 크게크게 나눠서 써두었지만 하나씩 보면서 설명을 해야할거같다.

 

- 마이페이지 프로필 설정

 

프로필 톱니바퀴 모양을 누르면 떠오르는 창인데.

고민 - 처음에 프로필 설정 버튼이랑 신고 버튼을 어디에 넣을지 고민과 본인 페이지 확인 데이터.

해결 - 유저 본인이 자기 프로필로 가면 프로필 설정 버튼이 나오고 다른 유저의 마이페이지로 가면 신고 버튼으로 나오게끔 설정을 했다.

그것을 위해서 유저 본인지 본인 마이페이지 가 맞는지 확인을 위해서 백단에서 true/false로 판단에서 데이터값을 받았다.

그래야 본인만 수정을 할수있게끔 하기위해서 프론트단에서 내가 처리할까도 했지만 세션방식 쿠키를 수정 가능성이 있어서 보안 이슈상 백에서 처리를 했다. 

 

문제 - 태그입력쪽에 React hook form 라이브러리를 사용시 컴포넌트화 하여 깊이가 깊어짐에따른 문제

해결 - 한 컴포넌트에서 처리하지만 다른 컴포넌트안에 다른 컴포넌트가 있어서  리액트 훅 폼이 오류가 많았다 여러개의 데이터를 입력할대 넣어지게해야하는데 리액트 훅 폼의 register 를 인풋에 사용하면  onChange 와 value 를 같은 인풋에 사용하지못한다

그래서 엔터쳤을때 데이터를 합쳐줘야하는데 그게 안된다.

결국에는 useState 를 하나 사용하고 register를빼고 useState에 데이터를 합쳐주고 useState 에 저장된 값을 리액트 훅 폼의 setValue/getValue 를 사용하여 키값과 데이터를 보내게하였다.

(프로젝트 팀원 중 한 명이 모임 생성 페이지를 작업 중에 해시태그를 추가해야 하는 부분에서 계속해서 문제가 발생하여, 내가 제작하면서 해결하기로 했다.)

 

1. 엔터시 useState 에 태그 데이터 합치기

2. 수정클릭시 리액트 훅 폼 라이브러리의 setValue/getValue를 사용하여 저장하고 데이터로 보내기.

 

프로필 설정 모달창에 입력한 이름과 자기소개란 데이터는 가져와서 보여주고, 수정을 하지 않거나 비어 있다면 이전 데이터를 그대로 유지한다. 줄바꿈 처리에 대한 고민이 있었지만, 기존 텍스트 데이터를 그대로 백엔드로 전송하면 서버에서 변환 처리를 해주어 불러올 때 줄바꿈이 적용된 상태로 표시된다.

프로필 사진을 올리면 미리보기 이미지가 뜨고 취소하고 다시 올리기가 가능하다.

 

- 마이페이지 나의 모임 상황 정보

여기에는 나의 4개의 모임에 대한 상황 정보가있다 

각 탭의 정보가 있으며 탭마다 모임에대한 버튼이 각각 다르다.

 

1. 대기중인 모임.

대기중인 모임에는 내가 신청한 모임에대한 취소 버튼이 있다.

취소 버튼을 누를시 모임 신청자 상태의 데이터를 변경하면서 취소하게 된다. (모임의 유저 상태를 숫자로 관리한다.)

그리고 대기중인 모임에서 바로 사라지고 탭버튼을 누를시 모임 수의 숫자도 갱신된다.

 

2. 참여중인 모임.

참여중인 모임에는 모임 나가기 버튼과 채팅방 입장 버튼이 있다.

나가기 버튼은 대기중인 모임과 같은 기능이며 채팅 입장은 모임 데이터 값을 가져와서 채팅방 링크에 데이터를 넣어서 이동하게 한다.

만약 참여하지 않은 모임 채팅방으로 이동시에는 모임 참여하지않은걸로 간주하고 메인페이지로 이동하게 한다.

 

3.내가 개설한 모임.

모집글 수정같은 경우는 클릭시 Link 의 state 모임 데이터의 아이디를 넘겨서 수정페이지로 이동하고 stata를 통한 데이터를 수정페이지에서 데이터가 나오게된다.

신청자 목록같은 경우는 신청자목록 페이지가 따로있으며 페이지의 모임 아이디값을 동적경로로 넣어서 이동하게된다.

(모임을 만든사람만 볼수있다.)

 

4. 찜한 모임.

하트를 누른 모임목록을 가져온다. 버튼은 모임 상세보기.

그냥 모임클릭만해도 상세보기 페이지로 이동하는건 공통이라 찜한 데이터를 가져와서 뿌려주었다.

처음에는 백쪽에서 데이터가 안맞아서 문제가 있었는데 백쪽에서 데이터를 수정해서 해결했다.

 

- 모임장의 모임 신청자 수락/거절 페이지

 

마이 페이지에서 본인이 개설한 모임에 신청자 관리를 누르면 들어오는 페이지.

본인이 아닌 다른사람이 볼때는 신청자 관리 버튼 노출이 안되게 작업을하였다.

신청자 관리 페이지 접속시 신청자의 프로필사진(닉네임)/ 호스트 질문의 답변 / 수락&거절이 나온다.

 

1. 신청자 관리 페이지 접속 조건.

신청자 관리 페이지에 접속하는 조건은 호스트의 ID와 접속자의 ID를 비교하여 일치하지 않으면 접속이 차단되고

대신에 메인 페이지로 이동합니다.

 

2.신청자 관리 거절/수락 조작

신청자 관리에서 거절 또는 수락을 선택할 수 있습니다. 호스트가 관리 페이지에 접속하면, 신청자들의 상태 값이 표시된다.

각 신청자의 상태는 대기 상태(1)인데, 호스트는 이를 변경할 수 있게 만들었다.

거절 또는 수락을 선택하면, 해당 신청자의 상태 값이 업데이트되고. 이 변경 사항은 화면이 자동으로 갱신되도록 설정 하였다.

 

이번 엘리스트랙에서 팀원들과 마지막 프로젝트를 하면서 마지막 2일은 같이 밤샘도 하고 열심히해서 후회가 없었다.
다같이 밤샘하니까 더 열심히 하게 되고 사이도 돈독해지는 느낌이 들어서 힘들다는 생각이 안들었다.
이런 팀원들이라면 몇번이라도 같이 프로젝트하고싶다는 생각이들어서 너무 좋았다.
특히 내가 기획을 내고 이름과 로고를 만들어서 뭐랄까 좀더 애정이가는 프로젝트였다.