공부 알림 SNS

타임라인 기반 공부 SNS

• 개발 기간 : 2024-02-13 ~ 2024-02-29 (약 2주)
• 6인 팀 프로젝트 : 프론트 엔드 3명, 백엔드 3명

팀 구성

김종빈(BE)	명길식(BE)	박윤혜(FE)	박지원(FE)	이병진(BE)	조연주(FE)
					연주
@kjb990202	@KrillM	@riverhye	@zyam1	@blee94	@J-Yeonju
To do, 랭킹 API	회원가입, 로그인, 회원정보 수정, 검색 API / Spring Security / JWT Token	Websocket / 슬라이드 / To Do 헤더 연동	To Do / 회원검색/ 랭킹 / 팔로우	Websocket / 메인 / 팔로우 / 좋아요	로그인 / 회원가입 / 회원정보 수정

• Notion으로 일별 회고 작성 및 트러블 슈팅

개발환경

Front

Back

Collaborate & Tools

개발 포인트

1. 컴포넌트 모듈화

• 사전 회의를 통해 공통 부분이 있는 컴포넌트를 하나로 작성해 코드 재사용성을 높이고자 했습니다.
• 스톱워치를 다른 컴포넌트에서도 재사용할 수 있게 커스텀훅으로 만들었습니다. (useTimer, useTimerFunc)

2. 새 기술 사용

2-1. SSR 프레임워크 Next.js

• 지난 프로젝트에서 초기 렌더링 속도가 느린 리액트의 한계를 느껴 리액트 기반의 SSR 프레임워크인 Next.js를 사용했습니다.
• 메타데이터를 활용해 SEO를 고려했습니다.
• 14 버전에서 제공하는 Loading UI를 사용해 페이지 로딩 시간이 길 경우를 대비했습니다.

2-2. 유틸리티 CSS tailwind

• 유틸리티 퍼스트 CSS 프레임워크인 tailwind를 사용하여 목적에 맞는 코드 작성에 집중했습니다.
• 공통 설정을 config 파일에 추가하여 일관된 스타일링을 유지하려고 했습니다.

3. 웹소켓 : 실시간 알림

• 단순 알림 기능 구현이 목표라서 상대적으로 가벼운 Websocket API을 사용했습니다.
• Websocket은 텍스트와 바이너리만 포함 가능해서 JSON 형태로 데이터 송수신했습니다.

ERD

화면 구조도 및 기능

[헤더]

[Left]

• 카테고리 클릭 시 UX를 고려하여 해당하는 아이콘의 색이 채워짐
• ‘내 공부’에서 Todo 생성/삭제하면 To Do 리스트에도 실시간 반영
• 공부 내용 입력 후 START 클릭 시 타이머 동작
  • 타이머 시작 or 정지 → 웹소켓으로 실시간 통신 내용이 메인에 표시
  • 재생/ 일시정지/ 정지 버튼 클릭 시 시작 시간, 끝난 시간을 서버에 기록
• 톱니바퀴 아이콘 hover 시 정보 수정/로그아웃 페이지 이동

[Top]

• hover 시 누적 공부 시간이 높은 순으로 유저 10명 슬라이더(Swiper.js)로 표시

[로그인]

• 회원정보가 존재한다면 토큰을 받아 로그인 구현
• 토큰을 활용하여 서버의 부하를 줄여줌

[회원가입]

• 존재하는 회원의 이메일일 경우 회원가입 불가

[메인]

• 자신의 공부 상태(시작, 끝)를 모아볼 수 있는 공간
• 현재 시각을 기준으로 작성일 표시
• 스톱워치 상태(시작, 일시정지, 끝)에 따라 아이콘을 다르게 적용

[검색]

• 검색 키워드를 포함하고 있는 사용자를 불러옴
• 사용자 클릭 시 내 공부 페이지로 이동

[랭킹]

• 전체 사용자 중 상위 20명의 정보 표시

[내 공부]

• 이용자 정보 표시
• 팔로우 기능
• 달력을 클릭 시 해당 날짜의 todo리스트 불러오기, todo작성
• 사용자의 공부 랭킹 표시

[회원정보 수정]

• 존재하는 닉네임이 있을 경우 회원정보 수정 불가

시연 영상

sns.mp4