-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[NDD-149] 마이페이지 영상 개별보기 페이지 완료 (8h/3h) (#81)
* fix: myPageLoader 문제 수정 - url을 통해 mypage에 접근할 때 로더가 제대로 동작하지 않는 문제 발생 - rootLoader가 비동기라서 myPageloader보다 나중에 실행되는 문제였음 - mypageLoader에서도 ensureQueryData를 호출하는 방식으로 해결 - ensureQueryData는 캐시가 없을 때만 요청을 하기 때문에 중복 api 호출은 걱정하지 않아도 됨 - 단, 이렇게하면 rootLoader의 의미가 크게 없어지기 때문에 추후 다시 고민해볼것 * feat: 영상 공개용 페이지와 비공개 페이지 분리 * feat: video api mocks 서버 수정 * feat: 공개용 비디오 페이지는 해시가 올바르지 않다면 접근 불가능하도록 로더에서 처리 * feat: getAPIResponseData에서 에러를 상위로 던지도록 설정 * rename: VideoItem을 마이페이지에서만 사용하는 컴포넌트로 전환 * feat: 비공개용 비디오 플레이어와 공개용 비디오 플레이어 컴포넌트 분리 * chore: dayjs 추가 * feat: 유닉스 타임을 YYYY-MM-DD 포맷으로 변환 * feat: 해시값으로 영상 불러오기 실패시 404 페이지로 이동 * feat: 날짜 포맷 YYYY-MM-DD -> YYYY.MM.DD로 변환 * feat: 로딩중 화면을 위한 컴포넌트 생성 (임시) * design: 메인화면으로 이동시 로고 위치 이동하지 않도록 padding 맞춤 * feat: 비디오 공개 페이지, 비공개 페이지 완료 * design: 플레이어 페이지에서는 제목 호버효과 제거 * design: 영상 비율 16:9 비율로 설정 - 나중에 모바일 지원 시 세로 영상이 들어올 수도 있어서 동영상 가로, 세로 길이를 고정해야함 * rename: StartButton을 common components로 이동 동영상 화면에서도 사용하기 위함 * design: 영상 공유하기 버튼 추가 * feat: 공개용 비디오 플레이어 페이지도 시작버튼 변경 * design: 영상 공유설정 모달을 위한 텍스트, 색상, 아이콘 추가 * feat: 토글 foundation 추가 * feat: 일정 길이만큼 문자열을 잘라주는 truncateText 유틸 추가 * feat: 모달을 띄우기 위해 아이콘 버튼 props에 클릭 이벤트 추가 * feat: 공개 범위에 따라서 다르게 보이는 아이콘 컴포넌트 구현 * fix: 토글에 기본 체크값 추가해서 기본값 설정 안되는 문제 해결 * design: foundation 버튼을 상속받아서 밝은 테마 버튼 제작 * rename: 링크 복사하기 아이콘 수정 * feat: 비디오 공유용 모달 마크업 완료 * feat: 영상 공유 옵션 설정할 수 있는 모달 기능구현 완료 * design: 인터뷰 영상페이지 레이아웃 변경 * feat: dev 브랜치 리베이스 후 충돌 해결 * fix: StartButton 링크 경로 수정 * fix: isFetching 대신 data로 조건부 랜더링을 해서 타입 추론이 동작하도록 변경 * fix: 괄호 짝이 맞지 않는 문제 수정
- Loading branch information
Showing
35 changed files
with
736 additions
and
68 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { HTMLElementTypes } from '@/types/utils'; | ||
| import React from 'react'; | ||
| import Button from '@foundation/Button/Button'; | ||
| import { css } from '@emotion/react'; | ||
| import { theme } from '@styles/theme'; | ||
|
|
||
| type LightButtonProps = { | ||
| size?: 'sm' | 'md' | 'lg'; | ||
| } & HTMLElementTypes<HTMLButtonElement> & | ||
| React.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| const LightButton: React.FC<LightButtonProps> = ({ | ||
| children, | ||
| size = 'md', | ||
| ...args | ||
| }) => { | ||
| return ( | ||
| <Button | ||
| size={size} | ||
| {...args} | ||
| css={css` | ||
| color: ${theme.colors.text.default}; | ||
| border: 1px solid ${theme.colors.border.default}; | ||
| background-color: ${theme.colors.surface.default}; | ||
| outline: none; | ||
| transition: background-color 0.15s ease-in-out; | ||
| cursor: pointer; | ||
| &:disabled { | ||
| background-color: ${theme.colors.surface.weakHover}; | ||
| cursor: not-allowed; | ||
| } | ||
| &:not(:disabled):hover { | ||
| background-color: ${theme.colors.surface.weak}; | ||
| } | ||
| `} | ||
| > | ||
| {children} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default LightButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { css, keyframes } from '@emotion/react'; | ||
| import logo from '@assets/images/logo.png'; | ||
|
|
||
| const LoadingBounce = () => { | ||
| const bounce = keyframes` | ||
| 0%, 100% { | ||
| transform: translateY(0); | ||
| } | ||
| 50% { | ||
| transform: translateY(-4rem); /* 공이 최대 높이까지 튀어오르는 지점 */ | ||
| } | ||
| `; | ||
| return ( | ||
| <img | ||
| src={logo} | ||
| alt={'곰돌이 로고'} | ||
| css={css` | ||
| width: 50px; | ||
| height: 50px; | ||
| animation: ${bounce} 1.3s infinite; | ||
| animation-timing-function: ease-in-out; | ||
| `} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoadingBounce; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import Button from '@foundation/Button/Button'; | ||
| import { theme } from '@styles/theme'; | ||
| import Icon from '@foundation/Icon/Icon'; | ||
| import Typography from '@foundation/Typography/Typography'; | ||
| import { css } from '@emotion/react'; | ||
| import { MouseEventHandler } from 'react'; | ||
|
|
||
| type IconButtonProps = { | ||
| text: string; | ||
| iconName: string; | ||
| onClick: MouseEventHandler<HTMLButtonElement>; | ||
| }; | ||
| const IconButton: React.FC<IconButtonProps> = ({ text, iconName, onClick }) => { | ||
| return ( | ||
| <Button | ||
| onClick={onClick} | ||
| css={css` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-self: end; | ||
| gap: 0.5rem; | ||
| padding: 0.5rem 0.75rem; | ||
| color: ${theme.colors.text.default}; | ||
| background-color: ${theme.colors.surface.weak}; | ||
| &:not(:disabled):hover { | ||
| background-color: ${theme.colors.surface.weakHover}; | ||
| } | ||
| `} | ||
| > | ||
| <Icon id={iconName} /> | ||
| <Typography variant="body3">{text}</Typography> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default IconButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| type VideoPlayerProps = { | ||
| url: string; | ||
| }; | ||
|
|
||
| const VideoPlayer: React.FC<VideoPlayerProps> = ({ url }) => { | ||
| return ( | ||
| <video | ||
| src={url} | ||
| autoPlay | ||
| controls | ||
| muted | ||
| css={css` | ||
| //16:9 비율로 설정 | ||
| width: 96vh; | ||
| height: 54vh; | ||
| object-fit: contain; | ||
| align-self: center; | ||
| `} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default VideoPlayer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { css } from '@emotion/react'; | ||
| import Typography from '@foundation/Typography/Typography'; | ||
| import { theme } from '@styles/theme'; | ||
| import React, { PropsWithChildren } from 'react'; | ||
| import { VideoItemResDto } from '@/types/video'; | ||
| import dayjs from 'dayjs'; | ||
|
|
||
| type VideoItemProps = PropsWithChildren & | ||
| Pick<VideoItemResDto, 'videoName' | 'createdAt'>; | ||
|
|
||
| const VideoPlayerFrame: React.FC<VideoItemProps> = ({ | ||
| children, | ||
| videoName, | ||
| createdAt, | ||
| }) => { | ||
| return ( | ||
| <div | ||
| css={css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 0.75rem; | ||
| `} | ||
| > | ||
| {children} | ||
| <div | ||
| css={css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| padding: 1rem; | ||
| height: 100%; | ||
| cursor: pointer; | ||
| `} | ||
| > | ||
| <Typography | ||
| variant="title3" | ||
| css={css` | ||
| line-height: 1.25rem; | ||
| `} | ||
| > | ||
| {videoName} | ||
| </Typography> | ||
| <div | ||
| css={css` | ||
| align-self: flex-end; | ||
| `} | ||
| > | ||
| <Typography variant="body3" color={theme.colors.text.subStrong}> | ||
| {dayjs(Number(createdAt)).format('YYYY.MM.DD')} | ||
| </Typography> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default VideoPlayerFrame; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { css } from '@emotion/react'; | ||
| import { theme } from '@styles/theme'; | ||
|
|
||
| export const ToggleLabelStyle = css` | ||
| position: relative; | ||
| cursor: pointer; | ||
| width: 2.25rem; | ||
| height: 1.25rem; | ||
| background: ${theme.colors.text.subStrong}; | ||
| display: block; | ||
| border-radius: 1rem; // 세로 길이와 동일하게 설정하여 완전한 원형을 만듬 | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0.1875rem; | ||
| left: 0.1875rem; | ||
| width: 0.875rem; | ||
| height: 0.875rem; | ||
| background: #fff; | ||
| border-radius: 50%; | ||
| transition: 0.3s; | ||
| } | ||
| &:active:after { | ||
| width: 1.25rem; | ||
| } | ||
| `; | ||
|
|
||
| export const ToggleInputStyle = css` | ||
| &[type='checkbox'] { | ||
| height: 0; | ||
| width: 0; | ||
| visibility: hidden; | ||
| } | ||
| &:checked + label { | ||
| background: ${theme.colors.point.primary.default}; | ||
| } | ||
| &:checked + label:after { | ||
| left: calc(100% - 0.1rem); | ||
| transform: translateX(-100%); | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { HTMLElementTypes } from '@/types/utils'; | ||
| import { | ||
| ToggleInputStyle, | ||
| ToggleLabelStyle, | ||
| } from '@foundation/Toggle/Toggle.styles'; | ||
|
|
||
| type ToggleProps = { | ||
| isToggled: boolean; | ||
| } & HTMLElementTypes<HTMLInputElement>; | ||
| const Toggle: React.FC<ToggleProps> = ({ isToggled, ...args }) => { | ||
| return ( | ||
| <> | ||
| <input | ||
| id="toggle" | ||
| type="checkbox" | ||
| defaultChecked={isToggled} | ||
| css={ToggleInputStyle} | ||
| {...args} | ||
| /> | ||
| <label htmlFor="toggle" css={ToggleLabelStyle} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Toggle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.