DotFriends

---

⭐️ 프로젝트 소개

• 라인프렌즈 커머스 사이트 라인프렌즈샵 클론 프로젝트

• 기획 의도를 고려하여 사이트의 디자인과 레이아웃을 참고하여 클론 프로젝트를 진행하였습니다.

• REACT를 사용해 초기세팅을 직접 진행하였고 최대한 외부 라이브러리의 사용을 하지 않았습니다.

🤔 기획 의도

• 라인프렌즈 사이트 자체를 따라하기 보다는 재치있는 아이디어를 통해, Line 이 아니라 Dot Friends 로 이름을 정했습니다.

• 코로나시대에 맞게 사람과 사람을 연결하는 Line이 아니라 개인 혼자 (Dot) 집에서 지낼 때 활용할 수 있는 상품을 판매하는 컨셉을 잡았습니다.

📆 개발 기간

• 2021.08.30 - 2021.09.09

👨‍👩‍👦 개발 인원

• FrontEnd
  • 금보배, 박은정, 주철진
• BackEnd
  • 신우주, 김동준, 서동규

🎬 시연 영상

• 시연 영상 보러 가기

✈️ 사이트

• 사이트 보러 가기

---

적용기술

• FrontEnd : html, scss, javascript, react
• BackEnd : (생략)

협업도구

• Slack
• Git & Github
• Trello

FrontEnd 구현기능

Leonard 주철진님

• [Nav] : 카테고리를 클릭하여 해당하는 리스트 페이지로 이동 / 검색 기능을 통해 결과 페이지로 이동
• [Product List] : 상품 리스트 페이지 레이아웃 및 기능 구현(상품 간략보기 모달 / 찜하기 / 상세페이지로 이동)
• [Product Detail] : 상품 상세페이지 레이아웃 및 간단한 기능 구현

Sally 금보배님

• 라인프렌즈 사이트 컨샙 설정
• [Login] : access token을 이용한 로그인 기능 구현 / 유효성 검사 기능 구현
• [Signup] : 회원가입 기능 구현 / 유효성 검사 기능 구현

Edward 박은정님

• [main] : 각각의 API데이터에 대한 (캐러셀)슬라이드
• [main] : header 배경이미지 변경될 때마다 scale 애니메이션효과구현
• [Footer] : Footer 레이아웃

BackEnd 구현기능

(생략)

Reference

---

• 이 프로젝트는 라인프렌즈샵 사이트를 참조하여 학습목적으로 만들었습니다
• 학습수준의 프로젝트로 만들었기 때문에 이 코드 및 데모영상을 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.