boostcampwm-2022/Web02-XOXO

my feed, our memory! XOXO를 통해 우리만의 추억을 공유해보세요 📷

📸 남이 꾸며주는 내 피드!

my feed, our memory!

XOXO를 통해 우리만의 추억을 공유해보세요 😉

🔗 바로가기

🎨 Figma / 📃 Wiki / 💭 Notion / 🎄 배포 링크 / 🎞 데모 영상 / 👩‍🏫 발표 영상

🚊 #신분당선#자만추

J095 백규현 | J114 양은서 | J132 윤정민 | J212 최현서

👩‍💻 저희가 했던 기술적인 도전들이 궁금하시다면?!

이 곳에서 확인하실 수 있습니다!

🎄서비스 소개

일반 SNS와 달리 상대방이 내 피드를 꾸며주는🎨 서비스 입니다.

각 피드는 생성시에 최초로 공개일 설정을 할 수 있으며,

해당 공개일이 되기 전까지는 포스팅을 열람할 수 없습니다.

두근두근! 친구들이 꾸며준 내 피드를 설레는 마음으로 기다려 보세요.

✨ 피드 생성

• 한 사용자가 여러개의 피드를 생성할 수 있습니다.
• 피드는 개인 피드와 그룹 피드로 나뉘며, 생성할 때 타입을 선택할 수 있습니다.
• 공개일은 현재 날짜를 기준으로 내일부터 설정할 수 있으며, 이후에 수정은 불가능 합니다.

👤 개인 피드	👥 그룹 피드

🎈 피드 공유

• 내 피드 공유하기 버튼을 누르게 되면, 자동으로 카카오톡과 연동됩니다.
  • 카카오 메시지 API 를 이용해 직접 메시지 템플릿을 설정하여 구현하였습니다.

💌 피드 공유하기	📮 피드 공유받기

🎉 포스팅 작성

🎉 포스팅 작성	설명
	포스팅을 작성할 수 있는 경우는 두가지가 존재합니다. 그룹 피드 주인과 초대받은 사람 모두 작성할 수 있습니다. 개인 피드 주인은 작성하지 못하며, 해당 링크를 들어간 주인이 아닌 사용자 모두 작성할 수 있습니다. 포스팅은 최대 10장의 사진을 올릴 수 있습니다. 그중 맨 앞의 사진이 자동으로 썸네일로 설정되며, 이는 pixelate 되어 보여집니다. 이미지는 서버를 통해 object storage에 올라가게 되며, 서버와 object storage의 부하를 줄이기 위해, 클라이언트에서 자체적으로 모든 이미지를 500kb 이하로 압축시킵니다.

♥ 포스팅 리스트

♥ 포스팅 리스트

설명

Intersection Observer API를 이용한 무한스크롤을 구현하였습니다. 기본적으로 각 포스팅의 썸네일은 15개씩(혹은 14개씩) 가져옵니다. 만약 맨 하단의 bottomElement가 사용자에게 보여지면, 그것을 감지해서 자동으로 새로운 데이터를 fetch 해 옵니다. 게시물을 모두 가져오면, 하단의 bottomElement 는 사라짐으로써 무한정으로 fetch 를 시도하지 않도록 하였습니다. Image Optimizer 를 이용해 각 사용자의 화면 크기에 맞는 썸네일을 받아오도록 하였습니다. level5 (width>500px) 썸네일 크기 (240px*240px) level4 (500px>width>400px) 썸네일 크기 (180px*180px) level3 (300px>width) 썸네일 크기 (120px*120px)

🎁 포스팅 열람

⏰공개일이 지나기 전	🤩 공개일이 지난 후
❌ 포스팅을 열람할 수 없습니다. 남은 시간을 알려주는 토스트를 띄웁니다. 클라이언트에서 시간을 변조해 포스팅을 보는 행위를 방지하기 위해, 포스팅을 클릭할 때마다, 서버 시간을 확인하여 검사하였습니다.	⭕ 포스팅을 열람할 수 있습니다. 최대 10장의 이미지가 캐러셀의 형태로 보여집니다. 더 좋은 UX와 성능을 위해 LQIP방식을 도입하였습니다.

기술스택