frontendschool5 / final-21-wemet21-already29 Goto Github PK

Description

로그인 이메일주소와 로그인에 대한 유효성 검사 기능 구현 완료

ETC

• [ 로그인 버튼 부분 버튼 공통 컴포넌트로 변경]
• [경고문구 usestate를 통해 상태관리하는 코드로 변경]
• [화면 이동은 navigate 사용하는 코드로 변경]

Description

게시글 상세 페이지에 해당하는 기능 구현 중

Todo

• 댓글 작성 기능 구현 예정
• 게시글 상세 내용에 들어갈 내용과 기능 추가 구현 예정
• 게시글 작성 페이지 스타일 변경 예정

ETC

하은님과 함께 게시글 상세 페이지 구현 중입니다.

Description

공통으로 들어가는 버튼 컴포넌트 UI를 구현완료

Todo

• 공통으로 들어가는 버튼 컴포넌트 UI를 구현하기

ETC

하은님과 함께 components 폴더에 common이라는 폴더를 만들어서 그 안에 버튼 컴포넌트 UI파일 만들어서 구현

Description

상품 관련된 기능들 구현 완료

Todo

• 해당하는 유저 상품 리스트 받아오기
• 상품 상세 페이지 구현
• 상품 등록 기능 구현
• 상품 수정 기능 구현
• 상품 삭제 기능 구현

ETC

기타 사항

Description

공통으로 사용 될 하단에서 나오는 바텀시트 모달 컴포넌트 제작하였습니다.

Todo

• Context API를 활용한 모달 상태관리
• 재사용성 고려한 컴포넌트 제작

Description

공통으로 사용할 에러 페이지 개발 완료

Todo

재사용성 고려한 에러 페이지 개발 완료했습니다
props와 children을 통해 에러페이지 이미지와 텍스트 바꿀 수 있도록 개발했습니다.

Description

SNS 공유하기 기능 개발중입니다

Todo

• 페이스북 공유
• 트위터 공유
• URL 복사
• 카카오톡 공유

참고사항

개발 로컬 서버에서는 링크가 전달이 제대로 되지 않아 추후 배포용 url 넣어줘야 할 것 같습니다.

Description

게시글 상세페이지 댓글 관련 기능 구현 완료하였습니다.

Todo

• 게시글 상세페이지 댓글 작성, 삭제, 댓글리스트 기능 구현

ETC

기타 사항

Description

공통으로 사용할 헤더 컴포넌트 개발 완료

Todo

자주 사용될 헤더 컴포넌트를 객체 형태로 저장해 props에 전달되는 type값을 따라 jsx가 반환되도록 개발했습니다.
중복되는 ui는 props를 통해 요소들을 조작할 수 있도록 개발했습니다.

Description

공통으로 사용할 팔로우 언팔로우 버튼 기능 구현

Todo

• followbutton 함수 기능 구현
• unfollowbutton 함수 기능 구현

Description

회원가입 페이지 이메일 유효성 검사 기능 방법 숙지 후 기능 추가 필요

Todo

• [회원가입 이메일 우효성 테스트 코드 추가 후 원범님 체크받기 ]

ETC

기타 사항

Description

전역에서 공통으로 사용할 모달 컴포넌트 개발

Todo

• Context API 활용 전역 모달 상태 관리
• props 전달 통한 이벤트 분기처리

ETC

기타 사항

Description

다른 사용자의 계정을 검색하고 팔로우를 할 수 있는 기능을 구현

Todo

• 유저 검색 api 기능을 통해 유저의 정보들을 가져옴
• 새로고침이 발생한 경우 전역으로 관리되고 있는 데이터가 없어지기 때문에 Context API를 이용하여 useAuthContext 훅을 사용하며, 초기 유저 정보를 localStorage에서 가져오기 위해 useReducer 훅을 함께 사용

Description

• 게시물 작성에 필요한 ui와 상태관리 코드와 api코드를 작성하였습니다.
• 업로드 버튼 관련 오류 부분과 테스트 토큰을 통해 api관련 코드 오류 해결하였습니다.
• 게시글 작성 기능 구현 중 오류 내용 하은님과 공유하였습니다.

Todo

• 게시글 작성 페이지에 필요한 ui와 기능 추가 구현하기
• 테스트 토큰으로 게시글 업로드 api 받아 오는 부분 확인하기

ETC

하은님과 함께 이미지와 게시글 작성 ui와 기능 구현 작업을 진행하였습니다.

Description

• 게시글 작성 : 테스트 토큰으로 게시글 업로드 api 받아 오는 부분 확인했습니다 경보님과 같이 확인 후 스타일링 작업 완료하여 금일 main merge 목표하고 있습니다
• 회원가입시 프로필 설정: html 작업 완료 후 이메일로 회원가입과 연결하여 feature 브랜치에 연결하는걸 목표로 하고 있습니다

Todo

• 게시글 작성 기존 오류 경보님과 공유 & 확인
• 게시글 작성 스타일링
• 다중이미지 선택 코드 공부
• 입9팔9 전체 이미지 png 4배율 모음zip 공유

ETC

기타 사항

Description

사용자 프로필, 마이 프로필, 프로필 수정 기능 구현 중

Todo

• 사용자 상품, 게시글 개수에 따른 조건부 렌더링
• 게시글 슬라이더 기능 구현
• 사용자 게시글 앨범/리스트로 보기 기능 구현
• 프로필 공유하기 기능 구현
• 팔로우 언팔로우에 따른 조건부 렌더링

오늘 한 일

• ---

Description

이메일로그인 페이지 UI와 기능구현 완료

Todo

• [이메일로그인 페이지 UI와 기능구현 완료 후 원범 멘토님 코드리뷰 예정]

ETC

기타 사항

Description

로딩 중 렌더링 되는 컴포넌트 구현 완료

Todo

로딩 컴포넌트 구현

ETC

기타 사항

Description

useInfiniteScroll 커스텀 훅 제작

쿼리스트링 형식으로 불러오는 API 요청이 있어 커스텀 훅 제작했습니다.

Todo

• 컴포넌트 props로 fetch할 path 값 받아와 내부에서 비동기통신 처리 처리
• Intersection Observer API 활용 무한 스크롤 처리
• 컴포넌트 props로 Intersection Observer API observe 인자 전달
• 반환 값 외부에서 다룰 수 있도록 return 값 지정

ETC

const { getData, page, isLoading } = useInfiniteScroll("post/feed", pageEnd);
사용하실 때 첫번째 인자로 fetch할 path 주소 넘겨주시면 되고, 위 예시처럼 넘겨주시면 됩니다.
두번째 인자로는 스크롤 맨 끝에 있는 HTML 요소에 useRef 통해서 연결해서 넘겨주시면 됩니다.
보통 그냥 빈 div태그 넣고 레퍼런스 연결하는 것 같더라구요

반환값으로는 getData, page, isLoading 이 세가지가 있는데, 객체 형태로 return 되니까,
디스트럭처링 하셔서 원하는 반환값만 뽑아서 사용하시면 될 거 같아요

getData : function
실행시키시면 Promise 객체 반환합니다. then 체이닝 하셔서 json 데이터 뽑아서 활용하시면 될 거 같습니다.

page : Number
현재 페이지가 어디인지 반환해줍니다.
아까 인자로 전달한 pageEnd 요소에 도달했을 때 +1 되도록 로직이 짜여있습니다.
페이지 값이 변했을 때 getData 함수 실행할 수 있도록 코드 작성하시면 됩니다.

위 두개 반환값으로 무한 스크롤 구현하시려면 아래 코드 예시 참고해서 작성하시면 됩니다.

const [posts, setPosts] = useState(null)
const [post, setPost] = useState(null)

  useEffect(() => {
    getData(page)
      .then((res) => res.json())
      .then((json) =>
        setPost((prev) => {
          if (prev) {
            return [...prev, ...json.posts];
          } else {
            return json.posts;
          }
        })
      );
  }, [page]);

isLoading : Boolean

Description

• 이메일 로그인 페이지 유효성 검사 부분 수정해서 pr하고 main에 merge 완료
• 유효성 검사 시 나타나는 경고 메세지 수정완료

Todo

• [ ]

ETC

기타 사항

Description

Splash 화면 구현

ETC

캐릭터 이미지 변경과 IntroLogin화면에서 로그인 버튼 hover시 메일 이미지가 깨지는 현상 수정 필요

Description

회원정보 수정 기능 구현 중

Todo

• 회원가입 프로필 설정 페이지에서 조건부 submit, 렌더링 할 수 있도록 구현

Description

로그인 후 넘어가는 홈 피드 화면의 UI와 기능을 구현 중

ETC

• 메인화면 중앙에 "검색하기" 버튼 hover할 시 색이 바뀌는 속성 필요
• 홈, 전체상품, 게시물 작성, 프로필 버튼 hover할 시 색이 바뀌는 속성 필요