---
# System prepended metadata

title: 부캠덕 2주차

---


# 부캠덕 2주차

## 참여자
박진우, 나영균, 김현수, 김재원, 김종윤, 성동기, 함형규, 한혜경

## Library
html, css, pug //다음조를 위한 배려

## 오리조
- 반응형 (글로벌?)
- 타임모듈
- 시간마다 메세지 기능
- 오리 뷰 TimerBuduckView (precent, step)
- 물 뷰 TimerWaterView (percent, step)
- 시계기능 
- 오리클릭?
TimerView

## 2주차 작업사항
- 타이머(헤더)  
    - 부캠덕이 시간에 따라서(미션 경과에 따라서) 움직인다.
    - 현재 시간이 헤더 우측에 표시된다.
    - 시간이 7시를 넘어가면 물결 색이 노란색으로 바뀐다.
    - 시간이 8시를 넘어가면 물결 색이 빨간색으로 바뀐다.
    
- 부캠덕과의 대화
    - 부캠덕에게 말을걸면 hello라고 입력하면 bye라고 구현. //알고리즘은 다음주 조가..
    - 대화를 입력하면 입력한사항과 답변이 나옴


## 역할
구현해야 할 큰기능 두가지로 4명/4명 나눈 후 2명씩 파트너 개발을 진행했다.

### 부캠덕 타이머
- 김종윤, 김재원
    - 헤더 타이머의 파도 `TimerWater(View).js` 모듈 설계  
        - 파도 애니메이션 스타일 적용
        - 미션의 남은시간에 따라 파도색상 변경
        - 퍼센트 값에 따라서 파도크기 변경
- 나영균, 함형규
    - 타임 모듈 `timerDuck.js` 설계
        - js의 Date 객체로 날짜와 시간, 시간에 따른 퍼센트값 반환
    - 헤더 타이머의 부캠덕, 메인 시간 `main.js` 설계
        - 타임 모듈로부터 퍼센트값을 받아와서 부캠덕의 위치 업데이트
        - 타임 모듈로부터 시간을 받아와서 메인 시간 업데이트

### 부캠덕과의 대화
- 박진우, 김현수, 성동기 : 부캠덕 대화 전송 출력하는 js 코드 구현
    - Dom을 이용하여 구성하게 만들었다.
    - ajax 통신으로 데이터 전달 후 서버에서 적절한 대답전송
- 한혜경 : 부캠덕과의 대화 페이지 구현
    - html template 구현
    - style 추가