rename: css prop 네이밍 <name>Style로 수정

woowacourse-teams · Jul 23, 2024 · 1b0d155 · 1b0d155
1 parent b49b961
commit 1b0d155
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 27 deletions.
diff --git 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 (
     <div>
-      <table css={table} ref={ref}>
+      <table css={tableStyle} ref={ref}>
         <thead>
           <tr>
             {formattedAvailableDates.map((date) => (
@@ -51,7 +51,7 @@ export default function TimePicker({ data }: TimePickerProps) {
         <tbody>
           {value.map((row, rowIndex) => (
             <tr key={rowIndex}>
-              <th css={[tableTexture, styledTh]}>
+              <th css={[cellStyle, thStyle]}>
                 {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
               </th>
               {row.map((_, columnIndex) => (

diff --git 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
@@ -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 (
     <div>
-      <table css={table}>
+      <table css={tableStyle}>
         <thead>
           <tr>
             {formattedAvailableDates.map((date) => (
@@ -36,7 +36,7 @@ export default function TimeViewer({ data }: TimeViewerProps) {
         <tbody>
           {schedules.map((row, rowIndex) => (
             <tr key={rowIndex}>
-              <th css={[tableTexture, styledTh]}>
+              <th css={[cellStyle, thStyle]}>
                 {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
               </th>
               {row.map((_, columnIndex) => (

diff --git 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
@@ -1,14 +1,14 @@
 import type { ButtonHTMLAttributes } from 'react';
 
-import { styledButton } from './Button.styles';
+import { buttonStyle } from './Button.styles';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;
 }
 
 export default function Button({ text, type = 'button', ...props }: ButtonProps) {
   return (
-    <button css={styledButton} type={type} {...props}>
+    <button css={buttonStyle} type={type} {...props}>
       {text}
     </button>
   );

diff --git 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
@@ -1,10 +1,10 @@
-import { styledTd } from './TimeSlot.styles';
+import { tdStyle } from './TimeSlot.styles';
 
 interface TimeSlotProps {
   isSelected: boolean;
   isUpdate: boolean;
 }
 
 export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) {
-  return <td css={styledTd(isSelected, isUpdate)} />;
+  return <td css={tdStyle(isSelected, isUpdate)} />;
 }
diff --git 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
@@ -7,15 +7,15 @@ 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();
   const { isTimePickerUpdate } = useContext(TimePickerUpdateStateContext);
 
   return (
     <div>
-      <h1 css={title}>momo TimePicker</h1>
+      <h1 css={titleStyle}>momo TimePicker</h1>
       {data && isTimePickerUpdate && <TimePicker data={data} />}
       {data && !isTimePickerUpdate && <TimeViewer data={data} />}
     </div>