rename: css prop 네이밍 규칙에 따른 변수명 수정

woowacourse-teams · Jul 24, 2024 · da36c39 · da36c39
1 parent 58b3f26
commit da36c39
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 26 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, cellStyle, tableStyle, thStyle } from '../Time.styles';
+import { s_buttonContainer, s_cell, s_table, s_th } 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={tableStyle} ref={ref}>
+      <table css={s_table} 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={[cellStyle, thStyle]}>
+              <th css={[s_cell, s_th]}>
                 {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
               </th>
               {row.map((_, columnIndex) => (
@@ -66,7 +66,7 @@ export default function TimePicker({ data }: TimePickerProps) {
         </tbody>
       </table>
 
-      <div css={buttonContainer}>
+      <div css={s_buttonContainer}>
         <Button text="등록하기" onClick={handleOnToggle} />
       </div>
     </div>

diff --git a/frontend/src/components/Time/Time.styles.tsx b/frontend/src/components/Time/Time.styles.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import theme from '@styles/theme';
 
-export const tableStyle = css`
+export const s_table = css`
   cursor: pointer;
   user-select: none;
 
@@ -13,31 +13,31 @@ export const tableStyle = css`
   width: 100%;
 `;
 
-export const tdStyle = css`
+export const s_td = css`
   cursor: pointer;
   padding: 8px;
   text-align: center;
   border-radius: 0.4rem;
 `;
 
-export const selectedStyle = css`
+export const s_selected = css`
   color: white;
   background: ${theme.linear.selectedTime};
 `;
 
-export const thStyle = css`
+export const s_th = css`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
-export const cellStyle = css`
+export const s_cell = css`
   cursor: default;
   width: 4rem;
   height: 4rem;
 `;
 
-export const buttonContainer = css`
+export const s_buttonContainer = css`
   display: flex;
   justify-content: flex-end;
   width: 100%;

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, cellStyle, tableStyle, thStyle } from '../Time.styles';
+import { s_buttonContainer, s_cell, s_table, s_th } from '../Time.styles';
 
 interface TimeViewerProps {
   data: GetMeetingResponse;
@@ -25,7 +25,7 @@ export default function TimeViewer({ data }: TimeViewerProps) {
 
   return (
     <div>
-      <table css={tableStyle}>
+      <table css={s_table}>
         <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={[cellStyle, thStyle]}>
+              <th css={[s_cell, s_th]}>
                 {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
               </th>
               {row.map((_, columnIndex) => (
@@ -51,7 +51,7 @@ export default function TimeViewer({ data }: TimeViewerProps) {
         </tbody>
       </table>
 
-      <div css={buttonContainer}>
+      <div css={s_buttonContainer}>
         <Button text="수정하기" onClick={handleToggleIsTimePickerUpdate} />
       </div>
     </div>

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 buttonStyle = css`
+export const s_button = 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 { buttonStyle } from './Button.styles';
+import { s_button } from './Button.styles';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;
 }
 
 export default function Button({ text, type = 'button', ...props }: ButtonProps) {
   return (
-    <button css={buttonStyle} type={type} {...props}>
+    <button css={s_button} 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 tdStyle = (isSelected: boolean, isUpdate: boolean) => css`
+export const s_td = (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 { tdStyle } from './TimeSlot.styles';
+import { s_td } from './TimeSlot.styles';
 
 interface TimeSlotProps {
   isSelected: boolean;
   isUpdate: boolean;
 }
 
 export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) {
-  return <td css={tdStyle(isSelected, isUpdate)} />;
+  return <td css={s_td(isSelected, isUpdate)} />;
 }
diff --git a/frontend/src/layouts/GlobalLayout.styles.ts b/frontend/src/layouts/GlobalLayout.styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const globalContainer = css`
+export const s_globalContainer = css`
   min-width: 39.3rem;
   max-width: 60rem;
   height: 100%;

diff --git a/frontend/src/layouts/GlobalLayout.tsx b/frontend/src/layouts/GlobalLayout.tsx
@@ -1,10 +1,10 @@
 import { Outlet } from 'react-router-dom';
 
-import { globalContainer } from './GlobalLayout.styles';
+import { s_globalContainer } from './GlobalLayout.styles';
 
 export default function GlobalLayout() {
   return (
-    <div css={globalContainer}>
+    <div css={s_globalContainer}>
       <Outlet />
     </div>
   );

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 titleStyle = css`
+export const s_title = css`
   width: 100%;
   margin-bottom: 1rem;
 

diff --git 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 { titleStyle } from './MeetingTimePickPage.styles';
+import { s_title } from './MeetingTimePickPage.styles';
 
 export default function MeetingTimePickPage() {
   const { data } = useGetMeetingQuery();
@@ -17,7 +17,7 @@ export default function MeetingTimePickPage() {
 
   return (
     <div>
-      <h1 css={titleStyle}>momo TimePicker</h1>
+      <h1 css={s_title}>momo TimePicker</h1>
       {isTimePickerUpdate ? <TimePicker data={data} /> : <TimeViewer data={data} />}
     </div>
   );