From 4dc4e1f91003f610646b0011ecc86d4294f5e31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=92=E1=85=B1?= Date: Tue, 20 Feb 2024 19:50:47 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feature-074:=20=EC=B6=94=EC=B2=9C=20?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modals/RecommendationModal.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/modals/RecommendationModal.tsx b/src/components/modals/RecommendationModal.tsx index 21c32d5..c82d39f 100644 --- a/src/components/modals/RecommendationModal.tsx +++ b/src/components/modals/RecommendationModal.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useSetRecoilState, useRecoilValue } from 'recoil'; -import { getAllDummyVideosAPI, getUnReadDummyVideosAPI } from '@/apis/videos'; +import { getAllDummyVideosAPI } from '@/apis/videos'; import CloseIcon from '@/assets/icons/close.svg?react'; import TransformationIcon from '@/assets/icons/transformation.svg?react'; @@ -27,17 +27,10 @@ const RecommendationModal = () => { useEffect(() => { const callAPI = async () => { - let videos: IVideo[] = []; - try { + const videos = (await getAllDummyVideosAPI()).data.result.videos; const random = Math.round(Math.random() * (videos.length - 1)); - if (userToken) { - videos = (await getUnReadDummyVideosAPI()).data.result.videos; - } else { - videos = (await getAllDummyVideosAPI()).data.result.videos; - } - setDummyVideo(videos[random]); } catch (e) { console.error(e); @@ -83,7 +76,7 @@ const RecommendationModal = () => { thumbnail From f214c996f599d524b2652bc312d715d5236d40df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=92=E1=85=B1?= Date: Wed, 21 Feb 2024 01:18:44 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feature-074:=20=EC=98=81=EC=83=81=20?= =?UTF-8?q?=EC=9A=94=EC=95=BD=20>=20=EB=B9=84=ED=9A=8C=EC=9B=90=20?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/check.png | Bin 0 -> 1591 bytes .../CategorySelectBox/CategorySelectBox.tsx | 87 ++++++----- .../SummaryDetailBox/NoteBox/NoteBox.tsx | 139 +++++++++++------- .../ToolBox/ChangeKeyword/ChangeKeyword.tsx | 43 +++++- .../ToolBox/SearchKeyword/SearchKeyword.tsx | 2 +- .../SummaryScriptBox/ToolBox/ToolBox.tsx | 101 ++++++++----- src/components/modals/GuestLoginModal.tsx | 37 +++++ src/styles/SummaryPage.ts | 56 +++++++ src/styles/layout/header/index.ts | 2 +- 9 files changed, 332 insertions(+), 135 deletions(-) create mode 100644 public/assets/check.png create mode 100644 src/components/modals/GuestLoginModal.tsx diff --git a/public/assets/check.png b/public/assets/check.png new file mode 100644 index 0000000000000000000000000000000000000000..906b84fbca2347ac504f5828782d071b1c7c8744 GIT binary patch literal 1591 zcmV-72FUq|P)R^Sj+ZbGtMiR!B$S@%i^mV!nA4hI6n8t8fmT}6Un zfP^nYfe;o#V9)7ZNJE%mKJJ~5?*ErGX<#0_&S7T$=gyr=1ONa4000000000000000 z0000000000007{}PXv)jr_(=DsnkkOPfwlwO+K{|gesHCbicg3RQPQ{eW~8w-k!58 zt42PcfFV-F+u^q(AHHR&B3k4T3K$YDUPcu!W3!1A@fWUPojhnKFpg_C!o}Ms`{Fe= zdwqRfCyx+f4CCVc#>HFXx7}_w=U~%)b93`2xr725BuSHxss(=gvxk57jf+TJ#J}8Z zi~<_M#gnA@2lgN!iVYS_&v(h5uS)7|6?!ReN}N$PEq-dK&wSno62pKdTodF5ZIM zjRT)TRq;L>VgJeqC)8z1kfx-my?DG28@H9b6i);y;K!ut!$eZr3oc&PVA8bsB~5#k zJn~&YNs~57(~~5$7hJreDxR^V>E~Xc2yz5wNuSuZ7phJ0bXs$Z3%3!Zc#WSyK3!j5 zcRxNp2049x)VK!p_V)UkTAW!?dcq)C|Vh2f-GRXv_X z257${&pTcIinF8%@7Vmnz`zC>!o`!*b%D%S)D>3jXfI$=+6#wCwz{|;kPbro?W82M z7jIJ^$lRFb?_m_L@%zY-xV9H+Kw9o5WJog=R`MpoiXCH9D&p8)7@qoIENMD1I;km6 z?L`PvAB-hU$KOpM;DPD|zAh9=pHg36pX=DKraqWTgR6YKD^Ns2o7fvgd!ciZt&N$m z!it^H3K({KVRB4UDS5qnZbE2}mxbA07@B0;;CJeSDWN_eD6`P`!{=oukRFZsI5H#d z{R`%krmv|FriA{0r-AlDrtdc%j0|IvZ4^nE)g@Q@6NMbdN(>l7gD^bsVO;% zNjEk1As?r(Vkh!dD*Ut;dwYAt*F00ji(S%m5}QY?-QK-eTU(>~`FS!yCCz*s!-}2Q ztP|s=y;xdWGFiNhxF$^}v0LPTuWe=Ckw2QhCP}kWsnF);CK+OU>Vqk*(mnZ*6T^29stk>BSSVEugd)&(F^}+1aE~ zR8t>JiTz4Vg+gIucXxN^_VzaL0JWNAoAbbwa|K|4JsJrJ= z$H&L99*_>jpb6Ql=a#7qnu { - if (!userToken || disabled) return; + if (disabled) return; - setIsOpen(!isOpen); + if (userToken) { + setIsOpen(!isOpen); + } else { + setIsModalOpen(true); + } }; const handleSelect = (categoryId: number) => { @@ -68,45 +75,55 @@ const CategorySelectBox = ({ }; return ( -
-
+ <> +
- - {userToken - ? selectedCategory - ? selectedCategory.name - : size === 'SMALL' - ? '카테고리 선택' - : '어떤 카테고리에 넣을까요?' - : '로그인하고 요약한 영상을 아카이빙해요!'} - - - +
+ + {userToken + ? selectedCategory + ? selectedCategory.name + : size === 'SMALL' + ? '카테고리 선택' + : '어떤 카테고리에 넣을까요?' + : '로그인하고 요약한 영상을 아카이빙해요!'} + + + +
+ + {isOpen && ( + + )}
- {isOpen && ( - - )} + + +
- - - -
+ {isModalOpen && ( + 로그인하고 요약한 영상을 아카이빙해요!} + onClose={() => setIsModalOpen(false)} + /> + )} + ); }; diff --git a/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx b/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx index 642a5f0..9c057ac 100644 --- a/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx +++ b/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { @@ -8,11 +9,14 @@ import { import PlusIcon from '@/assets/icons/plus.svg?react'; +import GuestLoginModal from '@/components/modals/GuestLoginModal'; + import useIndex from '@/hooks/useIndex'; import { IVideoSummary } from '@/models/video'; import { summaryIsEditingViewState, summaryVideoState } from '@/stores/summary'; +import { userTokenState } from '@/stores/user'; import NoteItem from './NoteItem'; @@ -21,15 +25,19 @@ type Props = { }; const NoteBox = ({ onRefresh }: Props) => { + const userToken = useRecoilValue(userTokenState); const summaryVideo = useRecoilValue(summaryVideoState); const isEditingView = useRecoilValue(summaryIsEditingViewState); const [editableIndex, setEditableIndex, setDisableIndex] = useIndex(); + const [isModalOpen, setIsModalOpen] = useState(false); const handleActiveEditable = (index: number) => { - if (index > (summaryVideo?.summary || []).length - 1) { - setEditableIndex(-1); - } else { - setEditableIndex(index); + if (userToken) { + if (index > (summaryVideo?.summary || []).length - 1) { + setEditableIndex(-1); + } else { + setEditableIndex(index); + } } }; @@ -74,57 +82,63 @@ const NoteBox = ({ onRefresh }: Props) => { } }; - return ( -
-
- {summaryVideo?.summary.map((summary, index) => ( - handleActiveEditable(index)} - onEdit={(content) => { - handleUpdateNote({ id: summary.id, content }); - setDisableIndex(); - }} - onEditAndNext={(content) => { - handleUpdateNote({ id: summary.id, content }); - handleActiveEditable(index + 1); - }} - onRemove={() => handleRemoveNote(summary.id)} - /> - ))} - - {/* 추가 */} - {editableIndex === -1 && ( - { - handleCreateNote(content); - setDisableIndex(); - }} - onEditAndNext={handleCreateNote} - /> - )} - - {/* 추가 버튼 */} - {editableIndex === null && !isEditingView && ( - - )} -
+ const handleClickCreateButton: React.MouseEventHandler = ( + e, + ) => { + if (userToken) { + e.stopPropagation(); + setEditableIndex(-1); + } else { + setIsModalOpen(true); + } + }; - {/*
+ return ( + <> +
+
+ {summaryVideo?.summary.map((summary, index) => ( + handleActiveEditable(index)} + onEdit={(content) => { + handleUpdateNote({ id: summary.id, content }); + setDisableIndex(); + }} + onEditAndNext={(content) => { + handleUpdateNote({ id: summary.id, content }); + handleActiveEditable(index + 1); + }} + onRemove={() => handleRemoveNote(summary.id)} + /> + ))} + + {/* 추가 */} + {editableIndex === -1 && ( + { + handleCreateNote(content); + setDisableIndex(); + }} + onEditAndNext={handleCreateNote} + /> + )} + + {/* 추가 버튼 */} + {editableIndex === null && !isEditingView && ( + + )} +
+ + {/*
더블 클릭을 통해 잘못된 내용을 수정해봐요! @@ -133,7 +147,22 @@ const NoteBox = ({ onRefresh }: Props) => { 직접 기록하고 싶은 내용들을 추가할 수 있어요!
*/} -
+
+ + {isModalOpen && ( + + 로그인하지 않으면 수정한 부분을 나중에 다시 확인할 수 없어요! +
+ 로그인하고 수정내용을 저장해요 + + } + onClose={() => setIsModalOpen(false)} + /> + )} + ); }; diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx index dcb6caf..e77ba55 100644 --- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx +++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx @@ -1,8 +1,12 @@ -import { useRecoilState } from 'recoil'; +import { useState } from 'react'; +import { useRecoilState, useRecoilValue } from 'recoil'; import TransformationIcon from '@/assets/icons/transformation.svg?react'; +import GuestLoginModal from '@/components/modals/GuestLoginModal'; + import { summaryTransformModalState } from '@/stores/modal'; +import { userTokenState } from '@/stores/user'; import ChangeKeywordModal from './ChangeKeywordModal'; @@ -11,16 +15,45 @@ type Props = { }; const ChangeKeyword = (props: Props) => { - const [isOpen, setIsOpen] = useRecoilState(summaryTransformModalState); + const userToken = useRecoilValue(userTokenState); + const [isTransformModalOpen, setIsTransformModalOpen] = useRecoilState( + summaryTransformModalState, + ); + const [isGuestModalOpen, setIsGuestModalOpen] = useState(false); + + const handleClickButton = () => { + if (userToken) { + setIsTransformModalOpen(true); + } else { + setIsGuestModalOpen(true); + } + }; return ( <> - setIsOpen(true)}> + - {isOpen && ( - setIsOpen(false)} {...props} /> + {isTransformModalOpen && ( + setIsTransformModalOpen(false)} + {...props} + /> + )} + + {isGuestModalOpen && ( + + 로그인하지 않으면 수정한 부분을 나중에 다시 확인할 수 없어요! +
+ 로그인하고 수정내용을 저장해요 + + } + onClose={() => setIsGuestModalOpen(false)} + /> )} ); diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx index d6f4b08..e644a66 100644 --- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx +++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx @@ -33,7 +33,7 @@ const SearchKeyword = ({ onChange }: Props) => { box: { padding: isOpen ? '8px 52px 8px 16px' : '8px 0', right: isOpen ? -92 : 0, - width: isOpen ? 400 : 38, + width: isOpen ? 360 : 38, }, button: { transform: isOpen ? 'rotateZ(360deg)' : 'rotateZ(0deg)', diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx index 1056b81..a3d8c70 100644 --- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx +++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx @@ -5,6 +5,8 @@ import { getVideoAPI, updateVideoAPI } from '@/apis/videos'; import ModifyIcon from '@/assets/icons/modify.svg?react'; +import GuestLoginModal from '@/components/modals/GuestLoginModal'; + import useCreateToast from '@/hooks/useCreateToast'; import { IVideo } from '@/models/video'; @@ -15,6 +17,7 @@ import { summaryUpdateVideoState, summaryVideoState, } from '@/stores/summary'; +import { userTokenState } from '@/stores/user'; import Indicator from './Indicator'; import { SearchKeyword } from './SearchKeyword'; @@ -26,6 +29,7 @@ type Props = { }; const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => { + const userToken = useRecoilValue(userTokenState); const summaryVideo = useRecoilValue(summaryVideoState) as IVideo; const setPlaySubHeadingId = useSetRecoilState(summaryPlaySubHeadingIdState); const [summaryUpdateVideo, setSummaryUpdateVideo] = useRecoilState( @@ -36,13 +40,18 @@ const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => { ); const [originalSummary, setOriginalSummary] = useState(null); + const [isGuestModalOpen, setIsGuestModalOpen] = useState(false); const { createToast } = useCreateToast(); const handleClickModifyIcon = () => { - setPlaySubHeadingId(-1); - setIsEditingView(true); - setSummaryUpdateVideo({ ...summaryVideo }); + if (userToken) { + setPlaySubHeadingId(-1); + setIsEditingView(true); + setSummaryUpdateVideo({ ...summaryVideo }); + } else { + setIsGuestModalOpen(true); + } }; const handleClickPrevButton = () => { @@ -105,42 +114,58 @@ const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => { }, []); return ( -
- {isEditingView ? ( - <> -
- -
- - -
- - ) : ( - <> - - -
- - - - - - - -
- + <> +
+ {isEditingView ? ( + <> +
+ +
+ + +
+ + ) : ( + <> + + +
+ + + + + + + +
+ + )} +
+ + {isGuestModalOpen && ( + + 로그인하지 않으면 수정한 부분을 나중에 다시 확인할 수 없어요! +
+ 로그인하고 수정내용을 저장해요 + + } + onClose={() => setIsGuestModalOpen(false)} + /> )} -
+ ); }; diff --git a/src/components/modals/GuestLoginModal.tsx b/src/components/modals/GuestLoginModal.tsx new file mode 100644 index 0000000..56c3870 --- /dev/null +++ b/src/components/modals/GuestLoginModal.tsx @@ -0,0 +1,37 @@ +import { Link } from 'react-router-dom'; + +import CloseIcon from '@/assets/icons/close.svg?react'; + +import { Modal } from '@/components/common'; + +import { ModalBox } from '@/styles/SummaryPage'; + +type Props = { + title: string; + description: string | JSX.Element; + onClose: () => void; +}; + +const GuestLoginModal = ({ title, description, onClose }: Props) => { + return ( + + +
+ +
+ +
+ check + +

{title}

+ + {description} +
+ + 로그인 하기 + + + ); +}; + +export default GuestLoginModal; diff --git a/src/styles/SummaryPage.ts b/src/styles/SummaryPage.ts index ce5213b..7123685 100644 --- a/src/styles/SummaryPage.ts +++ b/src/styles/SummaryPage.ts @@ -308,6 +308,10 @@ export const ScriptBox = styled.div` &.active { background-color: ${(props) => props.theme.color.gray500}; } + + &:nth-of-type(n + 11) { + display: none; + } } & span.icon-button { @@ -659,3 +663,55 @@ export const DropdownTopCategoryName = styled.span` flex-direction: column; justify-content: center; `; + +export const ModalBox = styled.div` + display: flex; + flex-direction: column; + padding: 40px 50px; + width: 700px; + border-radius: 20px; + background-color: ${(props) => props.theme.color.white}; + box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1); + + & > .close-button { + align-self: flex-end; + cursor: pointer; + } + + & > .content { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + + & > img { + width: 56px; + height: auto; + } + + & > h1 { + color: ${(props) => props.theme.color.gray500}; + ${(props) => props.theme.typography.Header6}; + } + + & > span { + color: ${(props) => props.theme.color.gray300}; + text-align: center; + ${(props) => props.theme.typography.Body1}; + } + } + + & > a { + margin-top: 48px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 58px; + border-radius: 12px; + background-color: ${(props) => props.theme.color.gray500}; + color: ${(props) => props.theme.color.white}; + text-decoration: none; + ${(props) => props.theme.typography.Body1}; + } +`; diff --git a/src/styles/layout/header/index.ts b/src/styles/layout/header/index.ts index 28089a0..183d917 100644 --- a/src/styles/layout/header/index.ts +++ b/src/styles/layout/header/index.ts @@ -7,7 +7,7 @@ export const Container = styled.header<{ color: ColorKeyType }>` position: sticky; left: 0; top: 0; - z-index: 3; + z-index: 1; padding: 16px 60px; display: flex; justify-content: space-between; From 75e2d515168294187ba48c2b92fa4a93977ffaa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=92=E1=85=B1?= Date: Wed, 21 Feb 2024 01:55:46 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feature-074:=20=EC=98=81=EC=83=81=20?= =?UTF-8?q?=EC=9A=94=EC=95=BD=20>=20UI=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ToolBox/SearchKeyword/SearchKeyword.tsx | 2 +- .../SummaryScriptBox/ToolBox/ToolBox.tsx | 9 +++- src/pages/HomePage.tsx | 42 ++++++++++++++----- src/pages/SummaryPage.tsx | 3 +- src/styles/SummaryPage.ts | 4 +- src/styles/layout/sideBar/index.ts | 1 - 6 files changed, 44 insertions(+), 17 deletions(-) diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx index e644a66..d6f4b08 100644 --- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx +++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/SearchKeyword/SearchKeyword.tsx @@ -33,7 +33,7 @@ const SearchKeyword = ({ onChange }: Props) => { box: { padding: isOpen ? '8px 52px 8px 16px' : '8px 0', right: isOpen ? -92 : 0, - width: isOpen ? 360 : 38, + width: isOpen ? 400 : 38, }, button: { transform: isOpen ? 'rotateZ(360deg)' : 'rotateZ(0deg)', diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx index a3d8c70..d46f211 100644 --- a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx +++ b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx @@ -139,7 +139,14 @@ const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => { <> -
+
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 7feffd7..71b6aff 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useRef, useState } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { IVideoProps } from 'types/videos'; import { getRecentVideos, getAllDummyVideos, createDummyVideoToMine, + createVideoAPI, } from '@/apis/videos'; import SearchYoutube from '@/components/Home/SearchYoutube'; @@ -13,28 +14,26 @@ import RecentVideos from '@/components/Home/RecentVideos'; import InsightVideos from '@/components/Home/InsightVideos'; import RecommendationModal from '@/components/modals/RecommendationModal'; +import useCreateToast from '@/hooks/useCreateToast'; + import { HomePageContainer } from '@/styles/HomepageStyle'; import { userTokenState } from '@/stores/user'; import { recommendationModalState } from '@/stores/modal'; import { isSideBarOpenState } from '@/stores/ui'; -import useCreateToast from '@/hooks/useCreateToast'; - -export interface Video { - id: string; - title: string; - subtitle: string; - hashtags: string[]; - thumbnailUrl: string; -} +import { modelingDataState } from '@/stores/model-controller'; const HomePage: React.FC = () => { const userToken = useRecoilValue(userTokenState); - const setIsSideBarOpen = useSetRecoilState(isSideBarOpenState); const isOpenModal = useRecoilValue(recommendationModalState); + const setIsSideBarOpen = useSetRecoilState(isSideBarOpenState); + const [modelingData, setModelingData] = useRecoilState(modelingDataState); + const [recentVideos, setRecentVideos] = useState([]); const [dummyVideos, setDummyVideos] = useState([]); + const { createToast } = useCreateToast(); + const searchRef = useRef(null); const onFileClick = async ( @@ -69,6 +68,27 @@ const HomePage: React.FC = () => { setIsSideBarOpen(false); }, [setIsSideBarOpen, userToken]); + useEffect(() => { + const createVideo = async () => { + if (!modelingData) return; + + try { + await createVideoAPI(modelingData); + } catch (e) { + console.error(e); + } + + setModelingData(null); + }; + + if (userToken) { + createVideo(); + } else { + setModelingData(null); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [userToken]); + return ( <> diff --git a/src/pages/SummaryPage.tsx b/src/pages/SummaryPage.tsx index 34d7141..419456b 100644 --- a/src/pages/SummaryPage.tsx +++ b/src/pages/SummaryPage.tsx @@ -113,10 +113,9 @@ const SummaryPage = () => { return () => { setSummaryVideo(null); - // setModelingData(null); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [search]); + }, [videoId, search]); return ( diff --git a/src/styles/SummaryPage.ts b/src/styles/SummaryPage.ts index 7123685..778fc46 100644 --- a/src/styles/SummaryPage.ts +++ b/src/styles/SummaryPage.ts @@ -254,7 +254,7 @@ export const ScriptBox = styled.div` box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.05); & div.tools { - z-index: 1; + position: relative; padding: 20px 100px 20px 60px; display: flex; align-items: center; @@ -293,8 +293,10 @@ export const ScriptBox = styled.div` & div.indicator { display: flex; + align-items: center; flex: 1 1 auto; gap: 20px; + height: 40px; } & div.indicator-item { diff --git a/src/styles/layout/sideBar/index.ts b/src/styles/layout/sideBar/index.ts index b9781cd..a4af921 100644 --- a/src/styles/layout/sideBar/index.ts +++ b/src/styles/layout/sideBar/index.ts @@ -6,7 +6,6 @@ export const Container = styled.div` flex-direction: column; padding: 60px 20px 0px 60px; box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.05); - z-index: 2; background-color: ${theme.color.white}; min-height: 964px; `; From 1b6d43713edafb6e9bab4bc09dbf64817af683ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=92=E1=85=B1?= Date: Wed, 21 Feb 2024 02:49:15 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feature-074:=20=EA=B0=81=EC=A2=85=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/sideBar/AddCategory.tsx | 38 ++++++++---------- src/components/layout/sideBar/index.tsx | 39 ++++++++++++++----- src/components/modals/RecommendationModal.tsx | 2 +- src/hooks/useCreateVideo.ts | 2 +- src/stores/modal.ts | 5 +++ 5 files changed, 52 insertions(+), 34 deletions(-) diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx index 909c334..41dde21 100644 --- a/src/components/layout/sideBar/AddCategory.tsx +++ b/src/components/layout/sideBar/AddCategory.tsx @@ -1,15 +1,16 @@ -import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style'; -import PlusSvg from '@/assets/icons/plus.svg?react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { addCategoryModalState } from '@/stores/modal'; + +import PlusSvg from '@/assets/icons/plus.svg?react'; + +import { addCategoryModalState, guestCategoryModalState } from '@/stores/modal'; import { userTokenState } from '@/stores/user'; -import { useState } from 'react'; -import NoticeModal from '@/components/modals/NoticeModal'; + +import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style'; const AddCategory = () => { const isUser = useRecoilValue(userTokenState); const setIsAddCategoryModalOpen = useSetRecoilState(addCategoryModalState); - const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false); + const setGuestCategoryModal = useSetRecoilState(guestCategoryModalState); const openAddModal = (e: React.MouseEvent) => { setIsAddCategoryModalOpen({ @@ -21,28 +22,21 @@ const AddCategory = () => { }; const openGuestNoticeModal = (e: React.MouseEvent) => { - setIsNoticeModalOpen(true); + setGuestCategoryModal(true); e.stopPropagation(); }; const handleClickedAdd = (e: React.MouseEvent) => isUser ? openAddModal(e) : openGuestNoticeModal(e); return ( - - 카테고리 - - - - {isNoticeModalOpen && ( - - )} - + <> + + 카테고리 + + + + + ); }; diff --git a/src/components/layout/sideBar/index.tsx b/src/components/layout/sideBar/index.tsx index e102bb2..8d146fc 100644 --- a/src/components/layout/sideBar/index.tsx +++ b/src/components/layout/sideBar/index.tsx @@ -1,6 +1,12 @@ -import * as SideBarStyles from '@/styles/layout/sideBar'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; + +import NoticeModal from '@/components/modals/NoticeModal'; + import { userTokenState } from '@/stores/user'; +import { guestCategoryModalState } from '@/stores/modal'; + +import * as SideBarStyles from '@/styles/layout/sideBar'; + import GuestMode from './GuestMode'; import UserMode from './UserMode'; import AddCategory from './AddCategory'; @@ -9,16 +15,29 @@ import VinoGuide from './VinoGuide'; const SideBar = () => { const isUser = useRecoilValue(userTokenState); + const [isModalOpen, setIsModalOpen] = useRecoilState(guestCategoryModalState); return ( - - - - - - {isUser ? : } - - + <> + + + + + + {isUser ? : } + + + + {isModalOpen && ( + setIsModalOpen(false)} + /> + )} + ); }; diff --git a/src/components/modals/RecommendationModal.tsx b/src/components/modals/RecommendationModal.tsx index c82d39f..d955c05 100644 --- a/src/components/modals/RecommendationModal.tsx +++ b/src/components/modals/RecommendationModal.tsx @@ -83,7 +83,7 @@ const RecommendationModal = () => {

{dummyVideo.title}

-
+
{dummyVideo.tag.slice(0, 3).map((item) => (
# {item.name} diff --git a/src/hooks/useCreateVideo.ts b/src/hooks/useCreateVideo.ts index 75e6a6e..034fb82 100644 --- a/src/hooks/useCreateVideo.ts +++ b/src/hooks/useCreateVideo.ts @@ -43,7 +43,7 @@ const useCreateVideo = () => { setIsOpenErrorModal(true); } } else { - navigate('/summary/guest'); + navigate(`/summary/guest?id=${Date.now()}`); } setVideoLink(null); diff --git a/src/stores/modal.ts b/src/stores/modal.ts index 5570113..e78bc20 100644 --- a/src/stores/modal.ts +++ b/src/stores/modal.ts @@ -5,6 +5,11 @@ export const addCategoryModalState = atom({ default: { location: '', isOpen: false, categoryId: -1 }, }); +export const guestCategoryModalState = atom({ + key: 'guest-category-modal', + default: false, +}); + export const summaryTransformModalState = atom({ key: 'summary-transform-modal', default: false,