From d3c21d7e2d188d54a4748ba4c9245d61f8da5318 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Fri, 16 Feb 2024 01:32:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feature-070:=20=ED=81=B0=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=9D=BC=20=EB=95=8C=20width=20=EA=B0=92=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/HomepageStyle.ts | 8 ++++---- src/styles/category/index.style.ts | 2 ++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/styles/HomepageStyle.ts b/src/styles/HomepageStyle.ts index ad556d4..3d8fcca 100644 --- a/src/styles/HomepageStyle.ts +++ b/src/styles/HomepageStyle.ts @@ -4,14 +4,14 @@ import theme from './theme'; export const HomePageContainer = styled.div` background-color: ${theme.color.white}; min-height: 100vh; - width: 100%; + width: 100vw; `; export const SearchContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; - width: 100%; + width: 100vw; padding-bottom: 100px; background-color: ${theme.color.gray500}; `; @@ -130,7 +130,7 @@ export const SearchButton = styled.button` export const RecentVideosContainer = styled.div<{ length: number }>` background-color: ${theme.color.white}; - width: 100%; + width: 100vw; display: flex; justify-content: center; border-radius: 50px 50px 0px 0px; @@ -236,7 +236,7 @@ export const InsightVideosContainer = styled.div<{ userToken: string | null }>` display: flex; justify-content: center; background-color: ${theme.color.white}; - width: 100%; + width: 100vw; border-radius: 50px 50px 0 0; padding: ${(props) => (props.userToken ? '0' : '100px')} 265px 110px; position: relative; diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts index 172a300..76d769b 100644 --- a/src/styles/category/index.style.ts +++ b/src/styles/category/index.style.ts @@ -16,6 +16,8 @@ const CommonIconBackground = styled.div` export const Container = styled.div` padding: 60px 60px 40px 120px; width: 100%; + margin-inline: auto; + max-width: 1440px; `; export const MenuWrap = styled.div` From 2ddca9a3d7b05d767daa0bab437413d35ad9e466 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Fri, 16 Feb 2024 02:39:26 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feature-070:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modals/WIthdrawModal.tsx | 75 ++++++++++++++++++++++++ src/pages/ProfilePage.tsx | 24 +++++++- src/styles/modals/WIthdrawModal.style.ts | 60 +++++++++++++++++++ 3 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 src/components/modals/WIthdrawModal.tsx create mode 100644 src/styles/modals/WIthdrawModal.style.ts diff --git a/src/components/modals/WIthdrawModal.tsx b/src/components/modals/WIthdrawModal.tsx new file mode 100644 index 0000000..ad7c3d7 --- /dev/null +++ b/src/components/modals/WIthdrawModal.tsx @@ -0,0 +1,75 @@ +import { + BlurBackground, + CommonCategoryContainer, + CommonCloseButton, +} from '@/styles/modals/common.style'; +import CloseSvg from '@/assets/icons/close.svg?react'; +import useOutsideClick from '@/hooks/useOutsideClick'; +import AfterLogin from '@/assets/after-login.png'; +import * as WithdrawModalStyles from '@/styles/modals/WIthdrawModal.style'; + +interface IWithdrawModalProp { + reason: string; + setReason: React.Dispatch>; + etcReason: string; + setEtcReason: React.Dispatch>; + setIsWithdrawModalOpen: React.Dispatch>; +} + +const WithdrawModal = ({ + reason, + setReason, + etcReason, + setEtcReason, + setIsWithdrawModalOpen, +}: IWithdrawModalProp) => { + const onCloseModal = () => setIsWithdrawModalOpen(false); + const options = [ + '기록을 삭제하고 싶어요', + '변환 결과가 마음에 들지 않아요', + '이용이 불편하고 장애가 많아요', + '사용빈도가 낮아요', + '기타', + ]; + const [withdrawModalRef] = useOutsideClick(onCloseModal); + const handleInput = (e: React.ChangeEvent) => + setEtcReason(e.target.value); + + return ( + + + + + + + + 왜 탈퇴하시려고 하나요? + + + 탈퇴를 결심한 이유를 알려주세요 + + {options.map((option) => ( + setReason(option)} + className={`${option === reason && 'selected'}`} + > + {option} + + ))} + + + + + 선택하기 + + + + ); +}; +export default WithdrawModal; diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 25e39f8..75bf03a 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -7,11 +7,22 @@ import useBoolean from '@/hooks/useBoolean'; import { userInfoState } from '@/stores/user'; import { Wrapper } from '@/styles/ProfilePage'; +import { useState } from 'react'; +import WithdrawModal from '@/components/modals/WIthdrawModal'; const ProfilePage = () => { + const [reason, setReason] = useState(''); const userInfo = useRecoilValue(userInfoState); const [isShowLogoutModal, , openLogoutModal, closeLogoutModal] = useBoolean(false); + const [etcReason, setEtcReason] = useState(''); + + const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false); + + const handleOpenModal = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsWithdrawModalOpen(true); + }; return ( <> @@ -33,7 +44,9 @@ const ProfilePage = () => {
- + @@ -42,6 +55,15 @@ const ProfilePage = () => { {isShowLogoutModal && } + {isWithdrawModalOpen && ( + + )} ); }; diff --git a/src/styles/modals/WIthdrawModal.style.ts b/src/styles/modals/WIthdrawModal.style.ts new file mode 100644 index 0000000..0b33d38 --- /dev/null +++ b/src/styles/modals/WIthdrawModal.style.ts @@ -0,0 +1,60 @@ +import styled from 'styled-components'; +import theme from '../theme'; + +const CommonButtonStyles = styled.button` + cursor: pointer; + width: 600px; + padding: 15px 0px; + border-radius: 12px; + text-align: center; + ${theme.typography.Body1} +`; + +export const Title = styled.span` + ${theme.typography.Header6} + color: ${theme.color.gray500}; + margin: 12px 0; +`; + +export const SubTitle = styled.span` + ${theme.typography.Body1} + color: ${theme.color.gray300}; + margin-bottom: 48px; +`; + +export const SubmitButton = styled(CommonButtonStyles)` + border: 0; + color: ${theme.color.white}; + background-color: ${theme.color.gray500}; +`; + +export const SelectButton = styled(CommonButtonStyles)` + border: 1.5px solid ${theme.color.gray200}; + color: ${theme.color.gray400}; + background-color: ${theme.color.white}; + margin-bottom: 12px; + &.selected { + border-color: ${theme.color.gray400}; + } +`; + +export const EtcInputWrap = styled.div` + transition: height 0.5s; + height: 0; + &.open { + height: 68px; + } +`; + +export const EtcInput = styled.input` + cursor: pointer; + outline: none; + width: 600px; + padding: 15px; + border-radius: 12px; + border: 1.5px solid ${theme.color.gray200}; + color: ${theme.color.gray400}; + background-color: ${theme.color.white}; + margin-bottom: 12px; + ${theme.typography.Body1} +`; From 0414e463e18df42e522e69997eaae378caa709db Mon Sep 17 00:00:00 2001 From: gs0428 Date: Fri, 16 Feb 2024 16:20:13 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feature-070:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC,=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/sideBar/AddCategory.tsx | 16 +++-- src/components/modals/GuestNoticeModal.tsx | 41 ------------- src/components/modals/NoticeModal.tsx | 47 +++++++++++++++ src/components/modals/WIthdrawModal.tsx | 14 ++++- src/pages/ProfilePage.tsx | 58 ++++++++++++++----- ...iceModal.style.ts => NoticeModal.style.ts} | 0 src/styles/modals/WIthdrawModal.style.ts | 9 ++- 7 files changed, 122 insertions(+), 63 deletions(-) delete mode 100644 src/components/modals/GuestNoticeModal.tsx create mode 100644 src/components/modals/NoticeModal.tsx rename src/styles/modals/{GuestNoticeModal.style.ts => NoticeModal.style.ts} (100%) diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx index 5909ab6..210aa73 100644 --- a/src/components/layout/sideBar/AddCategory.tsx +++ b/src/components/layout/sideBar/AddCategory.tsx @@ -4,12 +4,12 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { topCategoryModalState } from '@/stores/modal'; import { userTokenState } from '@/stores/user'; import { useState } from 'react'; -import GuestNoticeModal from '@/components/modals/GuestNoticeModal'; +import NoticeModal from '@/components/modals/NoticeModal'; const AddCategory = () => { const isUser = useRecoilValue(userTokenState); const setTopCategoryModal = useSetRecoilState(topCategoryModalState); - const [isGuestNoticeModalOpen, setIsGuestNoticeModalOpen] = useState(false); + const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false); const openAddModal = (e: React.MouseEvent) => { setTopCategoryModal(true); @@ -17,7 +17,7 @@ const AddCategory = () => { }; const openGuestNoticeModal = (e: React.MouseEvent) => { - setIsGuestNoticeModalOpen(true); + setIsNoticeModalOpen(true); e.stopPropagation(); }; @@ -29,9 +29,13 @@ const AddCategory = () => { - {isGuestNoticeModalOpen && ( - )} diff --git a/src/components/modals/GuestNoticeModal.tsx b/src/components/modals/GuestNoticeModal.tsx deleted file mode 100644 index 8addfc4..0000000 --- a/src/components/modals/GuestNoticeModal.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { - BlurBackground, - CommonCategoryContainer, - CommonCloseButton, -} from '@/styles/modals/common.style'; -import CloseSvg from '@/assets/icons/close.svg?react'; -import useOutsideClick from '@/hooks/useOutsideClick'; -import AfterLogin from '@/assets/after-login.png'; -import * as GuestNoticeModalStyles from '@/styles/modals/GuestNoticeModal.style'; - -interface IGuestNoticeModalProp { - setIsGuestNoticeModalOpen: React.Dispatch>; -} - -const GuestNoticeModal = ({ - setIsGuestNoticeModalOpen, -}: IGuestNoticeModalProp) => { - const onCloseModal = () => setIsGuestNoticeModalOpen(false); - const [GuestNoticeModalRef] = useOutsideClick(onCloseModal); - return ( - - - - - - - - 로그인하고 중요한 영상 저장하기 - - - 로그인 후 더 많은 서비스를 이용해보세요! - - - 로그인 하기 - - - - ); -}; - -export default GuestNoticeModal; diff --git a/src/components/modals/NoticeModal.tsx b/src/components/modals/NoticeModal.tsx new file mode 100644 index 0000000..7dfc3da --- /dev/null +++ b/src/components/modals/NoticeModal.tsx @@ -0,0 +1,47 @@ +import { + BlurBackground, + CommonCategoryContainer, + CommonCloseButton, +} from '@/styles/modals/common.style'; +import CloseSvg from '@/assets/icons/close.svg?react'; +import useOutsideClick from '@/hooks/useOutsideClick'; +import AfterLogin from '@/assets/after-login.png'; +import * as NoticeModalStyles from '@/styles/modals/NoticeModal.style'; + +interface IGuestNoticeModalProp { + title: string; + subTitle: string; + to: string; + buttonTitle: string; + onButtonClick?: () => void; + setIsNoticeModalOpen: React.Dispatch>; +} + +const NoticeModal = ({ + title, + subTitle, + to, + buttonTitle, + onButtonClick, + setIsNoticeModalOpen, +}: IGuestNoticeModalProp) => { + const onCloseModal = () => setIsNoticeModalOpen(false); + const [noticeModalRef] = useOutsideClick(onCloseModal); + return ( + + + + + + + {title} + {subTitle} + + {buttonTitle} + + + + ); +}; + +export default NoticeModal; diff --git a/src/components/modals/WIthdrawModal.tsx b/src/components/modals/WIthdrawModal.tsx index ad7c3d7..6f1bafc 100644 --- a/src/components/modals/WIthdrawModal.tsx +++ b/src/components/modals/WIthdrawModal.tsx @@ -14,6 +14,7 @@ interface IWithdrawModalProp { etcReason: string; setEtcReason: React.Dispatch>; setIsWithdrawModalOpen: React.Dispatch>; + setIsNoticeModalOpen: React.Dispatch>; } const WithdrawModal = ({ @@ -22,6 +23,7 @@ const WithdrawModal = ({ etcReason, setEtcReason, setIsWithdrawModalOpen, + setIsNoticeModalOpen, }: IWithdrawModalProp) => { const onCloseModal = () => setIsWithdrawModalOpen(false); const options = [ @@ -32,6 +34,12 @@ const WithdrawModal = ({ '기타', ]; const [withdrawModalRef] = useOutsideClick(onCloseModal); + + const handleModalState = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsWithdrawModalOpen(false); + setIsNoticeModalOpen(true); + }; const handleInput = (e: React.ChangeEvent) => setEtcReason(e.target.value); @@ -65,7 +73,11 @@ const WithdrawModal = ({ onChange={handleInput} /> - + 선택하기 diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 75bf03a..c073e4a 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -1,29 +1,39 @@ -import { useRecoilValue } from 'recoil'; - -import { Account, LogoutModal, ServiceSetting } from '@/components/ProfilePage'; - -import useBoolean from '@/hooks/useBoolean'; - -import { userInfoState } from '@/stores/user'; - +import { useRecoilState, useSetRecoilState } from 'recoil'; +import { Account, ServiceSetting } from '@/components/ProfilePage'; +import { userInfoState, userTokenState } from '@/stores/user'; import { Wrapper } from '@/styles/ProfilePage'; import { useState } from 'react'; import WithdrawModal from '@/components/modals/WIthdrawModal'; +import NoticeModal from '@/components/modals/NoticeModal'; const ProfilePage = () => { const [reason, setReason] = useState(''); - const userInfo = useRecoilValue(userInfoState); - const [isShowLogoutModal, , openLogoutModal, closeLogoutModal] = - useBoolean(false); + const setUserToken = useSetRecoilState(userTokenState); + const [userInfo, setUserInfo] = useRecoilState(userInfoState); + const [etcReason, setEtcReason] = useState(''); + const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false); + const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false); const handleOpenModal = (e: React.MouseEvent) => { e.stopPropagation(); - setIsWithdrawModalOpen(true); + const target = e.target as HTMLElement; + if (target.innerHTML === '회원탈퇴') { + setIsWithdrawModalOpen(true); + return; + } + setIsLogoutModalOpen(true); + }; + + const onLogoutClick = () => { + setUserInfo(null); + setUserToken(null); }; + const onWithdrawClick = () => {}; + return ( <> @@ -47,14 +57,23 @@ const ProfilePage = () => { -
- {isShowLogoutModal && } + {isLogoutModalOpen && ( + + )} {isWithdrawModalOpen && ( { setReason={setReason} etcReason={etcReason} setEtcReason={setEtcReason} + setIsNoticeModalOpen={setIsNoticeModalOpen} + /> + )} + {isNoticeModalOpen && ( + )} diff --git a/src/styles/modals/GuestNoticeModal.style.ts b/src/styles/modals/NoticeModal.style.ts similarity index 100% rename from src/styles/modals/GuestNoticeModal.style.ts rename to src/styles/modals/NoticeModal.style.ts diff --git a/src/styles/modals/WIthdrawModal.style.ts b/src/styles/modals/WIthdrawModal.style.ts index 0b33d38..5914c47 100644 --- a/src/styles/modals/WIthdrawModal.style.ts +++ b/src/styles/modals/WIthdrawModal.style.ts @@ -23,9 +23,16 @@ export const SubTitle = styled.span` `; export const SubmitButton = styled(CommonButtonStyles)` - border: 0; + border: 1.5px solid ${theme.color.gray500}; color: ${theme.color.white}; background-color: ${theme.color.gray500}; + transition: background-color 0.5s; + &.disabled { + cursor: default; + background-color: ${theme.color.gray200}; + border-color: ${theme.color.gray200}; + color: ${theme.color.gray300}; + } `; export const SelectButton = styled(CommonButtonStyles)` From c63689898e6f6b70072f330877b1000e63ff3dac Mon Sep 17 00:00:00 2001 From: gs0428 Date: Fri, 16 Feb 2024 16:23:15 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feature-070:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfilePage/LogoutModal/LogoutModal.tsx | 52 ------------------- .../ProfilePage/LogoutModal/index.ts | 1 - src/components/ProfilePage/index.ts | 1 - 3 files changed, 54 deletions(-) delete mode 100644 src/components/ProfilePage/LogoutModal/LogoutModal.tsx delete mode 100644 src/components/ProfilePage/LogoutModal/index.ts diff --git a/src/components/ProfilePage/LogoutModal/LogoutModal.tsx b/src/components/ProfilePage/LogoutModal/LogoutModal.tsx deleted file mode 100644 index a7a076e..0000000 --- a/src/components/ProfilePage/LogoutModal/LogoutModal.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { useSetRecoilState } from 'recoil'; - -import CloseIcon from '@/assets/icons/close.svg?react'; -import AfterLoginImage from '@/assets/after-login.png'; - -import { Modal } from '@/components/common'; - -import { ModalBox } from '@/styles/ProfilePage'; -import { userInfoState, userTokenState } from '@/stores/user'; - -type Props = { - onClose: () => void; -}; - -const LogoutModal = ({ onClose }: Props) => { - const navigate = useNavigate(); - const setUserInfo = useSetRecoilState(userInfoState); - const setUserToken = useSetRecoilState(userTokenState); - - const handleClickLogoutButton = () => { - setUserInfo(null); - setUserToken(null); - navigate('/'); - }; - - return ( - - -
-
- -
- -
- image - -

로그아웃 하시겠어요?

- - 다시 돌아오길 기다릴게요 -
-
- - - - - ); -}; - -export default LogoutModal; diff --git a/src/components/ProfilePage/LogoutModal/index.ts b/src/components/ProfilePage/LogoutModal/index.ts deleted file mode 100644 index fe477cc..0000000 --- a/src/components/ProfilePage/LogoutModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as LogoutModal } from './LogoutModal'; diff --git a/src/components/ProfilePage/index.ts b/src/components/ProfilePage/index.ts index 6e4a135..c6d5328 100644 --- a/src/components/ProfilePage/index.ts +++ b/src/components/ProfilePage/index.ts @@ -1,3 +1,2 @@ export { Account } from './Account'; -export { LogoutModal } from './LogoutModal'; export { ServiceSetting } from './ServiceSetting';