diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index fac565b..23c25b8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,23 +1,17 @@
import styled from 'styled-components';
interface ButtonInterface {
- color: string;
- borderColor?: string;
message: string;
onClick: VoidFunction;
}
-const Button = ({ color, borderColor, message, onClick }: ButtonInterface) => {
- return (
-
- {message}
-
- );
+const Button = ({ message, onClick }: ButtonInterface) => {
+ return {message};
};
export default Button;
-const ButtonWrapper = styled.div<{ $color: string; $borderColor?: string }>`
+const ButtonWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
@@ -27,9 +21,8 @@ const ButtonWrapper = styled.div<{ $color: string; $borderColor?: string }>`
font-size: 1.6rem;
text-align: center;
- color: ${({ theme, $color }) => theme.colors[$color]};
+ color: ${({ theme }) => theme.colors.white};
border-radius: 1.8rem;
- border: 1px solid
- ${({ theme, $borderColor }) => ($borderColor ? theme.colors[$borderColor] : 'white')};
+ border: 1px solid ${({ theme }) => theme.colors.white};
`;
diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
new file mode 100644
index 0000000..4f44564
--- /dev/null
+++ b/src/components/DeleteButton.tsx
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { useDeleteUser } from '../hooks/queries/useDeleteUser';
+
+interface DeleteButtonInterface {
+ message: string;
+}
+
+const DeleteButton = ({ message }: DeleteButtonInterface) => {
+ const { deleteUser } = useDeleteUser();
+ const accessToken = localStorage.getItem('ACCESS_TOKEN');
+
+ if (!accessToken) {
+ console.error('Access token is missing');
+ return null;
+ }
+
+ const handleDeleteUser = () => {
+ deleteUser(accessToken);
+ };
+
+ return {message};
+};
+
+export default DeleteButton;
+
+const ButtonWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 26rem;
+ height: 5.2rem;
+
+ font-size: 1.6rem;
+ text-align: center;
+ color: ${({ theme }) => theme.colors.red};
+
+ border-radius: 1.8rem;
+ border: 1px solid ${({ theme }) => theme.colors.red};
+`;
diff --git a/src/layouts/DeleteLayout.tsx b/src/layouts/DeleteLayout.tsx
index e1a629e..9481c7f 100644
--- a/src/layouts/DeleteLayout.tsx
+++ b/src/layouts/DeleteLayout.tsx
@@ -1,17 +1,12 @@
import styled from 'styled-components';
import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from '../assets/svg';
-import Button from '../components/Button';
import { Outlet } from 'react-router-dom';
-import { useDeleteUser } from '../hooks/queries/useDeleteUser';
interface DeleteLayoutInterface {
iconOn: boolean;
- btnColor: string;
- btnMessage: string;
}
-const DeleteLayout = ({ iconOn, btnColor, btnMessage }: DeleteLayoutInterface) => {
- const { deleteUser } = useDeleteUser();
+const DeleteLayout = ({ iconOn }: DeleteLayoutInterface) => {
const accessToken = localStorage.getItem('ACCESS_TOKEN');
console.log('ACCESSTOKEn', accessToken);
@@ -20,10 +15,6 @@ const DeleteLayout = ({ iconOn, btnColor, btnMessage }: DeleteLayoutInterface) =
return null;
}
- const handleDeleteUser = () => {
- deleteUser(accessToken);
- };
-
return (
@@ -33,7 +24,6 @@ const DeleteLayout = ({ iconOn, btnColor, btnMessage }: DeleteLayoutInterface) =
)}
-
);
};
diff --git a/src/layouts/RecordreamLayout.tsx b/src/layouts/RecordreamLayout.tsx
index 8bdf3d4..bdee548 100644
--- a/src/layouts/RecordreamLayout.tsx
+++ b/src/layouts/RecordreamLayout.tsx
@@ -1,21 +1,12 @@
import styled from 'styled-components';
import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from '../assets/svg';
-import Button from '../components/Button';
import { Outlet } from 'react-router-dom';
interface RecordreamLayoutInterface {
iconOn: boolean;
- btnColor: string;
- btnMessage: string;
- handleClick: VoidFunction;
}
-const RecordreamLayout = ({
- iconOn,
- btnColor,
- btnMessage,
- handleClick,
-}: RecordreamLayoutInterface) => {
+const RecordreamLayout = ({ iconOn }: RecordreamLayoutInterface) => {
return (
@@ -25,7 +16,6 @@ const RecordreamLayout = ({
)}
-
);
};
diff --git a/src/pages/CompletePage.tsx b/src/pages/CompletePage.tsx
index a0082af..5378768 100644
--- a/src/pages/CompletePage.tsx
+++ b/src/pages/CompletePage.tsx
@@ -1,6 +1,8 @@
-import styled from "styled-components";
-import Subtitle from "../components/Subtitle";
-import Title from "../components/Title";
+import styled from 'styled-components';
+import Subtitle from '../components/Subtitle';
+import Title from '../components/Title';
+import Button from '../components/Button';
+import useNavigateHome from '../hooks/useNavigateHome';
const CompletePage = () => {
return (
@@ -9,6 +11,7 @@ const CompletePage = () => {
그동안 레코드림을 이용해주셔서
감사합니다.
+
);
};
diff --git a/src/pages/DeletePage.tsx b/src/pages/DeletePage.tsx
index 08b2a08..af9d5fa 100644
--- a/src/pages/DeletePage.tsx
+++ b/src/pages/DeletePage.tsx
@@ -1,6 +1,7 @@
-import styled from "styled-components";
-import Title from "../components/Title";
-import Subtitle from "../components/Subtitle";
+import styled from 'styled-components';
+import Title from '../components/Title';
+import Subtitle from '../components/Subtitle';
+import DeleteButton from '../components/DeleteButton';
const DeletePage = () => {
return (
@@ -9,6 +10,7 @@ const DeletePage = () => {
서비스 탈퇴 시 저장된 기록은
복구되지 않습니다.
+
);
};
diff --git a/src/pages/UnregisteredPage.tsx b/src/pages/UnregisteredPage.tsx
index 6f65eb9..30de0df 100644
--- a/src/pages/UnregisteredPage.tsx
+++ b/src/pages/UnregisteredPage.tsx
@@ -1,10 +1,13 @@
-import styled from "styled-components";
-import Title from "../components/Title";
+import styled from 'styled-components';
+import Title from '../components/Title';
+import useNavigateHome from '../hooks/useNavigateHome';
+import Button from '../components/Button';
const UnregisteredPage = () => {
return (
가입된 회원이 아닙니다.
+
);
};
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index a4d4f48..2b6222a 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -6,8 +6,8 @@ import DeletePage from '../pages/DeletePage';
import CompletePage from '../pages/CompletePage';
import UnregisteredPage from '../pages/UnregisteredPage';
import KakaoLoginPage from '../pages/KakaoLoginPage';
-import { useDeleteUser } from '../hooks/queries/useDeleteUser';
-import useNavigateHome from '../hooks/useNavigateHome';
+
+import DeleteLayout from '../layouts/DeleteLayout';
const router = createBrowserRouter([
{
@@ -23,14 +23,7 @@ const router = createBrowserRouter([
element: ,
},
{
- element: (
-
- ),
+ element: ,
children: [
{
path: '/delete',
@@ -39,14 +32,7 @@ const router = createBrowserRouter([
],
},
{
- element: (
-
- ),
+ element: ,
children: [
{ path: '/complete', element: },
{ path: '/unregistered', element: },