⏱ 안녕하세요, 60’’ Market 입니다!

🔗 배포 링크

💳  서비스 이용을 위한 계정

• 📧 Email : 60@market.com
• 🔐 PW : 60market

📆 프로젝트 기간 :

• 7월 4일 ~ 7월 29일 (팀) 페이지, 기능 구현
• 8월 1일 ~ 12월 1일 (개인) 기능 추가, 리팩토링

💡 INTRO

⏱ 60'' 마켓은 60분 의미를 내포하고 있습니다.

😵‍💫 바쁘다 바빠 현대사회! 몇 번의 터치로 사용자에게 필요한 시간만큼 거래 할 수 있는 온라인 플랫폼 입니다.

💬 구매자는 판매자에게 채팅을 보내 거래를 성사할 수 있습니다.

👥 모든 서비스 사용자는 판매 중인 시간을 구매할 수 있고, 남는 시간을 판매할 수 있습니다.

🙌 또한, 자원 봉사를 위해 시간을 나눔할 수 있습니다.

💜 관심 있는 사용자를 팔로우 할 수도 있고 마음에 드는 게시물에 좋아요를 누르고, 댓글을 달 수도 있습니다.

❗️Team Members

박도겸	임홍렬	전유진	최승수
moeyg	Hongryeoll	ujin16	aydenote

🙌 Role

🧑🏻‍💻 박도겸
splash, 자동 로그인, 로그인, 회원가입, 프로필 설정, 채팅, 에러, 로딩

🧑🏻‍💻 전유진
홈피드, 검색, 좋아요, 게시물 수정, 게시물 신고

🧑🏻‍💻 최승수
내 프로필 / 상대방 프로필, 프로필 수정, 팔로잉 / 팔로우, 게시물 삭제, 상품 삭제, 로그아웃

🧑🏻‍💻 임홍렬
상품등록, 게시글 등록, 게시글상세페이지, 댓글/삭제/신고

⚙️ Stack

🔷 Front : HTML, CSS, Vanilla JS
🔶 Back : 제공된 API 사용
📢 Communication : Notion, Discord, Git-flow

❓ Vanilla JS 로 구현 이유
: 빠른 시장 변화 속에서도 JS 기본 지식이 탄탄한 개발자는 언제나 주도적인 개발을 할 수 있다고 생각했습니다.

🎨 Figma

🧾 요구사항 명세

[기능]

🔐 인증 : 토큰 기반 로그인, 회원가입, 프로필 설정, 유효성 평가

🌌 게시글 : 게시글 목록, 게시글 등록/수정/삭제, 다중 이미지 파일 업로드/수정/미리보기

🛒 상품 : 상품 목록, 상품 등록/수정/삭제, 이미지 파일 업로드/수정/미리보기, 유효성 평가

💬 댓글 : 댓글 등록/삭제

🔍 검색 : 유저 검색

🤝 follow / unfollow : 유저 팔로우/언팔로우 (구현 예정)

💜 좋아요 : 게시물 좋아요/취소

[UI Interaction]

🌊 splash : 로그인 X - 로그인 화면 / 로그인 O - 홈 피드

🎞 이미지 슬라이드 : 커스텀스크롤 구현

🔆 모달 : 애니메이션 키프레임

☑️ 버튼 활성화 : 조건 만족시 활성화

✨ Feat : 구현 기능

0. splash	1. 회원가입

2. 로그인	3. 프로필 설정

4. 자동 로그인	5. 검색

6. 홈 피드	7. 좋아요

8-1. 게시물 등록	8-2. 게시물 수정

8-3. 게시물 삭제	8-4. 게시물 댓글

8-5. 게시글 댓글 삭제	9-1. 판매 상품 등록

9-2. 판매 상품 삭제	10-1. 사용자 프로필 & 수정

10-2. 타 유저 프로필	11. 팔로워 팔로잉 목록

12. 채팅	13. 로그아웃

14. 로딩

🐛 Fix : 개발 이슈

🧑🏻‍💻 최승수

• 이슈 : 내 프로필과 다른 사람 프로필 페이지 마크업 및 기능이 유사하여 "중복되는 코드가 많다" 라고 생각했습니다.
  해결 : 내 프로필과 다른 사람 프로필 페이지 마크업 및 기능 유사하여 쿼리스트링과 로컬 스토리지에서 accountname을 가져와 비교 후 하나의 html 파일에서 마크업 및 기능 구현.

      if (userProfile.accountname === myAccountName) {
      setMyProfile(userProfile);
    } else {
      setYourProfile(userProfile);
    }
  

  myAccountName은 로컬스토리지에 저장되어 있는 로그인된 계정이고 userProfile.accountname은 쿼리스트링 user ID를 API에 전송하여 얻은 해당 유저의 ID입니다. if 문으로 내 프로필인지, 다른 사람 프로필인지 확인하고 페이지 구성하는 함수를 호출합니다. 각 함수에서는 내 프로필 또는 다른 사람 프로필에서만 있는 마크업을 진행하고 동일한 마크업은 HTML로 작성하였습니다.
• 이슈 : 프로필 수정 페이지에서 이미지 변경 없을 경우 기존 이미지 URL 주소가 변경되는 문제가 있었습니다.
  해결 : 이미지 변경이 없다면 document.querySelector("").src와 if문을 사용하여 기존 이미지를 가져와 전송하였습니다.

    if (imageUrl === undefined) {
    imageUrl = profileImg.src;
  }
  

  이미지를 브라우저에 업로드 했을 때, 이미지에 대한 URL 정보를 imageUrl 변수에 저장하게 됩니다. 만약, 브라우저에 이미지를 업로드 하지 않았다면 imageUrl 변수에 들어있는 정보는 선언 그대로인 undefined가 되기 때문에 해당 이미지의 src를 가져와 API 에 전송하게 되어 기존 이미지를 그대로 사용할 수 있게 됩니다.
  
  

🌱 Folder Tree

디렉토리 구조

⏱ 60market
┃
┣ 📝 README.md
┣ 📝 .gitignore
┣ 📝 index.html
┣ 🟡 index.js
┃
┣ 📂 asset
┃ ┣ 📂 font
┃ ┃ ┗ 🎨 font.css
┃ ┗ 📂 images
┃   ┣ 📂 icons
┃   ┣ 📂 navIcon
┃   ┣ 📂 postImage
┃   ┣ 📷 timi.svg
┃   ┣ 📷 favicon.ico
┃   ┗ 📷 그 외 이미지 파일
┃
┣ 📂 css
┃	 ┣ 🎨 reset.css
┃	 ┣ 🎨 styles.css
┃	 ┣ 🎨 variable.css
┃	 ┣ 📂 components
┃	 ┃ ┣ 🎨 chatEnter.css
┃	 ┃ ┣ 🎨 headerBar.css
┃	 ┃ ┣ 🎨 modal.css
┃	 ┃ ┣ 🎨 modalAlert.css
┃	 ┃ ┣ 🎨 navBar.css
┃	 ┃ ┗ 🎨 userList.css
┃	 ┗ 📂 screens
┃	   ┣ 🎨 addProduct.css
┃	   ┣ 🎨 chat.css
┃	   ┣ 🎨 chatting.css
┃	   ┣ 🎨 editProfile.css
┃	   ┣ 🎨 home.css
┃	   ┣ 🎨 homeNotFollow.css
┃	   ┣ 🎨 loadding.css
┃	   ┣ 🎨 main.css
┃	   ┣ 🎨 post.css
┃	   ┣ 🎨 postUpload.css
┃	   ┣ 🎨 profile.css
┃	   ┣ 🎨 profileFollow.css
┃	   ┗ 🎨 register.css
┃
┣ 📂 pages
┃	 ┣ 🟡 chatPage.js
┃	 ┣ 🟡 chattingPage1.js
┃	 ┣ 🟡 chattingPage2.js
┃	 ┣ 🟡 chattingPage3.js
┃	 ┣ 🟡 chattingPage4.js
┃	 ┣ 🟡 errorPage.js
┃	 ┣ 🟡 introPage.js
┃	 ┣ 🟡 footer.js
┃	 ┣ 🟡 homePage.js
┃	 ┣ 🟡 postPage.js
┃	 ┣ 🟡 loginPage.js
┃	 ┣ 🟡 mainPage.js
┃	 ┣ 🟡 postUploadPage.js
┃	 ┣ 🟡 profileRegisterPage.js
┃	 ┣ 🟡 productPage.js
┃	 ┣ 🟡 searchPage.js
┃	 ┗ 🟡 signUpPage.js
┃
┗ 📂 script
	 ┣ 🟡 addProduct.js
	 ┣ 🟡 editProfile.js
	 ┣ 🟡 home.js
	 ┣ 🟡 modal.js
	 ┣ 🟡 apiModule.js
	 ┣ 🟡 intro.js
	 ┣ 🟡 heartBtn.js
	 ┣ 🟡 common.js
	 ┣ 🟡 logIn.js
	 ┣ 🟡 post.js
	 ┣ 🟡 postUpload.js
	 ┣ 🟡 profile.js
	 ┣ 🟡 profileFollow.js
	 ┣ 🟡 registerProfile.js
	 ┣ 🟡 search.js
	 ┗ 🟡 signUp.js