froggy1014/incourse_e_commerce

🧴 Incourse E-commerce Service

// Server has been shutdown.

Introduction

프론트엔드 기능을 시작부터 끝까지 직접 구현해보면서 이해함과 동시에 학습을 목표로 진행하는 E-commerce 서비스 프로젝트입니다. 프로젝트를 진행하면서 백엔드 개발자와 슬랙으로 소통하면서 이슈를 해결해왔습니다. 아직 프로젝트는 작업중이고 또한 계속해서 리팩토링해나아갈 예정입니다.

This is an E-commerce service project which purpose is to help myself understand the implementation of all the features by using front-end processes from the beginning to end. While working on this, I have also connected with back-end developer on slack when issue arises. This project is still in the process of being worked on as I refactor it future.

📄 Project Description

인코스는 사용자를 판매자 웹사이트에 쉽게 이동할 수 있도록 해주는 E-commerce 애플리케이션입니다. 이 어플리케이션은 사용자 친화적이며 회사 제품들을 시각적으로 좀 더 밝게 보여줍니다. 다양한 프론트엔드 프레임워크와 일부 백엔드 프로세스를 사용하여 기능들이 더욱 돋보일 수 있도록 하였습니다.

In-Course is an E-Commerce application that is used to help users to easily navigate to the retailer’s website. This application is user friendly and showcases the companies’ products in a brighter sense of light. It uses a variety of front-end frameworks and some back-end processes to help the features stand out more.

📚 Project Detail

• Framework: Next.js
• State Management: React Query, Redux Toolkit
• Styling: Chakra-ui, Emotion
• Forms: React Hook Form
• Auth-Provider: Kakao
• Payment-Module: Toss

✍️ Project Summary

🔁 User Flow

⚠️ Trial and Error

• 🖱 'click to scroll' 구현을 어떻게 했는가?

• 📗 차크라 UI 컴포넌트 커스터마이징

• ➡ Did you mean to use React.forwardRef()?

• 😭 리덕스로 리워크했던 이야기

• 🚐 배송지 주소 검색 모달을 구현해보자

• ♺ Axios로 JWT 토큰 Refresh 하기

• ♾ 무한 스크롤을 구현

• ⚠️ Unable to preventDefault inside passive event listener invocation - 에러

• 🟦 토스 결제창 연동하기

• 📑 React-Query로 Pagination

• 📲 페이지 이동간의 고민

• ✋ 외부 링크 설정시 주의할 점

🤔 What I've learnt?

* JWT Token을 이용한 인증 로직                 - Implement Authorization logic by JWT Token
* RESTful API를 활용한 CRUD                  - CRUD features by RESTful API
* 전역, 서버 상태관리 라이브러리                  - Statement Management 
* UI 컴포넌트 커스터마이즈                      - UI Component Customization
* Next.js 프레임워크                         - NextJS Framwork features
* 토스를 이용한 결제 로직 구성                   - Implement Payment Logic with Toss Module
* presigned URL를 이용한 S3 이미지 업로드       - Image Upload to S3 with presigned URL

🏁 How to run this App

Environment Varibles Required

create .env.development.local or .env.production.local file in root directory

SOCIAL_REDIRECT_URL=http://localhost:3000/social_login/callback
TOSS_CLIENT_KEY=[Toss Test Client Key]
NEXT_PUBLIC_API_BASE_URL=https://api.commerce.incourse.run/v1/
NEXT_PUBLIC_KAKAO_CLIENT_ID=[Authorized KAKAO CLIENT ID from server]

test command

yarn install
yarn run build
yarn run start

or

yarn install
yarn run dev