Front-end) 프로젝트 설계 및 기초 세팅

GitHub - S-OSTeam/shop-web

---

쇼핑몰 기능 구상

1. 메인 화면

• Header
  • Logo
  • 카테고리
    1. 캐릭터
    2. 만화
    3. 게임
    4. 개인커스텀
    5. 문의
  • 간편 메뉴
    1. 북마크
    2. 찜
    3. 장바구니
  • 로그인
• 메인 화면 상품 목록
  • 진행중인 이벤트
  • 월간 인기 상품
  • 엄선 추천 상품
  • 신규상품
  • 최신 상품 리뷰

2. 유저 기능

• 로그인
  • 아이디 찾기
    1. 전화번호로 본인인증 후 메시지를 전송한다.
    2. 일치 하는 경우 아이디 출력한다.
  • 비밀번호 찾기
    1. 전화번호로 본인인증 후 메시지를 전송한다.
    2. 일치 하는 경우 비밀번호 변경 창 출력한다.
• 회원가입
  1. 아이디, 비밀번호, 비밀번호 확인, 이메일, 이메일 인증 체크
  2. 중복 회원 체크
  3. 비회원 주문 조회
• 회원 정보확인
  1. 이메일
  2. 이름
  3. 문의사항
  4. 쿠폰
  5. 구매 내역, 환불
  6. 장바구니
     1. 갯수 변경
     2. 장바구니 물품 삭제
     3. 선택한 상품만 구매
• 관리자 메뉴
  • 카페고리 수정
    1. 새로운 카테고리 생성
    2. 이미 존재하는 카테고리 수정 및 삭제
    3. 메인 카테고리에 서브 카테고리 추가, 수정, 삭제
    4. 서브(메인) 카테고리에 아이템 추가, 수정, 삭제
       1. 아이템 정보
       2. 아이템 상세 설명
       3. 구매 후기 및 평점
       4. 상품문의
  • 유저 문의 사항
    1. 답변, 미답변 구분
    2. 날짜순으로 정렬
  • 환불 관리
    1. 환불 알림
    2. 환불 목록
  • 유저 정보
    1. 블랙 리스트 관리
    2. 유저 환불 내역
    3. 유저 문의 내역
    4. 유저 구매 내역
    5. 유저 리뷰 내역
• 아이템 목록
  • 피규어 상세 정보 출력
  • 구매
    
    1. 무통장 입금

 

Front-end 기초 설정 

※ 기초적인 기능 구상에 맞게 어떤 기초 설정을 했는지 확인해 보자

• 쇼핑몰을 만들면서 React Component를 원자 단위로 쪼개서 재활용성을 높이는 아토믹 디자인 구조를 이용해서 기본적인 폴더 구성을 아래 이미지 같이 나누어 보았다.

 

1. api : GraphQL의 query, mutation의 쿼리어를 나눠서 관리하는 폴더

2. asset : img, icon을 관리하는 폴더

3. components
      - 아토믹 구조 : atoms, molecules, organisms, templates를 원자                                    단위서부터 나누어서 관리하는 폴더

      - layout : header, footer를 관리하는 폴더

4. hooks : 커스텀 훅을 관리하는 폴더

5. interface : 언어를 Typescript로 사용하면서 타입을 명시해줘야 되                         기 때문에 백엔드 스키마에 맞춰 response 타입을 명시                         해 관리하는 폴더

6. language : 다국어를 사용하기 위해 json을 통해 단어를 저장해서                            관리하는 폴더

7. pages : 각각의 페이지를 관리하는 폴더 -> 아토믹 디자인의 최상단

8. recoil : redux와 비슷한 전역 변수의 상태 관리 하는 폴더

9.  routes : 페이지 설계에 맞게 router들을 관리하는 폴더

10. stories : story book을 사용하기 위해 초기 설정을 관리하는 폴더

11. styles : sass(scss) 스타일과 반응형 스타일을 관리하는 폴더

12. util : 섹션관리나 쿠기 등 기타 유틸적으로 필요한 파일을 관리                      하는  폴더

 

 

 

※ 설계에 맞게 라우터 설정

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import DeamHome from '@pages/home/DeamHomePage';
import Login from '@pages/login/LoginPage';
import SignUp from './signup/Signup';
import Product from '@pages/product/ProductPage';
import CustomerService from '@routes/cs/CustomerService';
import AdminPage from '@pages/admin/AdminPage';
import Layout from '@components/layout/Layout';

export const AppRouter = () => {
    return (
        <Layout>
            <Routes>
                <Route path="/" element={<DeamHome />} />
                <Route path="/login" element={<Login />} />
                <Route path="/signup" element={<SignUp />} />
                <Route path="/product" element={<Product />} />
                <Route path="/cs" element={<CustomerService />} />
                <Route path="/admin" element={<AdminPage />} />
            </Routes>
        </Layout>
    );
};

 

1. Layout : Router 전체에 Layout을 감싸서 모든 페이지에 Header, Footer 적용
   • Header : Logo, 카테고리, 간편 메뉴, 로그인 버튼
2. 메인 홈페이지 ("/") : 이벤트, 관리자가 정의한 상품 들, 최신 리뷰 기능을 구현 및 화면 제작 예정이다.
3. 로그인 화면  ("/login") : 유저 로그인에 관련 된 기능을 구현 및 화면 제작 예정이다.
4. 회원가입 화면 ("/signup") : 유저 회원가입에 관련 된 기능을 구현 및 화면 제작 할 예정이다.
5. 유저서비스 화면 ("/cs") : 유저가 문의, 환불, 리뷰 등의 서비스 기능을 관리하는 기능을 구현 할 예정이다.
6. 관리자 화면 ("/admin) : 관리자로 통해서 유저 리뷰, 문의, 환불, 블랙 리스트 관리 및 피규어 상품 추가 수정 삭제 가능하도록 기능 구현 예정이다.

• 이렇게 폴더를 먼저 기초 설계를 해보았다. 그리고 이에 프로젝트에서 필요한 라이브러리를 설정해 보자

 

React 라이브러리 설정

우리는 Material Design을 구현해 놓은 라이브러리인 Mui를 적극적으로 사용할 예정이고 craco를 이용해서 절대 경로 또한 설정 해 줄 예정이다. 이 외에도 GraphQL, Rest API 연동을 위한 apollo 라이브러리와 axios 라이브러리를 이용하고 className을 여러개를 사용가능하게 하는 classnames 라이브러리 등을 이용해볼 것이다.

 

{
  "dependencies": {
    "@apollo/client": "^3.8.4",
    "@apollo/react-hooks": "^4.0.0",
    "@craco/craco": "^7.1.0",
    "@mui/icons-material": "^5.14.13",
    "@mui/lab": "^5.0.0-alpha.167",
    "@mui/material": "^5.14.11",
    "@mui/styled-engine-sc": "^5.14.11",
    "@types/i18next": "^13.0.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.54",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "@types/react-i18next": "^8.1.0",
    "@typescript-eslint/eslint-plugin": "^6.7.3",
    "@typescript-eslint/parser": "^6.7.3",
    "axios": "^1.5.1",
    "classnames": "^2.3.2",
    "craco-alias": "^3.0.1",
    "eslint": "8.22.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.2",
    "graphql": "^16.8.1",
    "i18next": "^23.11.5",
    "macaddress": "^0.5.3",
    "node-sass": "^9.0.0",
    "prettier": "^3.0.3",
    "react": "^18.2.0",
    "react-cookie": "^6.1.1",
    "react-dom": "^18.2.0",
    "react-i18next": "^14.1.2",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "recoil": "^0.7.7",
    "styled-components": "^6.0.8",
    "swiper": "^10.0.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "prettier": "prettier --write --config ./.prettierrc \"**/*.{ts,tsx}\"",
    "lint": "eslint './src/**/*.{ts,tsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

 

• 라이브러리 또한 설정이 완료 되었으니 다음으로 넘어가서 Atomic Design Pattern을 설계 해보자

---

Front-end) 프로젝트 아토믹 디자인 패턴 적용

다음 포스터