- 개요 : 원티드 프론트엔드 프리온보딩 2기 4주차 8번째 기업 과제
- 주제 : 링크로 공유한 파일들을 다운로드 받을 수 있는 페이지 구현
- 기간 : 2022.02.24 ~ 2022.02.26
- 링크 아이템 클릭 시 상세페이지 이동
- 제목 아래 URL은 다음과 같이 표시
- 유효기간 이내 : 도메인 주소를 포함한 상세페이지로 이동하는 전체 경로 표시
- 유효기간 만료 : '만료됨' 표시
- URL 클릭 시 다음과 같이 동작
- 유효기간 이내 : URL을 클립보드에 복사하고
${링크 제목} 주소가 복사 되었습니다.내용이 Alert로 표시 - 유효기간 만료 : 아무 동작도 하지 않음
- 유효기간 이내 : URL을 클립보드에 복사하고
- 파일 개수의 숫자에 3자리 단위마다 콤마 표시
- 파일 사이즈는 소수점 둘째 자리까지, 단위는 B,KB,MB,GB,TB 로 표기
- 유효기간은 다음과 같이 표기
- 48시간 미만 : xx시간 xx분
- 48시간 이상 : x일
- 만료 : 만료됨
- 받은 사람이 있을 경우 받은 사람 텍스트를 미리 주어진 코드베이스와 같이 컴포넌트 이용
- 링크 정보 표시
- 받기 버튼을 누르면
다운로드 되었습니다.를 내용으로 가지는 브라우저 기본 Alert 표시 - 링크의 유효기간이 만료되지 않았을 경우에만 파일 목록 표시
🔅 이 부분은 기본 구현 목록 외 필요하다고 생각해 구현한 기능입니다.
- 기본으로 제공된 컴포넌트를 분리해 재활용이 가능하도록 구현
- API에 주어진 파일을 썸네일로 보여줄 수 없을 때는 기본 이미지를 보여주도록 구현
- 만료된 링크에서 받기 버튼을 눌렀을 때
만료된 파일입니다.메세지를 Alert로 표시 - 제목이 지정되지 않은 링크에서는
제목 없음을 기본으로 보여주도록 설정 - API에 주어진 파일을 썸네일로 보여줄 수 없을 때는 기본 이미지를 보여주도록 구현
src
├── api
├── common
│ ├── interface
│ └── styles
├── components
│ ├── TableData
│ │ ├── TableDataInfo
│ │ └── TableDataTitle
│ ├── Avatar
│ ├── Button
│ ├── Container
│ └── Validity
├── contextAPI
├── hooks
├── pages
│ ├── DetailPage
│ └── LinkPage
├── styles
│ ├── colors
│ └── GlobalStyle
│
├── App.tsx
└── index.tsx| 이름 | 담당 역할 |
|---|---|
| 황상섭 | 초기 세팅, DetailPage 구현, 문서 작성 |
| 정인권 | LinkPage UI 및 로직 구현, Context API, 배포 |
| 현다솜 | 유효기간 로직 구현, 디테일 수정, 컴포넌트 분리 |
| 커밋명 | 내용 |
|---|---|
| ✨ feat | 파일, 폴더, 새로운 기능 추가 |
| 🐛 fix | 버그 수정 |
| 💄 style | 코드 스타일 변경 |
| 📝 docs | 문서 생성, 추가, 수정(README.md) |
| ♻️ refactor | 코드 리팩토링 |
| 🚑️ chore | 코드 수정 (JSON 데이터 포맷 변경 / scss 변경 등) |
자세한 내용은 여기서 확인해보실 수 있습니다!
- Git Clone
$ git clone
- 다음 명령어를 차례대로 입력해주세요.
$ yarn install
$ yarn start