handfun shop 개발 가이드

HANDFUN SHOP 개발 가이드㈜이레윈 온라인담당 이동규

2011.02.14

HANDFUN SHOP 개발 가이드

Comment

사이트맵

Olleh U+모바일 공동구매 커뮤니티 고객센터

•스마트검색(INDEX)•신규가입•번호이동•전환신규•보상기변•사전예약

•스마트검색(INDEX)•신규가입•번호이동•사전예약

•공동구매 •공지사항•이벤트•자유게시판•사용후기

•자주찾는질문•Olleh 문의•U+ 모바일 문의

회원관리

•회원정보수정•주문/배송조회•적립금내역•1:1 Q&A•나의관심상품•회원탈퇴

네비게이션

•로그인•회원가입•마이페이지•즐겨찾기


Comment

개발안내

1. 모든 페이지에는 각각 주석이 달려있습니다. (프로그램상에서 구현해야할 부분들...)실제 서비스 오픈때에는 이 주석들이 달려있으면 안됩니다.

※ 단, HTML요소를 구분하기 위해 사용한 주석은 삭제하지 않습니다.

2. 페이지는 메뉴이름+(n).htm 으로 되어 있습니다. 꼭 이름대로 개발이 될 필요는 없으며, 현재HANDFUN SHOP처럼 PHP를 이용해 GET 값을 이용해 출력해주세요. (즉, 일반 쇼핑몰 주소체계 처럼)

3. 모든 웹페이지의 인코딩은 UTF-8입니다.DB인코딩과달라 어쩔 수 없이 EUC-KR을 적용해야할때 일일히 디코딩해주셔야 합니다.

4. 개발시 이미지가 추가로 삽입되어야 할 경우, 모든 이미지에는 alt 속성이 들어가야합니다.이미지에 의미가 없는 경우, alt 속성을 빈 값으로 지정합니다. (alt=“”)

5. HANDFUN SHOP의 HTML DTD는 HTML 4.01 Transitional 입니다.DTD에 맞게 퍼블리싱/코딩 해주세요.

6. 자바스크립트가 삽입되어야 할 경우, 가능한 <head>와 </head>사이에 삽입해주시며,스크립트 초기 시작문은 <script type=“text/javascript”>로 시작해야 합니다.

7. Html 문서에 직접 style을 먹이셔도 되나, 가능한 css를 import 해주세요.

8. Style=“”은 가능하나 해당요소에 직접 스타일을 지정하면 안됩니다.예) style=“background: white”…. O

<table bgcolor=“white”…. X

9. 주석과 개발가이드 PPT를 참고하시면서 개발하시면 됩니다.


Comment

공통

공통


Comment

공통부분

검은부분을 제외한 밝은부분이 모든 페이지에서 공통으로 삽입되는 부분입니다.


Comment

공통부분

공지사항의 최근게시물 1개만 뽑으며, 13글자 까지 출력해주시며,13글자수가 초과하면 10글자까지 출력하며 뒤에는 … 이런식으로 잘림표현을 해주시면 됩니다.(유들리 있게끔~)

검색시 상품검색결과를 표시합니다.

마우스가 올라가면 아래그림과 같이 서브메뉴의 표현과 함께 GNB 색상이 나타납니다.(페이지소스를 열어보시면 상세히 설명되어 있습니다. Class에 show와 ing를 삽입하는형식으로… -> 자바스크립트로 구현)

롤 오버 전

롤 오버 후


Comment

공통부분

PNG 이벤트배너가 삽입되며, img 주소와 하이퍼링크만 변수로 출력해주시면 됩니다.(관리자페이지에서 이미지등록과 경로입력할 수 있게끔 만들어주세요~)

네비게이션 바입니다.로그인부분을 로그인한 후에는 로그아웃으로 표시되게끔 바꿔주세요.(SESSION 여부검사해서 출력해주시면 될듯합니다.)


Comment

공통부분

메인


Comment

메인

http://handfunshop.com/test/index.htm

http://handfunshop.com/test/index.htm


Comment

메인 콘텐츠

관리자에서 이미지와 URL을 입력할 수 있도록 해주세요.메인에서는,구매자수 번호만 변수로 출력하면 됩니다.(배너상에서 별도 디자인을 입히고 span에 position: absolute; 하여 위로 띄우는 식으로…)

index.htm을 뜯어보시면 알 수 있습니다.

관리자에서 이미지와 URL을 입력할 수 있도록 해주세요.


Comment

메인 콘텐츠

Blog.handfunshop.com 에 올라오는 포스트들을 최근게시물로 뿌려줍니다.블로그(텍스트큐브) 자체에서 RSS를 지원하고 있으므로,

Blog.handfunshop.com/rss 에서 xml을 읽어들어 메인에 뿌려주시면 됩니다. (2개)

이것 또한, index.htm에 보시면 주석이 달려 있습니다.


Comment

스마트검색

스마트검색

상품카테고리인 Olleh와 U+모바일을 처음 클릭했을 시, 나오는 화면이 스마트검색입니다.통신사에 따라 가입유형의 개수가 다를뿐, 나머지부분은 모두 동일하기 때문에 통합해서 설명합니다.


Comment

http://handfunshop.com/test/olleh.htmhttp://handfunshop.com/test/uplus_mobile.htm

스마트검색

http://handfunshop.com/test/olleh.htm

http://handfunshop.com/test/uplus_mobile.htm


Comment

스마트검색 아래에 출려되는 게시물들은,세부카테고리에 등록된 최근게시물들을 뽑은것이며 한줄에 3개씩 뽑으시면 됩니다.

Olleh.htm, uplus_mobile.htm 에 보시면 출력할 세부카테고리를 보실 수 있습니다.

스마트검색


Comment

스마트 검색입니다.

스마트검색


Comment

관리자페이지에서 상품등록시, 해당상품의 키워드(태그)를 입력할 수 있는 필드를 생성해주세요.그 키워드들을 출력합니다. (상품조회수 등을 이용하여 위처럼 인기도가 많은 곳에 style을 먹여 강조표시합니다.)

하이퍼링크를 먹였습니다. 처음 접속시에는 모든 항목의 색상이 그레이로 되야하며, (상단class에서 select가 빠짐)마우스로 클릭했을 경우, 해당 요소에 class에 select를 먹여줍니다.

스마트검색


Comment

Inputbox를 만들어 두었으며, ‘ ’만원대 ~ ‘ ’만원대 를 입력하면, 아래 그레프가 조절되게 해주세요.

Inputbox에는 숫자만 들어갈 수 있으며, 최대 100만원까지 입력가능합니다. (자바스크립트에서 검사)또한, 별도의 sqlinject공격이나 오류를 막기위해, 서버단에서도 검사해주셔야 합니다.

그래프부분은 직접 구현할 방법을 몰라 이미지 통으로 넣었습니다.

스마트검색


Comment

main

검색버튼을 누르면 플로팅레이어로 검색결과 레이어가 나타납니다.(페이지 리플레시 없이, Ajax로 구현해주세요~)

검색버튼을 이미지로 바꾸어 onclick로 먹이거나, input에 form javascript을 먹이지 마세요.자바스크립트를 먹여야할 경우엔, button으로 바꾸어 그곳에 onclick을 먹여주세요.

검색결과 뒤에는 검은반투명 레이어가 띄어져야 하며,검색결과는 페이지 정 중앙에 위치합니다.

반투명레이어는 클릭할시, 검색결과창과 반투명레이어가 동시에 사라져야 합니다.검색결과 옆의 X 버튼 또한 동일한 이벤트를 넣어주세요.

퍼블리싱페이지는 아래와 같습니다.http://handfunshop.com/test/olleh_searchEnd.htm

가장 기본적인 부분만 퍼블리싱하였고, 레이어가 둥둥 떠있는 효과는 자바스크립트를 입혀서처리해주세요.

http://handfunshop.com/test/olleh_searchEnd.htm


Comment

세부카테고리

세부카테고리

Olleh와 U+모바일 둘다 세부카테고리의 숫자만 다를 뿐, 안의 레이아웃구성이나 디자인은 모두 동일하여, 통합하여 설명합니다.


Comment

http://handfunshop.com/test/olleh.htm (뒤에 2~9번 까지 붙임 혹은 옆 서브메뉴에서 선택)http://handfunshop.com/test/uplus_mobile.htm (뒤에 2~4번 까지 붙임 혹은 옆 서브메뉴에서 선택)

세부카테고리

http://handfunshop.com/test/olleh.htm

http://handfunshop.com/test/uplus_mobile.htm


Comment

세부카테고리

리스트는 3x3으로 표시합니다.상품명을 출력하고, 하이퍼링크를 먹여줍니다.


Commenthttp://handfunshop.com/test/olleh2_good.htm

상품상세페이지

http://handfunshop.com/test/olleh2_good.htm


Comment

SNS연동은 해당 SNS서비스에서 별도의 API를 제공하고 있습니다.구현방법은 대게 제공하는 URL에 별도의 텍스트와 링크를 get로 날리는 방법입니다.(상품명과 상품상페에지를 변수로 뽑아주셔서 링크거시면 될듯합니다.)


상품명 / 모델명 출력

상품이미지 출력

SNS연동 아이콘

샐럭트박스

샐럭트박스

샐럭트박스


Comment

샐럭트박스에서는 관리자페이지에서 해당 내용을 직접 입력/설정 가능해야 하며,구매유형,(요금제, 약정 등..) 옵션선택, 결제금액에 따라 판매가의 가격이 자동으로 변경되게 해주세요.

상품명 / 모델명 출력

상품이미지 출력

SNS연동 아이콘

샐럭트박스

샐럭트박스

샐럭트박스



Comment

상품상세정보는 기존처럼 입력한 내용을 뿌리게 되며,

상품 Q&A와 상품평 또한 기존의 방식대로 구현합니다.



Comment

공동구매

공동구매


Comment

공동구매


Comment

관리자페이지에서 배너이미지의 업로드, URL을 지정할 수 있게 하여,출력하게 해주세요.

기존 상품목록과 동일하며, n명이 구매했다는 부분이 추가되었습니다.

공동구매


Comment

기존 상품상세페이지와 동일하며, SNS아이콘 아래에 공동구매 기간과 구매자수가 추가되었습니다.

공동구매


Comment

커뮤니티

커뮤니티


Comment

커뮤니티

공지사항, 자유게시판, 사용후기, 이벤트의 최근게시물이 출력됩니다.이벤트배너는 이벤트게시판에서 글 작성시, 배너를 업로드하면 그 배너를 출력합니다.


Comment

고객센터

고객센터


Comment

고객센터

자주찾는 질문과, 등록된 질문들의최근게시물을 출력합니다.검색창에서 검색한 것은, 자주찾는 질문게시판에 이동하여 그곳에서 검색결과를 뿌려줍니다.

Olleh문의와 U+모바일 문의 두 게시판의 게시물을통합해서 뽑아오며,

게시판이름과 답변완료 여부를 표시합니다.


Comment

커뮤니티

네이게이션 메뉴,마이페이지


Comment

로그인


Comment

회원가입


Comment

마이페이지


Comment

서브메뉴

서브메뉴


Comment

서브메뉴


Comment

해당메뉴이면, 서브메뉴에서 색상이 변경되도록 합니다.(class 에 ing를 넣어주시면 됩니다.)

서브메뉴


Comment

게시판

게시판

게시판은 별도로 웹퍼블리싱하지 않았습니다.첨부해드린 PSD파일과 함게 PPT내용을 참고하셔서 퍼블리싱/프로그래밍 작업을 진행해주시

면 됩니다.


Comment

게시판 글쓰기 화면에는 다음에디터를 적용합니다.에디터의 소스와 설치방법은 아래 URL을 참고하시면 됩니다.

http://code.google.com/p/daumopeneditor/

에디터자체에서 파일의 첨부가 가능하게 해주세요.

게시판

http://code.google.com/p/daumopeneditor/


Comment일반게시판 (목록)

게시판


Comment일반게시판 (글보기)

게시판


Comment일반게시판 (글쓰기)

게시판


Comment

세부카테고리

사용자 후기 게시판 (목록)


Comment

세부카테고리

사용자 후기 게시판 (글보기)

일반게시판 글보기 화면에서 평점이 추가되었습니다.


Comment

세부카테고리

사용자 후기 게시판 (글쓰기)

글쓰기 화면에서 평점을 지정할 수 있게끔 합니다.

상품구매목록이 나타나서 해당 상품을 클릭해, 사용후기를 작성할 수 있게끔 합니다.단, 한번 입력한 사용후기는 라디오박스의 선택여부가 불가능으로 표시됩니다.


Comment

세부카테고리

질문 게시판 (목록)

목록에 답변여부가 표시됩니다.


Comment질문 게시판 (글보기)

게시판


Comment질문 게시판 (글쓰기)

게시판

handfun shop 개발 가이드

Documents