main => develop

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 (
-    <ButtonWrapper $color={color} $borderColor={borderColor} onClick={onClick}>
-      {message}
-    </ButtonWrapper>
-  );
+const Button = ({ message, onClick }: ButtonInterface) => {
+  return <ButtonWrapper onClick={onClick}>{message}</ButtonWrapper>;
 };
 
 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};
 `;

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 <ButtonWrapper onClick={handleDeleteUser}>{message}</ButtonWrapper>;
+};
+
+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};
+`;

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 (
     <RecordreamLayoutWrapper>
       <IcPcRecordream style={{ width: 134, height: 24, marginTop: 74, marginBottom: 18 }} />
@@ -33,7 +24,6 @@ const DeleteLayout = ({ iconOn, btnColor, btnMessage }: DeleteLayoutInterface) =
         <IcPcBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
       )}
       <Outlet />
-      <Button color={btnColor} message={btnMessage} onClick={handleDeleteUser} />
     </RecordreamLayoutWrapper>
   );
 };

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 (
     <RecordreamLayoutWrapper>
       <IcPcRecordream style={{ width: 134, height: 24, marginTop: 74, marginBottom: 18 }} />
@@ -25,7 +16,6 @@ const RecordreamLayout = ({
         <IcPcBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
       )}
       <Outlet />
-      <Button color={btnColor} message={btnMessage} onClick={() => handleClick} />
     </RecordreamLayoutWrapper>
   );
 };

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 = () => {
       <Subtitle>
         그동안 레코드림을 이용해주셔서 <br /> 감사합니다.
       </Subtitle>
+      <Button message="확인" onClick={useNavigateHome} />
     </CompletePageWrapper>
   );
 };

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 = () => {
       <Subtitle>
         서비스 탈퇴 시 저장된 기록은 <br /> 복구되지 않습니다.
       </Subtitle>
+      <DeleteButton message="탈퇴하기" />
     </DeletePageWrapper>
   );
 };

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 (
     <UnregisteredPageWrapper>
       <Title>가입된 회원이 아닙니다.</Title>
+      <Button message="확인" onClick={useNavigateHome} />
     </UnregisteredPageWrapper>
   );
 };

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: <KakaoLoginPage />,
       },
       {
-        element: (
-          <RecordreamLayout
-            iconOn={true}
-            btnColor="red"
-            btnMessage="탈퇴하기"
-            handleClick={useDeleteUser}
-          />
-        ),
+        element: <DeleteLayout iconOn={true} />,
         children: [
           {
             path: '/delete',
@@ -39,14 +32,7 @@ const router = createBrowserRouter([
         ],
       },
       {
-        element: (
-          <RecordreamLayout
-            iconOn={false}
-            btnColor="white"
-            btnMessage="확인"
-            handleClick={useNavigateHome}
-          />
-        ),
+        element: <RecordreamLayout iconOn={false} />,
         children: [
           { path: '/complete', element: <CompletePage /> },
           { path: '/unregistered', element: <UnregisteredPage /> },