Salendar 소개에 앞서,

I Think... 🤫

Salendar 프로젝트를 통해 마구잡이로 Vue 코드를 써내리던 1학기 프로젝트를 반성했습니다. 부족한 면을 파악하고 개선하는 계기가 되었습니다.

I Learned... 👨‍💻

✔️ chrome Vue devtool 과 chrome console 을 사용해 데이터를 확인하며 코드를 작성했습니다.
✔️ Vuex 에 로그인 정보를 담아 새로고침 시 로그인이 풀리지 않도록 했습니다.
✔️ JWT 토큰 을 이용해 로그인을 구현했습니다.
✔️ axios 를 사용해 백엔드와 통신했습니다.
✔️ Vuetify 를 사용해 화면을 구성했습니다.
✔️ git flow 를 적용해 프로젝트를 진행하였고 터미널 git 명령어를 익혔습니다.

I Decided... 👊

⭐️ Vue LifeCycle인 watch, created, mounted 등.. 을 공부할 것입니다.
⭐️ 화면에 보여지는 컴포넌트들의 정렬 방식 (flex, md, sm..) 에 대해 학습할 것입니다.
⭐️ 다음번엔 디자인 하느라 참여하지 못했던 배포 참여할 것입니다.

---

Salendar 란?

"올리브영에 갔는데 사고 싶은 틴트 세일이 어제 까지였다? 세일 정보를 미리 알았으면 좋았을텐데.." 라는 경험에서 나온 아이디어 에서 출발했습니다.

• 설레는 세일정보를 알려주는 Salendar, 설렌다 입니다.

• 랄라블라, 올리브영, 에뛰드하우스, 더페이스샵, 미샤, 토니모리, 아리따움 7개 매장의 세일 정보를 캘린더 형태로 보여줍니다.

Stack ⚙️

Backend

Frontend

Team Collaboration Tool

build

주요기능 💡

'설렌다' 는 코스메틱 로드샵의 세일 정보 전달합니다.

1) 캘린더

- 세일 일정을 볼 수 있습니다.
- 매장, 월별로 필터링이 가능합니다.

2) 세일 상세 정보

- 세일 제목, 기간, 실제 웹사이트 링크, 세일 홍보 이미지를 보여줍니다.

3) 세일 알리미

- 팔로우중인 매장의 세일 정보를 매 달 1일, 메일로 전달 받을 수 있습니다.

4) 찜 하기

- 원하는 매장을 찜할 수 있습니다. 
- 찜한 매장은 찜 목록에서 확인할 수 있으며 추가, 삭제가 가능합니다.

5) 게시판

- 자유 게시판, 리뷰 게시판, 세일 제보 게시판에서 다른 사용자들과 소통할 수 있습니다.
- 게시판 CRUD, 댓글 기능이 있습니다.

그 외 기능 💡

1) 로그인 & 회원가입

- 로그인, 회원가입 기능입니다.
- 비밀번호는 영어, 숫자 포함 8자리 이상으로 구성해야합니다.
- 중복된 닉네임은 사용할 수 없습니다.

2) 마이페이지

- 닉네임, 비밀번호 수정이 가능합니다.

3) 팀 소개

- Salendar의 만든이들을 소개하는 페이지입니다.

---

My Roles 😇

'설렌다' 아이디어를 생각했습니다.

화면	기능	디자인
랜딩페이지	메인페이지 이동 버튼	글씨체 변경, 전체적인 디자인
로그인	JWT 토큰을 이용해 구현	버튼 색, 로그인 이미지
회원가입	Axios Post 요청을 보냄	버튼 색, 회원가입 이미지
마이페이지	비밀번호 수정 (중복 처리, 확인), 닉네임 변경, 이미지 추가	버튼 색, 정렬
세일캘린더	FullCalendar API	캘린더 글씨체, 불필요한 버튼 제거, 전체적인 색 조합 구상
찜목록	Axios Get으로 Follow 매장 불러와 찜 삭제 기능 구현	찜 목록 없을 시 화면 구성, v-card 형태 디자인
게시판	X	게시판 목록 디자인 구성
세일리스트	세일 상세 페이지의 제목, 기간, 이미지 요청 받아서 처리, 홈페이지 이동	modal 형태로 디자인
헤더	로그인 여부에 맞는 상단 데이터 표시 작업	Vuetify Appbar로 구성

• 전체적인 디자인을 구성했습니다.
  - 메인페이지, 랜딩페이지, 팀 소개페이지, 캘린더페이지, 찜목록페이지, 마이페이지, 로그인, 회원가입 페이지, 게시판 목록 페이지를 디자인했습니다.
• Axios로 백엔드와 통신해 찜목록 및 관리, 캘린더, 마이페이지를 구현했습니다.
• Axios Get, Post으로 요청해 로그인, 회원가입을 구현했습니다.