💡 프로젝트 소개

우리 곁에서 항상 머무르는 한글,

많이 사용하는 만큼, 소중함을 잊기도 쉬운데요.

한글날을 맞이하여 나의 책장을 만들어 방명록과 책거리를 받아보세요 !

다른사람의 책장에 책거리를 장식하여 나의 마음을 전하세요 !

▶ 서비스 바로가기: https://wagglewaggle.netlify.app/

• 누적 사용자 : 약 100명

${\bf{\color{gray}PC와\ 모바일에서\ 모두\ 사용할\ 수\ 있도록\ 반응형을\ 고려하여\ 제작되었습니다.}}$

📝 주요 기능

✅ 랜딩 페이지

• 와글와글2 시작하겠소 버튼 클릭시, 로그인 되어 있다면 본인의 책장 페이지 (bookshelf/:id)로 이동하고, 로그인하지 않았다면 로그인 페이지(/login) 페이지로 이동합니다.

• 세종대왕님께 감사인사 전하오 버튼 클릭 시, 세종 대왕님의 책장(bookshelf/sejong)으로 이동합니다.

• 다른 책장 추천 받겠소 버튼 클릭시, 현재 생성된 책장 목록 중 공개 여부가 공개인 책장들 중 3개가 랜덤으로 조회됩니다.

  • 사용자의 연타로 인한 과한 데이터 패칭을 방지하기 위해 lodash 라이브러리를 이용하여 쓰로틀링을 적용했습니다.

[ PC ]

PC로 접속했을 경우, 세 개의 섹션으로 나누어 스크롤 슬라이딩 애니메이션 구현하였습니다.

마우스로 스크롤 했을 때 자동으로 해당 섹션의 위치로 슬라이딩 되고, 상단의 헤더를 통해 로그인 여부를 확인할 수 있습니다.

[ Tablet ]

타블렛과 모바일에서는 하단 섹션이 있다는 것을 인지하지 못할 것을 고려해, 스크롤 유도 아이콘 및 애니메이션을 넣어주었습니다.

[ Mobile ]

---

✅ 로그인

구글, 카카오 OAuth를 이용하여 로그인 기능을 구현했습니다.

로그인한 이후, 신규 회원이면 /setup 페이지로 이동하여 기본적인 책장 설정을 할 수 있도록 유도하고, 기존에 이미 책장을 가지고 있던 유저라면 bookshelf/:id로 이동할 수 있도록 설정했습니다.

[ 기존 유저 ]

[ 신규 유저 ]

---

✅ 유저 정보 작성

신규 회원은 닉네임과 공개여부를 설정할 수 있습니다.

회원 정보 설정 이후에는, 기본값으로 생성되는 본인의 책장 페이지(/bookshelf/:id)로 리다이렉트 되고, 그 곳에서 추가 설정 여부를 묻는 팝업을 통해 책장 설정을 변경할 수 있습니다.

[ PC ]

[ Mobile ]

---

✅ 책장 조회

내가 받은 책장과 방명록을 확인할 수 있는 페이지입니다.

기본적으로 가로 스크롤을 지원하고 있으며, 목록을 확인한 후 요소를 클릭하면 방문자가 남긴 방명록을 확인할 수 있습니다.

책장의 소유자가 책장을 밤 으로 설정했을 경우 책장과 관련된 인터페이스의 색상이 다크 모드로 변경됩니다.

책장 주인은 다른 사람이 남긴 방명록이 맘에 들지 않을 때 방명록을 삭제할 수 있습니다.

[ PC ]

[ Mobile ]

---

✅ 책장 정보 수정

한 번 설정한 책장 정보를 변경할 수 있습니다. 책장의 배경 사진부터 공개 여부, 소개글 등 책장과 관련된 모든 설정을 확인하고 변경하는 페이지 입니다.

• 책장 소개글

  : 100자 이하의 한글만 입력 가능하도록 상단의 세종 대왕 아이콘 옆에 유효성 검증 결과가 표시됩니다. 현재 책장 소개글과 같아도 버튼이 비활성화되어 불필요한 데이터 패칭을 방지합니다.

• 공개 여부와 낮과 밤

  : 공개 여부와 낮과 밤 (책장 테마)를 변경할 수 있습니다. 이때 사용자가 고의적으로 데이터 패칭을 반복적으로 요청해도 일정 시간에 한 번씩만 요청 되도록 각 각 쓰로틀링과 디바운스를 적용해주어 서버의 부담을 줄였습니다.

[ PC ]

[ Mobile ]

---

✅ 내가 보낸, 받은 방명록 조회

내가 보낸, 받은 방명록들을 조회할 수 있습니다.

무한 스크롤로 데이터 패칭을 나눠서 요청하고 있으며, 방명록을 클릭했을 때 세부 내용 확인이 가능한 /bookshelf/book/:id 페이지로 이동하게 됩니다.

[ PC ]

[ Mobile ]

---

✅ 방명록 생성

방명록은 크게 소, 대 로 나누어져 있습니다. 소를 선택하면 정사각형의 책장, 대는 직사각형의 책장으로 시작하게 된다. 빈 책장으로 시작한 사용자는 이후 과정을 따라가며 본인만의 책장으로 꾸밀 수 있습니다.

1. 책장 꾸미기 & 방명록 글 작성하기

   : 다양한 스티커를 자유롭게 활용하여 책장을 꾸밀 수 있습니다. 이후 방명록 글 작성을 통해 (한글만 사용 가능) 내용을 채울 수 있습니다.

2. 작성자 닉네임 정하기

   : 방명록을 남길 때는 본인의 닉네임이 아닌 이름으로 남길 수 있습니다. 닉네임을 정하기 어렵다면 랜덤 닉네임을 통해 닉네임을 추천 받을 수 있습니다.

3. 공개 여부 설정하기

   : 작성한 방명록을 작성자와 책장 주인만 확인할 수 있게 하고 싶다면 공개 여부를 따로 설정해줄 수 있습니다. 이때 비회원의 경우 공개 여부만 선택할 수 있습니다.

${\bf{\color{gray}방명록\ 생성\ 중\ 닫기\ 아이콘을\ 누를\ 경우,\ 정말\ 나갈\ 것인지에\ 대한\ 모달\ 창이\ 뜹니다.}}$

[ PC ]

[ Mobile ]

---

✅ 방명록 공유

서비스의 특성 상, 많은 방명록을 받고 싶다면 링크를 통해서 책장 링크를 주고 받아야하기 때문에 두 가지 방식으로 공유할 수 있도록 했습니다.

나의 책장 페이지에서 내 책장 널리 알리기 버튼을 통해 링크를 복사할 것인지, 카카오톡을 통해 공유할 것인지 선택할 수 있습니다.

[ PC ]

[ Mobile ]

✨ 기술 스택