POMOTODO(8) - 메인페이지 거의 구현완료, 서버공부

 

진행상황은 깃허브에 매일매일 기록하고 있습니다.

https://github.com/coqoa

 

---

 
저번주에 설정한 목표 :

1. 타이머 애니메이션 추가
2. 타이머가 작업/휴식에 따라 타입이 변경되도록 구현
3. 뽀모도로 기록 입력텍스트창 마무리하고
 - > 기능적으로 묶으면 2가지 목표가 됨

첫번째. 뽀모도로 타이머 관련
- 타이머 애니메이션추가 / 타이머 타입 변경 구현
  재생/정지를 토글버튼으로 구현해서 뽀모도로타이머의 타입을  사용자가 시각적으로 알 수 있도록 했음
  버튼을 누르면 타입에 맞는 색깔을 가진 타이머 애니메이션 실행, 토글버튼을 정지버튼으로 변경
  정지버튼을 누르거나 00분00초가 되면 자동기록, 정지버튼을 재생버튼으로 변경, 타이머의 타입을 변경시킨다

두번째. 뽀모도로 기록부분
- 인풋타입으로 받은 텍스트를 저장하도록 하는 작업
  기록되는 곳에 타입을 시각적으로 표시하는 색깔을 가진 동그라미를 추가했고 시간과 텍스트입력창이 추가로 자동기록된다
  텍스트를 입력하고 엔터를 누르면 그대로 출력하고 리스트를 클릭하면 텍스트를 수정할 수 있도록 구현했음

 

이번주 설정한 데드라인 (실제 구현완료하는데 걸린 시간)

1. 타이머 애니메이션 추가 2일, (2일+반나절)
2. 타이머 타입변경 1일, (1일) 
3. 뽀모도로 기록부분 마무리 2일, (2일+반나절)
4. 추가로 작업한것 : (1일)

추가로 작업한 것
- 투두/낫투두리스트 추가 작성시 초기화되던문제

 

이유와 해결방법 :
기존에는 텍스트를 입력하고 엔터를 눌러 값을 넘길 때마다 '값을 배열에 넣고 반복문을 사용, 배열의 Index들을 새로 작성하도록'구현되어있었기 때문에 컬러가 초기화 되는 문제가 있었다
그래서 배열과 반복문을 빼고 텍스트입력하고 값을 넘기면  innerHTML를 사용해서 직접 입력하도록 변경하였음

개발 변경 사항

1. 뽀모도로 일시정지 기능 삭제
   내가 뽀모도로타이머를 이용할 때는 집중 가능한 시간을 직접 설정하는건데 집중하는 시간에 예외사항이 생기는게 비효율적이라고 판단했고, 재생/정지 두가지버튼을 토글형식으로 구현해서 하나의 아이콘만 사용하므로 디자인적으로 깔끔하게 만들 수 있었음

2. 초단위는 1이 아니라 5씩 올라가도록 수정
   타이머 애니메이션을 개발하는데 1초단위는 타이머 애니메이션이 적용이 안되고 5초단위로 적용이 되는 문제도 있었고  
   1초단위로 시간을 움직이는게 비효율적이며 수요도 없을것이라고 판단했음

저번주에 부족했던 것  3가지

1. 재생시 출력되는 오디오 변경(컨셉에 안맞음)
2. 뽀모도로 타이머 초단위로 움직여서 범위가 넘어가면 분단위가 움직이도록 
3. 디자인 통일성이 부족 (오디오 드롭다운리스트 부분)

#### 다음주 목표 

1. 오디오 선택 드롭다운리스트 통일성 + 오디오 선택시 바로 재생되도록( 수요일)
   버튼을 누르면 모달창의 display를 inline으로 변경시킨다(클릭시 조건 확인해서 토글버튼으로 구현)
   모달창 내부에 있는 버튼을 누르면? 

    -> 1. 모달창을 닫는다 2. 버튼의 텍스트를 변경한다

        3. 노래를 실행하고 재생버튼의 display값을 none으로 바꾸고 일시정지버튼의 display는 inline으로 바꾼다

   재생버튼을 누르면 현재의 오디오를 실행, 일시정지버튼을 누르면 정지시킨다
        * 일시정지로 할건지 정지로 할건지 정하기

2. 타이머가 지금 25분으로 고정하지 말고 마지막에 설정한 시간을 저장하도록

3. 타이머 애니메이션 정상작동 확인(선 생기는것, 현재는 1분 3분 5분 등 짧은 시간으로만 확인완료) (수요일)
   - 선이 생기는것 : 확대를 하니깐 발생하는 문제임, 왜그런지 한번 더 생각해보자

4. 반응형디자인 수정 (수요일)
   css 반응형에서 자바스크립트의 메소드를 호출하도록 한다
   자바스크립트에서 브라우저의 height값이 얼마이상 넘어가면 브라우저2당 1픽셀씩 세로로 이동하도록 구현하면 될듯?

5. 코드 정리 (수요일)

6. 서버공부(목요일~월요일)

아쉬운점 :

이래저래 시간이 조금 부족해서 개발에 들인 시간이 부족했던게 아쉬웠다
다음주 목표로 잡은 오디오 드롭다운리스트를 통일하는것과, 시간을 저장하는건 이번주에 해결하고 싶었는데  하지 못해서 아쉽고 늦어도 내일까지는 완료할 계획이다
개발하는데 새로운 문제점이나 개선사항이 발생해서 고치다보니 서버공부를 할 시간이 부족했고 못해서 아쉬웠다
다음주는 개발20%(목표+새로운 문제가 발생할 시 해결) 서버공부 80%의 비율로 진행하려고 계획했다