Work Logs

🔗 프로젝트 소개 노션 링크

김재우

• Role: Team Leader
• Position: Front-End
• Stack: JavaScript Typescript React React-Hooks Redux Styled-Components AWS

Works

• [Issue] 정해진 시간에 맞추어 팀 KPT 보고 올림
• [메인페이지] 날씨 배경/날씨 기록 조회
  • 입력된 날짜에 맞춰 날씨 배경이미지로 메인페이지배경 삽입
  • 날짜에 따라 날씨 데이터를 가지고와서 해당 날씨자료 조회 기능 구현
• [메인페이지] 카드 리스트 목록 / 카드 세부사항 조회
  • 입력된 날짜에 맞추어 카드 리스트(issue, birth, death, music, movie)를 페이지 하단에 맵핑
  • 해당 카드 호버시 사이즈업 css스타일 적용
  • 카드 클릭시 모달 형식으로 show해서 카드 세부사항 목록으로 전환해서 조회하는 기능 구현
  • 세부사항 카드 목록은 슬라이드 기능형식으로 적용
  • issue, birth, death와 같은 리스트형 자료등 사이즈업을하여 잘보이게 css스타일 적용
  • music, movie 목록에는 포스터 이미지로 삽입 및 카드안으로 적용
  • 해당 카드리스트 전체에 반응형 적용
• [메인페이지] 마음에 드는 카드를 로그인 상태일때 "찜하기" 기능 구현 & 카드 기록하기 폼 제작
  • 카드 찜하기 아이콘 클릭시 해당 자료를 리덕스를 통해 저장, 찜하기 컴포넌트 제작 및 기능 구현
  • 카드 세부사항 목록에서 로그인 상태일때 "카드 기록하기"에 추가, 스타일 적용
  • 카드 기록하기 내용 작성후 서버로 전송

장요한

• Role: Team Member
• Position: Front-End
• Stack: JavaScript Typescript React/Hooks Redux Styled-Components AWS

Works

1. 문서 작업

   • Github Wiki / Readme 작성
   • 프론트엔드 기능 Flowchart 작성
   • 프로젝트 노션 문서 작성

2. My 페이지

   • 마이페이지 기획 및 와이어프레임 작성
   • Masonry 레이아웃 구현 — 브라우저 화면 크기에 따라 칼럼 갯수 자동 조절
   • 무한 스크롤 구현 — 좋아요한 카드 갯수에 맞춰 한 페이지에 노출할 콘텐츠 계산
   • 카드 기능 버튼 — 카드 상세보기 모달 / 좋아요 취소 / 공유
   • 카드 플립 디자인
     • 앞 — 전체 이미지, 날짜 / 카테고리 태그
     • 뒤 — 텍스트 및 기능 버튼
   • 이미지 로딩 화면 및 물결 애니메이션
   • 좋아요 취소 후 카드 목록 재정렬 기능 — 취소한 카드의 다음 카드만 다시 렌더
   • 카테고리 가로 스크롤 기능
   • 카테고리 필터 기능
   • 카테고리 배경 이미지 확대 효과
   • 유저 프로필 카드
   • 이미지 조건부 렌더링 기능
     • URL 유효 여부 확인
     • 영화 / 음악 카테고리에 따라 이미지 조건부 렌더(앨범 커버 / 영화 포스터)
   • 마이페이지 전체 각 사이즈 구간별 반응형 구현
   • 최상단 이동 버튼

3. 공용 Modal

   • 카드 상세보기 모달 디자인 / 기능
   • 확인&취소 모달 디자인 / 기능

4. Utility 함수

   • 이미지 리사이즈 함수 — 텍스트 콘텐츠 길이에 따라 이미지 URL 파라미터 조절
   • TMDB API 활용 한국 및 해외 영화 평점 정보 조회
   • 영화 평점에 따른 별⭐️ 갯수 렌더 함수

마상희

• Role: Team Member
• Position: Front-End
• Stack: JavaScript Typescript React React-Hooks Redux Styled-Components AWS

Works

1. 공동작업 (SR)
   • 아이디어 선정 및 선정된 아이템에 대한 개발 컨셉 설정
   • Miro를 이용한 초기 WireFrame 작성
   • Miro를 이용한 Flow chart 작성
2. Client 시작페이지
   • 로고 디자인
   • Nav 바 기능 & 반응형 구현
   • 기능 설명 페이지 구현
   • Sidebar 화면 구현 & 반응형
   • 로그인, 로그아웃
     • 이메일 가입
     • 소셜 가입 (구글, 카카오, 네이버)
   • 회원 가입, 유저 정보 수정
     • 프로필 이미지 업로드
     • 유효성 검사
   • Login 유지 기능 구현
   • 기록 카드 리스트 페이징
   • Footer 구현 & 반응형 구현

이창민

• Role: Team Member
• Position: Back-End
• Stack: JavaScript Typescript React React-Hooks Redux Styled-Components AWS

Works

• 서버 사이드 All
• 스키마 및 데이터베이스 설계 (+ 팀원)
• 컨트롤러 구성 및 API 문서 작성 (유저 CRUD, 신규카드 CRUD, 좋아요/취소, 날짜 조회)
• 소셜 로그인 (구글, 네이버, 카카오)
• 자체 로그인 (JWT)
• 데이터 수집 (API 및 스크래핑)