SlideShare a Scribd company logo
1 of 22
Download to read offline
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
종합 설계 프로젝트
1960013 나호석
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
목차
1 작품 설명
2 개발 환경
3 작품 설
계
4 작품 구현
table of contents
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
1
작품 설명
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
요구사항 정의
작품 제목 소개 개발 일정
Part 1
작품 소개
HS Liquor Store
• 양주의 4종류(위스키, 보드카, 브랜디, 럼)를 판매하는 웹 페이지
작
품
설
명
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 1
요구사항 정의
기능
 제품 목록 페이지
 장바구니 기능 및 페이지
 마이페이지
 로그인 및 회원가입페이지
 아이디 및 비밀번호 찾기
 사이트 내 주류 관련 이벤트(행사) 접수 페이지
 상품 가격 필터링 기능
 PC와 모바일에 적응적인 레이아웃 적용
 VUETIFY를 활용한 동적 레이아웃 적용
성능
인터페이스 제약사항
 주류 상품의 실시간 업데이트
 캐싱 및 브라우저 최적화
 개인정보 보호: 사용자의 개인정보를 안전하게
보호하기 위한 정책 및 기술적인 조치.
요구사항 정의
작품 제목 소개 개발 일정
작
품
설
명
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 1
개발 일정
>> >> >>
23.11.15 ~
23.11.19
23.11.20 ~
23.12.03
23.12.04 ~
23.12.05
23.12.05 ~
23.12.06
작품 구현 및
오류 수정
최종 결과 보고서
작성
최종 검토 및 제출
1. 유사 웹 페이지
벤치마킹
2. 서버 로직 및
데이터베이스 설
계
요구사항 정의
작품 제목 소개 개발 일정
작
품
설
명
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
2
개발 환경
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
시스템 구성
도
WEB
Part 2
Legacy Server
Naver shopping API
Server
Node.js
Databas
e
MongoDB
Client
Browser/PC
Moblie
시스템 구성도 알고리즘
개
발
환
경
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 2
Liquor Store 알고리
즘
Main page
회원가입
로그인
Id/pw 찾기
위스키
구매페이지
보드카
구매페이지
브랜디
구매페이지
럼
구매페이지
이벤트 확인
및 접수
마이페이지
장바구니
바로결제하기
NAVER
API
시스템 구성도 알고리즘
개
발
환
경
가격
필터링
Socket.io
passport
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
3
작품 설계
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3
서비스 시나리오(데이터 흐름) 서비스 API 설계 데이터베이스 설계
작
품
설
계 서비스 시나리오
① 회원가입을 통해 사용자는 알맞은 ID와 Passward로 로그인 인증이 이루어진다.
② 메인 홈페이지에서 위스키 상품페이지로 넘어간다.
③ 필터링 기능을 활용하여 상품을 낮은 가격순으로 검색한다.
④ 검색된 whiskey를 원하는 수량을 선택하여 사용자의 장바구니에 추가한다.
⑤ 장바구니에 담긴 상품의 개수들을 수정하고 모두선택 버튼을 클릭하고 결제한다.
⑥ 상품을 결제하고 난 후 메인 홈페이지의 이벤트발생 트리거를 확인하고 클릭한다.
⑦ 진행중인 이벤트 페이지로 넘어가 현재 진행중인 행사 안내문을 확인한다.
⑧ 행사를 접수 버튼을 눌러 사용자의 이름, 성별, 나이를 입력한 뒤, 이벤트 참여를 완료한다.
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3
서비스API 설계 - Naver API
(1)
번호 메소드 경로 설명
1 GET /check-auth 사용자의 인증 상태를 확인하는 엔드포인트
2 GET /getusername 로그인된 사용자의 이름을 확인하는 엔드포인트
3 GET /products
사용자의 장바구니를 조회하는 엔드포인트
현재 장바구니에 담긴 상품의 이름, 가격, 이미지, 수량을 반환.
4 POST /login 로그인을 수행하는 엔드포인트
5 POST /logout 세션과 cookie를 clear시켜서 로그아웃을 수행하는 엔드포인트
6 post /findid 사용자의 이름과, 이메일을 입력받아 ID를 찾는 엔드포인트
7 POST /findpw 사용자의 이름, ID, 전화번호를 받아 비밀번호를 찾는 엔드포인트
서비스 API 설계 데이터베이스 설계
작
품
설
계 서비스 시나리오
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3
서비스API 설계 - Naver API
(2)
번호 메소드 경로 설명
8 POST /cart 상품을 DB에 저장하고 저장된 상품을 나타내는 엔드포인트
9 POST /signup
사용자의 이름, email, ID, Password, 전화번호를 받아 회원가입을
통해 DB에 저장하는 엔드포인트
10 PUT /updateuser 마이페이지에서 사용자의 정보를 수정할 때 사용되는 엔드포인트
11 PUT /products/update
장바구니에 저장된 상품의 수량을 변경하여
DB에 저장하는 엔드포인트
12 PUT /updatepw 마이페이지에서 사용자의 비밀번호를 변경하는 엔드포인트
13 DELETE /deleteuser 마이페이지에서 회원탈퇴기능을 수행하는 엔드포인트
14 DELETE /products/delete 장바구니에서 상품을 삭제하는 엔드포인트
서비스 API 설계 데이터베이스 설계
작
품
설
계 서비스 시나리오
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3
데이터베이스 설
계
Product서버 API 데이터베이스 설계
작
품
설
계 서비스 시나리오
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
4
작품 구현
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
메인페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
로그인 /회원가입 페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
ID / PW 찾기 페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
상품 구매페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
장바구니 페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
마이페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
진행중인 이벤트 페이지

More Related Content

Similar to 종합설계프로젝트(1960013_나호석).pptx

Website Benchmarking3
Website Benchmarking3Website Benchmarking3
Website Benchmarking3
junhozzang
 
091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117
JUNGEUN KANG
 
(Login 20131115)
(Login 20131115)(Login 20131115)
(Login 20131115)
Jaeyoon Kim
 
Banchmarking1 4
Banchmarking1 4Banchmarking1 4
Banchmarking1 4
juhyun
 

Similar to 종합설계프로젝트(1960013_나호석).pptx (20)

Website Benchmarking3
Website Benchmarking3Website Benchmarking3
Website Benchmarking3
 
사업계획서
사업계획서사업계획서
사업계획서
 
091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117
 
(Login 20131115)
(Login 20131115)(Login 20131115)
(Login 20131115)
 
시스템종합설계2조 큐피트
시스템종합설계2조 큐피트시스템종합설계2조 큐피트
시스템종합설계2조 큐피트
 
oauth2_sns_login.pptx
oauth2_sns_login.pptxoauth2_sns_login.pptx
oauth2_sns_login.pptx
 
비융합5조_PPT.pptx
비융합5조_PPT.pptx비융합5조_PPT.pptx
비융합5조_PPT.pptx
 
[메조미디어] Media&Market Report (2022.04)
[메조미디어] Media&Market Report (2022.04)[메조미디어] Media&Market Report (2022.04)
[메조미디어] Media&Market Report (2022.04)
 
Banchmarking1 4
Banchmarking1 4Banchmarking1 4
Banchmarking1 4
 
Portfolio 20190731 wooseokkim
Portfolio 20190731 wooseokkimPortfolio 20190731 wooseokkim
Portfolio 20190731 wooseokkim
 
Bms petpick project
Bms petpick projectBms petpick project
Bms petpick project
 
Room.d 사업계획서 3.0 ver
Room.d 사업계획서 3.0 verRoom.d 사업계획서 3.0 ver
Room.d 사업계획서 3.0 ver
 
쿡샵(CookShop)
쿡샵(CookShop)쿡샵(CookShop)
쿡샵(CookShop)
 
ClickWork 사업계획서
ClickWork 사업계획서ClickWork 사업계획서
ClickWork 사업계획서
 
Blind helper
Blind helperBlind helper
Blind helper
 
스타트업처럼 토이프로젝트하기
스타트업처럼 토이프로젝트하기스타트업처럼 토이프로젝트하기
스타트업처럼 토이프로젝트하기
 
전자책 제작 제안서
전자책 제작 제안서전자책 제작 제안서
전자책 제작 제안서
 
Aiffel 해커톤 최종 발표
Aiffel 해커톤 최종 발표Aiffel 해커톤 최종 발표
Aiffel 해커톤 최종 발표
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
Name on it service introduction_v1
Name on it service introduction_v1Name on it service introduction_v1
Name on it service introduction_v1
 

종합설계프로젝트(1960013_나호석).pptx

  • 1. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 종합 설계 프로젝트 1960013 나호석
  • 2. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 목차 1 작품 설명 2 개발 환경 3 작품 설 계 4 작품 구현 table of contents
  • 3. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 1 작품 설명
  • 4. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 요구사항 정의 작품 제목 소개 개발 일정 Part 1 작품 소개 HS Liquor Store • 양주의 4종류(위스키, 보드카, 브랜디, 럼)를 판매하는 웹 페이지 작 품 설 명
  • 5. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 1 요구사항 정의 기능  제품 목록 페이지  장바구니 기능 및 페이지  마이페이지  로그인 및 회원가입페이지  아이디 및 비밀번호 찾기  사이트 내 주류 관련 이벤트(행사) 접수 페이지  상품 가격 필터링 기능  PC와 모바일에 적응적인 레이아웃 적용  VUETIFY를 활용한 동적 레이아웃 적용 성능 인터페이스 제약사항  주류 상품의 실시간 업데이트  캐싱 및 브라우저 최적화  개인정보 보호: 사용자의 개인정보를 안전하게 보호하기 위한 정책 및 기술적인 조치. 요구사항 정의 작품 제목 소개 개발 일정 작 품 설 명
  • 6. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 1 개발 일정 >> >> >> 23.11.15 ~ 23.11.19 23.11.20 ~ 23.12.03 23.12.04 ~ 23.12.05 23.12.05 ~ 23.12.06 작품 구현 및 오류 수정 최종 결과 보고서 작성 최종 검토 및 제출 1. 유사 웹 페이지 벤치마킹 2. 서버 로직 및 데이터베이스 설 계 요구사항 정의 작품 제목 소개 개발 일정 작 품 설 명
  • 7. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 2 개발 환경
  • 8. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 시스템 구성 도 WEB Part 2 Legacy Server Naver shopping API Server Node.js Databas e MongoDB Client Browser/PC Moblie 시스템 구성도 알고리즘 개 발 환 경
  • 9. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 2 Liquor Store 알고리 즘 Main page 회원가입 로그인 Id/pw 찾기 위스키 구매페이지 보드카 구매페이지 브랜디 구매페이지 럼 구매페이지 이벤트 확인 및 접수 마이페이지 장바구니 바로결제하기 NAVER API 시스템 구성도 알고리즘 개 발 환 경 가격 필터링 Socket.io passport
  • 10. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 3 작품 설계
  • 11. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 3 서비스 시나리오(데이터 흐름) 서비스 API 설계 데이터베이스 설계 작 품 설 계 서비스 시나리오 ① 회원가입을 통해 사용자는 알맞은 ID와 Passward로 로그인 인증이 이루어진다. ② 메인 홈페이지에서 위스키 상품페이지로 넘어간다. ③ 필터링 기능을 활용하여 상품을 낮은 가격순으로 검색한다. ④ 검색된 whiskey를 원하는 수량을 선택하여 사용자의 장바구니에 추가한다. ⑤ 장바구니에 담긴 상품의 개수들을 수정하고 모두선택 버튼을 클릭하고 결제한다. ⑥ 상품을 결제하고 난 후 메인 홈페이지의 이벤트발생 트리거를 확인하고 클릭한다. ⑦ 진행중인 이벤트 페이지로 넘어가 현재 진행중인 행사 안내문을 확인한다. ⑧ 행사를 접수 버튼을 눌러 사용자의 이름, 성별, 나이를 입력한 뒤, 이벤트 참여를 완료한다.
  • 12. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 3 서비스API 설계 - Naver API (1) 번호 메소드 경로 설명 1 GET /check-auth 사용자의 인증 상태를 확인하는 엔드포인트 2 GET /getusername 로그인된 사용자의 이름을 확인하는 엔드포인트 3 GET /products 사용자의 장바구니를 조회하는 엔드포인트 현재 장바구니에 담긴 상품의 이름, 가격, 이미지, 수량을 반환. 4 POST /login 로그인을 수행하는 엔드포인트 5 POST /logout 세션과 cookie를 clear시켜서 로그아웃을 수행하는 엔드포인트 6 post /findid 사용자의 이름과, 이메일을 입력받아 ID를 찾는 엔드포인트 7 POST /findpw 사용자의 이름, ID, 전화번호를 받아 비밀번호를 찾는 엔드포인트 서비스 API 설계 데이터베이스 설계 작 품 설 계 서비스 시나리오
  • 13. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 3 서비스API 설계 - Naver API (2) 번호 메소드 경로 설명 8 POST /cart 상품을 DB에 저장하고 저장된 상품을 나타내는 엔드포인트 9 POST /signup 사용자의 이름, email, ID, Password, 전화번호를 받아 회원가입을 통해 DB에 저장하는 엔드포인트 10 PUT /updateuser 마이페이지에서 사용자의 정보를 수정할 때 사용되는 엔드포인트 11 PUT /products/update 장바구니에 저장된 상품의 수량을 변경하여 DB에 저장하는 엔드포인트 12 PUT /updatepw 마이페이지에서 사용자의 비밀번호를 변경하는 엔드포인트 13 DELETE /deleteuser 마이페이지에서 회원탈퇴기능을 수행하는 엔드포인트 14 DELETE /products/delete 장바구니에서 상품을 삭제하는 엔드포인트 서비스 API 설계 데이터베이스 설계 작 품 설 계 서비스 시나리오
  • 14. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 3 데이터베이스 설 계 Product서버 API 데이터베이스 설계 작 품 설 계 서비스 시나리오
  • 15. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 4 작품 구현
  • 16. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 메인페이지
  • 17. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 로그인 /회원가입 페이지
  • 18. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 ID / PW 찾기 페이지
  • 19. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 상품 구매페이지
  • 20. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 장바구니 페이지
  • 21. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 마이페이지
  • 22. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 진행중인 이벤트 페이지