스포츠, 여행, 원데이, 운동, 집꾸미기, 동네, 반려동물, 굿즈
감귤, 청귤, 두리안, 레몬, 수박, 자두,
시금치, 브로콜리, 가0. 가지마켓 서비스
가지마켓 서비스는 자신의 스토어에서 판매하고 있는 상품(가지)을 등록하여 홍보할 수 있는 SNS입니다. 오직 가지만 상품으로 업로드할 수 있습니다.
상품을 등록하지 않아도 일상을 공유하며 즐거운 SNS 활동을 할 수 있습니다. 글과 사진과 함께 게시물을 작성하여 자신의 일상을 공유할 수 있습니다. 다른 사용자를 팔로우하면 유저가 올린 게시물을 홈 피드에서 소식을 확인할 수도 있습니다. 또한 다른 사용자와 메시지를 주고 받을 수 있습니다.
피드를 구경하다가 마음에 드는 게시물을 발견했다면 좋아요를 누를 수 있고 댓글을 남기거나 공유를 할 수도 있습니다.
1. 프로젝트 설명
2. 디자인(피그마 링크)
3. 요구사항 명세
3.0 가지마켓 API
•
제공기능
◦
채팅, sns로그인을 제외한 요구사항 전부 제공
3.1 필수 과제
디자인(피그마)를 참고하여 모든 페이지의 UI 구현해야 합니다.
게시글 CRUD와 회원가입, 로그인 기능은 필수 과제입니다.
3.1.1 splash
•
서비스 접속 초기화면입니다.
•
splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
◦
로그인을 하지 않은 경우 : 로그인 화면
◦
로그인이 되어 있는 경우 : 가지마켓 피드
3.1.2 로그인
•
로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
•
SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다.
•
로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
•
이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
•
로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
3.1.3 회원가입
•
로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
•
회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
•
이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
•
프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
◦
프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
◦
사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
◦
계정 ID는 중복이 불가합니다.
◦
프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.
3.1.4 가지마켓 피드(홈 화면)
•
가지마켓 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.
•
가지마켓 피드에는 자신이 팔로우한 사용자의 게시글만 확인할 수 있습니다.
•
팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.
3.1.5 검색
•
가지마켓 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.
•
사용자 이름을 검색할 수 있는 페이지입니다.
•
필수 과제에서는 검색 기능은 구현하지 않습니다. 마크업만 구현해 보세요.
3.1.6 사용자 프로필 페이지
•
사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
•
사용자 정보 하단에는 팔로우 버튼이 있습니다. 팔로우 버튼을 클릭하면 언팔로우 버튼으로 바뀌어야 합니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
•
팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
•
판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
•
게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
•
또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.
•
나의 프로필 페이지일 경우
◦
프로필 수정 버튼과 상품 등록 버튼이 표시됩니다.
◦
판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다. (단, 나의 프로필 페이지가 아닐 경우 상품을 클릭하면 바로 상품 판매 사이트로 이동됩니다.)
3.1.7 팔로워, 팔로잉 목록
•
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
•
목록은 사용자 프로필 사진, 이름, 계정 ID, 팔로우(또는 취소) 버튼으로 구성됩니다.
•
내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
3.1.8 내 프로필 수정
•
나의 프로필 페이지에서 프로필 수정 버튼을 클릭하면 프로필을 수정할 수 있는 페이지가 나타납니다.
•
입력창에 대한 명세는 회원가입에서의 프로필 설정과 동일합니다. 유효성 검사가 통과되지 않을 경우 저장 버튼이 활성화되지 않습니다.
3.1.9 상품 등록
•
나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품을 등록할 수 있는 페이지가 나타납니다.
•
상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
•
상품명은 2~15자 이내로 입력되게 하고, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.
3.1.10 게시글 댓글 페이지
•
게시글 하단에 말풍선 아이콘을 클릭하면 댓글을 확인하고 입력할 수 있는 페이지가 나타납니다.
•
댓글 입력창에 텍스트를 입력하면 게시 버튼이 활성화됩니다.
3.1.11 게시글 작성 페이지
•
게시글을 작성할 수 있는 페이지로, 하단 메뉴바에서 게시글 작성 을 클릭하면 표시됩니다.
•
글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
•
사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다.
◦
기본 과제 : 한 장만 업로드 가능하도록 구현할 것.
◦
도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.
3.1.12 채팅 목록
•
채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.
•
현재 대화가 진행 중인 채팅 목록이 표시됩니다.
•
내가 읽지 않은 메시지가 있는 채팅방인 경우 프로필 사진 좌측 상단에 작은 원으로 표시됩니다.
3.1.13 채팅방
•
채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.
•
채팅 목록에서 목록 아이템을 클릭하면 해당 채팅방이 나타납니다.
•
채팅 기능은 구현하지 않습니다.
•
채팅 입력창에서 텍스트가 입력되면 전송 버튼이 활성화됩니다.
•
이미지 버튼을 클릭하고 이미지를 선택하면 전송 버튼이 활성화됩니다.
•
채팅방 상단 우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.
3.1.14 하단 탭 메뉴
•
하단 탭 메뉴는 홈, 채팅, 게시물 작성, 프로필 4개의 메뉴로 구성되어 있습니다.
•
모든 페이지는 페이지 경로에 해당하는 탭 메뉴가 활성화됩니다.
3.1.15 좋아요 버튼
•
게시글이 나타나는 모든 페이지에 해당합니다.
•
게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.
•
빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.
•
좋아요 기능은 구현하지 않습니다.
3.1.16 모달 버튼
헤더
게시글 상단
•
우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.
◦
헤더에 있는 버튼을 클릭하면 설정 및 개인정보와 로그아웃이 나타납니다.
•
게시글 우측 상단에 위치한 버튼을 클릭했을 경우
◦
내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다.
◦
다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.
.png&blockId=649a3dea-b517-44de-bcb3-d2109af8c006)
내가 작성한 게시글일 경우
다른 사용자가 작성한 게시글일 경우
•
댓글 우측 상단에 위치한 버튼을 클릭했을 경우
◦
내가 작성한 댓글일 경우 : 삭제 버튼이 나타납니다.
◦
다른 사용자가 작성한 댓글일 경우 : 신고하기 버튼이 나타납니다.
•
로그아웃, 삭제, 신고 버튼을 누르면 확인 메시지 모달창이 나타나야 하고, 취소 버튼을 누르면 모달은 사라집니다.
3.2 선택(도전) 과제
싱글 페이지 웹 구현은 선택 과제입니다.
3.2.1 팔로우
•
사용자 정보 하단에는 팔로우 버튼이 있습니다. 내가 팔로우 한 사용자일 경우 언팔로우 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
•
팔로우 목록에는 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
•
팔로우 버튼을 클릭하면 팔로잉 목록에 해당 사용자가 추가됩니다. 취소 버튼을 클릭하면 팔로잉 목록에서 해당 사용자가 삭제되어야 합니다.
•
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
•
팔로워 및 팔로잉 목록에 내가 표시될 경우 팔로우 버튼은 나타나지 않습니다.
3.2.2 좋아요
•
게시글이 나타나는 모든 페이지에 해당합니다.
•
게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.
•
빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.
•
좋아요 개수는 카운트 되어 하트모양 우측에 표시됩니다.
3.2.3 댓글
•
댓글 삭제 및 신고하기 기능을 구현합니다.
•
댓글 작성이 현재 시간으로 부터 몇 초, 분, 시간 전에 작성되었는지 표시합니다.
•
댓글 개수는 카운트 되어 말풍선 아이콘 우측에 표시됩니다.
3.2.4 검색
•
가지마켓 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.
•
사용자 이름과 계정을 검색할 수 있는 페이지입니다. 입력창에 텍스트를 입력하면 해당하는 사용자가 나오도록 합니다.
•
검색어와 같은 단어에는 보라색 글씨가 표시됩니다.
3.2.5 게시글 작성 페이지(이미지 업로드 관련)
•
사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다.
◦
기본(필수) 과제 : 한 장만 업로드 가능하도록 구현할 것.
◦
도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.
0. 가지마켓 서비스
가지마켓 서비스는 자신의 스토어에서 판매하고 있는 상품(가지)을 등록하여 홍보할 수 있는 SNS입니다. 오직 가지만 상품으로 업로드할 수 있습니다.
상품을 등록하지 않아도 일상을 공유하며 즐거운 SNS 활동을 할 수 있습니다. 글과 사진과 함께 게시물을 작성하여 자신의 일상을 공유할 수 있습니다. 다른 사용자를 팔로우하면 유저가 올린 게시물을 홈 피드에서 소식을 확인할 수도 있습니다. 또한 다른 사용자와 메시지를 주고 받을 수 있습니다.
피드를 구경하다가 마음에 드는 게시물을 발견했다면 좋아요를 누를 수 있고 댓글을 남기거나 공유를 할 수도 있습니다.
1. 프로젝트 설명
‘가치를 지켜라’라는 의미를 담은 가지마켓은 바자회 또는 나눔과 기부 관련 정보를 홍보하는 SNS입니다. 사용자는 글과 사진을 함께 첨부하여 포스터나 행사 후기 등을 손쉽게 공유할 수 있습니다. 또한, 다른 사용자를 팔로우하면 그들이 올린 게시물을 홈 피드에서 확인할 수 있습니다.
상품 등록을 통해 자신에게 소중한 물건이지만 이제는 잘 사용하지 않는 애장품이나 튼튼한데 사용하지 않는 물건들을 거래할 수도 있습니다. 이렇게 가지마켓을 활용하여 물건들을 재활용하면서 환경과 경제적으로도 유익함을 누릴 수 있습니다.
가지마켓은 더 나아가, 나눔의 정신을 실천하고 사회적 가치를 실현하는데 기여할 수 있는 소중한 플랫폼입니다. 함께 가치를 지켜가며 더 나은 세상을 만들어가보세요.
2. 디자인(피그마 링크)
3. 요구사항 명세
3.0 가지마켓 API
•
제공기능
◦
채팅, sns로그인을 제외한 요구사항 전부 제공
3.1 필수 과제
디자인(피그마)를 참고하여 모든 페이지의 UI 구현해야 합니다.
게시글 CRUD와 회원가입, 로그인 기능은 필수 과제입니다.
3.1.1 splash
•
서비스 접속 초기화면입니다.
•
splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
◦
로그인을 하지 않은 경우 : 로그인 화면
◦
로그인이 되어 있는 경우 : 가지마켓 피드
3.1.2 로그인
•
로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
•
SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다.
•
로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
•
이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
•
로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
3.1.3 회원가입
•
로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
•
회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
•
이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
•
프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
◦
프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
◦
사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
◦
계정 ID는 중복이 불가합니다.
◦
프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.
3.1.4 가지마켓 피드(홈 화면)
•
가지마켓 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.
•
가지마켓 피드에는 자신이 팔로우한 사용자의 게시글만 확인할 수 있습니다.
•
팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.
3.1.5 검색
•
가지마켓 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.
•
사용자 이름을 검색할 수 있는 페이지입니다.
•
필수 과제에서는 검색 기능은 구현하지 않습니다. 마크업만 구현해 보세요.
3.1.6 사용자 프로필 페이지
•
사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
•
사용자 정보 하단에는 팔로우 버튼이 있습니다. 팔로우 버튼을 클릭하면 언팔로우 버튼으로 바뀌어야 합니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
•
팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
•
판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
•
게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
•
또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.
•
나의 프로필 페이지일 경우
◦
프로필 수정 버튼과 상품 등록 버튼이 표시됩니다.
◦
판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다. (단, 나의 프로필 페이지가 아닐 경우 상품을 클릭하면 바로 상품 판매 사이트로 이동됩니다.)
3.1.7 팔로워, 팔로잉 목록
•
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
•
목록은 사용자 프로필 사진, 이름, 계정 ID, 팔로우(또는 취소) 버튼으로 구성됩니다.
•
내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다. 단, 팔로우 기능은 구현하지 않습니다. 버튼의 변화만 구현하세요.
3.1.8 내 프로필 수정
•
나의 프로필 페이지에서 프로필 수정 버튼을 클릭하면 프로필을 수정할 수 있는 페이지가 나타납니다.
•
입력창에 대한 명세는 회원가입에서의 프로필 설정과 동일합니다. 유효성 검사가 통과되지 않을 경우 저장 버튼이 활성화되지 않습니다.
3.1.9 상품 등록
•
나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품을 등록할 수 있는 페이지가 나타납니다.
•
상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
•
상품명은 2~15자 이내로 입력되게 하고, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.
3.1.10 게시글 댓글 페이지
•
게시글 하단에 말풍선 아이콘을 클릭하면 댓글을 확인하고 입력할 수 있는 페이지가 나타납니다.
•
댓글 입력창에 텍스트를 입력하면 게시 버튼이 활성화됩니다.
3.1.11 게시글 작성 페이지
•
게시글을 작성할 수 있는 페이지로, 하단 메뉴바에서 게시글 작성 을 클릭하면 표시됩니다.
•
글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
•
사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다.
◦
기본 과제 : 한 장만 업로드 가능하도록 구현할 것.
◦
도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.
3.1.12 채팅 목록
•
채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.
•
현재 대화가 진행 중인 채팅 목록이 표시됩니다.
•
내가 읽지 않은 메시지가 있는 채팅방인 경우 프로필 사진 좌측 상단에 작은 원으로 표시됩니다.
3.1.13 채팅방
•
채팅 목록과 채팅방은 마크업 구현 및 스타일 적용만 진행합니다.
•
채팅 목록에서 목록 아이템을 클릭하면 해당 채팅방이 나타납니다.
•
채팅 기능은 구현하지 않습니다.
•
채팅 입력창에서 텍스트가 입력되면 전송 버튼이 활성화됩니다.
•
이미지 버튼을 클릭하고 이미지를 선택하면 전송 버튼이 활성화됩니다.
•
채팅방 상단 우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.
3.1.14 하단 탭 메뉴
•
하단 탭 메뉴는 홈, 채팅, 게시물 작성, 프로필 4개의 메뉴로 구성되어 있습니다.
•
모든 페이지는 페이지 경로에 해당하는 탭 메뉴가 활성화됩니다.
3.1.15 좋아요 버튼
•
게시글이 나타나는 모든 페이지에 해당합니다.
•
게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.
•
빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.
•
좋아요 기능은 구현하지 않습니다.
3.1.16 모달 버튼
헤더
게시글 상단
•
우측 버튼을 클릭하면 아래와 같은 모달이 화면 하단에 나타납니다.
◦
헤더에 있는 버튼을 클릭하면 설정 및 개인정보와 로그아웃이 나타납니다.
•
게시글 우측 상단에 위치한 버튼을 클릭했을 경우
◦
내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다.
◦
다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.
.png&blockId=98e60907-2433-471b-a46d-2923a6603ed1)
내가 작성한 게시글일 경우
다른 사용자가 작성한 게시글일 경우
•
댓글 우측 상단에 위치한 버튼을 클릭했을 경우
◦
내가 작성한 댓글일 경우 : 삭제 버튼이 나타납니다.
◦
다른 사용자가 작성한 댓글일 경우 : 신고하기 버튼이 나타납니다.
•
로그아웃, 삭제, 신고 버튼을 누르면 확인 메시지 모달창이 나타나야 하고, 취소 버튼을 누르면 모달은 사라집니다.
3.2 선택(도전) 과제
싱글 페이지 웹 구현은 선택 과제입니다.
3.2.1 팔로우
•
사용자 정보 하단에는 팔로우 버튼이 있습니다. 내가 팔로우 한 사용자일 경우 언팔로우 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
•
팔로우 목록에는 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.
•
팔로우 버튼을 클릭하면 팔로잉 목록에 해당 사용자가 추가됩니다. 취소 버튼을 클릭하면 팔로잉 목록에서 해당 사용자가 삭제되어야 합니다.
•
사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
•
팔로워 및 팔로잉 목록에 내가 표시될 경우 팔로우 버튼은 나타나지 않습니다.
3.2.2 좋아요
•
게시글이 나타나는 모든 페이지에 해당합니다.
•
게시글 하단에는 하트 모양에 좋아요 버튼이 있습니다.
•
빈 하트를 클릭하면 색이 칠해진 하트로 변하고, 색이 칠해진 하트를 누르면 빈 하트로 변합니다.
•
좋아요 개수는 카운트 되어 하트모양 우측에 표시됩니다.
3.2.3 댓글
•
댓글 삭제 및 신고하기 기능을 구현합니다.
•
댓글 작성이 현재 시간으로 부터 몇 초, 분, 시간 전에 작성되었는지 표시합니다.
•
댓글 개수는 카운트 되어 말풍선 아이콘 우측에 표시됩니다.
3.2.4 검색
•
가지마켓 피드 상단에 돋보기 버튼(검색 버튼)을 클릭하면 표시되는 페이지입니다.
•
사용자 이름과 계정을 검색할 수 있는 페이지입니다. 입력창에 텍스트를 입력하면 해당하는 사용자가 나오도록 합니다.
•
검색어와 같은 단어에는 보라색 글씨가 표시됩니다.
3.2.5 게시글 작성 페이지(이미지 업로드 관련)
•
사진은 우측 하단 버튼을 클릭하면 업로드할 수 있습니다.
◦
기본(필수) 과제 : 한 장만 업로드 가능하도록 구현할 것.
◦
도전 과제 : 여러 이미지 업로드, 단 최대 3장까지만 업로드 가능하도록 구현할 것.
