[FE] 약속 추천 & 확정 페이지 디자인 수정 (#304)

* rename(NotFoundPage): 스타일파일 컨벤션에 맞추어 이름 수정 * refactor: 약속 확정 및 추천 페이지 상단 UI 개선 * refactor: 미사용 로직 제거 * refactor: TOP5 제거
woowacourse-teams · Aug 22, 2024 · df29398 · df29398
1 parent a228dec
commit df29398
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 99 deletions.
diff --git a/frontend/src/pages/MeetingConfirmPage/MeetingTimeConfirmPage.styles.ts b/frontend/src/pages/MeetingConfirmPage/MeetingTimeConfirmPage.styles.ts
@@ -1,7 +1,5 @@
 import { css } from '@emotion/react';
 
-import theme from '@styles/theme';
-
 export const s_container = css`
   display: flex;
   flex-direction: column;
@@ -15,18 +13,6 @@ export const s_pageHeader = css`
   margin-bottom: 2.4rem;
 `;
 
-export const s_title = css`
-  margin-bottom: 1rem;
-
-  font-size: 2rem;
-  font-weight: bold;
-  line-height: 4rem;
-  color: #000;
-  white-space: pre-line;
-
-  background-clip: text;
-`;
-
 export const s_tipInfo = css`
   font-size: 12px;
   font-weight: lighter;
@@ -40,27 +26,3 @@ export const s_attendeesContainer = css`
 
   width: 100%;
 `;
-
-export const s_tabButton = (isSelected: boolean) => css`
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: fit-content;
-  height: 3.6rem;
-  padding: 0.4rem 1.2rem;
-
-  border-radius: 0.4rem;
-
-  ${isSelected
-    ? css`
-        color: #fff;
-        background-color: ${theme.colors.primary};
-      `
-    : css`
-        color: #6d7580;
-        background-color: #ebeef2;
-      `}
-`;
diff --git a/frontend/src/pages/MeetingConfirmPage/components/MeetingTimeOptions.tsx b/frontend/src/pages/MeetingConfirmPage/components/MeetingTimeOptions.tsx
@@ -4,14 +4,15 @@ import { useNavigate } from 'react-router-dom';
 
 import MeetingTimeOptionCard from '@components/MeetingTimeCard/MeetingTimeOptionCard';
 import { Button } from '@components/_common/Buttons/Button';
+import TabButton from '@components/_common/Buttons/TabButton';
 import Dropdown from '@components/_common/Dropdown';
 
 import useMeetingTimeRecommendFilter from '@hooks/useMeetingTimeRecommendFilter/useMeetingTimeRecommendFilter';
 
 import { postMeetingConfirm } from '@apis/meetingConfirm';
 import type { MeetingRecommend } from '@apis/meetingRecommend';
 
-import { s_attendeesContainer, s_tabButton, s_tipInfo } from '../MeetingTimeConfirmPage.styles';
+import { s_attendeesContainer, s_tipInfo } from '../MeetingTimeConfirmPage.styles';
 import { s_container } from './MeetingTimeOptions.styles';
 
 interface MeetingTimeOptionsProps {
@@ -76,17 +77,22 @@ export default function MeetingTimeOptions({ uuid, attendeeNames }: MeetingTimeO
   return (
     <div css={s_container}>
       <section css={s_attendeesContainer}>
-        <button css={s_tabButton(isSelectedAllAttendee)} onClick={() => toggleAttendee('전체')}>
+        <TabButton
+          tabButtonVariants="outlinedFloating"
+          isActive={isSelectedAllAttendee}
+          onClick={() => toggleAttendee('전체')}
+        >
           전체
-        </button>
+        </TabButton>
         {attendeeNames?.map((attendee) => (
-          <button
-            key={attendee}
-            css={s_tabButton(checkSelectedAttendee(attendee))}
+          <TabButton
+            tabButtonVariants="outlinedFloating"
+            isActive={checkSelectedAttendee(attendee)}
             onClick={() => toggleAttendee(attendee)}
+            key={attendee}
           >
             {attendee}
-          </button>
+          </TabButton>
         ))}
       </section>
       <span css={s_tipInfo}>원하는 참여인원을 선택해 보세요 :)</span>

diff --git a/frontend/src/pages/MeetingConfirmPage/index.tsx b/frontend/src/pages/MeetingConfirmPage/index.tsx
@@ -1,15 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
+import Text from '@components/_common/Text';
+
 import { getMeetingAttendees } from '@apis/meetingRecommend';
 
 import { QUERY_KEY } from '@constants/queryKeys';
 
-import {
-  s_container,
-  s_pageHeader,
-  s_title,
-} from '../MeetingRecommendPage/MeetingRecommendPage.styles';
+import { s_container, s_pageHeader } from './MeetingTimeConfirmPage.styles';
 import MeetingTimeOptions from './components/MeetingTimeOptions';
 
 export default function MeetingConfirmPage() {
@@ -25,7 +23,7 @@ export default function MeetingConfirmPage() {
   return (
     <div css={s_container} aria-label="약속 시간 확정 페이지">
       <section css={s_pageHeader}>
-        <h1 css={s_title}>약속 시간을 확정해 보세요</h1>
+        <Text typo="titleBold">가장 만나기 좋은 약속시간</Text>
       </section>
       {attendeeNames && <MeetingTimeOptions uuid={uuid} attendeeNames={attendeeNames} />}
     </div>

diff --git a/frontend/src/pages/MeetingRecommendPage/MeetingRecommendPage.styles.ts b/frontend/src/pages/MeetingRecommendPage/MeetingRecommendPage.styles.ts
@@ -1,7 +1,5 @@
 import { css } from '@emotion/react';
 
-import theme from '@styles/theme';
-
 export const s_container = css`
   display: flex;
   flex-direction: column;
@@ -15,18 +13,6 @@ export const s_pageHeader = css`
   margin-bottom: 2.4rem;
 `;
 
-export const s_title = css`
-  margin-bottom: 1rem;
-
-  font-size: 2rem;
-  font-weight: bold;
-  line-height: 4rem;
-  color: #000;
-  white-space: pre-line;
-
-  background-clip: text;
-`;
-
 export const s_tipInfo = css`
   font-size: 12px;
   font-weight: lighter;
@@ -40,27 +26,3 @@ export const s_attendeesContainer = css`
 
   width: 100%;
 `;
-
-export const s_tabButton = (isSelected: boolean) => css`
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: fit-content;
-  height: 3.6rem;
-  padding: 0.4rem 1.2rem;
-
-  border-radius: 0.4rem;
-
-  ${isSelected
-    ? css`
-        color: #fff;
-        background-color: ${theme.colors.primary};
-      `
-    : css`
-        color: #6d7580;
-        background-color: #ebeef2;
-      `}
-`;
diff --git a/frontend/src/pages/MeetingRecommendPage/components/MeetingTimeRecommends.tsx b/frontend/src/pages/MeetingRecommendPage/components/MeetingTimeRecommends.tsx
@@ -1,9 +1,10 @@
 import MeetingRecommendCard from '@components/MeetingTimeCard/MeetingTimeRecommendCard';
+import TabButton from '@components/_common/Buttons/TabButton';
 import Dropdown from '@components/_common/Dropdown';
 
 import useMeetingTimeRecommendFilter from '@hooks/useMeetingTimeRecommendFilter/useMeetingTimeRecommendFilter';
 
-import { s_attendeesContainer, s_tabButton, s_tipInfo } from '../MeetingRecommendPage.styles';
+import { s_attendeesContainer, s_tipInfo } from '../MeetingRecommendPage.styles';
 import { s_container } from './MeetingTimeRecommends.styles';
 
 interface MeetingRecommendsProps {
@@ -24,17 +25,22 @@ export default function MeetingTimeRecommends({ uuid, attendeeNames }: MeetingRe
   return (
     <div css={s_container}>
       <section css={s_attendeesContainer}>
-        <button css={s_tabButton(isSelectedAllAttendee)} onClick={() => toggleAttendee('전체')}>
+        <TabButton
+          tabButtonVariants="outlinedFloating"
+          isActive={isSelectedAllAttendee}
+          onClick={() => toggleAttendee('전체')}
+        >
           전체
-        </button>
+        </TabButton>
         {attendeeNames.map((attendee) => (
-          <button
-            key={attendee}
-            css={s_tabButton(checkSelectedAttendee(attendee))}
+          <TabButton
+            tabButtonVariants="outlinedFloating"
+            isActive={checkSelectedAttendee(attendee)}
             onClick={() => toggleAttendee(attendee)}
+            key={attendee}
           >
             {attendee}
-          </button>
+          </TabButton>
         ))}
       </section>
       <span css={s_tipInfo}>원하는 참여인원을 선택해 보세요 :)</span>

diff --git a/frontend/src/pages/MeetingRecommendPage/index.tsx b/frontend/src/pages/MeetingRecommendPage/index.tsx
@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
+import Text from '@components/_common/Text';
+
 import { getMeetingAttendees } from '@apis/meetingRecommend';
 
 import { QUERY_KEY } from '@constants/queryKeys';
 
-import { s_container, s_pageHeader, s_title } from './MeetingRecommendPage.styles';
+import { s_container, s_pageHeader } from './MeetingRecommendPage.styles';
 import MeetingTimeRecommends from './components/MeetingTimeRecommends';
 
 export default function MeetingRecommendPage() {
@@ -21,7 +23,7 @@ export default function MeetingRecommendPage() {
   return (
     <div css={s_container} aria-label="약속 시간 추천 페이지">
       <section css={s_pageHeader}>
-        <h1 css={s_title}>약속 시간을 추천해 드려요</h1>
+        <Text typo="titleBold">가장 만나기 좋은 약속시간</Text>
       </section>
       {attendeeNames && <MeetingTimeRecommends uuid={uuid} attendeeNames={attendeeNames} />}
     </div>

diff --git a/...src/pages/NotFoundPage/NotFound.styles.ts → ...pages/NotFoundPage/NotFoundPage.styles.ts b/...src/pages/NotFoundPage/NotFound.styles.ts → ...pages/NotFoundPage/NotFoundPage.styles.ts
diff --git a/frontend/src/pages/NotFoundPage/index.tsx b/frontend/src/pages/NotFoundPage/index.tsx
@@ -7,7 +7,7 @@ import QuestionMomoCharacter from '@assets/images/questionMomoCharacter.svg';
 
 import { MEETING_CREATE_PATH } from '@constants/routes/meeting';
 
-import { s_container, s_textContainer } from './NotFound.styles';
+import { s_container, s_textContainer } from './NotFoundPage.styles';
 
 export default function NotFoundPage() {
   const navigate = useNavigate();