☕️'spaceMan'

• 사랑하는 사람과 커피를 우주에서 즐겨보새요

1차 프로젝트 : 2021 -09-01 ~ 2021-09-08

👨‍👩‍👦‍👦Member. hieus의 팀원들입니다

한경현(kyunghyun Han):깃허브
박준혁(jun hyuk Park):깃허브

전반적인 프로젝트 진행절차
1. 프로젝트 파트별로 진행
2. 오프라인 위주의 팀 작업
3. 오프라인이 불가능할 경우 온라인으로 팀 작업을 진행하며 서로의 코드 상황 브리핑 및 회의
4. 각 파트별 진행 상황을 수시로 공유

프로젝트 진행 중 힘들었던 점
1. html css 의 이해력이 부족하여 비슷한 페이지를 여러번 사용
2. css 백업을 안하여 css파일 처음부터 재생성
3. 깃허브 미숙하여 병합 에 힘듬

1주차

-1일차 : 서로의 프로젝트 아이디어 공유 및 정리

-2일차 부터 프로젝트 진행

개요

우주컨셉으로 한 작은 카페느낌의 페이지 구성

관련자료

스타벅스 관련자료

스타벅스 기능을 오마주 하여 작성하엿습니다

🛠 사용한 기술

• 웹 화면 구성 : html css
• 개발 Tool : Visual Studio Code``github
• 로그인 구현 : kakao api naver api
• 결제: 우편 api 아임포트
• 지도: 카카오 맵 api
• 프로젝트 관리 Tool : Google Drive GitHub notion

페이지별 설명

메인

• 시놉시스를 자체 제작하여 스토리를 보면서 사용자가 즐길 수 있게 만들었습니다
  

커피스타일 설정

• 스타벅스의 커피취향 골라주기를 오마주하여 사용자가 커피취향을 선택할수있게 if 문 사용하여 클릭하면 그 값을 넘겨 사용자에 맞는 커피를 찾을 수 있게 만들었습니다
  

커피별 장르

• 커피 종류에 따라 커피 양 또는 종류가 무엇인지 확인 할 수 있게 제작 하였습니다
  

팀페이지

• 팀 페이지를 자체 제작하여 팀 소개 깃허브 주소를 연결
  

상품페이지

• 커피 및 구성용품 판매 장바구니 연결 및 결제창 연결
  

장바구니

• 등록된 물품을 쿠키를 사용하여 장바구니 데이터 저장 후 저장된 쿠키를 장바구니 페이지에 데이터가 유지
  
  

결제

• 저장된 쿠키데이터를 아임포트 api 연결하여 물품별 가격에따라 결제
  

맵

• 카카오 맵 api를 사용하여 마커를 등록 후 등록된 마커의 화면이 뜨게 구현
  

모바일 환경

• 반응형 웹을 위해 미디어 쿼리를 사용하여 화면 크기에 따라 웹이 반응하게 구현
  

로그인

• 카카오 api를 사용 카카오 로그인을 구현
  

디자인페이지

• 시놉시스 맞는 디자인 이미지 선정 후 전시회느낌의 디자인 컨셉을 구현
  

☕️'spaceMan'

• 사랑하는 사람과 커피를 우주에서 즐겨보새요

1차 프로젝트 : 2021 -09-01 ~ 2021-09-08

👨‍👩‍👦‍👦Member. hieus의 팀원들입니다

한경현(kyunghyun Han):깃허브
박준혁(jun hyuk Park):깃허브

전반적인 프로젝트 진행절차
1. 프로젝트 파트별로 진행
2. 오프라인 위주의 팀 작업
3. 오프라인이 불가능할 경우 온라인으로 팀 작업을 진행하며 서로의 코드 상황 브리핑 및 회의
4. 각 파트별 진행 상황을 수시로 공유

프로젝트 진행 중 힘들었던 점
1. html css 의 이해력이 부족하여 비슷한 페이지를 여러번 사용
2. css 백업을 안하여 css파일 처음부터 재생성
3. 깃허브 미숙하여 병합 에 힘듬

1주차

-1일차 : 서로의 프로젝트 아이디어 공유 및 정리

-2일차 부터 프로젝트 진행

개요

우주컨셉으로 한 작은 카페느낌의 페이지 구성

관련자료

스타벅스 관련자료

스타벅스 기능을 오마주 하여 작성하엿습니다

🛠 사용한 기술

• 웹 화면 구성 : html css
• 개발 Tool : Visual Studio Code``github
• 로그인 구현 : kakao api naver api
• 결제: 우편 api 아임포트
• 지도: 카카오 맵 api
• 프로젝트 관리 Tool : Google Drive GitHub notion

페이지별 설명

메인

• 시놉시스를 자체 제작하여 스토리를 보면서 사용자가 즐길 수 있게 만들었습니다
  

커피스타일 설정

• 스타벅스의 커피취향 골라주기를 오마주하여 사용자가 커피취향을 선택할수있게 if 문 사용하여 클릭하면 그 값을 넘겨 사용자에 맞는 커피를 찾을 수 있게 만들었습니다
  

커피별 장르

• 커피 종류에 따라 커피 양 또는 종류가 무엇인지 확인 할 수 있게 제작 하였습니다
  

팀페이지

• 팀 페이지를 자체 제작하여 팀 소개 깃허브 주소를 연결
  

상품페이지

• 커피 및 구성용품 판매 장바구니 연결 및 결제창 연결
  

장바구니

• 등록된 물품을 쿠키를 사용하여 장바구니 데이터 저장 후 저장된 쿠키를 장바구니 페이지에 데이터가 유지
  
  

결제

• 저장된 쿠키데이터를 아임포트 api 연결하여 물품별 가격에따라 결제
  

맵

• 카카오 맵 api를 사용하여 마커를 등록 후 등록된 마커의 화면이 뜨게 구현
  

모바일 환경

• 반응형 웹을 위해 미디어 쿼리를 사용하여 화면 크기에 따라 웹이 반응하게 구현
  

로그인

• 카카오 api를 사용 카카오 로그인을 구현
  

디자인페이지

• 시놉시스 맞는 디자인 이미지 선정 후 전시회느낌의 디자인 컨셉을 구현
  

자세한 코드