step3-kakao-tech-campus/team11_fe

11조

team11_fe's Issues

fix: 멘토링 수정

• 업로드페이지 새로고침 방지
• 업로드페이지 내용 뒤로갔을떄 유지
• 옵션리스트 전부 삭제 가능, 2 이하일때 비활성화
• 카테고리 선택 시 리스트 닫힘.
• 전체 초기화 기능
• 작성자 추가
• 카테고리 추가
• 댓글 작성여부 받아서 작성 시 투표 취소 못하게 막기

feat: 투표 버튼 스타일 및 기능

Issue: FEATURE

버튼 컴포넌트

Description

버튼 스타일과 기능 관련 이슈

Todo

• 스타일

  • 버튼 기본 style (background : rgba(255, 255, 255, 1), color: rgba(103, 103, 103, 1)) , 높이 고정, 글자 초과시 너비 늘리기
  • 버튼 클릭 시 style( b: rgba(172, 192, 255, 0.5), c: 2D53CF) , 아래 퍼센트 글씨

• 기능 및 투표

  • 클릭 시 요청 보내고, res로 게이지 받아오기 (put?) + 바로 스타일 변경하기 + 애니메이션 약간 넣어주기
  • 버튼 클린한것은 파란색, 클릭 안한거는 회색으로 결과 보여주기. 그 버튼만 이 아니라 버튼 전체 상태 변화주기.
  • 버튼 클릭된 상태에서 또 클릭하면 (혹은 다른 버튼) 수정할 수 없습니다 라는 alert 창 띄우기 or 아예 안눌리게 하기.
  • 버튼 위에 이미지 넣을 수 있는 컴포넌트 하나 만들어놓기

• 로그인 상태 O X

  • 유저가 투표 한 상태인지 아닌지 확인 후 상태에 따른 style 보여주기
  • 로그인 하지 않은 유저의 경우 투표 시 알람창 뜨고, 로그인창으로 리다이렉트

ETC

기타사항

fix:메인페이지 수정

작성자, 카테고리 수정, 댓글 작성여부 -> 댓글 작성하면 투표 취소 못하게 하기

feat: 투표 종료 버튼 구현

Description

작성자와 유저가 일치할 경우 투표 종료 버튼이 보인다
투표 종료 버튼은 메인 화면, 모달 화면에서 모두 보여야하므로 common 폴더에 구현한다.

Todo

• isOwner 이 참일 경우 투표 종료 버튼이 보임
• 투표 종료 버튼 디자인

ETC

없음

feat: 검색페이지 구현

[] 검색페이지 , 검색페이지 내에서 검색.
[] 버튼 클릭 시 검색 모달창
[] 검색페이지 인기순, 카테고리 정렬

feat: 로그인 토큰 관리

Description

• 로그인 성공했을 경우 토큰 받아오기
• 액세스 토큰 유효시간이 지났을 경우 리프레시 토큰 요청하기
• 리프레시 토큰 유효시간이 지났을 경우 토큰 삭제하고 유저에게 로그인 재요청하기

Todo

• util 폴더에 로그인 여부가 필요한 페이지에서 사용할수 있는 함수 파일 생성
• 엑세스 토큰이 있는지 여부를 확인
• 엑세스 토큰의 유효시간이 지났는지 여부 확인
• 유효시간이 지났을 경우 refresh token 요청 보내서 새 토큰을 넣어주기
• refresh token의 유효시간이 지났을 경우 토큰 삭제
• 유저 화면 로그인 화면으로 이동

feat: 헤더 카테고리 recoil 처리

Description

메인페이지와 종료된 투표 페이지의 헤더에서 선택된 카테고리를 페이지로 전달

Todo

• headerAtom 파일
• dropdown에서 받은 카테고리를 atom에 저장

fix : 버그수정

• 검색창 버그 수정( 공백값 입력되었을떄 검색 안되게 막기, 해당되는 글이 없는 경우 없다는글 띄우기)
• 옵션값 글자수 제한 두기

할일

feat : 메인페이지에 react-query 추가

Description

리액트 쿼리 메인페이지 적용해서 데이터 불러오기

Todo

• 메인페이지 api 설정 구현
  • api 페이지 만들기
  • 무한스크롤 구현하기
  • 스크롤 위치 유지

feat: 투표 상세 페이지 댓글 기능

Description

투표 상세 페이지에서 상대방의 댓글을 확인할 수 있고, 댓글을 작성할 수 있다.

Todo

• 상대방의 댓글 보여주기 (상대방의 프로필 사진, 댓글 내용)
• 댓글 작성 기능
• 댓글 작성 후 전송 버튼 구현
• 나의 프로필 사진 보여주기

기타사항

없음

리팩토링

• common 에 카테고리 추가하기(업로드 페이지와 헤더 공유, freeze 하기)
• 버튼 클릭 로직 컴포넌트 나누기
• 테스트 코드 추가
• 카테고리박스 sortName,contentName 삭제
• useMemo 등 사용해서 성능 최적화, useEffect 줄이기
• useRef 공부
• useMutation 공부해보기!!!!
• 다른페이지에 쿼리키 공유가 안되나??
• e.native.iscomposing
• 투표 끝내기 되는데 , 화면상 리렌더링이 안되는 이슈 -> 쿼리 키를 유즈인피니트쿼리 키로 수정해보자
• 업로드의 뮤테이션에도 홈 리로드 하지말고 onSuccess 되면 키 사용해서 리렌더 하자
• 투표 업로드 promise 공부하기

feat: 투표 상세 페이지 조회 api 연결

Description

1. 투표 상세 페이지 조회
2. 투표 상세 페이지 댓글 조회

Todo

• 투표 상세 페이지 api 연결
• #224

feat : 투표 업로드 페이지

투표 업로드 페이지

• 투표 명 (제목) 입력 받기 (필수!!) *

• 투표 상세 설명 입력 받기 (선택)

• 선택지 입력 받기(2~6) (필수!!) *

• 이미지 추가

• 선택지 추가 버튼(Default 2개)

• 카테고리 설정(default: 골라조)

• 마감 시간 설정(default : 없음, 30분, 1, 3, 6, 12, 24 시간, 3일, 일주일후)

• 필수 질문 작성 시 등록버튼 활성화

Q. CSS 수정사항

페이지별 스타일 수정사항이 있는것같아서(물론 알고 있겠지만 정리할겸 적어둘게요..!)

• 로그인, 회원가입

  • 1200px 로 화면 늘렸을때 '계정이 없으신가요?' 와 로그인 라벨 겹침
  • 회원가입도 마찬가지로 화면 늘렸을때 글자가 위로 올라감
  • 헤더 고정안됨(이거는 하면 좋겠지만 꼭 필요하진 않은듯)
  • 중복검사버튼 화면 늘렸을때 깨짐(absolute 말고 input 컴포넌트에 넣는 식으로 하는게 더 좋을 것 같아요!)

• 모달창

  • 뒷 배경 움직임(멘토링, 코드리뷰 받을 것)
  • 모달창을 높이를 고정한다음에 컨테이너를 스크롤 하는게 아니라 그 안 부분만 스크롤 할 수 있게 하면 좋을 것 같아요(그리고 위에 padding 없애는게 나을것같습니다..!)

• 마이페이지

  • 내가 참여한 투표나 내가 한 질문 같은 경우 글자 색, 글자 크기, 높이, 선 굵기, border-radius 등을 피그마에 나와있는 것 처럼 맞춰주세요!
  • 이미지 넣을때 Img 컴포넌트 사용하면 크기에 맞게 알아서 잘라줘서 안늘어나요..! 그거 사용하시면 좋을 것 같습니다.
  • container 넣어주기(1000px 이상 늘렸을때 뒷배경도 같이 늘어나요!)

메인페이지, 업로드 페이지도 추가 수정하고 싶은 사항 있으면 알려주세요!!

feat: 상단/하단 navBar 구현

Issue: FEATURE

상단/하단 네비게이션바 구현

Description

• 상단 navBar 구현(필터, 검색 버튼)
• 하단 navBar 구현(홈, 핫게, 투표생성, 완료된 질문, 로그인(마이페이지))

Todo

• 상단바(Header)

  • 필터1(최신순(default), 인기순)
  • 필터2(카테고리 별)
  • 필터 클릭 시 list 보여주고 다른 선택지 클릭 시 요청 ( + 다른 부분 클릭 시 원상태로??)

• 하단바(Footer)

  • 홈(default)
  • 핫게
  • 투표 생성
  • 완료된 질문
  • 로그인 (마이페이지)
  • 클릭 시 색 변경 (7192FF), 이동 , 상단 바 변경

• 변경된 상단바 ( 홈 이외의 페이지)

  • 뒤로 가기 버튼
  • 페이지 이름
  • 검색 버튼

ETC

기타사항

투표 상세 페이지 댓글 조회 api 연결

Design: 투표 종료 컴포넌트 위치와 상태값 관리

Description

1. 프로토타입에선 투표 종료 버튼 위치가 오른쪽인데 그렇게 하면 모달 내부에선 스타일이 깨져서 왼쪽 상단에 위치 시켰습니다. 혹시 이상할까요?
2. endButton에서 버튼을 누르면 active를 complete로 바꿉니다. 하지만 해당 상태가 voteHead.jsx 파일에도 반영이 되서 투표중이라는 문구가 최종 투표 명수로 바뀌어야 하는데 이 부분 처리를 어떻게 해야할 지 모르겠습니다. active를 전역 변수로 둬야할까요? 그렇다면 recoil을 사용해야하나 ..?

feat: 투표 상세 페이지 공유 기능

Description

투표 상세 페이지에서 해당 투표를 공유할 수 있는 기능

Todo

• 링크 공유 기능 공부하기
• 링크 공유 아이콘을 누르면 해당 투표를 공유할 수 있는 모달 창 띄우기
• 링크 공유 시 미리 보기 화면 생성하기 (해당 투표 제목이 보일 수 있는 이미지 ,.?)

기타사항

없음

feat: Main 레이아웃

Description

홈 화면 메인 투표 레이아웃 구성 기능 개발

Todo

받아온 데이터 활용

• 명 수
• 제목
• 컨텐츠
• 투표 프로그레스

기타 css

• 댓글 이모지, 공유하기 이모지
• 클릭 시 모달창 띄울 수 있게 이벤트 구현
• 밑에 선
• map 으로 뿌려주기(무한스크롤 은 리액트 쿼리 구현 시 구현해야할듯 )

---

• 남은 시간 타이머 구현
• 핫게, 완료, 메인 게시판 별 유아이 변경
• 완료 게시판 finish면 클릭 전에 결과 보이게 하기

fix: 투표 종료 버튼 위치와 알림창

Description

투표 종료 버튼을 오른쪽에 두기 -> 모달창과 메인 창의 투표 종료 컴포넌트를 따로 둬야한다.
투표 종료 버튼을 누르면 알림창이 떠서 다시한번 유저가 확인할 수 있도록 한다.

Todo

• 투표 종료 버튼 위치 조정
• 투표 종료 버튼 클릭 시 알림창

feat: 로그인, 회원가입 화면 구현

Issue: FEATURE

로그인, 회원가입 페이지 구현

Description

• 로그인, 회원가입 할 때의 화면을 구현하고 사용자의 정보를 서버로 넘겨준다.
• 서버로 정보를 넘기기 전 프론트 단에서 사용자의 입력이 빠진 부분이 없는지, 형식이 맞는지를 확인한다.
• 회원가입 시, 기존 회원들과 중복이 없는지 검사한다.

Todo

• 로그인 화면 구현
  • 이메일 입력창
  • 비밀번호 입력창
  • 로그인 버튼
  • 로그인 후 메인 화면으로 이동
• 회원가입 화면 구현하기
  • 닉네임 입력창
  • 이메일 입력창
  • 이메일 중복 확인 버튼
  • 비밀번호 입력창
  • 비밀번호 확인창
  • 회원가입 후 로그인화면으로 이동

<로그인>

• 입력정보가 빠진 부분이 없는지 검사
• 이메일 형식이 맞는지 검사, 맞지 않으면 오류 메세지 출력
• 비밀번호 유효성 검사, 맞지 않으면 오류 메세지 출력
• 위 검사 사항 중 하나라도 만족하지 않을 시 로그인 버튼 비활성화

<회원가입>

• 입력정보가 빠진 부분이 없는지 검사
• 이메일 형식이 맞는지 검사, 맞지 않으면 오류 메세지 출력
• 이메일 중복 검사
• 비밀번호 유효성 검사, 맞지 않으면 오류 메세지 출력
• 비밀번호 확인 검사, 입력한 비밀번호와 맞지 않으면 오류 메세지 출력
• 위 검사 사항 중 하나라도 만족하지 않을 시 회원가입 버튼 비활성화

ETC

기타 사항 없음

fix: selectBox 수정

• 셀렉트박스 컴포넌트 따로 구현해서 각각 구현하기

feat: 댓글 작성 불가 기능

Description

1. 투표를 안했을 경우 댓글 작성 불가
2. 댓글을 달았을 경우 투표 수정 및 삭제 불가

Todo

• 투표 참여 했는지 여부를 서버 데이터로 받아와서 댓글 작성이 불가능
• 댓글 작성 불가능 토스트 알림창 띄우기
• 댓글을 달았는지 여부를 서버 데이터로 받아와 투표 수정 및 삭제 불가능 알림창 띄우기

feat: 댓글 api 연결

Description

• 서버에서 댓글 관련 api 연결하기

Todo

• 서버에서 댓글에 대한 데이터 받아오기
• 댓글 수정, 삭제 화면 구현하기
• 댓글 수정, 삭제할 경우 처리되는 경고창 띄우기
• 댓글 수정 및 삭제가 가능하도록 구현하기
• 댓글 생성 api 연결하기

feat: 투표 상세 페이지 모달 레이아웃

Issue: Feature

메인 페이지에서 해당 투표를 상세로 보기 위한 페이지 레이아웃 구현하기

##Description

• 모달 공부하기
• 메인 페이지에서 해당 컨텐즈 내용 (질문내용, 투표자수, 남은 시간) 받아오기
• 해당 디자인 수정하기

기타사항

없음

feat : 마이페이지

Issue: FEATURE

마이페이지 구현

Description

• 마이페이지
  • 내가 참여한 투표
  • 내가 한 질문
  • 개인정보 수정

Todo

• 마이페이지 기본 레이아웃

  • 썸네일, 닉네임, 아이디 받아오기
  • 나머지 3개 리스트로 구현 및 각각 navigate 연결.

• 내가 참여한 투표

  • 진행중인지,종료됐는지 확인하기
  • 더보기로 모달창 띄우기
  • 리스트 없을때 투표 하러가기 버튼 띄우기
  • 내가 참여한 투표, 내가 한 질문 공통 ui 만들기, 없을때 버튼의 내용만 바뀌게

• 내가 한 질문(마감할 수 있게 모달창에 owner property 넘겨주기)

  • 리스트 없을때 질문 하러가기 버튼 띄우기

• 개인정보 수정 모달창

  • 사진 업로드
  • 닉네임 중복확인, 이메일 중복검사, 닉네임과 이메일 중 하나만 바꿀 수 있게 하기
  • 로그아웃 기능

-[ ] 모달창 컴포넌트 기본 레이아웃 짜기

ETC

비밀번호 수정 안하는지 물어보기