Week5

Week5 v1.2.3 배포

Week5 v1.2.3 배포

Week5

fix: [FE] style 수정 및 AddEffectCommand,Compressor, Fade in/out 버그 해결

style 수정 및 AddEffectCommand,Compressor, Fade in/out 버그 해결

Week5

fix: [FE] console제거 및 zoom out 커서 싱크 안맞는 버그 해결

console제거 및 zoom out 커서 싱크 안맞는 버그 해결

Week5

deploy: 5주차 최종 배포

5주차 최종 배포

Week4

fix: [FE] 스크롤 관련 버그 및 줌 관련 marker 위치 버그 해결 (#163)

* fix: [FE] EditTools delete버튼 비활성화 버그 해결

- 0개와 2개 이상일 경으를 조건으로 추가하여 해결

* fix: [FE] 트랙 추가/제거 관련 스크롤 버그 해결

- 트랙 추가/제거를 할때 marker의 height를 조절하여 해결

* fix: [FE] 줌 인/아웃 관련 마커 위치 버그 해결

* style: [FE] AudioTrack 안쓰는 속성 삭제

- maxTrackPlayTime 삭제

Week3

deploy: Week3 배포 (#133)

* Update README.md

* feat: [FE] 오디오 정지, 구간 건너뛰기 기능 구현 (#98)

* feat : [FE] Audio Stop 구현

- 정지 버튼을 누르면 오디오 재생이 정지됨
- 마커의 위치가 0으로 이동
- 재생시간이 0으로 초기화
- controller에 setMarkerWidthToZero 메서드 추가
- store에 setMarkerWidthToZero 메서드 추가
- storetype으로 current_position_zero_channel 추가
- Marker는 해당 채널을 subscribe해 마커 위치를 0으로 초기화함

* chore : [FE] 공백 삭제

- enter가 두 번 들어간 부분 삭제

* feat : [FE] 건너뛴 시간이 음수일 때 처리

- markerTime이 음수가 됐을 때 0으로 변경
- playTime이 음수가 넘어왔을 때 재계산

* feat : [FE] 마커의 위치가 음수일 때 처리

- 마커가 움직인 위치가 음수가 넘어와 현재 위치와 계산 시 음수가 됐을 때
  0으로 값 적용

* feat : [FE] 구간 건너뛰기 기능 구현

- 구간 건너뛰기 기능 구현
- quantum은 3으로 설정
- 앞으로 건너뛰기, 뒤로 건너뛰기 가능
- markerTime 변경을 audioContext.currentTime을 사용하는 것이 아닌
  setInterval에서 주기적으로 변하게 하는 것으로 변경
- setInterval이 건너뛰기에서도 필요하여 따로 함수로 분리해 사용

* chore : [FE] 주석 삭제

- 주석을 몇 개 삭제했습니다.
- 이해가 헷갈리는 부분들의 주석은 아직 삭제하지 않았습니다.

* feat : [FE] 맨 앞으로 건너뛰기

- 기존의 stop, play 기능을 호출하여 맨 앞으로 건너뛸 수 있도록 구현
- stop을 했을 때 delay가 발생하기 때문에 setTimeout 내에서 play를
  호출하도록 함

* feat : [FE] marker position 클릭으로 변경 시 재생 위한 위치 선정

- MarkerEventUtil의 clickMarkerListener에서 play 함수를 호충하면 됨.
- 아직 play 함수를 다른 곳에서 호출할 수 없어서 위치를 잡아두기만 함.

* fix : [FE] FastRewind 시의 시작 오류 수정

- fastRewind가 0이하로 됐을 때 waitTime 시간이 제대로 계산이 안되어
  delay가 생김
- markerTime - QUANTUM이 음수가 됐을 때 waitTime을 0으로 설정.

* refactor : [FE] 변수 이름 변경과 주석 삭제

- when, offset, duration 변수 이름을 waitTime, audioStartTime,
  playDuration으로 변경
- 주석 삭제

close #23, close #25

* feat: [FE] 구간 편집기능(잘라내기, 붙여넣기, 구간 자르기) 구현 (#101)

* refactor: [FE] auto increment 초기값 1로 수정

- clipBoard에 저장되는 TrackSection과 구분하기 위하여 auto increment의 초기값을 1로 수정

* refactor: [FE] DeleteCommand CopyUtil 적용

- CopyUtil로 deleteList에 저장하도록 수정

* refactor: [FE] CopyUtil 파라미터 수정

- 파라미터로 id 정보를 받도록 수정했습니다.
- 기존에는 clipBoard에 저장하는 용도로 만들었지만 DelelteCommand에서는
  id 정보가 필요해서 파라미터로 추가했습니다.

* feat: [FE] controller cutCommand() 구현

- 기존에 구현한 copy와 delete 기능을 합쳐서 cutCommand 함수를
  구현했습니다.
- 잘라내기는 섹션을 1개 선택했을 때만 가능하기 때문에 setClipBoard()의
  return값을 boolean으로 수정하여 유효성 체크를 했습니다.

* feat: [FE] EditTools 잘라내기 이벤트 등록

- 선택한 구간 잘라내기 기능을 위한 이벤트를 등록했습니다.

* feat: [FE] 잘라내기 단축키 구현

- 1개의 구간을 선택하고 ctrl + X 를 누르면 cutCommand()가 실행되도록
  구현했습니다.

* feat: [FE] icons에 iconInfo 추가

- IconButton에 대한 hover 기능을 위해 아이콘 정보를 알려주는 iconInfo를
  구현했습니다.
- iconInfo는 iconType에 대한 상세정보를 알려줍니다.

* style: [FE] hover시 icon 상세정보가 나오도록 style 적용

- visibility 속성을 이용하여 hover시에 아이콘에 대한 정보가 나오도록
  style 적용했습니다.
- transition-delay로 0.3초 후에 정보가 나오도록 했습니다.

* feat: [FE] 시작위치, 종료위치 이동 단축키 추가

- 시작위치로 이동은 '[', 종료위치로 이동은 ']' 키로 동작하도록 keyType과
  keyDown 이벤트를 추가했습니다.

* refactor: [FE] publish 빈 인자값 명시적으로 표현

- 빈 인자를 넘기는 경우 null로 표현

* refacot: [FE] Command 클래스 index에서 export하도록 변경

- import하기 쉽게 index.js에서 export 관리

* feat: [FE] CopyUtil copyTrack 함수 구현

- Track을 deep copy하기 위한 함수 구현

* refactor: [FE] store setTrack, setTrackSection 수정

- setTrack은 파라미터의 따라 다르게 동작하도록 변경
  - newTrack의 id값이 이미 TrackList에 존재하는 경우에는 값만 변경
  - 존재하지 않는 경우에는 TrackList에 새로 추가
- setTrackSection
  - clipBoard에 복사된 trackSection은 0의 값을 가지므로 새로 id값을 변경
  - undo에서 그전에 저장된 상태 그대로 변경해야 되기 때문에 trackSection id값을 그대로
    사용

* feat: [FE] controller pasteCommand 함수 구현

- 붙여넣기는 현재 clipBoard에 복사된 구간의 정보를 사용합니다.
- 현재는 1개의 구간을 선택한 경우에만 붙여넣기를 할 수 있습니다.
  - 추후 마커위치 관련해서 붙여넣기 기능 리팩토링 필요
- pasteCommand()에 대한 설명
  - 1) focusList의 길이가 1인지 확인합니다.
  - 2) 붙여넣기의 대상이 되는 track과 clipBoard를 deep copy합니다.
  - 3) copySection의 trackStartTime을 현재 focus한
    trackSection의 endTime으로 변경합니다.
  - 4) PasteCommand의 인자로 넘겨줍니다.

* feat: [FE] PasteCommand 클래스 구현

- beforeTrack은 execute가 실행되기 전 저장하는 상태값입니다.
- execute()
  - 1) track과 section의 정보를 deep copy합니다.
  - 2) track에서 newSection이 종료되는 시점인 endTime을 구합니다.
  - 3) newSection의 종료시간 전에 시작하는 section이 있는지 findIndex를
    통해 index를 구합니다.
  - 4-1) firstDelayIndex가 -1이 아니라면 (존재)
    - endTime에서 해당 section의 시작시간을 빼서 얼마나 delayTime을
      구합니다.
    - firstDelayIndex와 그 뒤에 존재하는 section들의 trackStartTime에
      delayTime을 더해줍니다.
  - 4-2) firstDelayIndex가 -1인 경우 (존재x)
    - 바로 트랙에 newSection을 추가합니다.
- undo()
  - 저장된 beforeTrack을 deep copy하여 setTrack으로 덮어씌우고
    publish합니다.

* feat: [FE] EditTools 붙여넣기 이벤트 등록

- 붙여넣기를 위한 click 이벤트 등록

* feat: [FE] 붙여넣기 단축키 기능 구현

- 클립보드에 복사된 상태에서 ctrl + v 를 누르면 붙여넣기 기능이
  실행되도록 구현

* style: [FE] PlayBarUtil 주석 추가

- 나중에 리팩토링을 위한 주석추가
- PR merge하면서 지우겠습니다

* feat: [FE] SplitCommand 구현

- 구간 자르기 기능을 위한 SplitCommand 구현
- 클릭한 곳의 시간과 클릭한 trackSection의 trackStartTime으로 splitTime을 구했습니다.
- splitTime을 기준으로 왼쪽 오른쪽 섹션을 생성하여 기존의 trackSection을 지우고 새로 track에 추가했습니다.
- 기준이 되는 element는 audi-main-audio-track-container div로
  설정했습니다.

* feat: [FE] AudioTrackSection 컴포넌트 click 이벤트 분기처리

- cursorMode에 따라 focus되거나 split 하도록 조건문을 추가했습니다

* feat: [FE] controller splitCommand() 구현

- SplitCommand를 실행하는 함수를 구현했습니다.
- getTrack은 자주 쓰일 것 같아서 구현했습니다.

* feat: [FE] AudioTrack 자르기 모드 커트라인 구현

- Track 별로 cut-line 관리하도록 구현했습니다.
- 평소에는 class="hide"로 되어있다가 cursorMode가 cut일 때,
  trackSection의 mousemove 이벤트로 hide가 해체됩니다.

* feat: [FE] EventType mouseout 추가

- 마우스가 canvas 밖으로 나갔을 때 cut-line이 다시 hide 되도록 mouseout
  이벤트를 추가했습니다.

* feat: [FE] AudioTrackSection mousemove, mouseout 이벤트 구현

- TrackSection위에서  cursorMode가 자르기 모드일 경우 마우스 커서 위치에
  따라 cut-line이 나오도록 구현했습니다.
- mouseout은 커서가 TrackSection 밖 나갔을 경우 다시 hide하기 위한
  기능입니다.

* style: [FE] image cursor 위치 조정

- 커트라인과 마우스 커서의 위치의 싱크가 잘 맞지 않아서 수정했습니다.

close #65, close #68, close #73, close #99, close #100

* feat: [FE] 재생바 마커 드래그로 이동하기 구현 (#102)

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

- 재생바 마커를 움직일시 바깥 영역의 색을 바꾸는 컴포넌트를
  구현했습니다.

* style: [FE] PlayBarMarkerBlurZone style 구현

- PlayBarMarkerBlurZone style을 적용했습니다.

* style: [FE] PlayBarMarker style 수정

- cursor: pointer를 추가했습니다
- z-index: 4를 추가했습니다.

* feat: [FE] playbarMarker 드래그 이벤트 추가

- 재생바 마커가 드래그로 움직이도록 했습니다.
- 드래그시 바깥 영역에 색이 들어가도록 구현했습니다.

* feat: [FE] playbar-event-zone 추가

- 재생바 이벤트가 적용되는 영역에 대한 css 설정

* feat: [FE] eventType 추가

- PLAYBAR_EVENT_ZONE_DROP eventkey 추가

* feat: [FE] 재생바 더블클릭시 바깥영역 색 지정

- 더블클릭 했을때도 바깥 영역의 색이 변경되도록 수정했습니다.

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

* refactor: [FE] AudioTrack Scroll 기능 구현 및 코드리팩토링 (#103)

* feat: [FE] store 트랙 최대 너비 사이즈 추가

- 트랙의 최대 너비 사이즈로 모든 트랙의 너비사이즈를 조정하여 전체
  트랙을 스크롤하기 위해 store에 최대 트랙 너비사이즈 추가
- 컨트롤러를 통해 최대 트랙 너비사이즈를 업데이트 할 수 있도록
  인터페이스 추가

* feat: [FE] eventType에 mouseup, mousemove 이벤트 추가

- Zoombar 마우스 이벤트를 위한 이벤트 추가

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

- 트랙 사이즈에 따라 동적으로 사이즈가 변하도록 제작
- 트랙 사이즈에 따라 스크롤하는 px값이 변하도록 제작

* feat: [FE] Main 컴포넌트에 트랙 스크롤 영역 추가

- Zoombar 컴포넌트로 스크롤 하기위한 영역 추가

* refactor: [FE] AudioTrack, AudioTrackSection  스크롤 가능하도록 수정

- 트랙의 너비사이즈를 최대 트랙의 너비 사이즈로 모두 변경하도록 수정
- 트랙영역을 overflow하면 스크롤이 가능하도록 수정
- 트랙의 너비사이즈가 변하면 store에 동기화 하도록 수정

* refactor: [FE] 코드 리팩토링 및 버그수정

- 트랙에 내용이 없는 경우에 Drag&Drop 메세지가 나타나도록 수정
- Zoombar EventType 추가

* style: [FE] 메인 페이지 레이아웃 수정

- 메인 페이지 노트북, 데스크탑 화면 레이아웃 깨지는 스타일 수정

* refactor: [FE] 루트 컴포넌트 이벤트 delegation 처리 추가

- 루트에서 이벤트 실행시 delegation을 적용한 부모 태그를 찾아서 이벤트를
  실행하도록 코드 수정

* feat: [FE] TrackOptionType 정의

- TrackOption 컴포넌트 OptionType 정의

* feat: [FE] AudioTrackOptionClick EventKey 정의

- AudioTrackOption 이벤트 처리를 위한 이벤트 키 정의

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

- AudioTrack에 따라 컴포넌트가 메인페이지가 추가되도록 제작
- Event Delegation으로 event-key를 찾을 수 있도록 수정

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

* style: [FE] 메인페이지 레이아웃 조정

- 헤더 레이아웃 데스크탑, 노트북에 따라 조정

close #10, close #12

* feat: [FE] compressor 전체 트랙 압축 기능 구현 (#116)

* fix: [FE] PasteCommand trackStartTime 버그 해결

- paste된 TrackSection의 trackStartTime의 값이 이상하게 저장되는 버그
  발견
- delayTime을 구할 때 trackStartTime이 아니라 audioStartTime으로 구해서
  버그 발생했었음
    - audioStartTime -> trackStartTime으로 변경하여 해결

* refactor: [FE] 모든 트랙 merge하여 save하도록 변경

- 파일 생성 단계
  - 1) getTrackArrayBuffer()로 해당 트랙을 하나의 ArrayBuffer로 생성합니다.
  - 2) for문으로 모든 트랙의 ArrayBuffer를 배열에 담아줍니다.
  - 3)  모든 트랙의 ArrayBuffer가 담긴 arrayBufferList를 mergeTrackArrayBuffer()로 merge시켜줍니다.
  - 4) merge된 buffer를 ChannelDataToWave()로 wavBuffer로 만들어줍니다.
  - 5-1) wav로 저장
   - wavBuffer를 file로 생성하고 버튼의 href를 변경
  - 5-2) mp3로 저장
   - wavBuffer를 lamejs 라이브러리로 mp3로 encoding 한 후에 file로
     생성하여 href 변경

* fix: [FE] Paste 이후 선택구간 테두리 초기화 버그

- setSection으로 리렌더링 되면서 focus된 구간의 border style을 먹인
  class가 사라지는 문제 발생
  - trackSection 컴포넌트에서 initState()로 focusList의 section과 동일한
    id를 가지고 있다면 focusInfo의 element를 갱신하고, classList.add('focused-section')를 해줬습니다.

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

- 모든 트랙에 trackSection이 하나도 없으면 저장하기 버튼을 비활성화
  시켰습니다.
- init에서 모든 track의 trackSectionList의 길이를 확인했습니다.

* feat: [FE] store publish 추가

- EditorMenu의 리렌더링을 위한 publish 추가

* feat: [FE] controller getSourceList() 구현

- 모든 sourceList를 조회할 수 있는 함수 구현

* refactor: [FE] SourceDowload saveFile 인자 변경

- 기존에 test용으로 사용하던 audio파일을 제거하고 인자를
  compressorObject만 넘겨주도록 수정

* refactor: [FE] compressor emptyTime 삭제

- 오늘 스크럼때 설명하면서 깨달았는데 emptyTime이 필요가 없어서
  삭제했습니다.
- 구현 초기에 사용하고 로직이 변경되어 emptyTime이 필요가 없어서 삭제
  - start()의 첫번째 인자로 trackStartTime을 넘겨주면서 필요가
    없어졌습니다.

* feat: [FE] 변환 완료된 파일명 변경 기능 구현

- 파일을 변환 완료한 상태에서 기존에는 확장자를 바꾸거나 모달창을
  닫으면 초기화됩니다.
- 하지만 변환 완료된 상태에서 파일명을 바꿀 때도 초기화 되면 너무
  비효율적이라고 생각해서 download의 저장된 파일명만 변경되도록
  구현했습니다.

* refactor: [FE] compressor getTrackArrayBuffer 속도 개선

- 기존에는 for문으로 모든 섹션의 채널데이터를 매번 index 0부터 계속 더하는
  식으로 구현했습니다.
- offset 변수를 둬서 그전에 저장했던 index는 건너뛸 수 있도록
  변경했습니다.

* style: [FE] compressor 공백 제거

- 불필요한 공백을 제거했습니다.

* refactor: [FE] EffectState 컴포넌트 구현 & PlayBarUtil / controller/ store 함수명, 변수명 리팩토링 (#118)

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

- 구간이 선택되면 해당 구간에 적용된 effect 목록을 보여주는 컴포넌트를
  구현했습니다.

* style: [FE] SectionEffectList style 적용

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

* feat: [FE] SectionEffectList와 관련된 Util 생성

- hideEffectList는 section 선택을 하지 않았을때 EffectList를 숨기고
  SourceList를 보여주는 함수입니다.
- showEffectList는 section 선택을 했을 때 EffectList를 보여주고
  SourceList를 숨기는 함수입니다.

* feat: [FE] SourceList 숨김/표시 함수 추가

- section에 포커스가 있을 경우 sourcelist가 보이지 않도록 하는 함수를
  만들었습니다.
- section에 포커스가 없을 경우 sourcelist가 보이도록 하는 함수를
  만들었습니다.

* feat: [FE] SectionEffectList 컴포넌트 Sidebar에 추가

- Sidebar 컴포넌트에 SectionEffectList 컴포넌트를 넣었습니다.

* feat: [FE] focus를 줄때 SectionEffectList 숨김/표시 설정

- addFocus시 SectionEffectList가 보이도록 로직 작성
- removeFocus, resetFocus시 SectionEffectList가 숨겨지도록 로직 작성

* feat: [FE] EffectListType 설정

- EffectListType을 설정했습니다.

* feat: [FE] eventType 추가

- EffectList Modal 창을 여는 이벤트타입 설정했습니다.

* refactor: [FE] setMarkerWidthToZero 관련 함수 삭제

- setMarkerWidth에 함수 인자 0을 넣어주면 마커의 위치가 초기화
  되도록했습니다.
- 따라서 같은 역할을 하는 setMarkerWidthToZero 함수는 필요가 없다고
  생각되어 삭제했습니다.

* refactor: [FE] store state 변수명 변경

- 시간을 string으로 나타내는 변수는 ~~StringTime으로 표기했습니다.
- 시간을 초단위로 나타내는 변수는 ~~NumberTime으로 표기했습니다.

* refactor: [FE] TimeUtil 파일 생성

- PlayBarUtil에서 시간과 관련된 함수들을 분리했습니다.
- getSplitTime은 초단위로 정의된 시간을 분, 초, 밀리초로 분해해주는
  함수입니다.
- getStringPlayBarTime은 재생바 눈금을 나타내주는 함수입니다.
- getNumberTime은 마우스 위치를 초단위 시간으로 나타내주는 함수입니다.
- getStringTime은 초단위 시간을 문자로 나타내주는 함수입니다. ex)
  '05:11:236'

* refactor: [FE] setCursorStringTime 함수 내용 변경

- 함수 이름과 맞는 로직으로 수정했습니다. 함수 인자로 string 형식의
  시간을 받아오고 바로 새로운 stringTime을 state에 넣어줬습니다.
- 그 외 잘못 변경된 state 변수명들을 수정하고 그에 맞는 함수들도 이름을
  변경했습니다.

* refactor: [FE] controller 함수명 변경

- resetPlayTime 함수를 changeMarkerPlayStringTime으로 변경했습니다.
- 해당 함수는 재생바를 클릭했을 경우 마커의 시간을 변경해주는
  함수입니다.

* refactor: [FE] PlayBarUtil 파일명 변경

- WidthUtil로 이름 변경했습니다.
- 너비를 구하는 함수들이 모여있습니다.

* refactor: [FE] 함수명 변경

- 리팩토링한 함수로 교체했습니다.

* refactor: [FE] 왼쪽 재생바 마커 위치 수정

- 100%이던 위치를 99.3%로 바꿨습니다.
- 아마 프로젝트가 거의 다 완성되면 또 다시 바뀔 것 같습니다.

* refactor: [FE] getNumberTime 명확한 변수명으로 수정

- calculateTimeOfCursorPosition 함수명으로 이름을 바꾸어 무슨 역할을
  하는지 명확하게 작성했습니다.

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

close #117

* refactor: [FE] 구간 나누기 버그 수정 및 코드 리팩토링 (#115)

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

- excute 함수 작은 함수단위로 분리
- PlayBarUtil은 PlayBar와 관련되어 보이는데 섹션을 나누는 커맨드에서
  사용되어 코드의 가독성이 떨어지고, PlayBarUtil은 리팩토링 과정이
  필요하므로 해당 부분을 삭제하고, 필요한 로직부분만 추가하도록 수정
  (추후 공통 유틸이 만들어지면 수정필요)
- 트랙 섹션을 나눌 때, 파형이 이상하게 나누어지는 버그 수정.
  trackStartTime, channelStartTime 설정로직 수정하여 해결

* refactor: [FE] AudioTrackSection 리팩토링

- 타입 관리를 위한 SectionDataType 분리
- CursorMode를 subscribe하여 자동으로 업데이트 되도록 수정
- 함수 네이밍 명확하게 변경 및 작은 함수 단위로 분리

* refactor: [FE] AudioTrack 리팩토링

- TrackSection 모델 parsedChannel 정보 삭제
- 소스리스트에서 드래그앤드랍으로 새로운 트랙을 추가할 때 비즈니스
  로직을 컨트롤러로 이동

* refactor: [FE] EditTools 리팩토링

- 함수 네이밍 명확하게 변경

* refactor: [FE] Controller 리팩토링

- getSectionData 함수 가독성 향상 및 유지보수를 위해 함수형으로
  기능단위로 분리

* fix: [FE] 머지과정에서 발생한 버그 수정 (#119)

- PlaybackTools 리렌더링을 통한 프로퍼티 참조 문제 해결
- Controller 함수 getSourceBySourceId 추가, SpliCommand 수정 사항 반영

* feat: [FE] AudioMeter 컴포넌트 구현 (#120)

* feat: [FE] AudioUtil getDecibel() 구현

- analyser의 getFloatTimeDomainData를 Decibel로 변환하는 함수 구현

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

- 현재 재생중인 volume에 따라 반응하는 AudioMeter 컴포넌트 구현
- 최대 -72까지를 기준으로 구현했고, 백분율로 다른 gradient 컬러를
  먹였습니다.
  - 스크롤 기능이 다 구현되면  나중에 canvas로 반응형으로 구현해도 될 것
    같습니다.

* style: [FE] AudioMeter style 적용

- decibel-Marekr는 decibel이 100%를 넘어가는 경우를 위해 -10px 했습니다.

* feat: [FE] components/index.js, Main.js에 AudioMeter 적용

- index.js와 Main 컴포넌트에 AudioMeter 컴포넌트를 적용했습니다.

* feat: [FE] PlayBackTools의 setInterval 수정

- setInterval로 재생중인 오디오 정보로 AudioMeter의 style을 지속적으로
  변경하도록 구현
  - 나중에 AudioContext를 따로 store에서 관리하도록 수정해야 될 것
    같습니다.
  - 현재 건너뛰기로 audioContext가 변경되면 AudioMeter에 적용되지 않는
    문제가 있어서 store 리팩토링이 끝나면 해결하겠습니다.

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

close #17

* feat: [FE] 구간 이동하기 (드래그 앤 드롭) 기능 구현 (#122)

* feat: [FE] MoveCommand 생성

- 드래그하여 trackSection을 이동할 수 있는 MoveCommand를 생성했습니다.
  - dragstart 할 때의 커서 시간에서 trackStartTime을 빼준 차이를 구합니다.
  - 그런 후 drop시의 커서 시간에서 빼준 차이를 다시 빼준게
    newTrackStartTime입니다.
  - checkEnterTrack은 아직 미구현 함수입니다!

* feat: [FE] audioTrack 관련 eventType 생성

- AUDIO_TRACK_MULTIPLE과 AUDIO_TRACK_AREA_MULTIPLE 타입을 만들었습니다.

* refactor: [FE] 사용되지 않는 변수 삭제

- 더이상 사용되지 않는 변수를 삭제했습니다.

* feat: [FE] 너비의 차가 항상 양수가 되도록 수정

- 너비의 차가 항상 양수가 되도록 Math.abs 함수를 사용했습니다.

* feat: [FE] drop 이벤트 생성

- dropAudioTrackListener
  - 현재 커서의 위치를 구합니다.
  - 커서 위치의 시간값을 구합니다.
  - 필요한 인자들을 moveCommand에 넘겨줍니다.

- audio-track-area에 data-track-id를 추가해줬습니다.

* feat: [FE] dragstart 이벤트 함수 생성

- 드래그가 시작할 때 해당 함수가 작동하도록 했습니다.
- 드래그 시작시 커서 위치를 구하고 그때의 시간값을 구했습니다.
- 그런뒤 필요한 변수들을 dataTransfer를 통해 전달해줬습니다.

* feat: [FE] moveCommand 함수 추가

- moveCommand를 실행해주는 함수를 생성했습니다.
- getSource와 getTrackSection 함수를 만들었습니다.
  - 각각의 데이터가 필요할 때가 있어 분리하여 만들었습니다.

* fix: [FE] 스크롤 기능 추가로 발생한 버그 수정 (#121)

* feat: [FE] 트랙 파형 동적인 사이즈 변경 적용

- 트랙 파형을 브라우저의 사이즈 변경에 따라 동적으로 변하도록 구현

* feat: [FE] store maxTrackPlayTime 정의

- 재생바의 시간을 동적으로 변경하기 위해 멀티트랙에서 최대 재생시간을
  store에 정의

* feat: [FE] Controller maxTrackPlayTime 변경 함수 추가

- 최대 트랙 재생시간 업데이트하기위한 changeMaxTrackPlayTime 함수 추가

* refactor: [FE] 트랙 영역 반응형 사이즈 적용

- AudioTrack 컴포넌트의 트랙 영역을 최대 트랙 사이즈에 따라 반응형
  으로 리사이징 적용

* refactor: [FE] 메인컴포넌트 트랙 스크롤 영역 수정

- 트랙 스크롤 영역을 재생바도 포함하도록 수정

* refactor: [FE] 재생바 동적 사이즈 변경 적용 및 코드리팩토링

- 트랙의 최대사이즈 및 최대재생시간에 따라 재생바가 동적으로
  렌더링되도록 수정
- 변수 및 함수 네이밍을 명확하게 변경

* style: [FE] TimeInfo 반응형 사이즈 변경

* feat: [FE] store currentScrollAmount 정의

- 스크롤에 따른 재생바 커서 시간 싱크를 맞추기위해 스크롤한 양(pixel)
  상태유지 추가

* refactor: [FE] ZoomBar 현재 스크롤양을 상태유지 하도록 수정

- 현재 스크롤양을 상태유지하기 위해 ZoomBar에서 Controller를 활용하여
  스크롤시 스크롤양을 store에 업데이트

* refactor: [FE] TimeUtil / WidthUtil 리팩토링

- 트랙의 재생시간 변경에 따라 커서 시간계산을 위해 재생시간을 300초 고정이 아닌 동적으로 변경될 수 있도록 수정
- 변수 및 함수 네이밍 명확하게 수정
- Util 코드 수정으로 인한 Util 함수를 사용하는  각 컴포넌트 코드 수정

* refactor: [FE] 재생바 playTime 반응형 사이즈 적용

- 브라우저 사이즈에 따라 재생바의 playTime 반응형으로 사이즈 조절
- playTime이 반응형으로 변경되면서 커서 타임 계산도 변경된 사이즈에 맞게
  보여주도록 수정

* fix: [FE] 트랙섹션 cutLine 스크롤에 따라 위치 조정

- 스크롤시 트랙섹션의 cutLine이 위치가 조정되지 않는 버그 수정

* refactor: [FE] SplitCommand 나누기 로직 수정

- splitCommand 나누기 로직 동작 버그 수정중

* fix: [FE] 오디오 미터 출력 버그 수정 (#123)

- 음악 재생시 오디오미터 출력 버그 수정
- 함수 이름 변경으로 인한 오류 해결

* feat: [FE] 단축키 기능, 재생 중 커서 클릭 시 원하는 위치에서 시작, solo/mute 기능 적용 (#124)

* chore : [FE] audioStartTime 삭제와 channelStartTime 사용

- trackSection에서 audioStartTime을 삭제했습니다.
- channelStartTime을 사용하도록 변경했습니다.

* chore : [FE] 주석 삭제

- subscribe 부분의 주석을 삭제했습니다.

* feat : [FE] 채널 삭제 및 추가와 solo, mute 관련

- CURRENT_POSITION_ZERO_CHANNEL 삭제
- play, pause 아이콘 변경을 위한 PLAY_OR_PAUSE_CHANNEL 추가
- solo 상태를 관리하기 위한 SOLO_CHANNEL 추가
- solo, mute 클릭 시 색상 변경

* feat : [FE] play/pause 아이콘 변경, solo 위한 메소드 추가

- changePlayPauseIcon으로 상태에 따라 아이콘 변경
- soloPlay로 전체 solo 선택 상태 변경

* feat : [FE] 단축키 함수 정의

- Controller에 단축키에서 사용할 함수 정의.
- playbackTool의 함수를 호출한다.

* feat : [FE] 재생 중 커서로 클릭한 곳에서 바로 재생

- 재생 중에 커서로 클릭한 마커 위치에서 다시 재생할 수 있는
  audioCursorPlay 함수 호출.
- play 함수가 호출됨.

* chore : [FE] updateMarkerPosition 고려사항

- 함수가 받아온 값이 0일 때 0으로 값을 바꾸고 0이 아닐 때는 이전 값에
  더해나가는 형식.
- 오른쪽 끝으로 옮길 때도 더해나가는 방식이 되어 수정이 필요. 현재
  마지막 위치 관련해서 스크롤과 관련해 수정이 필요해보여 메모만 해 둠.

* feat : [FE] PlaybackTools 기능관련 부분 이동

- PlaybackToolClass로 옮겨 controller에서 사용할 수 있도록 함.
- 정지와 반복을 제외한 모든 키는 단축키로 사용할 수 있음.
- mute, solo에 대한 정보를 지역적으로 가지고 있음.

* feat : [FE] 반복버튼 클릭시 색상 변화

- 반복 버튼 클릭 시 색상 변화
- 한 번 클릭 시 초록색, 다시 클릭 시 흰색으로 돌아옴.
- store에 isRepeat 추가
- playbackTools에서 IS_REPEAT_CHANNEL을 구독 중.
- isRepeat 값을 변경할 때 publish 되어 상태 전달.

* feat : [FE] 반복 재생 버튼 클릭시 시작 위치 변경

- 반복재생 버튼 클릭 시 시작 위치가 변경되도록 했습니다.
- 재생, 일시정지 버튼 클릭 시 반복재생 버튼의 색상이 초기화되는 문제가
  있습니다.

* style : [FE] 반복 재생 버튼 green color

- 클릭 시 green color로 변경되도록 scss에 class를 추가.

* chore : [FE] 주석 삭제

- PlaybackTools에서 고민하던 흔적이 담긴 주석을 지웠습니다.

* refactor : [FE] Handler Listener로 변경

- AudioTrackOption에서 Handler로 쓰인 부분을 Listener로 변경했습니다.

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

 close #109, close #108, close #106, close #104

* fix: [FE] Marker 이동 및 AudioMeter 버그 해결 (#125)

- 변경된 함수 적용(네이밍, 인자)
- PlaybackToolsClass의 모듈화로 AudioMeter 관련 삭제된 로직 추가

* Update README.md

* refactor: [FE] Solo 다중 선택할 수 있도록 수정, 오디오 미터 멈춤 현상 수정 (#126)

* refactor : [FE] 변수 명 수정

- ret으로 사용해서 명확하지 않았던 변수 명을 수정했습니다.

* feat : [FE] Solo 다중 선택 기능

- Solo 기능을 다중선택 할 수 있도록 수정.
- Solo 버튼이 눌린 경우 재생됨. 눌리지 않은 트랙은 재생 안됨.

* fix : [FE] 오디오 미터 멈춤 문제 해결

- createAndConnectAnalyser 메소드를 만들어 다시 재생할 때마다 호출.
- 새롭게 analyser를 만들고 connect 해 줌.

* refactor : [FE] !=를 !==로 변경

- 명확하게 !== 으로 변경했습니다.

* refactor : [FE] repeat 버튼 클릭 시 색 변경로직 수정

- channel을 사용하지 않아 삭제.
- 관련했던 여러 함수 삭제.
- store의 isRepeat 값을 확인해 render 시에 그려주는 형식으로 변경.

* feat: [FE] 오디오 구간 이동 구현, 소스리스트 파형 추가 리팩토링 (#128)

* feat: [FE] SectionDragStartData Model 구현

- DragStart 이벤트에서 transferData 대신 store에서 상태관리를 위한
  SectionDragStartData Model 구현
  - dragover에서 getData를 사용할 수 없어서 추가
- SectionDragStartData에는 TrackSection, dragstart 당시 커서 위치, x좌표
  값 계산을 위한 offsetLeft가 담겨 있습니다.

* refactor: [FE] MoveCommand 유효성검사 조건 변경 및 모듈화

- 기존의 조건문에 문제를 발견해서 수정했습니다.
- 구간 이동하기에서 이동할 수 있는 위치인지 판단하는 checkEnterTrack()
  함수를 ValidUtil로 모듈화 시켰습니다.

* refactor: [FE] TRACK_CHANEL 채널 publish 삭제

- 필요없는 publish 코드를 삭제했습니다.

* feat: [FE] SectionDragStartData storeType 추가

* refactor: [FE] 단축키 설명 수정

- redo와 undo의 단축키 정보가 뒤바껴서 수정했습니다....

* feat: [FE] ValidUtil export 추가, eventType 추가

- 구간 이동할때 잔상을 위한 AUDIO_TRACK_AFTERIMAGE_DROP :ㅈEventType 추가

* style: [FE] AudioMeter console.log 제거

* style: [FE] AudioTrack 잔상효과 style 적용

- 부모요소의 padding값에 맞춰서 top과 height를 조절했습니다.
- padding값이 변경되면 height와 top도 변경되야 합니다.

* feat: [FE] AudioTrack 섹션의 시간에 맞는 위치 적용

- initPosition() 함수로 TrackSection들의 위치를 시간에 맞게 변경
  - prevEndOffset은 바로 전 section의 마지막 위치를 나타내는데
    초기값은 0
  - preEndOffset과 현재 section의 trackStartTime의 차이 만큼 초당 px
    크기를 계산해서 곱해서 margin-left에 적용했습니다.
- afterimage
  - 오디오 구간을 AudioTrack에 drag했을 때 옮길 수 있는 위치면 잔상이
    뜨도록 구현했습니다.
  - dragover, dragenter, dragleave로 잔상의 left값과 width를 변경하거나
    display속성을 다르게 적용했습니다.

* style: [FE] AudioTrackSetion style 수정

- 잘린 구간끼리 구분이 되지 않아서 border를 추가했습니다.

* feat: [FE] AudioTrackSection drag 이벤트 적용

- 기존에 dragstart 했을 때 dataTransfer로 정보를 저장했는데 dragover
  이벤트에서는 getData를 할 수 없어서 store에서 관련 정보를 저장하도록
  수정했습니다.
- afterimage를 위한 dragover 이벤트 추가
- drag에서 자신 위에 drop이 안되던 문제로 drop 이벤트도 추가했습니다.

* style: [FE] IconButton 컴포넌트에 cursor:pointer 스타일 적용

- IconButton 컴포넌트는 기본으로 cursor:pointer로 되도록 수정했습니다.

* feat: [FE] SectionDragStartData 생성자 파라미터 변경

- 소스리스트에서 드래그한 경우에는 prevCursorTime이 없어서 null 타입
  추가

* refactor: [FE] DragUtil 구현

- 구간 이동할 때 dragover, drop에서 중복되는 코드 모듈화 시켰습니다.

* refactor: [FE] SectionEffectList render() 수정

- IconButton 커스텀 엘리먼트 사용

* refactor: [FE] SourceList 드래그앤 드롭 관련 함수 추가

- addTrackSectionFromSource()를 삭제하고 현재 방식에 맞게 새로운
  함수들을 추가했습니다.
- moveCommand()의 파라미터를 sectionId -> trackSection으로 수정했습니다.
- 현재 스크롤 시간과 위치를 구할 수 있는 getCurrentScrollAmount,
  getCurrentScrollTime 함수 구현

* refactor: [FE] SourceList MoveCommand 형식으로 변경

- SouceList에서도  구간 이동 기능처럼 동작하도록 로직을 수정했습니다.

* refactor: [FE] PasteCommand, SplitCommand TRACK_CHANNEL 채널 추가

- 재생관련된 코드라고 들어서  지웠던 TRACK_CHANNEL 채널을 다시 추가했습니다.

* refactor: [FE] MoveCommand SourceList 관련 조건문 추가

- SourceList에서 drag된 SectionDragStartData는 trackSection의 id값이
  0으로 저장되어 있어서 조건문으로 removeSection을 실행하도록
  수정했습니다.

close #70

* feat: [FE] 트랙 추가하기 커맨드 구현 및 메인페이지 리팩토링 (#127)

* fix: [FE] 스크롤시 구간 나누기 버그 수정

- 스크롤시 구간 나누기하면 스크롤 위치가 반영되지 않아 오작동 하는 버그
  수정

* style: [FE] 메인페이지 레이아웃 및 반응형 스타일 수정

- ZoomBar, AudioMeter 위치 조정
- 메인페이지 레이아웃 반응형 사이즈 조절

* refactor: [FE] iconButton 이벤트 위임 처리하도록 수정

- 기존에 이벤트 키를 하위 컴포넌트에 모두 전달해야하는 방식에서 이벤트
  위임 방식으로 아이콘 버튼 수정

* refactor: [FE] command 리팩토링

- command 모듈 내보내기 관련 에러 발생 이슈 해결
- 모듈을 내보낼 때 export default로 내보내서 참조하는 곳에서
  destructure해서 사용할 수 있도록 수정
- Command 인터페이스 네이밍 변경

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

- 코드 유지보수 및 렌더링 최적화를 위해 Main 컴포넌트를 하위
  컴포넌트들의 조합으로 분리

* style: [FE] Main 컴포넌트 분리로 인한 스타일 수정

- 본문 내용

* feat: [FE] 이벤트 타입 정의 추가

- TrackAddMenu click 이벤트 키 추가
- TrackScroll List scroll 이벤트 키 추가 및 scroll 이벤트 추가

* refactor: [FE] Main 컴포넌트에서 TrackList, TrackOptionList 분리

- 트랙 추가로 인한 전체 렌더링을 방지하기 위해 리렌더링이 필요한 컴포넌트를 분리
- 컴포넌트 분리로 인한 스타일 수정

* feat: [FE] StoreType 추가 정의

- trackList 업데이트로 정보를 위한  TRACK_LIST_CHANNEL 추가

* feat: [FE] AddTrackCommand 정의

- 트랙 추가하기 커맨드 정의
- excute, undo시 트랙을 추가하거나 제거하고, TRACK_LIST_CHANNEL에
  publish하여 trackList 변경내용을 렌더링 하도록 구현

* feat: [FE] CommandController 정의

- Command 관련 작업을 수행하는 CommandController 정의
- 기존 Controller의 역할이 증가함에 따라 Command 관련 책임을
  CommandController로 분리

* feat: [FE] AudioTrackMenu 트랙 추가하기 기능 구현

- 트랙 추가하기 버튼을 클릭하면 AddTrackCommand를 실행하도록 구현
- 트랙 추가하기로 인한 트랙 리렌더링시 트랙 리사이즈  로직 변경

* refactor: [FE] Controller 리팩토링

- Controller에서 Command 관련 함수 CommandController로 이동

* fix: [FE] 트랙 나누기 redo시 브라우저가 멈추는 버그 해결

- 생성자함수 내에서 element를 한번 참조하고, 이후에 리렌더링을 통해
  참조를 잃어버려서 발생하는 문제 해결

* fix: [FE] 트랙 이동하기 및 재생버튼 미동작 버그 수정 (#129)

- 최초 소스에서 트랙으로 드래그앤드랍할 때, 위치값을 찾지 못하는 버그를
  initPosition위치 및 trackWidth 재계산을 통해 버그
  수정
- playBackTools에서 아이콘 버튼 delegation 적용하여 버그 수정

* feat: [FE] 트랙 추가하기 커맨드 수정 및 트랙 삭제하기 커맨드 구현 (#132)

* refactor: [FE] 트랙 추가하기 커맨드 trackIndex를 고려하여 로직 변경

- store에 트랙 리스트, 트랙 인덱스 설정 함수 정의
- controller에 트랙 리스트에서 pop과 동시에 트랙 인덱스도 초기화 해주는
  함수 정의
- AddTrackCommand 인덱스를 고려하여 excute, redo 로직 변경

* refactor: [FE] CommandController 오타 수정

- CommandController 오타 수정 및 deleteTrackCommand 실행 함수 추가

* feat: [FE] Controller 트랙리스트 push, pop함수 정의

- 트랙 추가하기, 삭제하기 시 인덱스를 고려하기 위해 트랙리스트 pop, push
  함수 정의

* feat: [FE] 트랙 삭제하기 커맨드 정의

- 트랙을 삭제하는 커맨드 정의

* feat: [FE] 트랙 옵션 메뉴 삭제하기 버튼 기능 활성화

- 삭제하기 버튼 클릭 시 deleteTrackCommand 실행하도록 리스너 추가

* feat: [FE] Controller 트랙 제거, 트랙 삽입 정의

- 트랙 리스트에서 트랙 ID로 식별되는 트랙을 제거하는 함수 정의
- 트랙 리스트에서 삽입하고자 하는 인덱스 값을 통해 해당 위치에
  삽입해주는 함수 정의

* refactor: [FE] 트랙 삭제하기 커맨드 로직 변경

- 트랙 삭제하기 커맨드 로직을 delete option 클릭 시 해당 트랙을
  삭제하도록 로직 변경

* fix: [FE] 트랙 삭제하기 커맨드 undo 오작동 버그 해결

- Controller insertTrack 로직을 인덱스를 이용하여 제 위치에 삽입되도록
  코드 수정

* refactor: [FE] 트랙 삭제하기 alert 메시지 추가

- 트랙이 최소 3개 이상 존재하도록 트랙 삭제시 alert 메시지 추가

close #110

* feat: [FE] 마커 종료시점 이동 및 오디오 반복 재생 구현, 앞으로 건너뛰기 버그 수정 (#131)

* feat : [FE] 원하는 시간으로 마커 옮기기 위해 setMarkerWidth 수정

- 맨 마지막 건너뛰기, loop시 마커를 원하는 시간으로 이동하기 위함
- number 배열을 넘겼을 때 두 번째 값이 1이면 첫번째 값으로
  할당하도록 수정.

* feat : [FE] 맨 뒤로 건너뛰기시 마커이동, loop 구현

- 맨 뒤로 건너뛰면 가장 마지막에 있는 마커 시간으로 이동.
- 구간을 구하기 위해 AudioTrack에 있던 calculateTrackWidth 함수를
  복사해 가져와서 사용했는데 후에 따로 빼거나 해야할 것.
- loop는 isRepeat의 상태와 markerTime의 위치를 계속해서 판단해
  동작하도록 함.
- loop가 돼있지 않을 때는 마지막 시간에서 멈춤.
- loop일 때는 마지막 시간에서 다시 처음으로 돌아감. 후에 loop의 start와
  endTime을 지정할 수 있게 되면 수정필요.

close #24, close #29, close #111

* fix: [FE] 트랙 선택기능 구현, 좌우 단축키 버그 수정, backend 환경 삭제 (#130)

* refactor: [FE] 재생중에 command 실행 안되도록 수정

- isPause를 확인하여 재생중에 command가 실행되지 않도록 변경
- CommandControllers에 executeMoveCommand() 추가
- excute -> execute로 변경

* refactor: [FE] moveCommand -> CommandController로 변경

* style: [FE] excute -> execute로 변경

- excute -> execute로 변경

* refactor: [FE] left, right 단축키 preventDefault() 설정

- left, right keydown에 스크롤이 움직이는 문제 해결

* feat: [FE] 트랙 선택기능 구현

- 트랙에 아무 구간도 존재하지 않을 경우 트랙을 선택해서 붙여넣기를 할 수
  있는 기능 구현
- AudioTrack 컴포넌트에 track-select-line 엘리먼트를 추가해서 현재
  store의 SelectTrackData를 확인하여 left, display 속성을 변경
- SelectTrackData는 어떤 트랙에 존재하는지 확인하기 위한 trackId,
  paste command 할 때 필요한  trackStartTime인 selectedTime이 저장되어
  있습니다.
- 트랙 선택은 focus 기능을 사용할 땐 초기화 되도록 구현했고, 트랙영역이
  아닌 다른 focusList reset 구역을 클릭할 때도 초기화됩니다.

* refactor: [FE] PasteCommand에 트랙선택 관련 조건문 추가

- 선택된 구간이 1개이거나 트랙을 선택했을 경우에 따라 다르게 동작하도록
  구현했습니다.

* feat: [FE] selectTrackData관련 controller, store 수정

- 트랙선택 관련 SelectTrackData 관련 함수들을 추가했습니다.
- focus 선택 기능 관련하여 조건에 따라 selectTrackData가 reset되도록
  수정했습니다.

* chore: [BE] backend 환경 삭제

- 프로젝트 설계 변경으로 인한 backend 환경 삭제

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

close #7

* Update README.md

* Update README.md

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

Week2

v0.2.0

deploy: [FE] 2주차 배포

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]>