Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 서버 정적파일 서비스 추가 (#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]>
- Loading branch information
4 people
committed
Nov 26, 2020
1 parent
0c9fc8c
commit f6abfaf