Week1

deploy: 1주차 배포 (#56)

* 서버 정적파일 서비스 추가 (#40)

* chore: [FE] 웹팩 빌드 경로 수정

웹팩 빌드 경로를 백엔드 정적파일 경로로 수정

* chore: [BE] 서버 정적 파일 미들웨어 등록

정적파일 요청에 응답할 수 있도록 미들웨어 등록

close #38

* Update README.md

* Modal 컴포넌트 구현 (#41)

* feat: [FE] Modal Close Event 구현

Modal 배경화면을 누르거나 취소 버튼을 눌렸을때 Modal 창이 닫히는 함수를
구현했습니다.

* style: [FE] Modal Style 추가
 - Modal conent가 정중앙에 오도록 구현했습니다.
 - 자주 쓰일 것 같은 색상을 따로 변수로 두었습니다.

* style: [FE] Modal-content에 display 추가

class 이름이 modal-content인 영역에 display를 추가하여 가운데 정렬을
하도록했습니다.

* style: [FE] Modal buttons css 추가

Modal buttons css 내용 추가했습니다.

* style: [FE] 중복된 border 삭제

중복된 boorder를 삭제했습니다.

* style: [FE] css 정렬

css 정렬을 했습니다.

* fix: [FE] Modal 컴포넌트 재사용성 고려하여 다시 작성

  - modal의 title과 type을 받을 수 있습니다.
  - modalContents에 받은 type을 넣어 줄 수 있습니다.
  - modal-buttons에도 type을 넣어줘야합니다.

* feat: [FE] ModalContents Object 생성

  - modal에서 받은 type을 키로 설정해준다.
  - 키값은 modal 안에 넣을 컴포넌트를 넣어줍니다.

* style: class name 추가

필요한 class name을 추가했습니다.

* feat: [FE] Modal buttons 분리
  - 하드 코딩을 하여 각 모달의 type에 맞게 출력되는 버튼을 만들었습니다.

* feat: attributeChangedCallback 함수 추가

attributeChangedCallback 함수를 추가했습니다.

close #37

* feat: [FE] Sidebar Source List 컴포넌트 제작 (#42)

* <feat>: [FE] Sidebar 컴포넌트

- sidebar 컴포넌트를 제작했습니다.
- source list와 재생시간 정보, 단축키 정보 등이 들어가는 부분입니다.

* <style>: [FE] Sidebar 컴포넌트

- sidebar 컴포넌트의 스타일을 지정했습니다.

* <feat>: [FE] SourceList 컴포넌트

- sourcelist 컴포넌트를 제작했습니다.
- 개별 source 에 마우스를 올릴 시 정보가 나타납니다.

* style: [FE] SourceList 컴포넌트

- sourcelist 컴포넌트의 스타일을 지정했습니다.

close #14

* feat: [FE] Sidebar TimeInfo 컴포넌트 제작 (#43)

* <feat>: [FE] Sidebar 컴포넌트

- sidebar 컴포넌트를 제작했습니다.
- source list와 재생시간 정보, 단축키 정보 등이 들어가는 부분입니다.

* <style>: [FE] Sidebar 컴포넌트

- sidebar 컴포넌트의 스타일을 지정했습니다.

* <feat>: [FE] SourceList 컴포넌트

- sourcelist 컴포넌트를 제작했습니다.
- 개별 source 에 마우스를 올릴 시 정보가 나타납니다.

* style: [FE] SourceList 컴포넌트

- sourcelist 컴포넌트의 스타일을 지정했습니다.

* feat: [FE] TimeInfo 컴포넌트 제작

- timeinfo 컴포넌트를 제작했습니다.
- playTime, totalTime, cursorTime을 00.00.000 으로 지정해두었습니다.
  - string으로 하여 변환이 필요할 것으로 생각됩니다.

* style: [FE] TimeInfo 컴포넌트 제작

- timeinfo 컴포넌트의 style을 지정했습니다.

* style: [FE] Sidebar style 수정

- sidebar에 timeinfo를 추가하면서 css를 수정했습니다.

* refactor: [FE] scss 파일 이름 변경 및 스타일 정렬

- scss 파일 이름을 모두 style.scss로 변경했습니다.
- 스타일 정렬을 했습니다.

* refactor: [FE] 스타일 import 이름 변경과 리뷰 적용

- scss 파일 이름을 바꾸면서 import 하는 부분을 변경했습니다.
- 리뷰 내용을 적용했습니다.
  - sourceList를 하나의 string으로 묶는 부분을 별도의 함수로 분리
  - forEach 대신 reducer 사용

Co-authored-by: Woojin Shin <[email protected]>

close #6

* feat: [FE] Source Upload Form 컴포넌트 및 기능 구현 (#44)

* feat: [FE] Modal Close Event 구현

- 본문 내용
Modal 배경화면을 누르거나 취소 버튼을 눌렸을때 Modal 창이 닫히는 함수를
구현했습니다.

* style: [FE] Modal Style 추가

- 본문 내용
 - Modal conent가 정중앙에 오도록 구현했습니다.
 - 자주 쓰일 것 같은 색상을 따로 변수로 두었습니다.

* feat: [FE] source-upload-form 컴포넌트 생성

- 본문 내용
  - 드래그 앤 드롭으로 파일을 가져올 수 있습니다.
  - Click or Drag and Drop 텍스트를 눌러도 파일을 가져올 수 있습니다.

* style: [FE] source-upload-form style

- 본문 내용
source-uplaod-form과 관련된 style을 작성했습니다.

* feat: [FE] Analyzer 컴포넌트 작성

- 본문 내용
ArrayBuffer를 받아서 AudioBuffer로 변환시켜주는 메소드가 작성되어 있다.

* style: [FE] Style 속성 제거

- 본문 내용
Modal 관련 css를 제거했습니다.

* fix: [FE] console.log 삭제

- 본문 내용
console.log 삭제 했습니다.

* style: [FE] css 정렬

- 본문 내용
css 정렬을 했습니다!

* fix: [FE] 코드 분리

- 본문 내용
  - initDOM 함수를 만들어 DOM을 탐색하는 함수를 만들었습니다.
  - initEvent 함수를 만들어 Event를 등록하는 함수를 만들었습니다.

* refactor: 사용하지 않는 코드 삭제

- 본문 내용
사용하지 않는 코드를 삭제했습니다.

Co-authored-by: Woojin Shin <[email protected]>
close  #4, close #21

* feat: [FE] Header 컴포넌트 구현 (#45)

* feat: [FE] Logo 컴포넌트 구현

- README에 있는 AUDI 로고 svg로 변환했음
- svg 태그로 렌더링, color 속성으로 색상 변경 가능

- #1

* feat: [FE] IconButton 컴포넌트 구현

- iconSet에 모든 icontype 정리
- color, size, icontype을 속성값으로 줘서 사용
- blade icontype만 viewBox 값을 다르게 설정
- 본문 내용

 #2

* feat: [FE] EditorMenu 컴포넌트 구현

- IconButton 컴포넌트를 사용하여 구현
- file, edit, play, user 순으로 tool 모아둠
- play-tools 같은 경우 아이콘 순서를 audiomass를 참고했음
- 본문 내용

 #3

* feat: [FE] Header 컴포넌트 구현

- Logo, EditorMenu 컴포넌트로 구현
- 본문 내용

* feat: [FE] icontype record_on 추가

- 녹음 진행중 상태 아이콘 추가

* refactor: [FE] iconSet -> icons로 파일명 변경

- Set이라는 단어가 안맞는것 같아서 iconSet에서 icons로 파일명 변경

* refactor: [FE] scss 정렬

- scss 정렬 도입했음
-참고: https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685

* style: EOL 추가 및 주석 제거

- 소스파일 맨 마지막에 공백 추가
- 주석제거

* refactor: [FE] EditorMen 내부 컴포넌트 모듈화

- 따로 state를 관리해야 될 것 같아서 EditTools, PlaybackTools 컴포넌트
  모듈화
- 모든 버튼에 icontype과 동일한 id값을 속성으로 줬음

 #3

* refactor: [FE] PlaybackTools 컴포넌트 구현

- EditorMenu에서 사용되는 재생관련 도구들을 모듈화 시킴
- 모든 icon-button에는 icontype과 동일한 id값을 줬음
- 본문 내용

* refactor: [FE] EditTools 컴포넌트 구현

- EditorMenu 컴포넌트에서 사용되는 편집관련 도구들 모듈화
- 모든 icon-button에 icontype과 동일한 id를 넣었음

* feat: [FE] components index.js에 EditTools, PlaybackTools import

- 따로 모듈화 시킨 EditTools, PlaybackTools 컴포넌트 적용

* style: [FE] scss 정렬방식 변경

- justify-content도 display:flex와 관련있다고 판단하여 같은 그룹으로
  변경

* style: [FE] icontype camelcase 적용

- 스네이크 케이스 -> 카멜케이스로 변경

* style: [FE] index-> 컴포넌트 명으로 변경

- 개발도중 보기 불편해서 컴포넌트 명으로 변경
- 본문 내용

* feat: [FE] AudioTrack 컴포넌트 제작 (#46)

* chore: [FE] babel 플러그인 설치 및 웹팩 설정 추가

- async/await 등 polyfil이 필요한 문법을 사용하기 위해 babel 플러그인
  설치 및 웹팩 babel설정 추가

* feat: [FE] AudioTrack 컴포넌트 제작

- AudioBuffer의 파형 데이터를 바탕으로 파형 그래프 그리기 구현
- 부모 컴포넌트에서 사이즈 조절이 가능하도록 구현

* refactor: [FE] AudioTrack 사이즈 조절 추가

- 상위 컴포넌트에서 height 속성 값으로 사이즈 조절 가능하도록 수정


* refactor: [FE] 테스트 코드 삭제

- 오디오 파일 정보 참조를 위한 input 처리 코드 삭제


* style: [FE] CSS 우선순위 정렬

- CSS 프로퍼티 우선순위에 따른 정렬 수행

* refactor: [FE] 코드 리팩토링

- 불필요한 테스트 코드 삭제

close #18, close #36

* feat: [FE]메인화면 레이아웃 구성 (#48)

* chore: [FE] 웹팩 경로 alias 추가

* style: [FE] 공통 스타일 분리

- 공통으로 사용될 reset, variables, common 파일 추가

* refactor: [FE] 메인화면 레이아웃 구성

- 메인화면 레이아웃 설정(헤더, 사이드 메뉴, 오디오 파형)
- 전체적인 파일 네이밍 변경

close #47

* refactor: [FE] IconButton hover 효과 추가 (#50)

* feat: [FE] IconButton hover fill 변경

- hover로 fill 색상 변경하도록 scss 추가
- user-menu의 경우는 hover시 색상 변경 막아놨음

* feat: [FE] variable에 초록색 스타일변수 추가

- prototype에서 사용한 초록색 변수로 추가

* refactor: [FE] Sidebar 수정 (#49)

* style: [FE] Sidebar style 수정

- Sidebar style을 수정했습니다.
  - css를 기획안대로 고쳤습니다.
  - sidebar의 width 값을 pixel로 주어 시간 값이 빠져나가지 않도록
    했습니다.
  - border-radius 값을 5px 줬습니다.

* refactor: [FE] 변수 수정

- private 변수로 수정했습니다.
- time 값을 멤버변수로 가지도록 바꿨습니다.

* feat: [FE] SourceUploadModal과 Header 연결 (#51)

* feat: [FE] App에 source-modal-form 등록

source-modal-form 등록했습니다.

* style: [FE] display 값 수정

display: flex에서 display: none으로 수정했습니다.

* feat: [FE] modal에 id 변경

id가 modal이던걸 this.type으로 변경했습니다.

* feat: [FE] this.addEventListener 수정

this를 제거했습니다.

* feat: [FE] Header와 SourceUploadForm 연결

소스  불러오기 아이콘을 누르면 해당 모달창이 뜨도록 연결했습니다!

* feat: [FE] Analyzer에 audioFileName 저장

Analyzer에 audioFileName도 저장이 가능하도록 만들었습니다.

* EffectList 컴포넌트 제작 및 루트 컴포넌트에서 모든 이벤트 처리 구현 (#53)

* refactor: [FE] modalContentType 정의

- 재사용을 위해서 modal의 컨텐츠를 바꾸는 부분을 타입을 정의

* refactor: [FE] ModalButtonType 정의

- 재사용 및 확장성을 고려한 ModalButtonType 정의

* style: [FE] SourceUploadForm 스타일 수정

- Form 모달창 중앙배치
- 사용성을 향상시키기우해 소스불러오기 클릭영역 호버효과

* refactor: [FE] Modal 스타일 수정 및 네이밍 변경

- 파스칼케이스 형식으로 네이밍 변경
- 모달 컨텐츠 중앙 배치 및 레이아웃 재조정

* feat: [FE] EffectList 컴포넌트 제작

- Modal 컴포넌트에서 타입을 선택해서 활용할 수 있도록 EffectList
  컴포넌트 제작

* refactor: [FE] Modal 컴포넌트 리팩토링

- ModalType을 모두 하나의 파일로 정리
- Modal 내부 코드를 함수를 분리하여 리팩토링

* chore: [FE] 타입스크립트 alias 설정 추가

- TS에서 alias 경로를 사용하기위한 설정 추가

* feat: [FE] 루트 컴포넌트에서 모든 이벤트 처리 구현

- 루트 컴포넌트에서 모든 이벤트를 처리할 수 있도록 수정

* feat: [FE] 루트 컴포넌트에 이벤트리스너 등록 유틸 구현

- 하위 컴포넌트에서 루트 컴포넌트에 이벤트를 등록할 수 있도록 유틸 함수
  구현

* feat: [FE] 이벤트 관련 타입 정의

- 루트에서 이벤트 등록관련 타입 정의


* refactor: [FE] Modal 컴포넌트 루트에서 이벤트 처리하도록 수정

- 루트 컴포넌트에 모든 이벤트를 등록

* refactor: [FE] 코드 리팩토링

- 전체적인 함수 리턴 타입 추가

* refactor: [FE] EventDataType 오타수정

- 타입정의시 ;을 ,로 작성한 부분 수정

close #20

* 편집파일 저장하기 기능 구현 (#54)

* feat: [FE] 파일저장 기능 구현

- AurrayBuffer, quality(0~1), fileName을 인자로 wav파일을 만들어주는
  기능 구현
  - 저: 0.5 , 중 : 0.75, 고: 1 로 설정
- 압축이 끝나면 downloadModal창 a태그에 다운로드 링크 생성
- wav, mp3 파일의 차이점은 음질인것 같음
  - wave 파일 : 무손실 음원, 보통 편집할 때 사용
  - mp3 파일 : 압축시킨 음원, 무손실 음원보단 음질이 덜하지만 용량이
    적음

 #22

* feat: [FE] EventType에 keyup 추가

- input태그로 버튼 disabled 먹일 때 필요해서 추가했음

* refactor: [FE] util, components index에 import 추가

- 파일 저장기능 util에 추가
- SourceDownload Component 추가

* refactor: [FE] modal download 타입 추가

- 파일 저장하는 modal 컴포넌트를 위한 download타입 추가

* style: [FE] SourceDownload 컴포넌트 scss 추가

- 모달 버튼에 a태그를 감싸서 scss를 다르게 적용시켰습니다.

 #22

* feat: [FE] SourceDownload 컴포넌트 구현

- keyup 이벤트로 파일이름이 없을 시 disabled 되도록 처리했습니다.
- 파일 압축중에도 disabled 되도록 처리했습니다.
- 이벤트는 일단 test용으로만 적용했고, 루트에서 관리하도록 리팩토링이
  필요합니다...

 #22

close #22

* feat: [FE] pub/sub 패턴 활용 Store 구현 및 소스 불러오기 기능 연동 (#55)

* feat: [FE] Store 타입 정의

- Store 기본 타입정의

* feat: [FE] StoreChannel 구현

- StoreChannel pub/sub 패턴을 적용하여 구현
- StoreChannelType 정의

* feat: [FE] Store alias 설정 추가

- Store alias 설정 TS 설정파일, 웹팩 설정파일에 추가


* style: [FE] hide 속성 important로 수정


* feat: [FE] StoreChannelType 정의

- StoreChannel 정보를 유지하기 위한 타입 정의


* feat: [FE] FileUtil 작성

- File관련 처리 함수를 모듈화한 Util 작성

* feat: [FE] AudioUtil 추가

- Audio 관련 작업 함수를 모듈화한 AudioUtil 구현

* refactor: [FE] 코드 리팩토링

- 불필요한 파일 제거
- 불필요한 이벤트 타입 제거

* feat: [FE] Source 모델 정의

- 오디오 파일 소스의 모델정의

* feat: [FE] pub/sub 패턴 활용 Store 구현

- Store에서 state를 유지하고, immutable하게 변경되도록 수정
- StoreChannel에서 Store가 publish한 데이터를 notify하도록 구현

* feat: [FE] cotroller 정의

- Store에 접근하기 전에 비즈니스 로직을 수행할 컨트롤러 정의
- 비즈니스 로직 수행 후, Store에 데이터 업데이트

* refacrtor: [FE] Modal 컴포넌트 속성 변경

- Modal 컴포넌트 속성 변경으로 인한 코드 수정

* refactor: [FE] Modal 컴포넌트 이벤트 추가

- 모달 창 close 이벤트를 루트에 등록

* refactor: [FE] 에디터 메뉴 소스불러오기 버그 수정

- 소스불러오기 모달 창 동작관련 수정(임시로 Dom 서치를 해서 해결, 추후
  이슈를 통해 수정예정)

* feat: [FE] 소스 불러오기 기능 구현

- 소스불러오기를 통해 파일을 업로드한 후, Store에 저장
- Store에 저장 후, observer를 통해 데이터 업데이트

* feat: [FE] SourceUploadForm 수정

- 이벤트 등록을 루트에서 처리하도록 수정

* refactor: [FE] ModalButtonContent에 eventKey 등록

- eventKey 등록

close#39, close#31, close#32, close#33, close#34

Co-authored-by: Jeongeun-Choi <[email protected]>
Co-authored-by: pieisland <[email protected]>
Co-authored-by: Songwonseok <[email protected]>