🛠️ 공통 Button, Modal 컴포넌트 수정

src/features/feed-reports/ui/ConfirmReportModal.scss

@@ -1,3 +1,9 @@
+@mixin ReportModalButton() {
+  width: 118px;
+  height: 40px;
+  border-radius: 4px;
+}
+
 .confirm-report-modal {
   display: flex;
   flex-direction: column;
@@ -17,5 +23,22 @@
     display: flex;
     justify-content: center;
     gap: 8px;
+
+    .confirm-btn {
+      color: white;
+      background-color: $red3;
+      @include ReportModalButton();
+
+      &:disabled {
+        color: $gray4;
+        background-color: $gray3;
+      }
+    }
+
+    .cancle-btn {
+      color: $gray4;
+      background-color: $gray2;
+      @include ReportModalButton();
+    }
   }
 }

src/features/feed-reports/ui/ConfirmReportModal.tsx

@@ -1,4 +1,3 @@
-import { ActiveButton, BasicButton } from '@/shared/ui';
 import { ModalOverlay } from '@/shared/ui/modal/ModalOverlay';
 
 import './ConfirmReportModal.scss';
@@ -22,16 +21,17 @@ export const ConfirmReportModal: React.FC<ConfirmReportModalProps> = ({
         <h3 className='title h3semi'>신고하기</h3>
         {children}
         <div className='modal-btn-container'>
-          <BasicButton onClick={onClose} styleClass='confirm-cancle h4semi'>
+          <button onClick={onClose} className='cancle-btn h4semi' type='button'>
             취소
-          </BasicButton>
-          <ActiveButton
+          </button>
+          <button
             onClick={onExecute}
-            isDisabled={onExecuteIsDisabled}
-            styleClass='confirm h4semi'
+            disabled={onExecuteIsDisabled}
+            className='confirm-btn h4semi'
+            type='submit'
           >
             신고하기
-          </ActiveButton>
+          </button>
         </div>
       </form>
     </ModalOverlay>

src/shared/styles/_colors.scss

@@ -8,3 +8,6 @@ $gray7: #161a1d;
 $mint1: #d9f9fb;
 $mint2: #9deff6;
 $mint3: #00d5e1;
+$red1: #fff1f1;
+$red2: #ff9999;
+$red3: #ff6767;

src/shared/ui/button/ConfirmModalButton.scss

@@ -0,0 +1,16 @@
+@mixin confirmModalButton() {
+  width: 97px;
+  height: 36px;
+  border-radius: 4px;
+}
+
+.confirm {
+  color: white;
+  background-color: $mint3;
+  @include confirmModalButton();
+}
+.cancle {
+  color: $gray4;
+  background-color: $gray2;
+  @include confirmModalButton();
+}

src/shared/ui/button/ConfirmModalButton.tsx

@@ -0,0 +1,20 @@
+import { ButtonProps } from './types';
+import './ConfirmModalButton.scss';
+
+type ConfirmModalButtonStyle = 'confirm' | 'cancle';
+
+interface ConfirmModalButtonProps extends ButtonProps {
+  styleClass: ConfirmModalButtonStyle;
+}
+
+export const ConfirmModalButton = ({
+  onClick,
+  children,
+  styleClass,
+}: ConfirmModalButtonProps) => {
+  return (
+    <button onClick={onClick} type='button' className={`${styleClass} h4semi`}>
+      {children}
+    </button>
+  );
+};

src/shared/ui/button/FollowButton.scss

@@ -0,0 +1,16 @@
+@mixin followButton() {
+  width: 48px;
+  height: 24px;
+  border-radius: 30px;
+}
+
+.follow {
+  color: white;
+  background-color: $gray5;
+  @include followButton();
+}
+.follow-unfollow {
+  color: white;
+  background-color: $mint3;
+  @include followButton();
+}

src/shared/ui/button/FollowButton.tsx

@@ -0,0 +1,20 @@
+import './FollowButton.scss';
+import { ButtonProps } from './types';
+
+interface FollowButtonProps extends ButtonProps {
+  isUnfollow: boolean;
+}
+
+export const FollowButton = ({
+  onClick,
+  isUnfollow,
+  children,
+}: FollowButtonProps) => {
+  const sytleClass = isUnfollow ? 'follow' : 'follow-unfollow';
+
+  return (
+    <button onClick={onClick} type='button' className={`${sytleClass} b2semi`}>
+      {children}
+    </button>
+  );
+};

src/shared/ui/button/index.ts

@@ -1,2 +1,2 @@
-export { ActiveButton } from './ActiveButton';
-export { BasicButton } from './BasicButton';
+export { ConfirmModalButton } from './ConfirmModalButton';
+export { FollowButton } from './FollowButton';

src/shared/ui/button/types.ts

@@ -1,4 +1,4 @@
 export interface ButtonProps {
-  onClick: () => void;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
   children: React.ReactNode;
 }

src/shared/ui/index.ts

@@ -1,4 +1,4 @@
-export { ActiveButton, BasicButton } from './button';
+export { FollowButton } from './button';
 export { PageHeader } from './header';
 export { ConfirmModal, BottomSheetModal } from './modal';
 export { Profile, SkeletonProfile } from './profile';

src/shared/ui/modal/BottomSheetModal.scss

@@ -11,11 +11,30 @@
     align-items: center;
     border-radius: 4px;
   }
+
   .option-divider {
     width: 244px;
     margin: 0 auto;
     border: none;
     height: 0.5px;
     background-color: $gray2;
   }
+
+  .bsm-option {
+    width: 280px;
+    height: 46px;
+    color: $gray5;
+    text-align: center;
+    border-radius: 4px;
+  }
+
+  .bsm-cancle {
+    width: 280px;
+    height: 47px;
+    text-align: center;
+    background-color: $gray5;
+    color: white;
+    border-radius: 4px;
+    margin-top: 8px;
+  }
 }

src/shared/ui/modal/BottomSheetModal.tsx

@@ -1,7 +1,5 @@
 import { Fragment } from 'react/jsx-runtime';
 
-import { BasicButton } from '../button/index';
-
 import './BottomSheetModal.scss';
 import { ModalOverlay } from './ModalOverlay';
 
@@ -25,19 +23,20 @@ export const BottomSheetModal = ({
         <div className='modal-content'>
           {options.map((option, index) => (
             <Fragment key={index}>
-              <BasicButton
+              <button
                 onClick={option.onClick}
-                styleClass='bsm-option h4md'
+                type='button'
+                className='bsm-option h4md'
               >
                 {option.label}
-              </BasicButton>
+              </button>
               {index < options.length - 1 && <hr className='option-divider' />}
             </Fragment>
           ))}
         </div>
-        <BasicButton styleClass='bsm-cancle h4semi' onClick={onClose}>
+        <button className='bsm-cancle h4semi' type='button' onClick={onClose}>
           취소
-        </BasicButton>
+        </button>
       </div>
     </ModalOverlay>
   );