본문바로가기

Demo

Demo - Alopex Auto

Alopex UI 와 Alopex 그리드를 활용한 가상의 중고차 판매 사이트입니다.
별도의 디자인 작업 없이 Alopex UI Theme (Dark 테마)만을 가지고 개발된 사례입니다.

[Demo - Alopex Auto] 바로가기 [Demo - Alopex Auto] 소스 다운로드

미리보기
환경 구성
  • 디렉토리는 다음과 같이 구성되어있습니다.

디렉터리 구성

AlopexAuto_package
	┣━css━━ app
	┃   ┗━━ lib
	┃          ┗━ alopex
	┃              ┗━ alopex-grid.css         ( AlopexGrid 의 스타일시트 )
	┃              ┗━ alopex-ui-xxx.css     ( Alopex Auto Demo 에서는 alopex-ui-dark.css 가 기본 스타일 )
	┃              ┗━ grid                     ( AlopexGrid 에서 필요한 image files )
	┃              ┗━ images
	┃                   ┗━ *.jpg, *.png, ...
	┃              ┗━ src
	┃                   ┗━ alopex-ext.css
	┣━ view
	┣━ data 
	┗━ script━━ app
			 ┗━━ lib
				 ┗━ alopex
				 ┃       ┗━ alopex-grid-trial.min.js
				 ┃       ┗━ alopex-ui.min.js
				 ┃       ┗━ src
				 ┃           ┗━ alopex-ext.min.js, alopex-ext-setup.js
				 ┃ 
				 ┗━ jquery
					 ┗━jquery-x.x.x.js (1.10.x / 1.11.x 사용)

css

스타일시트 파일 디렉터리 입니다.

  • app

스타일시트 중 애플리케이션 영역입니다.

  • lib

    • alopex

      • alopex-grid.css

        Alopex Grid 를 위한 스타일 시트 입니다.

      • alopex-ui-xxx.css

        Alopex UI 6개의 테마 스타일시트 파일이 포함되어 있습니다.
        Alopex Auto 데모는 alopex-ui-dark.css 를 기본 스타일로 사용합니다

      • grid 폴더

        Alopex Grid 가 사용하는 이미지 파일이 있는 폴더입니다. Alopex Grid 사용 시에는 반드시 포함하셔야 합니다.

      • src 폴더

        오픈 소스를 wrapping 한 확장 컴포넌트 스타일시트 파일이 있는 폴더입니다. 필요시에만 사용합니다.

        • alopex-ext.css

view

Alopex Auto 데모의 화면을 구성하는 html 파일이 있는 폴더 입니다.

data

Alopex Auto 가 다루고 있는 JSON 및 이미지 데이터가 담긴 디렉터리 입니다.

Alopex Auto 데모는 Database 를 별도로 구성하지 않고, JSON 형식의 데이터를 가져와 사용합니다.

script

자바스크립트 파일 디렉터리입니다.

  • app

자바스크립트 중 애플리케이션 자바스크립트 영역입니다.

  • lib

    • alopex

      • alopex-grid-trial.min.js

        Alopex Grid trial 버전 라이브러리 파일입니다.

      • alopex-ui.min.js

        Alopex UI 라이브러리 파일입니다.

      • src 폴더

        오픈 소스를 wrapping 한 확장 컴포넌트 라이브러리 파일이 있는 폴더입니다. 필요시에만 사용합니다.

        • alopex-ext.min.js, alopex-ext.setup.js
    • jquery

      Alopex UI에 필요한 JQuery 입니다.

      • jquery-x.x.x.js(1.10.x / 1.11.x 사용)
화면 구성

BUY (내차 사기)

  • search 입력창을 통해 차량명으로 검색할 수 있습니다.
  • 초기 화면 진입 시 최근 차량 목록을 5개까지 표시합니다.

  • 리스트에 나온 차량 정보를 클릭하면 상세 정보 및 상세 검색 화면으로 전환됩니다.

  • 상세 검색을 통한 결과가 우측 리스트에 표시됩니다.

SELL (내차 팔기)

  • 내차 정보를 입력하면 가격 측정 결과를 얻을 수 있습니다.
  • 차량에 대한 상세 정보를 입력하면 내 차를 등록할 수 있습니다.
  • 등록된 모든 차량이 하단 리스트에 보여집니다.

COMPARE CARS (차량 비교)

  • 차량 추가 팝업을 통해 최대 4건까지 비교할 차량을 등록할 수 있습니다. </
  • 비교 차량이 등록되면 리스트가 하단에 보여집니다.

FIND DELAERS (딜러샵 검색)

  • 초기 화면 진입 시 상위 10개의 딜러샵이 보여지게 됩니다.
  • 왼쪽에 위치한 지역 선택을 통해서 지역별로 딜러샵을 찾아볼 수 있습니다.
  • search 입력창을 통해 딜러샵명으로 검색할 수 있으며, 하단에 검색 결과가 보여집니다.

관리자 화면

관리자 로그인

  • 관리자 페이지에 접근하기 위해서는 관리자 계정으로 로그인 해야 합니다.
    • ID : admin / PW : 11111

차량 입고 관리

  • 화면 상단의 search box를 통해 조건에 맞는 차량 조회가 가능합니다.
  • 차량 리스트에서 행을 더블 클릭하면 해당 차량 정보를 수정할 수 있습니다.
  • 체크 박스를 선택한 차량을 삭제 버튼을 통해 삭제 할 수 있습니다.

Alopex Auto 데모 사이트는 Datebase를 사용하지 않고, JSON 파일에서 데이터를 불러오는 방식으로 구현되어 있습니다.

따라서 차량 정보를 수정 및 삭제해도, 화면 새로고침 시 데이터가 초기화 됩니다.

  • 엑셀에서 데이터를 가져오는 엑셀 가져오기와 데이터를 엑셀 파일로 만들어주는 엑셀 내보내기가 가능합니다.

월 매출 현황

  • 이번 달의 매출 현황을 딜러샵, 직급으로 소계하여 보여줍니다.
  • 월 매출 현황 데이터를 하단의 엑셀 내보내기를 통해 엑셀 파일로 변환할 수 있습니다.