HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
🐤
장현석팀
/
📱
소셜 네트워크 프로젝트
📱

소셜 네트워크 프로젝트

GitHub - prgrms-fe-devcourse/FEDC4_CUCUMIS_Pocojang: 🍐 현석팀 참외인력소 🍐
🍐 현석팀 참외인력소 🍐. Contribute to prgrms-fe-devcourse/FEDC4_CUCUMIS_Pocojang development by creating an account on GitHub.
GitHub - prgrms-fe-devcourse/FEDC4_CUCUMIS_Pocojang: 🍐 현석팀 참외인력소 🍐
https://github.com/prgrms-fe-devcourse/FEDC4_CUCUMIS_Pocojang
GitHub - prgrms-fe-devcourse/FEDC4_CUCUMIS_Pocojang: 🍐 현석팀 참외인력소 🍐
🎯
팀 목표 & 팀원들의 목표
 
API 및 요구사항
참외인력소 기획서
참외인력소 기획서
🗃️
컴포넌트 및 기능 정리
⚙️
프로젝트 세팅
👥
팀 규칙
🐾
URL 구조
📂
폴더 구조 및 변수명 협의
Redux Toolkit 사용법 정리
Redux Toolkit 사용법 정리
mui 사용법
mui 사용법
Input Validation
Input Validation

코드 리뷰

20230913 멘토님 코드리뷰
20230913 멘토님 코드리뷰

회고

🏅
프로젝트 주간 회고
참외 인력소 프로젝트 중간회고
참외 인력소 프로젝트 중간회고
참외 인력소 프로젝트 최종회고
참외 인력소 프로젝트 최종회고

발표 자료

🌱
중간 발표
🚀
최종 발표
발표 자료 준비
 
🛠️
QA 및 리팩토링 & 버그
 
 

기본 요구사항

사용자는 회원가입과 로그인을 할 수 있습니다.
사용자는 채널에 올라온 글을 볼 수 있습니다.
사용자는 가입자 목록을 볼 수 있습니다.
사용자는 가입자를 이름으로 검색을 할 수 있습니다.
사용자는 가입자의 정보를 볼 수 있습니다.
사용자는 포스트 혹은 가입자를 검색할 수 있습니다.
인증된 사용자는 자신의 정보를 변경할 수 있습니다.
인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
인증된 사용자는 채널에 포스트를 남길 수 있습니다.
인증된 사용자는 포스트를 좋아요 할 수 있습니다.
인증된 사용자는 포스트에 댓글을 남길 수 있습니다.
인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.
SPA 형태로 만들어주세요.
엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.

보너스 요구사항

  • 사용자는 현재 접속 중인 사용자를 볼 수 있습니다.
  • 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.
  • 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.
  • 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.
  • 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 이미지를 첨부할 수 있습니다. 파일 업로드를 구현해보세요.
  • 다크 모드를 적용해보세요.
 
api기능
 
 
  • 어드민→ 채널추가는 어드민계정으로
  • 인증→로그인, 회원 가입, 로그아웃, 인증 확인
  • 사용자→ 사용자 목록, 현재 접속 중인 사용자 목록, 특정 사용자 정보, 프로필 이미지 변경, 커버 이미지 변경,
  • 설정→ 내 정보 변경, 내 비밀번호 변경,
  • 채널→ 채널 목록, 특정 채널 정보,
  • 포스트→ 특정 채널의 포스트 목록, 특정 사용자의 포스트 목록, 특정 채널에 포스트 작성하기, 특정 포스트 상세 보기, 내가 작성한 포스트 수정하기, 내가 작성한 포스트 삭제하기,
  • 좋아요→ 특정 포스트 좋아요, 특정 포스트 좋아요 취소,
  • 댓글→ 특정 포스트에 댓글 달기, 특정 포스트에 작성한 내 댓글 지우기,
  • 알림→ 나의 알림 목록, 알림 확인 처리, 알림 생성(상대에게 알림 보내기, 댓글, 좋아요, 팔로우 메세지별로 각 알림),
  • 팔로우→ 특정 유저 팔로우, 특정 유저 언팔,
  • 메시지→ 나의 메시지함(소통한 유저목록),특정 사용자와 소통한 메시지 목록, 특정 사용자에게 메세지 전송, 메시지 확인 처리(특정 사용자와 나눈 메시지 읽음 처리),
  • 검색→ 사용자 검색, 전체 검색( 포스트, 사용자를 모두 검색),
 
 

사용자

{ "coverImage": String, // 커버 이미지 "image": String, // 프로필 이미지 "role": String, "emailVerified": Boolean, // 사용되지 않음 "banned": Boolean, // 사용되지 않음 "isOnline": Boolean, "posts": Post[], "likes": Like[], "comments": String[], "followers": [], "following": [ { "_id": "6169e91316cb2265df003c6d", "user": "6169e58216cb2265df003bf4", "follower": "6169e206aa57d952c6dc1edd", "createdAt": "2021-10-15T20:48:19.816Z", "updatedAt": "2021-10-15T20:48:19.816Z", "__v": 0 } ], "notifications": Notification[], "messages": Message[], "_id": String, "fullName": String, "email": String, "createdAt": String, "updatedAt": String }
 
  • 사용자 아이디
  • 사용자 풀네임
  • 이메일
  • 계정 생성 날짜
  • 계정 수정 날짜
⇒ 계정 설정 정보 페이지
 
  • 커버 이미지
  • 프로필 이미지
⇒ 프로필 페이지에 사용
 
  • 온라인인지 여부
 
  • 게시물들
  • 좋아요한 게시물들
  • 팔로워
  • 팔로잉
 
  • 알림
⇒
 
  • 메시지
 
 

우리 SNS 컨셉은?

레퍼런스

https://www.facebook.com/
https://www.instagram.com/
https://www.reddit.com/
https://velog.io/
https://twitter.com/BTS_twt
https://www.pinterest.co.kr/
https://www.snapchat.com/discover?web_client_id=82dfa4a0-01f6-4f38-a170-3be0b55a7bce
https://www.behance.net/
네이버 밴드
카카오스토리
https://careerly.co.kr/home
https://yozm.wishket.com/magazine/detail/1502/
싸이월드
이모지로만 대화
네이버 카페
 
 
페이스북 - (디자인 참고용)
인스타그램 - (DM, 팔로잉 목록 참고)
슬랙, 페북, 레딧, 트위터 - (게시물 목록 디자인 참고용)
 
컨셉
일상 공유 SNS
이모지 댓글 기능
평범함 댓글도 쓸 수 있게….
이모지 버튼 → 누르면 해당 이모지가 댓글 API POST 요청됨
보여줄 떄는 → 이모지만 있는 댓글인 경우에는 이모지 버튼으로 보이게….
 
  • 이미지, 이모지로만 대화하기 - 고독한 박명수방 같은 컨셉으로? (미정)
  • 이모지로만 대화해야 하는 이유
    • → 문맹들도 차별 받지 않는 세상
      → 언어에 구애받지 않고!!!!
  • 이모지로 공유하는 일상, 기분??
  • 🥺
  • ✨✨✨✨✨✨✨✨
  • 💀
  • 🙊
 
댓글로 코드를 쓸 수 있는 SNS???
const whenMeet = (start, end) ⇒ { }
 
게시물도 코드로 쓸 수 있는
function Hello(name) { console.log(`Hello ${name}`) } Hello('hyunsuk');
 
애플 사이트 같은 SNS??
→ 애니메이션, 트랜지션, 인터렉션….
 

컨셉 없음 - 일반적인 SNS ….

→ 일상 공유하는 SNS 인데
유저 경험 그런거 빡세게 잡는걸로
트위터, 페이스북 같이….
 
 
 
스터디 모집
면접 질문