style(button): hover, disabled, transition 처리

mash-up-kr · Sep 2, 2022 · a2ef4e0 · a2ef4e0
1 parent 17297d3
commit a2ef4e0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 5 deletions.
diff --git a/components/domains/Emoji/index.tsx b/components/domains/Emoji/index.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import type { Variant } from "framer-motion";
 import { motion } from "framer-motion";
@@ -22,7 +23,23 @@ const Emoji = () => {
         <>
           <Modal
             trigger={
-              <Spacer type="vertical" align="center" gap={8}>
+              <Spacer
+                type="vertical"
+                align="center"
+                gap={8}
+                css={css`
+                  transition: all 200ms;
+
+                  &:hover {
+                    opacity: 0.85;
+                  }
+
+                  &:disabled {
+                    cursor: not-allowed;
+                    filter: contrast(0.8);
+                  }
+                `}
+              >
                 <Modal.Open
                   as={IconButton}
                   iconName="heart"

diff --git a/components/domains/PlaylistCard/index.tsx b/components/domains/PlaylistCard/index.tsx
@@ -138,6 +138,17 @@ const S = {
     font-weight: 600;
     font-size: 16px;
     line-height: 19px;
+
+    transition: all 200ms;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      filter: contrast(0.8);
+    }
   `,
   Content: styled.div`
     font-weight: 500;

diff --git a/components/domains/WebShareButton/index.tsx b/components/domains/WebShareButton/index.tsx
@@ -86,6 +86,17 @@ const StyledButton = styled.button`
   border-radius: 20px;
   border: 2px solid rgba(255, 255, 255, 0.11);
   cursor: pointer;
+
+  transition: all 200ms;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    filter: contrast(0.8);
+  }
 `;
 
 export default WebShareButton;
diff --git a/components/uis/BottomButton/index.tsx b/components/uis/BottomButton/index.tsx
@@ -25,6 +25,7 @@ function BottomButton({ loading, ...props }: BottomButtonProps) {
         width: 100%;
         font-weight: 800;
         font-size: 18px;
+        transition: all 200ms;
 
         &:hover {
           opacity: 0.85;

diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { useRouter } from "next/router";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import type { AxiosError } from "axios";
 import { useQueryClient } from "react-query";
@@ -319,7 +320,23 @@ const Actions = {
     isHost?: boolean;
     value: number;
   }) => (
-    <Spacer type="vertical" align="center" gap={8}>
+    <Spacer
+      type="vertical"
+      align="center"
+      gap={8}
+      css={css`
+        transition: all 200ms;
+
+        &:hover {
+          opacity: 0.85;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          filter: contrast(0.8);
+        }
+      `}
+    >
       <Modal
         trigger={({ open }) => (
           <IconButton iconName="star" onClick={open} badgeValue={value} />
@@ -331,7 +348,23 @@ const Actions = {
   ),
   Emoji,
   Chat: () => (
-    <Spacer type="vertical" align="center" gap={8}>
+    <Spacer
+      type="vertical"
+      align="center"
+      gap={8}
+      css={css`
+        transition: all 200ms;
+
+        &:hover {
+          opacity: 0.85;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          filter: contrast(0.8);
+        }
+      `}
+    >
       <IconButton
         iconName="icon-chat"
         onClick={() => Toast.show(<Spacer>준비중입니다</Spacer>)}

diff --git a/pages/rooms/create/mood/index.tsx b/pages/rooms/create/mood/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import type { NextPage } from "next";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -8,7 +8,6 @@ import {
   BottomButton,
   Layout,
   Spacer,
-  Toast,
   TopBar,
   TopBarIconButton,
 } from "~/components/uis";
@@ -275,6 +274,16 @@ const S = {
     color: ${(p) => (p.isActive ? "#007AFF" : "white")};
     border-radius: 20px;
     cursor: pointer;
+    transition: all 200ms;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      filter: contrast(0.8);
+    }
   `,
   ButtonText: styled.p`
     font-size: 16px;