Home

페이지 상세 설명

1) 홈

🎨 splash

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

Splash

🎨 로그인 페이지

• 🔗 URL : https://susumarket.shop/login
• 로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
• 로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
• 로그인 유효성 검사 - 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다. (이때, 이메일은 유효한 이메일 주소, 비밀번호는 최소 6자리 이상이어야 합니다.)
• 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
• SNS(카카오톡, 구글, 페이스북) 로그인은 구현되어있지 않습니다.

로그인 페이지

🎨 회원가입 페이지

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

회원가입

🎨 피드 페이지

• 🔗 URL : https://susumarket.shop/post
• 수수마켓 피드는 사용자들이 올린 게시물들이 표시되는 페이지입니다.
• 수수마켓 피드는 사용자가 팔로우한 유저의 게시글만 확인할 수 있습니다.
• 팔로우한 유저가 없을 경우 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요"라는 문구와 버튼이 함께 표시됩니다.
• 작성자 정보 옆 더보기 버튼 클릭 시 모달창이 나타나며, 작성자라면 모달창 메뉴에 삭제, 수정, 게시물 상세 페이지로 이동 메뉴가 활성화되고, 작성자가 아니라면 메뉴에 신고 메뉴가 활성화됩니다.

피드 페이지

🎨 검색 페이지

• 🔗 URL : https://susumarket.shop/search
• 수수마켓 피드에 돋보기 버튼과 검색하기 버튼을 클릭하면 표시되는 페이지입니다.
• 사용자 이름 검색이 가능합니다
• 리스트 클릭시 클릭된 사용자프로필 페이지로 이동합니다.

검색 페이지

🎨 404 페이지

• 🔗 URL : https://susumarket.shop/404
• react-router-dom를 통해 일치하는 경로가 없다면 404 페이지가 나오도록 구현하였습니다.

404 페이지

2) 채팅

🎨 채팅 페이지

• 🔗 URL : https://susumarket.shop/chatList
• 현재 대화가 진행 중인 채팅 목록이 표시됩니다.
• 채팅 목록을 클릭하면 해당되는 채팅방이 나타납니다.
• 채팅 기능은 구현되지 않았습니다.

채팅 페이지

3) 게시글

🎨 게시글 작성 페이지

• 🔗 URL : https://susumarket.shop/post/upload
• 게시글을 작성할 수 있는 페이지입니다. 하단 메뉴바에서 +게시물작성 버튼을 클릭하면 이동합니다.
• 게시글 입력하기에 글을 입력합니다.
• 글 작성과 이미지 업로드를 하지 않으면 업로드 버튼이 비활성화 됩니다.
• 사진은 우측 하단 그림 버튼을 클릭하면 업로드할 수 있으며, 최대 3장까지 업로드 가능합니다.
• 이미지 형식에 맞지않는 이미지를 업로드시 상단에 경고 토스트창이 표시됩니다.
• 이미지 업로드시 이미지는 imgCompression 라이브러리를 통해 압축된 이미지가 업로드 됩니다.

게시글 작성 페이지

🎨 게시글 상세 페이지

• 🔗 URL : https://susumarket.shop/post/649cf00bb2cb205663bf33ff
• 게시글을 상세하게 볼 수 있는 페이지입니다.
• 게시글 작성자 정보 옆에 위치한 더보기 버튼을 클릭했을 시, 모달 메뉴가 표시됩니다.
• 모달 메뉴 속 게시물 상세 페이지로 이동 버튼 클릭시, 게시물의 내용과 댓글이 나타납니다.
• 상세페이지에서 게시물의 더보기 버튼 클릭 시 게시물의 작성자의 경우 모달창 메뉴에 삭제, 수정 메뉴가 활성화 되고, 작성자가 아닐 경우에는 신고 메뉴가 활성화됩니다.
• 좋아요 버튼을 누르면 하트 아이콘의 색상이 채워지며 좋아요 숫자가 증가합니다.
• 좋아요 버튼이 활성화된 상태에서 다시 누르면 좋아요 버튼이 비활성화 되며, 좋아요 숫자가 감소합니다.
• 자기 자신의 게시물에 좋아요 버튼을 누르면 "자기 글은 좋아요 할 수 없습니다!"라는 문구가 상단 경고 토스트창에 표시됩니다.
• 하단 댓글 작성 입력창에 댓글을 입력하여 댓글을 작성할 수 있습니다.

게시글 상세 페이지

🎨 게시글 수정, 신고, 삭제

• 🔗 URL : https://susumarket.shop/post/649cf00bb2cb205663bf33ff/edit
• 게시글을 수정할 수 있는 페이지입니다.
• 게시글 우측 상단에 위치한 버튼을 클릭했을 시, 모달 메뉴가 표시됩니다. (내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다. 다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.)
• 내가 작성한 게시글의 상단 버튼을 누른 뒤 모달 메뉴 속 수정 버튼을 누른다면 해당 게시글 수정페이지로 전환됩니다.
• 수정하고자 하는 내용으로 바꾼 뒤, 업로드 버튼을 누릅니다.
• 게시글 수정시 내용이 없거나 수정한 내용이 없다면 업로드 버튼이 활성화 되지않습니다.
• 이미지 버튼을 클릭하여 이미지를 최대 3장까지 업로드 할 수 있습니다.
• 이미지 형식에 맞지않는 이미지를 업로드시 상단에 경고 토스트창이 표시됩니다.
• 이미지 업로드시 이미지는 imgCompression 라이브러리를 통해 압축된 이미지가 업로드 됩니다.

게시글 수정	게시글 삭제	게시글 신고

🎨 게시글 댓글 기능

• 게시글 상세 페이지에서 댓글을 작성할 수 있습니다.
• 댓글의 더보기 버튼 클릭 시 모달창이 열리며 댓글 작성자라면 모달창 메뉴의 삭제 메뉴를 활성화 하고, 댓글 작성자가 아니라면 신고 메뉴를 활성화 합니다.

댓글 기능

4) 프로필

🎨 마이 프로필 페이지

• 🔗 URL : https://susumarket.shop/profile
• 현재 접속중인 계정의 프로필을 보거나 다른 사용자의 프로필을 볼 수 있는 페이지입니다.
• 사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 사용자가 업로드한 게시글을 확인할 수 있습니다.
• 사용자 프로필 페이지에서 자신의 프로필 페이지가 아니라면 팔로우 언팔로우 버튼이 표시됩니다.
• 상품이 존재하지 않을 경우 "현재 상품이 존재하지 않습니다."라는 문구가 표시됩니다.
• 현재 접속중인 계정의 프로필을 보거나 다른 사용자의 프로필을 볼 수 있는 페이지입니다.
• 사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 사용자가 업로드한 게시글을 확인할 수 있습니다.
• 사용자 프로필 페이지에서 자신의 프로필 페이지가 아니라면 팔로우 언팔로우 버튼이 표시됩니다.
• 상품이 존재하지 않을 경우 "현재 상품이 존재하지 않습니다"라는 문구가 표시됩니다.
• 판매중인 상품을 클릭하면 모달창이 활성화 되며, 판매자라면 모달창 메뉴에 삭제, 수정, 상품 상세페이지로 이동 메뉴가 활성화 되며, 판매자가 아니면 모달창 메뉴에 신고, 상품 상세 페이지로 이동 메뉴가 활성화 됩니다.
• 사용자의 게시글이 존재하지 않으면 "현재 게시글이 존재하지 않습니다."라는 문구가 표시됩니다.
• 게시글에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
• 게시글에서 상단 작성자 정보 옆 더보기 버튼을 클릭 시 모달창이 활성화 됩니다.
• 게시글 작성자라면 모달창의 메뉴에 삭제, 수정, 게시물 상세 페이지로 이동 메뉴가 활성화되고, 게시글 작성자가 아니라면 신고, 게시물 상세 페이지로 이동 메뉴가 활성화 됩니다.

마이 프로필 페이지

🎨 프로필 수정 페이지

• 🔗 URL : http://susumarket.shop/profile/myinfo/edit
• 사용자의 프로필을 수정하는 페이지입니다.
• 변경사항이 없다면 수정 버튼이 비활성화 됩니다.
• 프로필 이미지, 사용자 이름, 계정 ID, 소개를 수정할 수 있습니다.
• 사용자 이름의 경우 2-10자 글자 수를 만족해야 합니다.
• 계정ID의 경우 중복을 허용하지 않습니다.
• 위 두 사항이 만족하지 않는다면 수정 버튼이 활성화 되지 않습니다.
• 이미지 형식에 맞지않는 이미지를 업로드시 상단에 경고 토스트창이 표시됩니다.
• 이미지 업로드시 이미지는 imgCompression 라이브러리를 통해 압축된 이미지가 업로드 됩니다.

프로필 수정 페이지

🎨 팔로워 페이지, 팔로잉 페이지

• 🔗 URL : https://susumarket.shop/profile/susu_test/followers , https://susumarket.shop/profile/susu_test/following
• 사용자 프로필 페이지에서 팔로워 및 팔로잉 수를 클릭하면 나타나는 페이지입니다.
• 목록은 사용자 프로필 사진, 이름, 계정 ID, 팔로우(또는 취소)버튼으로 구성됩니다.
• 내가 팔로우 한 사용자일 경우 취소 버튼이, 내가 팔로우 하지 않은 사용자일 경우에는 팔로우 버튼이 표시됩니다.

팔로워, 팔로잉 페이지

5) 판매 상품

🎨 상품 등록 페이지

• 🔗 URL : https://susumarket.shop/product/upload
• 나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품 등록 페이지로 이동합니다.
• 상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
• 상품명은 2~15자 이내로 입력 가능하며, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.
• 이미지 버튼을 클릭하여 이미지를 업로드 할 수 있습니다.
• 이미지 형식에 맞지않는 이미지를 업로드시 상단에 경고 토스트창이 표시됩니다.
• 이미지 업로드시 이미지는 imgCompression 라이브러리를 통해 압축된 이미지가 업로드 됩니다.

상품 등록 페이지

🎨 상품 수정 페이지

• 🔗 URL : https://susumarket.shop/product/64f53079b2cb205663595f34/edit
• 프로필 페이지에서 프로필 하단 상품 목록 중 수정하고자 하는 것을 클릭합니다.
• 클릭시, 모달이 등장하고 모달 메뉴의 수정을 클릭하면 상품 수정 창이 뜹니다.(본인 상품에만 해당됩니다. 다른 상품은 적용되지 않습니다.)
• 수정 후 저장 클릭시 수정 적용됩니다.
• 유효성 검사는 상품 등록 페이지와 동일합니다.
• 상품 수정시 내용이 없거나 수정한 내용이 없다면 업로드 버튼이 활성화 되지않습니다.
• 이미지 버튼을 클릭하여 이미지를 업로드 할 수 있습니다.
• 이미지 형식에 맞지않는 이미지를 업로드시 상단에 경고 토스트창이 표시됩니다.
• 이미지 업로드시 이미지는 imgCompression 라이브러리를 통해 압축된 이미지가 업로드 됩니다.

상품 수정 페이지

🎨 상품 삭제 페이지

• 🔗 URL : https://susumarket.shop/profile
• 프로필 페이지에서 프로필 하단 상품 목록 중 삭제하고자 하는 것을 클릭합니다.
• 클릭 시, 모달이 등장하고 모달 메뉴의 삭제를 클릭하면 상품 삭제 여부에 대한 창이 뜨며 삭제 클릭시 상품이 삭제됩니다.

상품 삭제 페이지

🎨상품 상세 페이지

• 🔗 URL : [https://susumarket.shop/product/64ae4c10b2cb205663f8f67b(https://susumarket.shop/product/64ae4c10b2cb205663f8f67b)
• 상품의 상세 정보(상품의 가격, 상품 설명, 상품제목) 나타내는 페이지입니다.
• 채팅하기 버튼을 누르면 채팅 페이지로 이동됩니다.

상품 상세 페이지

6) 캔버스

🎨 캔버스 페이지

• 🔗 URL : http://susumarket.shop/drawing
• 사용자가 그림판 처럼 그림을 그릴 수 있는 페이지입니다.
• 반응형과 모바일은 지원하지 않습니다.
• 왼편 색상 팔레트를 이용해 색상을 변경할 수 있으며, 상단의 color picker를 이용하여 원하는 색상을 직접 고를 수 도 있습니다.
• 오른편 버튼을 클릭하여 다양한 기능을 사용할 수 있습니다.
• 상단의 슬라이드 바를 통해 펜의 굵기를 조절할 수 있습니다.
• Fill 버튼을 누르면 채우기 기능이 활성화 됩니다. 캔버스 클릭 시 캔버스를 현재 선택한 색상으로 가득 채웁니다.
• Darw 버튼을 누르면 펜 기능이 됩니다. 캔버스 클릭 후 마우스 이동시 그림이 그려집니다.
• Destory 버튼을 누르면 캔버스가 초기화됩니다.
• Erase 버튼을 누르면 지우기 기능이 활성화 됩니다. 캔버스 클릭 후 마우스 이동시 해당 부분이 지워집니다.
• SaveImage 버튼을 누르면 현재 캔버스에 그린 이미지가 PC에 저장됩니다.
• Add Text에 원하는 글자를 넣고 더블 클릭시 해당 글자가 캔버스에 출력됩니다.
• AddPhoto 클릭 시 PC내의 이미지를 캔버스에 불러올 수 있습니다.

캔버스