From 1b0d15548b0034e82b89976986cb025046400ae0 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 23:10:46 +0900 Subject: [PATCH] =?UTF-8?q?rename:=20css=20prop=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20Style=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/index.tsx | 6 +++--- frontend/src/components/Time/Time.styles.tsx | 20 ++++++++----------- frontend/src/components/Time/Viewer/index.tsx | 6 +++--- .../_common/Button/Button.styles.ts | 2 +- .../src/components/_common/Button/index.tsx | 4 ++-- .../_common/TimeSlot/TimeSlot.styles.ts | 2 +- .../src/components/_common/TimeSlot/index.tsx | 4 ++-- .../MeetingTimePickPage.styles.ts | 2 +- .../src/pages/MeetingTimePickPage/index.tsx | 4 ++-- 9 files changed, 23 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index f40bd34f1..b42466a6e 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -11,7 +11,7 @@ import type { GetMeetingResponse } from '@apis/getMeeting'; import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; -import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; +import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util'; export interface TimePickerProps { @@ -40,7 +40,7 @@ export default function TimePicker({ data }: TimePickerProps) { return (
- +
{formattedAvailableDates.map((date) => ( @@ -51,7 +51,7 @@ export default function TimePicker({ data }: TimePickerProps) { {value.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( diff --git a/frontend/src/components/Time/Time.styles.tsx b/frontend/src/components/Time/Time.styles.tsx index 68b10b3f1..851d62b70 100644 --- a/frontend/src/components/Time/Time.styles.tsx +++ b/frontend/src/components/Time/Time.styles.tsx @@ -3,8 +3,14 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; export const tableStyle = css` + cursor: pointer; user-select: none; + + border-spacing: 0.4rem 0.4rem; border-collapse: collapse; + border-collapse: separate; + + width: 100%; `; export const tdStyle = css` @@ -19,23 +25,13 @@ export const selectedStyle = css` background: ${theme.linear.selectedTime}; `; -export const table = css` - cursor: pointer; - user-select: none; - - border-spacing: 0.4rem 0.4rem; - border-collapse: separate; - - width: 100%; -`; - -export const styledTh = css` +export const thStyle = css` display: flex; align-items: center; justify-content: center; `; -export const tableTexture = css` +export const cellStyle = css` cursor: default; width: 4rem; height: 4rem; diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 3b150a425..47711dc1e 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -8,7 +8,7 @@ import TimeSlot from '@components/_common/TimeSlot'; import type { GetMeetingResponse } from '@apis/getMeeting'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; -import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; +import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; interface TimeViewerProps { data: GetMeetingResponse; @@ -25,7 +25,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { return (
-
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
+
{formattedAvailableDates.map((date) => ( @@ -36,7 +36,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { {schedules.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( diff --git a/frontend/src/components/_common/Button/Button.styles.ts b/frontend/src/components/_common/Button/Button.styles.ts index 21dc9ead9..a3d1c95af 100644 --- a/frontend/src/components/_common/Button/Button.styles.ts +++ b/frontend/src/components/_common/Button/Button.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const styledButton = css` +export const buttonStyle = css` display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/_common/Button/index.tsx b/frontend/src/components/_common/Button/index.tsx index a8d4bd81a..373bdf719 100644 --- a/frontend/src/components/_common/Button/index.tsx +++ b/frontend/src/components/_common/Button/index.tsx @@ -1,6 +1,6 @@ import type { ButtonHTMLAttributes } from 'react'; -import { styledButton } from './Button.styles'; +import { buttonStyle } from './Button.styles'; interface ButtonProps extends ButtonHTMLAttributes { text: string; @@ -8,7 +8,7 @@ interface ButtonProps extends ButtonHTMLAttributes { export default function Button({ text, type = 'button', ...props }: ButtonProps) { return ( - ); diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts index 13c76bcdb..c2bf28353 100644 --- a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const styledTd = (isSelected: boolean, isUpdate: boolean) => css` +export const tdStyle = (isSelected: boolean, isUpdate: boolean) => css` cursor: pointer; width: 4rem; diff --git a/frontend/src/components/_common/TimeSlot/index.tsx b/frontend/src/components/_common/TimeSlot/index.tsx index a8a8714e5..39e41de5a 100644 --- a/frontend/src/components/_common/TimeSlot/index.tsx +++ b/frontend/src/components/_common/TimeSlot/index.tsx @@ -1,4 +1,4 @@ -import { styledTd } from './TimeSlot.styles'; +import { tdStyle } from './TimeSlot.styles'; interface TimeSlotProps { isSelected: boolean; @@ -6,5 +6,5 @@ interface TimeSlotProps { } export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) { - return
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')} ; + return ; } diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts index e68817188..3f95d93c8 100644 --- a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const title = css` +export const titleStyle = css` width: 100%; margin-bottom: 1rem; diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index e9e2878bf..50a5e877c 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -7,7 +7,7 @@ import TimeViewer from '@components/Time/Viewer'; import { useGetMeetingQuery } from '@stores/servers/meeting/queries'; -import { title } from './MeetingTimePickPage.styles'; +import { titleStyle } from './MeetingTimePickPage.styles'; export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); @@ -15,7 +15,7 @@ export default function MeetingTimePickPage() { return (
-

momo TimePicker

+

momo TimePicker

{data && isTimePickerUpdate && } {data && !isTimePickerUpdate && }