frontendschool5 / final-19-eggplantmarket Goto Github PK

설명

페이지 이동을 수정했습니다

TO DO

• 뒤로가기
• 뒤로갈때 이전 페이지가 업로드거나 수정이면 홈으로 가도록 구현
• 페이지 연결
• 댓글 시간 구현
• 이미지 확장자 유효성 검사
• 기본이미지 처리 (형식에 맞지 않는 이미지 파일)
  • mandarin.api -> api.mandarin
  • baseURL 2번 들어가는 경우
  • error이미지
  • http://146.56.183.55:5050/Ellipse.png (감귤마켓 기본 이미지)
• 가격 예외처리
• 상품이미지 에러 처리
• 게시글이미지가 여러개인 경우
• skip nav
• post detail이랑 home 에 좋아요 달기

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

등록된 상품 목록

판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다.
(단, 나의 프로필 페이지가 아닐 경우 상품을 클릭하면 바로 상품 판매 사이트로 이동됩니다.)

TO DO

• 마크업
• 상품목록 슬라이드

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

product_add.js, product_modification.js

• 작성한 코드 분석
• 코드 라인 줄이기
• 중복된 코드 확인
• 페이지 합치기

TO DO

• 무의미한 개행, 불필요한 console.log 삭제
• 변수명, 함수명 수정(동사로 시작)
• 중복 선언된 변수 처리
• 중복된 코드 함수로 합치기
• 주석으로 코드 설명 추가
• 페이지 하나로 합치기

참고사항

product_upload.html에서 productID에 따라 js 파일을 호출했는데 js 파일을 하나로 합쳐서 HTML 파일도 수정했습니다.

설명

• 나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품을 등록할 수 있는 페이지가 나타납니다.
• 상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
• 상품명은 2~15자 이내로 입력되게 하고, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.

TO DO

• �이미지 등록 섹션
• 상품명 입력란
• 가격 입력란
• 판매 링크 입력란

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

프로필 수정 페이지

• 프로필 수정 시 보여주는 페이지입니다.

TO DO

• 상단 탭 구현
• 프로필 수정 시 입력하는 내용 마크업

참고사항

설명

...

TO DO

• [ ]

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

Sass refactor

• _mixin 파일 작성
• 공통 부분 component.scss 파일로 작성

TO DO

• header, 하단 탭 -> background-color 설정
• 글자 크기 -> 변수 적용 및 rem 적용
• mixin 파일에 bg-icon 생성 ( background-image의 아이콘 이미지 경로 )
• 마진, 패딩 -> em 적용
• 프로필 이미지 -> cover 사용
• radius -> % 적용 화면 확인 후 % 수정 혹은 px로

참고사항

@@

설명

채팅방

• 채팅을 입력하면 전송 버튼이 활성화됩니다.
• btn-option을 클릭하면 하단에 모달창이 생성됩니다.
• 하단 모달창을 나가기 위해서 모달창이 생성된 곳이 아닌 곳을 클릭하면 모달창이 닫칩니다.

TO DO

• 채팅 입력 시 전송 버튼 활성화
• 모달창 구조 및 디자인 수정
• btn-option 클릭 시 모달창 하단에 생성
• 모달창의 background 클릭 시 모달창 닫기

참고사항

설명

상품 등록 및 수정

• 상품 이미지, 상품명, 가격, 판매 링크를 입력하면 저장 버튼이 활성화됩니다.
• 이미 등록된 상품을 수정할 경우 상품 이미지, 상품명, 가격, 판매 링크 중 하나만 내용을 수정해도 버튼이 활성화됩니다.

TO DO

• 상품 이미지, 상품명, 가격, 판매 링크 저장
• 모든 값 입력 시 저장 버튼 활성화
• 상품 수정 시 등록된 상품 정보 불러오기
• 상품 수정은 값을 하나만 변경해도 저장 버튼 활성화
• 로컬스토리지 연결

참고사항

설명

홈 피드

• 유저가 올린 게시글이 표시되는 페이지 입니다.
• 피드에는 자신이 팔로우한 사용자의 게시글만 확인이 가능합니다.
• 팔로우한 사용자가 없을 경우 & 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 검색하기 버튼이 표시됩니다.
• 게시글을 클릭할 경우 게시물 상세페이지로 이동합니다.

TO DO

• 백그라운드 & 기본안내 문구 넣기
• 검색 버튼 구현
• header & footer 컴포넌트 넣어서 구현 완성
• withfollowers 의 경우 게시글을 받아올 구조 생성 및 마크업 구현

참고사항

설명

이메일로 로그인

• 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
• 로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
• (추가) 로그인 버튼을 클릭하면, 이메일 형식에 적합한지 검사를 진행하고, 형식에 어긋나면 이메일 인풋창 아래 경고 문구가 나타납니다.
• 입력창에 focus 될 경우에는 선의 색이 변합니다. (회색 #DBDBDB → 보라색 #9747FF)

회원가입 및 프로필설정

• 회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
• 이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
• 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
• 입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 보라색 #9747FF)
• 작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
• 프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
  • 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
  • 사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
  • 계정 ID는 중복이 불가합니다.
  • 프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.

splash 페이지 이동

TO DO

이메일로 로그인

• 입력창에 focus 될 경우에는 선의 색 변화
• 이메일, 비밀번호 입력시 로그인버튼 활성화
• 로그인버튼 클릭시 1. 이메일 형식에 맞는지 검사 2. 이메일, 비밀번호 올바른지 검사(api)

이메일로 회원가입

• 이메일 입력창에서 포커스를 잃으면 1. 이메일 형식 유효한지 2. 이미 가입된 이메일인지(api)
• 비밀번호 입력창에서 포커스를 잃으면 1. 길이가 6자 이상인지
• 유효한 이메일, 비밀번호 입력시 다음버튼 활성화
• 다음버튼 클릭시 프로필설정 섹션 보이기

프로필 설정

• 사용자 이름, 계정 ID 는 필수 / 프로필 사진, 소개 는 선택
• 프로필 이미지 업로드 (api)
• 계정ID 입력창에서 포커스 잃으면 1. 형식 유효한지 2. 이미 사용중인 ID인지(api)
• 사용자이름, 계정ID 입력시 감귤마켓시작하기버튼 활성화
• 감귤마켓시작하기버튼 클릭시 회원가입관련 데이터 보내고 (api) 로그인 화면으로 이동

splash

• index.html에서 splash 초기화면 띄우기
• 로그인 토큰이 있는 경우 home으로 이동, 없는 경우 login으로 이동

참고사항

설명

api 요청 모듈화 작업입니다,

TO DO

• api 코드 통일, 모듈화

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

게시물 디테일 페이지 & 게시물 업로드 페이지

• [게시물 업로드 페이지] 게시글 입력과 사진 업로드가 가능합니다.
• [게시물 업로드 페이지] 사진 업로드시 올라갈 사진을 미리 확인 할 수 있습니다.
• [게시물 디테일 페이지] 게시글을 클릭시 이동하는 페이지 입니다.
• [게시물 디테일 페이지] 게시글 전체와 해당 게시글에 달린 댓글 또한 확인 할 수 있습니다.

TO DO

게시물 업로드 페이지

• 사용자 프로필 이미지 구현
• 게시글 작성 부분 구현
• 사진을 불러올 수 있는 버튼 구현
• 사진 업로드시 preview 창 구현
• 마크업 벨리데이션 체크
• 접근성 검토

게시물 디테일 페이지

• 공통 컴포넌트 적용해서 페이지 디자인하기
• 마크업 벨리데이션 체크
• 접근성 검토

참고사항

설명

footer 버그 해결

문제

프로필 페이지에서 다시 footer의 프로필 링크를 누르면 정상 이동하지 않음 (쿼리스트링 없는 profile_info.html 로 이동)

원인

1. footer.html 불러오는 코드 중복
   component.js에 footer 컴포넌트를 불러오는 함수가 있고 footer를 사용하는 페이지.html에 script로 불러오나
   각 페이지.js파일 내에도 footer 컴포넌트를 불러오는 코드가 중복됨

2. script 실행 순서
   profile_info.html의 body내 script는 다음과 같음
   

   이에따라 모듈 스크립트 profile_info.js -> 일반 스크립트 component.js 순으로 "만나게"되는데
   (모듈 스크립트(비동기)와 일반 스크립트(동기)가 병렬로 실행되며, 일반 스크립트는 모듈 스크립트의 실행을 기다리지 않음)

   profile_info.js를 실행할때 profile_info.js에서도 fooer 컴포넌트를 불러오고 기본 href가 쿼리스트링 없는 /profile_info.html 인 상태
   (결국 component.js의 사용자 계정 쿼리스트링을 추가하는 코드가 실행되기 전이거나 실행 후 새로운 fetch로 덮어 씌어져)
   프로필 페이지를 그리기 위한 데이터 요청을 하는데 쿼리스트링이 없어 발생한 버그

   다음 스크립트인 component.js를 통해 링크 href가 업데이트 되지 않는 이유는,
   일반 스크립트의 실행 시점과 비동기 작업의 처리 시간 차이 때문에 발생
   즉, 파일 용량이 작은 일반 스크립트 로드 및 실행 완료 후 모듈 스크립트의 실행이 완료되는 경우라고 예상됨

해결

0. rename : component.js -> footer.js
1. footer 컴포넌트를 fetch 및 pathname에 따라 here 클래스 제어하는 코드는 footer.js에만 구현(코드 분리)
2. 1.에 따라 script 실행 순서에서 독립

설명

게시글 수정

TO DO

• url에 postId 있는지 체크하고 있는 경우 수정하기 작동
• 수정할땐 업로드 버튼 활성화 기본
• 사진이 있던 게시물 -> 사진이 삭제되지 않으면 그대로 올라감
• 사진이 삭제되면 삭제된 채로 올라감
• 사진이 삭제되고 새로 업로드 되면 새로운 사진으로 게시글 등록
• 텍스트 변경 가능

참고사항

업로드 사진이 한장일때만 고려했습니다

설명

게시글 상세보기 페이지

• 게시글 하단에 말풍선 아이콘을 클릭하면 댓글을 확인하고 입력할 수 있는 페이지가 나타납니다.
• 댓글 입력창에 텍스트를 입력하면 게시 버튼이 활성화됩니다.

TO DO

• url 쿼리스트링 연결
• 게시물 내용 보이기 (api)
• 댓글 가져오기 (api)
• 댓글 작성하면 게시 버튼 활성화

(도전)

• 댓글 추가하기 (api)

참고사항

설명

프로필 상단 마크업

• 내 프로필 (myprofile.html)
• 너 프로필 (yourprofile.html)

TO DO

• 내 프로필 마크업
• 너 프로필 마크업
• 프로필 이미지
• 팔로우, 팔로잉
• 팔로우 버튼
• 프로필 수정 버튼
• 상품 등록 버튼
• 채팅 버튼
• 공유 버튼

참고사항

• href : '#' 으로 채워놓음

설명

유저 검색이 가능한 페이지

• 홈 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지 입니다.
• 사용자 이름과 계정을 검색할 수 있는 페이지입니다.
• 입력창에 텍스트를 입력하면 해당하는 사용자가 나열됩니다.
• 검색어와 같은 단어에는 보라색 글씨가 표시됩니다.

TO DO

• 검색창에 입력시 사용자 목록 나타나는 UI 마크업
• 마크업 벨리데이션 검사 시행
• api 받아와서 출력되는 양식 확인
• 검색된 유저 불러오기(1차) - 1명의 유저(이름과 계정의 중복 없는 경우) 불러와보기
• 검색된 유저 불러오기(2차) - 여러명의 유저 불러오기
• 사용자 이름에 검색어내용이 담겨있으면 보라색으로 글씨 표시

참고사항

검색시 받아오는 유저 몇명까지 받아올지 추후 논의가 필요할 것 같습니다!
사진 수정 후, 추가하도록 하겠습니다 :)

설명

공통 컴포넌트 마크업

• 헤더 / 하단 탭 메뉴 / 댓글창 / 삭제 모달창 ( component.html )
• 버튼 ( component-button.html )
• 게시물 부분 ( component-post.html )

TO DO

• header로 표현되는 부분 마크업
• 하단 탭 메뉴 마크업
• 댓글창 마크업
• 삭제 모달창 마크업
• button 사이즈 별로 만들기
• button:disabled인 경우 버튼 디자인
• 게시물 사진이 있는 경우
• 게시물 텍스트만 있는 경우
• 폰트 변경

참고사항

• href = '#' 으로 설정
  

설명

modal.js

• 작성한 코드 분석
• 코드 라인 줄이기
• 중복된 코드 확인

TO DO

• 무의미한 개행, 불필요한 console.log 삭제
• 변수명, 함수명 수정 (동사로 시작)
• innerHTML -> createElement, textContent로 변경
• 주석으로 코드 설명 추가

참고사항

설명

채팅 목록 페이지

• 채팅 목록을 보여줍니다.
• 채팅 선택 시 선택한 방으로 넘어갑니다.
• 새로운 채팅이 오면 프로필 좌측 상단에 새로운 채팅이 왔다는 표시가 나타납니다.

TO DO

• 상단 뒤로가기 모달버든 / 하단 탭 메뉴 구현
• 하단 탭 메뉴에서 채팅 아이콘 선택
• 채팅 목록 구현
• 새로운 채팅 왔을 때 알림 표시 구현
• 대화 내용 보여주는 길이 overflow될 시 ellipsis 처리
• 마크업 벨리데이션 체크
• 접근성 확인

참고사항

설명

사용자 프로필에서 사용자가 업로드한 게시글을 확인할 수 있는 부분

• 게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다.
• 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
• 또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.

TO DO

• 목록형과 앨범형 버튼 탭 만들기
• 목록형에는 1열
• 목록형은 공통 컴포넌트 적용하기
• 앨범형에는 3열 정렬

참고사항

설명

페이지 통합

• 개인작업한 것들 한 페이지로 통합하고 링크 연결
• 컴포넌트 수정

TO DO

• 프로필페이지 상하단 나눠 작업한 것들 profile.html 통합
• 모든 페이지 링크연결
• tabindx, a11y 등 웹접근성 고려해 마크업 수정
• 팔로워 있/없 페이지로 작업한 것들 home.html 로 통합

참고사항

설명

게시글 작성 api 명세서 5.1

• 게시글을 작성할 수 있는 페이지로, 하단 메뉴바에서 게시글 작성 을 클릭하면 표시됩니다.
• 글이 입력되거나 사진이 업로드 되면 업로드버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
• 사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다.
  • 기본 과제 : 한 장만 업로드 가능하도록 구현할 것.
  • 도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.

TO DO

• 게시글 작성하는 사용자 프로필 이미지 가져오기
• 글이 입력되거나 사진이 업로드 되면 업로드버튼 활성화
• 버튼을 누르면 게시글 업로드
• (도전) 이미지 최대 3장까지 업로드 가능
• textarea 길이

참고사항

설명

공동작업 페이지 마크업

splash

• 서비스 접속 초기화면입니다.
• splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
  • 로그인을 하지 않은 경우 : 로그인 화면
  • 로그인이 되어 있는 경우 : 가지마켓 피드

로그인 메인 페이지

• SNS(카카오톡, 구글, 페이스북) 로그인 버튼만 배치합니다.
• 로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.

이메일 로그인 페이지

• 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
• 로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
• 입력창에 focus 될 경우에는 선의 색이 변합니다. (회색 #DBDBDB -> 보라색 #9747FF)

회원가입 페이지

• 로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
• 입력창에 focus 될 경우에는 선의 색이 변합니다. (회색 #DBDBDB -> 보라색 #9747FF)
• 작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
• 프로필 설정 페이지 포함
  • 프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
    • 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
    • 회원가입과 같은 방식으로 유효성 검사가 진행됩니다.

404에러 페이지

TO DO

• splash 화면 : 가운데 정렬
• 로그인 메인 화면 : sns 및 이메일 로그인, 회원가입 이동 링크 만들기
• 로그인 메인 화면 : 가지 로고가 들어간 이미지로 배경 넣기
• 이메일 로그인 화면 : 이메일, 비밀번호 입력창
• 이메일 로그인 화면 : 로그인form 제출 버튼
• 이메일 로그인 화면 : 유효성 검사 실패시 출력될 경고 문구
• 이메일 로그인 화면 : 회원가입으로 이동 링크 만들기
• 회원가입 화면 : 이메일, 비밀번호 입력창
• 회원가입 화면 : 유효성 검사 실패시 출력될 경고 문구
• 회원가입 화면 : 회원가입form 제출 및 다음화면 이동 버튼
• 프로필 설정 화면 : 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개 입력창
• 프로필 설정 화면 : 프로필설정form 제출 및 홈화면 이동 버튼
• 404에러 화면 : a태그 말고 버튼으로 이전 페이지로 이동

참고사항

웹버전 고려해서 작업하기
로그인페이지 배경은 로고 넣어져있는 이미지로 넣기
유효성 검사는 추후 기능 구현에서

브랜치명은 feature/기능명
파일명은 언더바(_) 사용
클래스명은 하이픈(-) 사용

screen reader가 읽을 수 있도록 웹접근성 고려하여 시맨틱 마크업하기!

설명

Sass 리팩토링

• 재사용성을 위해 _mixin 활용하기
• _global, _variables 활용하기

TO DO

• 반복되는 코드 _mixin으로 정리하기
• _variables 활용하기
• _global 활용하기

참고사항

설명

postUpload.js 리팩토링

• 작성한 코드 분석
• 코드라인 줄이기
• 중복 사용 코드 함수화

TO DO

• 변수명, 함수명 시멘틱하게 수정
• 무의미한 개행, console.log 삭제
• 주석으로 코드 설명 추가
• 게시물 수정시 첫 번째 이미지만 올라가는 버그 수정
• 이미지 미리보기 FileReader vs. URL.createObjectURL()
• Fragment 사용으로 바꾸기
• 이미지 업로드 버튼 여러번 사용 가능하도록 수정 (입력된 이미지 누적)
• 이미지는 3개까지 업로드 가능
• 서버에 이미지 등록하고 파일명 가져오는 postImg함수 기능 쪼개기

참고사항

마크업도 일부 수정하였습니다 (heading 태그 삭제, 사용자프로필 기본 이미지 src 추가)

설명

README

TO DO

• 리드미 작성 내부 요소 올리는 작업

참고사항

설명

자잘한 버그 및 디자인 수정 사항

TO DO

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

프로필 수정 페이지

• 프로필 정보를 가져옵니다. 가져온 정보 중 수정하고자 하는 값을 변경합니다. (수정이 가능한 정보 - 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개)
• 사용자 이름, 계정 ID는 유효성 검사를 통해 제대로 된 값을 입력했는지 확인합니다.
• 수정하고자 하는 정보 중 하나만 변경을 해도 저장 버튼이 활성화됩니다.
• 변경 사항 작성 후 저장 버튼을 누르면 새로 작성된 내용이 저장됩니다.

TO DO

• 사용자 정보 데이터 불러오기
• 새로 입력된 사용자 정보 저장하기
• 이미지 정보 불러오기
• 로컬스토리지 연결

참고사항

설명

• 사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
• 사용자 정보 하단에는 팔로우 버튼이 있습니다. 팔로우 버튼을 클릭하면 언팔로우 버튼으로 바뀌어야 합니다.
  • 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
• 팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
• 판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
• 또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.
• 나의 프로필 페이지일 경우
  • 프로필 수정 버튼과 상품 등록 버튼이 표시됩니다.
  • 판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다. (단, 나의 프로필 페이지가 아닐 경우 상품을 클릭하면 바로 상품 판매 사이트로 이동됩니다.)

TO DO

• 내정보, 사용자정보 분기 나누기
• 프로필 정보 뿌리기
• 판매중인 상품 정보 뿌리기
• 게시글 뿌리기
• 상품 정보 드래그 슬라이드 구현
• 목록형 갤러리형 버튼 구현
• 팔로우 버튼 구현 (기능까지)
• 좋아요 기능 추가

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

postDetail.js 리팩토링

• 작성한 코드 분석
• 코드라인 줄이기
• 중복 사용 코드 함수화

TO DO

• querySelector 변수에 $ 추가
• 무의미한 개행, console.log 삭제
• 주석 정리
• innerHTML -> createElement 변경
• 초기 화면 데이터 불러올 때 promise.All 처리
• 코드 순서 정리
• 좋아요 기능 작동안되는 버그 수정

참고사항

게시글 컴포넌트화 예정이라 해당 부분(displayPost함수)은 수정하지 않겠습니다~

설명

자잘한 버그

TO DO

• 하단 탭 크기 맞추기
• 이미지 스프라이트 폴더 정리

참고사항

설명

리팩토링 진행(컴포넌트화)

• 컴포넌트화 진행 할 수 있는 부분들 분리하고 컴포넌트화 진행하겠습니다

TO DO

• 검색페이지 template 적용
• footer 컴포넌트화
• 홈피드페이지 게시글 template 적용
• post 컴포넌트화
• 홈피드 페이지 컴포넌트 적용
• post_detail 페이지 컴포넌트 적용
• profile_info 페이지 컴포넌트 적용
• 기존 컴포넌트 파일 정리

참고사항

설명

�리팩토링 profile_info.js

1. 코드라인 줄이는것
2. 작성한 코드 분석
3. 합칠수 있는 기능 합치기

TO DO

• 무의미한 개행, console.log 삭제
• 주석으로 코드 설명 추가
• 전역으로 선언한 변수 처리
• 중복으로 선언한 변수 처리
• lighthouse 보고 개선할거 개선
• 함수 기능 세부적으로 분리하여 다시 작성하기
• 버튼태그로 구현한 링크 a태그로 변경
• 좋아요 기능 이벤트 위임으로 다시 구현하기

참고사항

작업하다 할거 생기면 todo도 추가하겟습니다

설명

회원가입시 이메일 유효성 관련 버그 수정

• join_membership.js
• setProfile.js

문제

join_membership.js에서 /user/emailvalid를 통해 이메일 중복 여부는 검사하나
유효한 이메일 형식인지는 따로 처리해준 부분이 없어서
setProfile.js에서 맞지 않는 이메일 형식으로 회원가입(submitJoinForm)하면 422 상태로 처리되지 않고 로그인 페이지로 이동

해결

join_membership.js에 이메일 유효성 검사 부분을 작성하지 않고
폼 제출시 서버에서 온 응답(아래 참고)에 따라 res.status가 422이고 그 중 res.message가 '잘못된 이메일 형식입니다.'이면
경고창을 띄우고 회원가입 페이지로 다시 돌아가도록 변경

POST /user 응답 경우

// FAIL (= status 422)
// email, password, accountname, username 중 하나라도 작성하지 않을 경우
필수 입력사항을 입력해주세요.

// password를 6자 이상 입력하지 않을 경우
비밀번호는 6자 이상이어야 합니다.

// eamil 형식이 잘못될 경우
잘못된 이메일 형식입니다.

// 가입된 email일 경우
이미 가입된 이메일 주소입니다.

// accountname에 지정된 문자 이외의 문자가 들어갈 경우
영문, 숫자, 밑줄, 마침표만 사용할 수 있습니다.

// 가입된 accountname일 경우
이미 사용중인 계정 ID입니다.

참고사항

@@ 사진첨부나 url, 이슈사항 혹은 주의사항 작성해주시면 좋을 것 같습니다

설명

모달창 tab으로 이동

TO DO

• [ ]

참고사항

설명

팔로워 및 팔로잉

• 사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
• 목록은 사용자 프로필 사진, 이름, 계정 ID, 팔로우(또는 취소) 버튼으로 구성됩니다.
• 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.

(도전 과제)

• 사용자 정보 하단에는 팔로우 버튼이 있습니다. 내가 팔로우 한 사용자일 경우 언팔로우 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
• 팔로우 목록에는 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
• 팔로우 버튼을 클릭하면 팔로잉 목록에 해당 사용자가 추가됩니다. 취소 버튼을 클릭하면 팔로잉 목록에서 해당 사용자가 삭제되어야 합니다.
• 사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
• 팔로워 및 팔로잉 목록에 내가 표시될 경우 팔로우 버튼은 나타나지 않습니다.

TO DO

• 버튼 클릭시 단순 변화

(도전)

• 사용자에 맞는 팔로우/팔로잉 목록 뿌리기 (api)
• 팔로우/팔로잉/삭제 버튼 동작 구현 (api)

(로직)

마이 프로필

• 팔로워 페이지 : 팔로우, 삭제 버튼
  • 팔로우(하기) 버튼만 가능, 팔로워를 삭제하는 버튼은 있지만 기능은 없음 disabled 처리
• 팔로잉 페이지 : 팔로우, 팔로잉 버튼

유저 프로필

• 팔로워 페이지 : 팔로우, 팔로잉 버튼
  • 내 팔로잉 목록에 있는 사람이면 팔로잉(취소하기) 버튼, 없는 사람이면 팔로우(하기) 버튼
  • 내 계정이면 버튼 없음
• 팔로잉 페이지 : 팔로우, 팔로잉 버튼

  • 내 팔로잉 목록에 있는 사람이면 팔로잉(취소하기) 버튼, 없는 사람이면 팔로우(하기) 버튼
  • 내 계정이면 버튼 없음

참고사항

설명

홈 피드 페이지

가지마켙 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.
피드에는 자신이 팔로우한 사용자의 게시글을 확인 할 수 있습니다.
팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.

TO DO

• 팔로우한 사용자가 없거나 팔로우한 사용자가 올린 게시글이 없는 경우, 두 경우를 나눠서 페이지 나타날 수 있게 구현
• 피드 불러오기(1차) - 1개의 게시물(글만 있는 경우) 불러와보기
• 유저 사진 및 게시글 등 api 마크업에 적용
• 피드 불러오기(2차) - 많은 게시물(글만 있는 경우) 불러와보기
• 피드 불러오기(3차) - 많은 게시물(사진까지 있는 경우) 불러와보기

참고사항

사진 추후에 추가하겠습니다 :)

설명

버그 수정

• 페이지 입력창에 문자를 입력하기 전 공백이 있으면 공백 제거를 하고 저장할 수 있도록 합니다.

TO DO

• 각 페이지 별 trim() 설정

참고사항

설명

채팅방

• 진행 중인 대화를 불러옵니다.
• 메시지, 사진을 상대방에게 보낼 수 있습니다.
• icon-more-vertical 선택 시 채팅방 나가기 창이 생성됩니다.

TO DO

• 상단 뒤로가기, 모달버튼
• 채팅방 레이아웃 구현 - 대화 기록
• 이미지 버튼, 채팅 입력 부분 구현
• 이미지 선택 혹은 채팅 내용 입력 시 전송 버튼 활성화
• 채팅방 나가기 모달창 구현

참고사항

설명

follower.js , following.js 리팩토링

• 작성한 코드 분석
• 코드라인 줄이기
• 중복 사용 코드 함수화

TO DO

• querySelector 변수에 $ 추가
• 무의미한 개행, console.log 삭제
• 주석 정리
• innerHTML -> createElement 변경
• 전역변수 -> 클로저
• 나의/남의 팔로워 목록 display 함수 병합
• 나의 팔로워 목록에서도 팔로잉 기능 추가

참고사항

내 팔로워 목록에서만 삭제 버튼 있고
" 팔로우 <-> 삭제 " 기능에서 " 팔로우 <-> 팔로잉 " + " 삭제 " 기능으로 변경한 화면

• 변경 전

• 변경 후

설명

고대비 테마 적용

• 저시력자 유저를 위한 고대비 테마

TO DO

• SASS 로 테마별 색상 및 변경사항 변수처리

참고사항

@@ 추후 사진 첨부 하겠습니다~

설명

최적화

라이트 하우스 참고해서 성능 올려보겠습니다

TO DO

• 이미지 스프라이트
• meta tag 추가
• css, js minify
• lazy loading

참고사항

설명

무한스크롤

처음부터 모든 데이터를 불러오지 않고, 스크롤이 하단에 닿을때 데이터를 추가로 받아옵니다

TO DO

• 프로필 페이지 - 게시글 목록 무한스크롤
• 게시글 상세 페이지 - 댓글 목록 무한스크롤
• 검색 페이지 무한스크롤
• 홈 피드 무한스크롤
• 팔로우/팔로잉 무한스크롤
• 로딩중인 이미지 띄우기

참고사항

설명

팔로워 및 팔로잉 목록

• 사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
• 목록은 사용자 프로필 사진, 이름, 계정 ID, 팔로우(또는 취소) 버튼으로 구성됩니다.
• (사용자 프로필 사진, 이름, 계정 ID) 영역을 누르면 해당 사용자 프로필로 이동합니다.
• 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.

TO DO

• 팔로워 화면 : (사용자 프로필 사진, 이름, 계정 ID, 팔로우/취소 버튼) li 만들기
• 팔로잉 화면 : (사용자 프로필 사진, 이름, 계정 ID, 취소 버튼) li 만들기
• 사용자 프로필 사진, 이름, 계정 ID : 누르면 사용자 계정으로 이동할 수 있도록 a태그로 마크업
• 팔로워 화면 : 팔로우 및 취소 버튼
• 팔로잉 화면 : 취소 버튼
• 키보드 접근성, 스크린리더 고려하기
• header, navbar, button 공통 컴포넌트 가져오기
• alt 작성

참고사항

설명

하단 모달창

• btn-option 클릭 시 하단 모달창 생성

TO DO

• 하단 모달창 마크업
• 띄어주는 모달창 마크업
• 페이지 별 상단 btn-option 클릭 시 하단 모달창 생성
• 하단 모달창에 생성된 메뉴 클릭 시 해당 모달창 생성
• 모달창이 생성된 곳이 아닌 배경 클릭 시 모달창 닫기

참고사항

설명

JS 리팩토링

• 줄일 수 있는 코드 라인 수 줄이기.
• 작성된 코드 분석
• 클래스명, 함수명 통일할 수 있게 확인하기

TO DO

• 불필요한 console.log 정리
• 작성한 코드 분석
• 함수명,클래스명 확인하기
• 코드 라인수 줄일 수 있는부분 줄이기
• innerHTML 변경하기 -> 컴포넌트 리팩토링 진행하면서 template 태그로 변경해서 작업 진행하겠습니다.

참고사항

기존 home/feature 브랜치에서 작업하겠습니다 :)