+ {children}
+
+ );
+};
+
+export default VideoPlayerFrame;
diff --git a/FE/src/components/foundation/Toggle/Toggle.styles.ts b/FE/src/components/foundation/Toggle/Toggle.styles.ts
new file mode 100644
index 0000000..456967a
--- /dev/null
+++ b/FE/src/components/foundation/Toggle/Toggle.styles.ts
@@ -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%);
+ }
+`;
diff --git a/FE/src/components/foundation/Toggle/Toggle.tsx b/FE/src/components/foundation/Toggle/Toggle.tsx
new file mode 100644
index 0000000..7824865
--- /dev/null
+++ b/FE/src/components/foundation/Toggle/Toggle.tsx
@@ -0,0 +1,25 @@
+import { HTMLElementTypes } from '@/types/utils';
+import {
+ ToggleInputStyle,
+ ToggleLabelStyle,
+} from '@foundation/Toggle/Toggle.styles';
+
+type ToggleProps = {
+ isToggled: boolean;
+} & HTMLElementTypes
+
+ {videoName}
+
+
+
+
+ {dayjs(Number(createdAt)).format('YYYY.MM.DD')}
+
+
+
+
+ );
+};
+
+export default ShareRangeIcon;
diff --git a/FE/src/components/interviewVideoPage/Modal/ShareRangeSetting.tsx b/FE/src/components/interviewVideoPage/Modal/ShareRangeSetting.tsx
new file mode 100644
index 0000000..981df4b
--- /dev/null
+++ b/FE/src/components/interviewVideoPage/Modal/ShareRangeSetting.tsx
@@ -0,0 +1,64 @@
+import Typography from '@foundation/Typography/Typography';
+import ShareRangeIcon from '@components/interviewVideoPage/Modal/ShareRangeIcon';
+import { css } from '@emotion/react';
+import { theme } from '@styles/theme';
+import Toggle from '@foundation/Toggle/Toggle';
+
+type ShareRangeSettingProps = {
+ isPublic: boolean;
+ onClick: () => void;
+};
+const ShareRangeSetting: React.FC
+ 공개 범위
+
+ );
+};
+
+export default ShareRangeSetting;
diff --git a/FE/src/components/interviewVideoPage/Modal/VideoShareModal.tsx b/FE/src/components/interviewVideoPage/Modal/VideoShareModal.tsx
new file mode 100644
index 0000000..5e3f7bf
--- /dev/null
+++ b/FE/src/components/interviewVideoPage/Modal/VideoShareModal.tsx
@@ -0,0 +1,59 @@
+import Modal from '@foundation/Modal';
+import Typography from '@foundation/Typography/Typography';
+import { css } from '@emotion/react';
+import ShareRangeSetting from '@components/interviewVideoPage/Modal/ShareRangeSetting';
+import VideoShareModalFooter from '@components/interviewVideoPage/Modal/VideoShareModalFooter';
+import useToggleVideoPublicMutation from '@hooks/mutations/video/useToggleVideoPublicMutation';
+import { truncateText } from '@/utils/textUtils';
+
+type VideoShareModalProps = {
+ videoId: number;
+ videoName: string;
+ isPublic: boolean;
+ isOpen: boolean;
+ closeModal: () => void;
+};
+const VideoShareModal: React.FC
+
+
+
+
+
+ {isPublic ? '링크가 있는 모든 사용자' : '비공개'}
+
+
+ {isPublic
+ ? '링크가 있는 인터넷상의 모든 사용자가 볼 수 있음'
+ : '나만 볼 수 있음'}
+
+
+
+
+ {`"${truncateText(videoName, 15)}" 공유`}
+
+ {isPending ? (
+ '로딩중' //TODO 디자인은 임시입니다.
+ ) : (
+
+
+ void handleCopyLink()}
+ disabled={!hashUrl}
+ css={css`
+ border: 1px solid ${theme.colors.border.default};
+ background-color: transparent;
+ `}
+ >
+ 링크 복사
+
+
+
+ );
+};
+
+export default VideoShareModalFooter;
diff --git a/FE/src/components/interviewVideoPage/PrivateVideoPlayer.tsx b/FE/src/components/interviewVideoPage/PrivateVideoPlayer.tsx
new file mode 100644
index 0000000..8e3bd25
--- /dev/null
+++ b/FE/src/components/interviewVideoPage/PrivateVideoPlayer.tsx
@@ -0,0 +1,19 @@
+import { VideoItemResDto } from '@/types/video';
+import VideoPlayerFrame from '@common/VideoPlayer/VideoPlayerFrame';
+import VideoPlayer from '@common/VideoPlayer/VideoPlayer';
+
+type PrivateVideoPlayerProps = Omit
+
+ {children}
+
+
+ );
+};
+
+export default InterviewVideoPublicPageLayout;
diff --git a/FE/src/components/interviewVideoPublicPage/PublicVideoPlayer.tsx b/FE/src/components/interviewVideoPublicPage/PublicVideoPlayer.tsx
new file mode 100644
index 0000000..6eaee0c
--- /dev/null
+++ b/FE/src/components/interviewVideoPublicPage/PublicVideoPlayer.tsx
@@ -0,0 +1,19 @@
+import { VideoItemResDto } from '@/types/video';
+import VideoPlayerFrame from '@common/VideoPlayer/VideoPlayerFrame';
+import VideoPlayer from '@common/VideoPlayer/VideoPlayer';
+
+type PublicVideoPlayerProps = Omit
+
+
+ {children}
+
+ );
+};
+
+export default CenterLayout;
diff --git a/FE/src/components/myPage/TabPanel/VideoListTabPanel.tsx b/FE/src/components/myPage/TabPanel/VideoListTabPanel.tsx
index 0adb2df..66e9b6a 100644
--- a/FE/src/components/myPage/TabPanel/VideoListTabPanel.tsx
+++ b/FE/src/components/myPage/TabPanel/VideoListTabPanel.tsx
@@ -1,6 +1,6 @@
import Box from '@foundation/Box/Box';
import { css } from '@emotion/react';
-import VideoItem from '@common/VideoItem/VideoItem';
+import VideoItem from '@components/myPage/VideoItem/VideoItem';
import Thumbnail from '@components/myPage/Thumbnail';
import CardCover from '@foundation/CardCover/CardCover';
diff --git a/FE/src/components/common/VideoItem/VideoItem.tsx b/FE/src/components/myPage/VideoItem/VideoItem.tsx
similarity index 100%
rename from FE/src/components/common/VideoItem/VideoItem.tsx
rename to FE/src/components/myPage/VideoItem/VideoItem.tsx
diff --git a/FE/src/constants/path.ts b/FE/src/constants/path.ts
index ae8f67e..1bedeec 100644
--- a/FE/src/constants/path.ts
+++ b/FE/src/constants/path.ts
@@ -13,6 +13,8 @@ export const PATH = {
INTERVIEW_SETTING_RECORD: `/${INTERVIEW}/${SETTING}/${RECORD}`,
MYPAGE: `/${MYPAGE}`,
INTERVIEW_VIDEO: `/${INTERVIEW}/:videoId`,
+ INTERVIEW_VIDEO_PUBLIC: `/${INTERVIEW}/public/:videoHash`,
+ NOT_FOUND: `/404`,
};
export const SETTING_PATH = {
diff --git a/FE/src/mocks/handlers/video.ts b/FE/src/mocks/handlers/video.ts
index ac9f9ba..739f1b5 100644
--- a/FE/src/mocks/handlers/video.ts
+++ b/FE/src/mocks/handlers/video.ts
@@ -1,5 +1,5 @@
import { API } from '@/constants/api';
-import { http, HttpResponse } from 'msw';
+import { delay, http, HttpResponse } from 'msw';
const videoHandlers = [
http.post(API.VIDEO, ({ request }) => {
@@ -51,26 +51,31 @@ const videoHandlers = [
}),
http.get(API.VIDEO_ID(), () => {
return HttpResponse.json(
- [
- {
- id: 1,
- url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
- hash: 'asdfasdfasdfsfasdfasf',
- videoName: 'CSS 선택자의 종류에 대해 설명해주세요.',
- createdAt: '1699941626145',
- },
- ],
+ {
+ id: 1,
+ url: 'https://u2e0.c18.e2-4.dev/videos/%EB%A3%A8%EC%9D%B4%EB%B7%94%ED%86%B5%ED%86%B5%ED%8A%80%EA%B8%B0%EB%84%A4_test_07ab3e8a-1a0a-453f-8d60-afacb57b0075.webm',
+ hash: null,
+ videoName: 'CSS 선택자의 종류에 대해 설명해주세요.',
+ createdAt: '1699941626145',
+ },
{ status: 200 }
);
}),
http.get(API.VIDEO_HASH(), () => {
return HttpResponse.json(
- { hash: 'hashstringstringsrting' },
+ {
+ id: 1,
+ url: 'https://u2e0.c18.e2-4.dev/videos/%EB%A3%A8%EC%9D%B4%EB%B7%94%ED%86%B5%ED%86%B5%ED%8A%80%EA%B8%B0%EB%84%A4_test_07ab3e8a-1a0a-453f-8d60-afacb57b0075.webm',
+ hash: 'asdfasdfasdfsfasdfasf',
+ videoName: 'CSS 선택자의 종류에 대해 설명해주세요.',
+ createdAt: '1699941626145',
+ },
{ status: 200 }
);
}),
- http.patch(API.VIDEO_ID(), () => {
- return HttpResponse.json(null, { status: 204 });
+ http.patch(API.VIDEO_ID(), async () => {
+ await delay(1000);
+ return HttpResponse.json(null, { status: 200 });
}),
http.delete(API.VIDEO_ID(), ({ request }) => {
return HttpResponse.json(null, { status: 204 });
diff --git a/FE/src/page/LandingPage/index.tsx b/FE/src/page/LandingPage/index.tsx
index a559f9b..4a02eef 100644
--- a/FE/src/page/LandingPage/index.tsx
+++ b/FE/src/page/LandingPage/index.tsx
@@ -1,5 +1,5 @@
import LandingPageLayout from '@/components/landingPage/LandingPageLayout';
-import StartButton from '@components/landingPage/StartButton';
+import StartButton from '@common/StartButton/StartButton';
import WelcomeBlurb from '@components/landingPage/WelcomeBlurb';
import LandingImage from '@components/landingPage/LandingImage';
import GoogleLoginButton from '@components/landingPage/GoogleLoginButton';
diff --git a/FE/src/page/interviewVideoPage/index.tsx b/FE/src/page/interviewVideoPage/index.tsx
index 3eebef9..9c0de20 100644
--- a/FE/src/page/interviewVideoPage/index.tsx
+++ b/FE/src/page/interviewVideoPage/index.tsx
@@ -1,24 +1,51 @@
import InterviewVideoPageLayout from '@components/interviewVideoPage/InterviewVideoPageLayout';
-import VideoPlayer from '@components/interviewVideoPage/VideoPlayer';
-import Typography from '@foundation/Typography/Typography';
-import Button from '@foundation/Button/Button';
-import { Link } from 'react-router-dom';
-import { PATH } from '@constants/path';
+import { useParams } from 'react-router-dom';
+import useVideoItemQuery from '@hooks/queries/video/useVideoItemQuery';
+import LoadingBounce from '@common/Loading/LoadingBounce';
+import CenterLayout from '@components/layout/CenterLayout';
+import StartButton from '@common/StartButton/StartButton';
+import { useState } from 'react';
+import IconButton from '@common/VideoPlayer/IconButton';
+import { css } from '@emotion/react';
+import PrivateVideoPlayer from '@components/interviewVideoPage/PrivateVideoPlayer';
+import VideoShareModal from '@components/interviewVideoPage/Modal/VideoShareModal';
const InterviewVideoPage: React.FC = () => {
- const dummyData = {
- videoName: '비디오 이름',
- date: '2001.07.17',
- url: 'https://u2e0.c18.e2-4.dev/videos/%EB%A3%A8%EC%9D%B4%EB%B7%94%ED%86%B5%ED%86%B5%ED%8A%80%EA%B8%B0%EB%84%A4_test_07ab3e8a-1a0a-453f-8d60-afacb57b0075.webm',
- };
+ const { videoId } = useParams();
+ const { data, isFetching } = useVideoItemQuery(Number(videoId));
+ const [isOpen, setIsOpen] = useState(false);
return (
+ setIsOpen(!isOpen)}
+ />
+
+ {!data ? (
+ //TODO 로딩화면 일단 임시로 처리
+