refactor: 마이페이지 회원 탈퇴 버튼 위치를 수정한다. (#332)

* refactor: content header 생성 및 적용 * refactor: 마이페이지 회원 탈퇴, 로그아웃 위치 수정 * test: contentHeader storybook 작성 * refactor: verticalDivider 분리 * refactor: aria-hidden 추가
woowacourse-teams · Sep 8, 2023 · eb25ea3 · eb25ea3
1 parent 4dbea93
commit eb25ea3
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 64 deletions.
diff --git a/frontend/src/components/@common/ContentHeader/ContentHeader.stories.tsx b/frontend/src/components/@common/ContentHeader/ContentHeader.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ContentHeader from '.';
+
+const meta: Meta<typeof ContentHeader> = {
+  component: ContentHeader,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContentHeader>;
+
+export const Default: Story = {
+  args: {
+    title: '콘텐츠 헤더 입니다.',
+  },
+};
diff --git a/frontend/src/components/@common/ContentHeader/ContentHeader.style.ts b/frontend/src/components/@common/ContentHeader/ContentHeader.style.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const HeaderBox = styled.header`
+  position: sticky;
+  z-index: ${({ theme: { zIndex } }) => zIndex.sticky};
+  top: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: 68px;
+
+  background: ${(props) => props.theme.color.background};
+  border-bottom: solid 1px ${(props) => props.theme.color.gray};
+`;
+
+export const Title = styled.p`
+  width: 100%;
+  font: normal 2.4rem /3.2rem 'GmarketSans';
+  text-align: center;
+`;
diff --git a/frontend/src/components/@common/ContentHeader/index.tsx b/frontend/src/components/@common/ContentHeader/index.tsx
@@ -0,0 +1,15 @@
+import { HeaderBox, Title } from './ContentHeader.style';
+
+interface ContentHeaderProps {
+  title: string;
+}
+
+const ContentHeader = ({ title }: ContentHeaderProps) => {
+  return (
+    <HeaderBox>
+      <Title>{title}</Title>
+    </HeaderBox>
+  );
+};
+
+export default ContentHeader;
diff --git a/frontend/src/components/@common/VerticalDivider/VerticalDivider.style.ts b/frontend/src/components/@common/VerticalDivider/VerticalDivider.style.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+type Pixel = `${number}px`;
+
+const VerticalDivider = styled.div.attrs({
+  'aria-hidden': true,
+})<{ height: Pixel }>`
+  width: 1px; /* 세로 선의 너비를 조절할 수 있습니다. */
+  height: ${({ height }) => height};
+  background: ${({ theme: { color } }) => color.gray}; /* 세로 선의 색상을 지정합니다. */
+`;
+
+export default VerticalDivider;
diff --git a/frontend/src/pages/MyPage/MyPage.style.ts b/frontend/src/pages/MyPage/MyPage.style.ts
@@ -1,45 +1,30 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.main`
+  position: relative;
   display: flex;
   flex-direction: column;
-`;
-
-export const TitleBox = styled.div`
-  width: 100%;
-  height: 68px;
-  text-align: center;
-`;
-
-export const Title = styled.p`
-  font: 900 4rem/6.8rem 'GmarketSans';
+  height: calc(100% - 68px);
 `;
 
 export const ButtonBox = styled.section`
+  position: absolute;
+  bottom: 68px;
+
   display: flex;
-  flex-direction: column;
   gap: 16px;
   align-items: center;
+  justify-content: center;
 
   width: 100%;
-  margin: 300px auto;
 
   button {
     cursor: pointer;
   }
 `;
 
-const Button = styled.button`
-  width: 270px;
+export const Button = styled.button`
   height: 45px;
-  background: #333333;
+  color: ${({ theme: { color } }) => color.gray};
   border-radius: 8px;
 `;
-
-export const Logout = styled(Button)`
-  background: ${({ theme: { color } }) => color.grayLight};
-`;
-
-export const Withdraw = styled(Button)`
-  background: ${({ theme: { color } }) => color.gray};
-`;
diff --git a/frontend/src/pages/MyPage/index.tsx b/frontend/src/pages/MyPage/index.tsx
@@ -1,6 +1,7 @@
-import Loading from 'pages/Loading';
+import ContentHeader from 'components/@common/ContentHeader';
 import Navbar from 'components/@common/Navbar';
-import { ButtonBox, Logout, Title, TitleBox, Withdraw, Wrapper } from './MyPage.style';
+import VerticalDivider from 'components/@common/VerticalDivider/VerticalDivider.style';
+import { Button, ButtonBox, Wrapper } from './MyPage.style';
 import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId';
 import useLogout from 'hooks/queries/auth/useLogout';
 import useWithdraw from 'hooks/queries/auth/useWithdraw';
@@ -26,17 +27,16 @@ const MyPage = () => {
 
   return (
     <>
+      <ContentHeader title="마이페이지" />
       <Wrapper>
-        <TitleBox>
-          <Title>마이페이지</Title>
-        </TitleBox>
         <ButtonBox>
-          <Logout type="button" onClick={handleLogout}>
+          <Button type="button" onClick={handleLogout}>
             로그아웃
-          </Logout>
-          <Withdraw type="button" onClick={handleWithdraw}>
+          </Button>
+          <VerticalDivider height={'12px'} />
+          <Button type="button" onClick={handleWithdraw}>
             회원 탈퇴
-          </Withdraw>
+          </Button>
         </ButtonBox>
       </Wrapper>
       <Navbar />

diff --git a/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts b/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.main`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10,11 +10,6 @@ export const Wrapper = styled.div`
   padding-bottom: 68px;
 `;
 
-export const Title = styled.p`
-  margin: 32px 0;
-  font-size: 2rem;
-`;
-
 export const CardList = styled.div`
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/frontend/src/pages/PetPlantCardList/index.tsx b/frontend/src/pages/PetPlantCardList/index.tsx
@@ -1,16 +1,17 @@
 import { Link, generatePath } from 'react-router-dom';
+import ContentHeader from 'components/@common/ContentHeader';
 import Navbar from 'components/@common/Navbar';
 import PetCard from 'components/petPlant/PetPlantCard';
-import { CardList, RegisterButton, Title, Wrapper } from './PetPlantCardList.style';
+import { CardList, RegisterButton, Wrapper } from './PetPlantCardList.style';
 import usePetPlantCardList from 'hooks/queries/petPlant/usePetPlantCardList';
 import { URL_PATH } from 'constants/index';
 
 const PetPlantCardList = () => {
   const { data: petPlantCardList } = usePetPlantCardList();
   return (
     <>
+      <ContentHeader title="나의 식물 카드" />
       <Wrapper>
-        <Title>나의 식물 카드</Title>
         <CardList>
           <Link to={URL_PATH.petRegisterSearch} aria-label="식물 추가로 이동">
             <RegisterButton type="button">+</RegisterButton>

diff --git a/frontend/src/pages/Reminder/Reminder.style.ts b/frontend/src/pages/Reminder/Reminder.style.ts
@@ -22,26 +22,6 @@ export const Wrapper = styled.div<BackgroundProps>`
   background: ${({ status }) => convertReminderBackground[status]};
 `;
 
-export const HeaderBox = styled.header`
-  position: sticky;
-  z-index: ${({ theme: { zIndex } }) => zIndex.sticky};
-  top: 0;
-
-  display: flex;
-  align-items: center;
-
-  height: 68px;
-
-  background: ${(props) => props.theme.color.background};
-  border-bottom: solid 1px ${(props) => props.theme.color.gray};
-`;
-
-export const Title = styled.p`
-  width: 100%;
-  font: normal 2.4rem /3.2rem 'GmarketSans';
-  text-align: center;
-`;
-
 export const ContentBox = styled.main`
   width: 100%;
   margin: 0 auto;

diff --git a/frontend/src/pages/Reminder/index.tsx b/frontend/src/pages/Reminder/index.tsx
@@ -1,6 +1,7 @@
+import ContentHeader from 'components/@common/ContentHeader';
 import Navbar from 'components/@common/Navbar';
 import MonthBox from 'components/reminder/MonthBox';
-import { ContentBox, HeaderBox, Title, Wrapper } from './Reminder.style';
+import { ContentBox, Wrapper } from './Reminder.style';
 import ReminderProvider from 'contexts/reminderContext';
 import useReminderHooks from 'hooks/useReminderHooks';
 
@@ -17,9 +18,7 @@ const Reminder = () => {
     <>
       <ReminderProvider waterCallback={waterMutate} changeDateCallback={changeDateMutate}>
         <Wrapper status={reminderData.status}>
-          <HeaderBox>
-            <Title>리마인더</Title>
-          </HeaderBox>
+          <ContentHeader title="리마인더" />
           <ContentBox>{reminderBox}</ContentBox>
         </Wrapper>
       </ReminderProvider>

diff --git a/frontend/src/style/Global.style.ts b/frontend/src/style/Global.style.ts
@@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     scrollbar-width: none;
     font-size: 62.5%;
+
   }
 
   body::-webkit-scrollbar {
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle` @@
       body {
         scrollbar-width: none;
         font-size: 62.5%;
       }
       body::-webkit-scrollbar {
@@ Expand Down @@