feat: naming rule에 따라 style class들을 케밥케이스로 수정

CollaBu · Apr 26, 2024 · 74aa30c · 74aa30c
1 parent d01f009
commit 74aa30c
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 16 deletions.
diff --git a/src/shared/ui/bottom-sheet/BottomSheetModal.scss b/src/shared/ui/bottom-sheet/BottomSheetModal.scss
@@ -1,6 +1,6 @@
 @use '@/shared/styles/_index.scss' as *;
 
-.bottomSheetModal {
+.bottom-sheet-modal {
   position: fixed;
   left: 0;
   right: 0;
@@ -11,14 +11,14 @@
   justify-content: center;
   align-items: center;
 
-  .modalContent {
+  .modal-content {
     background-color: white;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 4px;
   }
-  .optionDivider {
+  .option-divider {
     width: 240px;
     margin: 0 auto;
     border: none;

diff --git a/src/shared/ui/bottom-sheet/BottomSheetModal.tsx b/src/shared/ui/bottom-sheet/BottomSheetModal.tsx
@@ -18,14 +18,14 @@ export default function BottomSheetModal({
   onClose,
 }: BottomSheetModalProps) {
   return (
-    <div className='bottomModal'>
-      <div className='modalContent'>
+    <div className='bottom-sheet-modal'>
+      <div className='modal-content'>
         {options.map((option, index) => (
           <Fragment key={index}>
             <button onClick={option.onClick} className='option'>
               {option.label}
             </button>
-            {index < options.length - 1 && <hr className='optionDivider' />}
+            {index < options.length - 1 && <hr className='option-divider' />}
           </Fragment>
         ))}
       </div>

diff --git a/src/shared/ui/header/PageHeader.scss b/src/shared/ui/header/PageHeader.scss
@@ -1,6 +1,6 @@
 @use '@/shared/styles/_index.scss' as *;
 
-.pageHeader {
+.page-header {
   @include responsive-dimensions(320px, 44px);
   display: flex;
   align-items: center;

diff --git a/src/shared/ui/header/PageHeader.tsx b/src/shared/ui/header/PageHeader.tsx
@@ -10,7 +10,7 @@ interface PageHeaderProps {
 
 export default function PageHeader({ prevPageLink, page }: PageHeaderProps) {
   return (
-    <div className='pageHeader'>
+    <div className='page-header'>
       <Link to={prevPageLink}>
         <BackIcon />
       </Link>

diff --git a/src/shared/ui/modal/ConfirmModal.scss b/src/shared/ui/modal/ConfirmModal.scss
@@ -33,11 +33,11 @@
   }
 }
 
-.confirmModal {
+.confirm-modal {
   @include confirmModal(false);
 }
 
-.confirmReportModal {
+.confirm-report-modal {
   @include confirmModal(true);
   .title {
     align-self: start;

diff --git a/src/shared/ui/modal/ConfirmModal.tsx b/src/shared/ui/modal/ConfirmModal.tsx
@@ -18,7 +18,7 @@ export default function ConfirmModal({
   onCloseMsg,
 }: ConfirmModalProps) {
   return (
-    <div className='confirmModal'>
+    <div className='confirm-modal'>
       <h3 className='title h3semi'>{title}</h3>
       <p className='content b1md'>{content}</p>
       <div className='buttons'>

diff --git a/src/shared/ui/modal/ConfirmReportModal.tsx b/src/shared/ui/modal/ConfirmReportModal.tsx
@@ -12,7 +12,7 @@ export default function ConfirmReportModal({
   onCloseMsg,
 }: ConfirmReportModalProps) {
   return (
-    <form className='confirmReportModal'>
+    <form className='confirm-report-modal'>
       <h3 className='title h3semi'>{title}</h3>
       <section></section>
       <div className='buttons'>

diff --git a/src/shared/ui/profile/Profile.scss b/src/shared/ui/profile/Profile.scss
@@ -8,12 +8,12 @@
   border: none;
   background-color: white;
 
-  .profileImage {
+  .profile-image {
     @include responsive-dimensions(45px, 45px);
     border-radius: 50%;
     overflow: hidden;
   }
-  .nameSection {
+  .name-section {
     @include responsive-dimensions(155px, 32px);
     padding-left: 5px;
     display: flex;

diff --git a/src/shared/ui/profile/Profile.tsx b/src/shared/ui/profile/Profile.tsx
@@ -9,8 +9,8 @@ interface ProfileProps {
 export default function Profile({ profileImage, name, content }: ProfileProps) {
   return (
     <div className='profile'>
-      <img src={profileImage} className='profileImage' />
-      <div className='nameSection'>
+      <img src={profileImage} className='profile-image' />
+      <div className='name-section'>
         <h5 className='name b1semi'>{name}</h5>
         <p className='content b3md'>{content}</p>
       </div>