) =>
+ 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..c073e4a 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,17 +1,38 @@
-import { useRecoilValue } from 'recoil';
+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';
-import { Account, LogoutModal, ServiceSetting } from '@/components/ProfilePage';
+const ProfilePage = () => {
+ const [reason, setReason] = useState('');
+ const setUserToken = useSetRecoilState(userTokenState);
+ const [userInfo, setUserInfo] = useRecoilState(userInfoState);
-import useBoolean from '@/hooks/useBoolean';
+ const [etcReason, setEtcReason] = useState('');
-import { userInfoState } from '@/stores/user';
+ const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+ const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+ const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
-import { Wrapper } from '@/styles/ProfilePage';
+ const handleOpenModal = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const target = e.target as HTMLElement;
+ if (target.innerHTML === '회원탈퇴') {
+ setIsWithdrawModalOpen(true);
+ return;
+ }
+ setIsLogoutModalOpen(true);
+ };
-const ProfilePage = () => {
- const userInfo = useRecoilValue(userInfoState);
- const [isShowLogoutModal, , openLogoutModal, closeLogoutModal] =
- useBoolean(false);
+ const onLogoutClick = () => {
+ setUserInfo(null);
+ setUserToken(null);
+ };
+
+ const onWithdrawClick = () => {};
return (
<>
@@ -33,15 +54,46 @@ const ProfilePage = () => {
-
-
- {isShowLogoutModal && }
+ {isLogoutModalOpen && (
+
+ )}
+ {isWithdrawModalOpen && (
+
+ )}
+ {isNoticeModalOpen && (
+
+ )}
);
};
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`
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
new file mode 100644
index 0000000..5914c47
--- /dev/null
+++ b/src/styles/modals/WIthdrawModal.style.ts
@@ -0,0 +1,67 @@
+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: 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)`
+ 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}
+`;
-
-