[4IZ] 스포츠 패션 브랜드 웹서비스

test

본 프로젝트는 2023년 3월 위코드에서 진행한 1차 팀 프로젝트 결과물입니다.

📅 개발 기간 및 인원

개발 기간: 2023.03.06 ~ 2023.03.17 (2주)
개발 인원: FrontEnd 2명, BackEnd 2명

❶ 배경

👟 왜 처음에 ‘나이키’를 참고하여 기획했나요?

나이키는 엄청난 사용자수와 상품수를 보유하고 있어요.

🏅 2023년 2월 나이키 국제 웹의 접속자 순위는 패션 브랜드 4위
👥 월별 접속자 수는 1억 3천만 명에 달해요.

엄청난 규모를 유지하고, 또 성장시키는 브랜드를 벤치마킹한다면 보다 완성도 높은 서비스를 기획할 수 있지 않을까요?
잘 만들어진 예시를 바탕으로 우리만의 개성을 더하는 것이 목표였어요.

그렇게 시작된 프로젝트! 스포츠 의류를 판매하는 4iz 웹이예요.

❷ 서비스 소개

🏃 4iz는 어떤 서비스인가요?

4iz는 스포츠 의류를 판매하는 웹서비스예요.
인터렉티브한 UX와 직관적인 UI 구성이 장점이예요.
10~20대 한국인 사용자에게 보다 최적화된 쇼핑몰 서비스예요.

🏃 서비스의 기능이 궁금해요.

4iz의 주요 기능은 크게 네 가지예요.

⚙ 로그인, 회원가입
🛍 상품 리스트, 필터링
🛒 상품 상세, 장바구니
💳 주문, 결제

⚙ 회원 (로그인/회원가입)

입력한 이메일을 확인해서 가입한 적 없다면 회원가입으로, 이미 있는 사용자라면 로그인으로 안내해요.
하나의 컴포넌트에서 조건에 따라 데이터를 바꿔가며 렌더링하는 방식으로 구현했어요.
중복검사, 로그인, 회원가입, 가입완료 페이지를 하나의 경로로 보여줘요.

회원가입

로그인

🛍 상품 리스트 (필터링)

상품 리스트를 할인율과 함께 확인할 수 있어요.
서브메뉴(카테고리)는 택1로, 성별/색상/사이즈 필터는 다중 선택 가능하도록 구현했어요.
정렬 드롭다운을 추가해서 최신순, 낮은 가격순, 높은 가격순으로 상품을 확인 가능해요.

🛒 상품 상세, 장바구니

한 뷰포인트 내에서 이미지와 선택 옵션, 장바구니, 설명 등을 한눈에 확인할 수 있도록 구현했어요.
색상과 사이즈를 순서 상관 없이 각각 자유롭게 선택하여 장바구니에 담을 수 있어요.
장바구니에 담은 내용을 자유롭게 수정하거나 삭제할 수 있어요.

상품 상세페이지

장바구니

💳 주문, 결제

사용자가 배송지나 주문자의 정보를 입력해서 저장할 수 있어요.
결제 수단을 택1하여 선택한 후 버튼을 누르면 결제가 완료돼요.
결제가 완료되면 장바구니에 담은 내용이 비워져요.

❸ 핵심 기술

🧑‍💻 프론트엔드에서 활용된 기술이 궁금해요.

🔥 쉽고 빠른 사용자 경험을 제공하는 Single Page Application

아래 기술을 사용해 React 프로젝트를 구현했어요.
기능 구현에 있어 가능한 라이브러리 사용을 지양하고 직접 만들어나가려 했어요.
- React: JSX 문법과 Virtual DOM을 사용하는 JavaScript SPA 라이브러리
- Scss: 높은 코드 재사용성과 가독성이 장점인 CSS 전처리기 언어
- fetch 함수를 활용한 HTTP 비동기 통신

+ 앞으로의 계획 📝

프론트엔드

🙋 앞으로 프론트엔드에서는 이런 걸 구현해 볼 예정이에요.

- 작성한 코드를 다시 돌아보며 다듬는 리팩토링 과정을 거칠 예정이에요.
- JavaScript에서 TypeScript로 리팩토링을 진행하고 싶어요.

❺ 팀 소개

안녕하세요, 저희는 4iz ✨입니다!

팀에 내향형, I만 4명이라 4iz가 되었어요 🧚
상대적으로 인원은 적지만 누구보다 뛰어난 4iz 팀원들을 소개해드려요.

이솜이 (Frontend)	장지아 (Product Manager, Frontend)	류승준 (Backend)	이창섭 (Project Manager, Backend)

somyilee / 43-1st-4iz-frontend Goto Github PK

43-1st-4iz-frontend's Introduction