Skip to content

Worklog

Jump to bottom
yeonwoo edited this page Sep 3, 2023 · 127 revisions

Frontend

안현지

Position : Frontend

Stack : Typescript, ReactJS, NextJS, Redux Toolkit, Styled Components

Works :

  1. 페이지 UI 구성 및 피그마 이용해 프로토타입 구현

    • 메인 페이지
    • 질문 리스트 페이지
    • 질문 상세 페이지

  2. MainPoster 컴포넌트

    • props를 전달하여 조건부 렌더링
      • default : 영화 포스터 + 제목
      • 본영화 섹션에서 사용될 때, 별점 노출
      • 볼영화 섹션에서 사용될 때, (마이페이지의 삭제 버튼을 누르면) 삭제 아이콘 노출
    • styled-components의 ThemeProvider 적용
      • 컴포넌트의 크기를 유동적으로 조정하여 여러 페이지에서 재사용할 수 있도록 함
    • 볼영화 삭제 기능 구현

  3. MainPage

    • 자동 재생되는 캐러셀 슬라이더 구현
      • react-slick 라이브러리 사용 (centermode 적용)
    • 영화 포스터 조회 기능 구현

  4. MyPage

    • UI 디자인 재구성
    • 로그인한 본인의 마이페이지인 경우와 타 사용자의 프로필을 클릭하여 방문하는 경우를 구분하여 조건부 렌더링
      • 로그인한 사용자 본인의 페이지인 경우에만 볼 영화의 편집 버튼을 노출
        -> 클릭하면 메인 포스터 컴포넌트의 삭제 아이콘 노출
      • 로그인한 사용자 본인의 페이지인 경우에만 계정 관리 영역 노출
    • 볼 영화, 본 영화 리스트
      • react-slick 사용하여 캐러셀 슬라이더 구현
      • 캐러셀 드래그 시 클릭 이벤트(영화 상세페이지로 이동) 실행되는 것 방지
    • 회원 정보 조회, 회원 삭제 기능 구현

  5. MovieDetail Page

    • 영화 상세 정보 조회
    • UI 디자인 재구성
    • 코멘트
      • 모달 팝업
      • 별점 구현
      • 코멘트 CRUD
        • 코멘트 추가 시 본 영화 리스트 추가
        • 코멘트 삭제 시 본 영화 리스트 삭제
      • 리스트 페이지네이션 적용
      • 코멘트 좋아요 구현
        • 좋아요 아이콘 클릭 시 리렌더링 전 까지는 클라이언트 측에서 UI 임시 반영(좋아요 수 변경, 좋아요 상태에 따른 아이콘 색 변경)
    • 볼 영화 리스트 추가, 기능 구현

  6. Footer

    • footer UI 수정
강예현

Position : Frontend

Stack :Typescript, NextJs, ReactJs, Redux toolkit, Styled Component

Works :

  1. 페이지 UI 구성 및 피그마 사용을 통한 프로토타입 구현

    • 영화 상세 페이지 초기 디자인
    • 영화 코멘트 모달
    • 검색 페이지 초기 디자인


  2. CRA -> NEXT.JS 마이그레이션 및 초기세팅

  3. 질문 리스트 페이지

    • UI 디자인 수정
    • 질문 컴포넌트를 만들어 여러 질문 조회 기능 구현
    • 질문 리스트 페이지네이션(숫자 버튼) 적용해 한 페이지 당 질문 컴포넌트 10개씩 노출
    • 추천 받기 버튼 클릭시 질문 작성 페이지로 이동

  4. 질문 작성 페이지

    • UI 디자인 재구성
    • 유효성 검사

  5. 질문 수정 페이지

    • UI 디자인 재구성
    • 유효성 검사

  6. 질문 상세 페이지

    • UI 디자인 재구성
    • 질문 컴포넌트
      • 수정/삭제 기능
      • 사용자 본인에게만 수정/삭제 버튼 노출
    • 답변 작성 컴포넌트
      • 영화 검색 모달창에서 선택한 영화 정보 포함
      • 영화 선택하기 클릭 시 영화 검색 모달창 노출
    • 답변 컴포넌트
      • 수정/삭제 기능
      • 사용자 본인에게만 수정/삭제 버튼 노출
    • 목록으로 이동하기 버튼 클릭시 질문 리스트 페이지로 이동

  7. 영화 검색 모달창

    • UI 디자인 구성
    • 영화 검색 기능 구현
      • 영화 제목, 감독, 배우 검색 가능
    • 영화 검색 결과 페이지네이션 (이전, 다음 버튼) 기능 적용
전수빈

Position : Frontend

Stack : Typescript, ReactJS, NextJS, Redux Toolkit, Styled Components

Works :

  1. 검색 페이지
    • API response에 담겨오는 params를 필터에 맞게 변경
      • 장르순, 국가순, 연령순, 별점순 필터 적용
    • Pagination
      • 영화 포스터 5x2
      • 다음, 이전 페이지 버튼
      • 가지고있는 데이터에 맞게 페이지 갯수 적용
    • 검색 기능 구현
 * 검색창에 영화, 감독, 배우로 검색 가능

  2. 로그인 페이지
    • 구글 로그인 버튼
      • Oauth2 구글 url로 이동
    • 로그인 완료시 메인페이지로 이동

  3. 헤더, 풋터
    • 각 아이콘에 맞게 페이지 이동
      • 로고 클릭 시 메인페이지 이동
      • 검색버튼 클릭 시 검색페이지 이동
      • 로그인 버튼 클릭 시 로그인 페이지 이동
        • 로그인 완료 시 헤더에 로그아웃 아이콘으로 변경, 토큰 로컬스토리지에 저장, 로그인 정보 리덕스 스토어에 저장
        • 로그아웃 아이콘 클릭 시 로그인 정보 삭제, 토큰삭제 후 로그인 아이콘으로 변경
    • 헤더에 로그인 정보 저장
    • 풋터에 팀원 깃헙 주소 url 연결
  4. Deployment
    • 1차 배포 Vercel
      • 깃헙 dev 브런치에 연결 후 배포
    • 2차 배포 AWS S3
      • HTTPS 이슈로 vercel에서 AWS S3로 변경
    • 3차 배포 Vercel
      • Next.js 정적파일로 build 이슈로 인해 다시 Vercel로 수정
      • 깃헙 main 브런치에 자동배포 성공

Backend

김연우

Position : Backend

Stack : Spring Boot, Spring Data JPA, EC2, RDS, MySQL, Querydsl

Works :

  1. Movie

    • OPEN API 이용하여 영화 데이터 저장 <Go To Notion | Thread에 대한 이해와 문제 해결>
    • 영화 상세 페이지 구현
    • 장르, 나라, 연령, 별점 필터를 이용한 영화 검색 기능 구현(Querydsl)
    • 메인 페이지 구현, GET 요청 시 랜덤으로 영화 10개 응답

  2. Comment

    • 코멘트와 별점 기능 구현
    • 코멘트 좋아요 기능 구현

  3. Watch

    • 보고 싶은 영화 기능 구현
    • 코멘트 작성 시 본 영화에 추가
    • 마이 페이지 볼 영화, 본 영화 리스트

  4. Deployment

  5. Documentation

김민성

Position : Backend

Stack : Java, mySQL, AWS, Spring Boot JPA

Works :

  1. 질문 CRUD 기능 구현

    • 질문 전체 조회 (게시판 리스트)
      • 답변 수와 조회 수 기능 구현
      • 작성 최신 순으로 정렬
      • 페이지네이션 기능 구현
    • 질문 상세 조회
      • 질문에 대한 답변 정보를 나타내는 기능 구현
      • 답변 정보 페이지네이션 기능 구현
      • 답변 작성 최신 순으로 정렬
    • 질문 작성
      • 질문 작성 유효성 검사
    • 질문 수정 / 삭제
      • AccessToken 비교해서 질문을 작성한 유저인지 확인하는 기능 구현
      • 질문 수정 유효성 검사
      • 예외 코드 작성

  2. 답변 CRUD 기능 구현

    • 답변 작성
      • 답변 작성 유효성 검사
    • 답변 수정 / 삭제
      • AccessToken 비교해서 답변을 작성한 유저인지 확인하는 기능 구현
      • 답변 수정 유효성 검사
      • 예외 코드 작성
정민우

Position : Backend

Stack : Java, Spring Boot, Spring Data JPA, mySQL, Spring Security

Works :

  1. Member

    • 로그인 후 DB에 멤버 정보 저장

  2. JWT 토큰

    • JWT ACCESS TOKEN 발행
    • JWT REFRESH TOKEN 발행

  3. 구글 OAuth 2.0

    • OAuth 2.0 로그인 시 JWT 토큰에 구글 memberId와 이름 저장
    • 로그인 성공 시 URI에 JWT 토큰을 넣은 후 메인 홈페이지로 리다이렉트
    • 로그아웃 기능 구현

Home

Team

Work

Clone this wiki locally