codestates / codestates/art-ground
[Dev Log] 20210930 / 박지영
- Dominant language
- JavaScript
- Stars
- 7
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
### **오늘 완료한 작업 목록.**
https://user-images.githubusercontent.com/83934037/135464417-36965d0c-0470-486c-a15f-f4799c792934.mov
- [ ] Premium 페이지 더미 데이터 만들기(5개)
- [ ] Premium 상세페이지 내에서 클릭 시 3D 페이지와 연결시키기
- [x] 이미지 카드 슬라이더 제작 완료. 하드코딩된 코드 리팩토링 필요. —> 갤러리 슬라이더만 따로 컴포넌트화 시키기.(하위 컴포넌트로 분리하는 리팩토링 완료)
- [x] README.md 작성하기
- [x] 단일 댓글 & 전시회 내 작가의 프로필 디폴트 이미지 넣기(ex. 사람 아이콘. 카카오톡 참고함)
- [x] register, gallery, galleryDetail, reviewDetail, 3D 페이지 내 모달창 단일컴포넌트로 분리하여 코드 리팩토링하기
- [x] 전시 시작 마감일 인풋창에 달력 날짜 클릭 구현완료. 리액트 date-picker 라이브러리 사용([https://yong-nyong.tistory.com/11](https://yong-nyong.tistory.com/11))
--
<기억하고 싶은 코드>
- PostCSS에서 클래스 명을 정적으로 주고싶을 때 어떻게 해야할 지?(ex. 상태값에 따라 클래스명이 바뀌도록)
- 아무리 구글링해도 검색 키워드가 잘못 되었는지.. 찾고자 하는 결과가 나오지 않음.
- 해결방법: 그냥 정적으로 클래스명을 주고자 하는 부분을 단일컴포넌트로 떼어내어, 해당 jsx 파일은 PostCSS가 아닌 일반 css파일을 import 시켰다.
```jsx
// 리팩토링 전(PostCSS)
```
- 달력 표시 라이브러리 date-picker
- 사용자에게 조금이라도 편한 UI를 제공하기 위해, 날짜를 직접 타이핑하는 것 보다 클릭하는 것으로 변경하고 싶음.
- 중요한 메인 기능이 아니기 때문에... 그냥 라이브러리를 사용하기로 함.
- 상태값으로 넘어오는 데이터 형태가 Fri Oct 01 2021 00:00:00 GMT+0900 (한국 표준시). 이를 깔끔한 문자열인 "2021-10-01"로 바꾸기 위하여 아래 함수를 추가로 선언하고 사용해줬다.(DB에 보내야 하는 날짜 데이터의 타입이 String이므로) 참고한 링크: https://java119.tistory.com/76
```jsx
const getStringDate = (date) => {
let sYear = date.getFullYear();
let sMonth = date.getMonth() + 1;
let sDate = date.getDate();
if(sMonth < 9){
sMonth = "0" + sMonth
}
if(sDate < 9){
sDate = "0" + sDate
}
return `${sYear}-${sMonth}-${sDate}`;
}
```
### 추후 완료해야 할 **작업 목록(+에러).**
- [ ] ~~작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다. (중요한 것 아니라 일단 드랍)~~
- [ ] ~~three.js pointerlock 참고하여 키보드 작동 구현해보기.(or 작품 확대 가능하면 굳이 키보드 작동 안 해도 되긴 하지만...)(중요한 것 아니라 일단 드랍)~~
- [ ] ~~댓글 포스팅 시간 한국시간으로 바꾸기(중요한 것 아니라 일단 드랍)~~
- [ ] ~~context api 사용법 학습하고 코드리팩토링(중요한 것 아니라 일단 드랍)~~
- [ ] ~~갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.(중요한 것 아니라 일단 드랍)~~
- [ ] 랜딩페이지 버튼 애니메이션 서치 후 적용해보기
- [ ] ~~단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기—> 정말로 필요한 기능인지 모르겠어서 일단 보류.~~
- [ ] author + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 authience라는 글자가 중앙에 배치되게 그런 애니메이션 효과—> gsap으로 시도해보기
- [ ] Exhibition_desc. 100자 내외로 컷(참고: [https://hellcoding.tistory.com/entry/textarea-글자수-제한-바이트Byte-제한](https://hellcoding.tistory.com/entry/textarea-%EA%B8%80%EC%9E%90%EC%88%98-%EC%A0%9C%ED%95%9C-%EB%B0%94%EC%9D%B4%ED%8A%B8Byte-%EC%A0%9C%ED%95%9C))
### **내일 TO DO LIST**
- [ ] 댓글 무한스크롤 기능 구현하기
- [ ] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)(참고: [https://penguingoon.tistory.com/257](https://penguingoon.tistory.com/257))
- [ ] 스크롤 감지하여 상단 노출/비노출 처리 이벤트 구현 시도해보기(참고: [https://code-study.tistory.com/23](https://code-study.tistory.com/23))
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.