- 📧 Email : 60@market.com
- 🔐 PW : 60market
⏱ 60'' 마켓은 60분 의미를 내포하고 있습니다.
😵💫 바쁘다 바빠 현대사회! 몇 번의 터치로 사용자에게 필요한 시간만큼 거래 할 수 있는 온라인 플랫폼 입니다.
💬 구매자는 판매자에게 채팅을 보내 거래를 성사할 수 있습니다.
👥 모든 서비스 사용자는 판매 중인 시간을 구매할 수 있고, 남는 시간을 판매할 수 있습니다.
🙌 또한, 자원 봉사를 위해 시간을 나눔할 수 있습니다.
➕ 관심 있는 사용자를 팔로우 할 수 있습니다.
💜 마음에 드는 게시물에 좋아요를 누르고, 댓글을 달 수 있습니다.
| 🧑🏻💻 박도겸 |
|---|
| splash, 자동 로그인, 로그인, 회원가입, 프로필 설정, 채팅, 에러, 로딩 |
| 🧑🏻💻 전유진 |
|---|
| 홈피드, 검색, 좋아요, 게시물 수정, 게시물 신고 |
| 🧑🏻💻 최승수 |
|---|
| 내 프로필 / 상대방 프로필, 프로필 수정, 팔로잉 / 팔로우, 게시물 삭제, 상품 삭제, 로그아웃 |
| 🧑🏻💻 임홍렬 |
|---|
| 상품등록, 게시글 등록, 게시글상세페이지, 댓글/삭제/신고 |
🖥 Front : HTML, CSS, Vanilla JS
🎛 Back : 제공된 API 사용
📢 Communication : Notion, Discord, Git-flow
❓ Vanilla JS 로 구현 이유
: 바닐라 자바스크립트를 잘해야 프론트엔드 개발자다 ! 생각했습니다.
: 빠른 시장 변화 속에서도 JS 기본 지식이 탄탄한 개발자는 언제나 주도적인 개발을 할 수 있다고 생각했습니다.
🔐 인증 : 토큰 기반 로그인, 회원가입, 프로필 설정, 유효성 평가
🌌 게시글 : 게시글 목록, 게시글 등록/수정/삭제, 다중 이미지 파일 업로드/수정/미리보기
🛒 상품 : 상품 목록, 상품 등록/수정/삭제, 이미지 파일 업로드/수정/미리보기, 유효성 평가
💬 댓글 : 댓글 등록/삭제
🔍 검색 : 유저 검색
🤝 follow / unfollow : 유저 팔로우/언팔로우 (구현 예정)
💜 좋아요 : 게시물 좋아요/취소
🌊 splash : 로그인 X - 로그인 화면 / 로그인 O - 홈 피드
🎞 이미지 슬라이드 : 커스텀스크롤 구현
🔆 모달 : 애니메이션 키프레임
☑️ 버튼 활성화 : 조건 만족시 활성화
| 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. 로딩 |
|---|
- 422 에러 : 인터넷 사용 기록 삭제 후, 가입 재시도로 성공했다.
- 프로필 이미지 업로드 미리보기 구현
:URL.createObjectURL(url)을 사용해서 구현 중, 이미지를 넣어도 미리보기가 되지 않았다. url 부분에 src가 들어가야 한다는 것을 알고 이미지.src로 해결했다. 또한, let 변수로 프로필 이미지를 두어 이미지 url 값을 변화할 수 있게 했다.
URL.createObjectURL(url)의 단점은 메모리가 계속해서 url을 가지고 있기 때문에 누수가 일어난다는 점이 있다. JavaScript의 경우, malloc을 할 수 없기 때문에 프로필 이미지를 서버에 보낸 후,URL.revokeObjectURL(url)를 통해 메모리 해제를 하여 누수를 방지했다. - 베이직 프로필
: 클래스로 구역을 나누어 놓았기 때문에, 베이직 프로필을 이미지 업로드 클래스에 넣을 수가 없었다. 이미지를 설정하지 않으면 서버에서 지정해 놓은 이미지로 전환이 되는데, 팀 내에서 설정한 베이직 프로필을 담아 보내고 싶었다. 따라서 설정한 이미지가 undefined일 경우 베이직 이미지의 filename을 넣어(profileImg = '1658636863237.png') 해결했다. - 서버에 이미지 보내기
: 이미지를 주소 자체로 서버에 전송이 되지 않아서new FormData()를 이용해 이미지를 form 형식으로 전환한 후, post 할 때, body에 값을 넣어주었다. - 정규 표현식 - 폼 입력 시, 예외 문자 처리 (
const regExp = /^[a-zA-Z0-9_.]{2,10}$/)
: 처음에regExp = /^[a-zA-Z0-9_.]/으로 설정했는데, 예외 처리한 문자를 입력해도 아무런 반응이 없었다. 그래서 {2, 10} 으로 최대 최솟값을 지정해 예외 처리를 할 수 있었다.
- 이슈 : 댓글작성시간이 방금 입력해도 9시간전으로 나오는 문제.
해결 : api 댓글 작성시간이 utcstring기준이여서 kst기준으로 만드려고 9시간 더해줘서 해결. - 이슈 : 게시글 등록시에 이미지 없이 업로드하면 엑스박스가 나타나는 문제.
해결 :jsonImgTags == "" ? "" :삼항연사자를 사용하여postDetaileImgContent의 컴포넌트를 생성하지 않게 만들어 해결. - 이슈 : 게시글 등록시 이미지 3개를 업로드해야 하는데 1개만 업로드 되는 문제.
해결 : 프로세스를 변경하여 해결.
- 기존 프로세스 : 브라우저에 이미지 파일 업로드 -> 이미지 url 받아오기 -> 받아온 이미지 URL을 변수에 저장 -> API에 업로드 버튼 클릭 -> 다시 이미지 받아오기 -> 받아온 이미지 URL을 변수에 또 저장 -> API에 데이터 전송
- 변경 프로세스 : 브라우저에 이미지 파일 업로드 -> API에 업로드 버튼 클릭 -> 이미지 URL 받아오기 -> 변수에 이미지 URL 저장 -> API에 데이터 전송
- 기존 프로세스 : 브라우저에 이미지 파일 업로드 -> 이미지 url 받아오기 -> 받아온 이미지 URL을 변수에 저장 -> API에 업로드 버튼 클릭 -> 다시 이미지 받아오기 -> 받아온 이미지 URL을 변수에 또 저장 -> API에 데이터 전송
- 이슈 : 상품등록시 가격부분에 숫자만 입력되게 포맷해주고, 천단위 마다
','를 넣어줘야하는데','가 들어가지않는 문제.
해결 :comma(uncomma(addProductPrice.value));comma(천단위마다','를 넣어주는 함수)안에 uncomma(숫자만 입력되게하는 함수)를 넣어 주어 해결.
⚙️업데이트 예정
- 이슈 : 내 프로필과 다른 사람 프로필 페이지 마크업 및 기능 유사.
해결 : 내 프로필과 다른 사람 프로필 페이지 마크업 및 기능 유사하여 쿼리스트링과 로컬 스토리지에서accountname을 가져와 비교 후 하나의 html 파일에서 마크업 및 기능 구현. - 이슈 : 프로필 수정 페이지에서 이미지 변경 없을 경우 기존 이미지 전송
해결 : 이미지 변경이 없다면document.querySelector("").src와if문을 사용하여 기존 이미지를 가져와 전송.
⏱ 60market
┃
┣ 📝 README.md
┣ 📝 .gitignore
┣ 📄 index.html
┃
┣ 📂 asset
┃ ┣ 📂 font
┃ ┣ 📂 gif
┃ ┗ 📂 image
┃ ┣ 📂 icon
┃ ┣ 📂 navIcon
┃ ┣ 📂 postImage
┃ ┣ timi.svg
┃ ┣ favicon.ico
┃ ┗ 그 외 이미지 파일
┃
┣ 📂 css
┃ ┣ 🎨 reset.css
┃ ┣ 🎨 styles.css
┃ ┣ 🎨 variable.css (root 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
┃ ┣ 📄 addProduct.html
┃ ┣ 📄 chat.html
┃ ┣ 📄 chatting.html
┃ ┣ 📄 editProfile.html
┃ ┣ 📄 error.html
┃ ┣ 📄 home.html
┃ ┣ 📄 intro.html
┃ ┣ 📄 loadding.html
┃ ┣ 📄 logIn.html
┃ ┣ 📄 post.html
┃ ┣ 📄 postUpload.html
┃ ┣ 📄 profile.html
┃ ┣ 📄 profileFollow.html
┃ ┣ 📄 registerProfile.html
┃ ┣ 📄 search.html
┃ ┗ 📄 signUp.html
┃
┗ 📂 script
┣ 🟡 addProduct.js
┣ 🟡 editProfile.js
┣ 🟡 home.js
┣ 🟡 index.js
┣ 🟡 intro.js
┣ 🟡 logIn.js
┣ 🟡 post.js
┣ 🟡 postUpload.js
┣ 🟡 profile.js
┣ 🟡 profileFollow.js
┣ 🟡 registerProfile.js
┣ 🟡 search.js
┗ 🟡 signUp.js