diff --git a/src/components/shop/EditProfileModal/styled.ts b/src/components/shop/EditProfileModal/styled.ts
index d827c303..7fe44444 100644
--- a/src/components/shop/EditProfileModal/styled.ts
+++ b/src/components/shop/EditProfileModal/styled.ts
@@ -6,7 +6,7 @@ import { Button } from '@offer-ui/react'
 const Header = styled.div`
   text-align: center;
 
-  ${({ theme }): string => theme.fonts.headline01B}
+  ${({ theme }) => theme.fonts.headline01B}
 `
 
 const CloseButtonWrapper = styled.div`
diff --git a/src/components/shop/SelectBuyerModal/styled.ts b/src/components/shop/SelectBuyerModal/styled.ts
index ab8242b2..ae3374f9 100644
--- a/src/components/shop/SelectBuyerModal/styled.ts
+++ b/src/components/shop/SelectBuyerModal/styled.ts
@@ -92,7 +92,7 @@ const BuyerInfo = styled.div`
 `
 
 const Nickname = styled.span`
-  ${({ theme }): string => theme.fonts.body02B}
+  ${({ theme }) => theme.fonts.body02B}
 `
 
 const OfferTime = styled.span`
@@ -141,7 +141,7 @@ const Footer = styled.div`
 `
 const SendReviewButton = styled(Button)`
   :disabled {
-    background-color: ${({ theme }): string => theme.colors.grayScale20};
+    background-color: ${({ theme }) => theme.colors.grayScale20};
   }
 `
 
diff --git a/src/components/shop/buy/LikeTabPost/styled.ts b/src/components/shop/buy/LikeTabPost/styled.ts
index ca9f8720..9273e8bb 100644
--- a/src/components/shop/buy/LikeTabPost/styled.ts
+++ b/src/components/shop/buy/LikeTabPost/styled.ts
@@ -1,8 +1,9 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Image, Text, Button } from '@offer-ui/react'
 
 export const Container = styled.li`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -15,17 +16,19 @@ export const Container = styled.li`
   `}
 `
 export const ProductWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: grid;
     flex: 1;
     grid-template-columns: 90px 1fr;
-    align-items: center;
     gap: 16px;
+    align-items: center;
+
     padding: 20px 0 20px 20px;
 
     ${theme.mediaQuery.tablet} {
       grid-template-columns: 68px 1fr;
       gap: 8px;
+
       padding: 16px 24px;
     }
 
@@ -36,7 +39,7 @@ export const ProductWrapper = styled.div`
   `}
 `
 export const ProductImg = styled(Image)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     width: 90px;
     height: 90px;
 
@@ -47,46 +50,51 @@ export const ProductImg = styled(Image)`
   `}
 `
 export const SellerName = styled(Text)`
-  ${({ theme }): string => `
-    text-align: center;
-    color: ${theme.colors.grayScale70};
+  ${({ theme }) => css`
+    overflow: hidden;
+
     max-width: 100px;
+
+    color: ${theme.colors.grayScale70};
+    text-align: center;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
-  ${theme.mediaQuery.tablet} {
-    ${theme.fonts.caption01M};
-  }
-`}
+    ${theme.mediaQuery.tablet} {
+      ${theme.fonts.caption01M};
+    }
+  `}
 `
 
 export const ProductMetaWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-around;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
+      align-items: flex-start;
     }
   `}
 `
 export const ProductName = styled(Text)`
-  ${({ theme }): string => `
-    text-align: center;
+  ${({ theme }) => css`
+    overflow: hidden;
+
     width: 150px;
+
+    text-align: center;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
     ${theme.mediaQuery.tablet} {
-      text-align: left;
       max-width: 460px;
       margin-bottom: 6px;
+
+      text-align: left;
     }
 
     ${theme.mediaQuery.mobile} {
@@ -95,21 +103,21 @@ export const ProductName = styled(Text)`
   `}
 `
 export const ProductInfoWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
+    gap: 12px;
     align-items: center;
     justify-content: space-around;
-    gap: 12px;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
       gap: 0;
+      align-items: flex-start;
     }
-`}
+  `}
 `
 export const Price = styled.span`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     ${theme.fonts.body02R};
 
     ${theme.mediaQuery.tablet} {
@@ -119,11 +127,13 @@ export const Price = styled.span`
   `}
 `
 export const TradeStatusName = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     flex-direction: column;
     align-items: center;
+
     width: 100px;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -132,8 +142,9 @@ export const TradeStatusName = styled(Text)`
   `}
 `
 export const Date = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: inline-block;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -144,12 +155,13 @@ export const Date = styled(Text)`
   `}
 `
 export const ReviewButtonWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     flex-direction: column;
-    min-width: 120px;
     align-items: flex-end;
 
+    min-width: 120px;
+
     ${theme.mediaQuery.tablet} {
       display: flex;
       align-items: center;
@@ -157,25 +169,27 @@ export const ReviewButtonWrapper = styled.div`
   `}
 `
 export const ReviewButton = styled(Button)<{ hasReview: boolean }>`
-  ${({ theme, hasReview }): string => `
-    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+  ${({ theme, hasReview }) => css`
     margin-right: 20px;
 
+    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+
     ${theme.mediaQuery.tablet} {
       width: 100%;
+      margin-right: 0;
+      padding: 20px 0;
       border: none;
       border-top: 1px solid ${theme.colors.grayScale10};
       border-radius: 0;
-      padding: 20px 0;
-      margin-right: 0;
     }
   `}
 `
 export const LikeButton = styled(Button)`
-  ${({ theme }): string => `
-    color: ${theme.colors.grayScale90};
+  ${({ theme }) => css`
     margin-right: 20px;
 
+    color: ${theme.colors.grayScale90};
+
     ${theme.mediaQuery.tablet} {
       display: none;
     }
diff --git a/src/components/shop/buy/OfferTabPost/styled.ts b/src/components/shop/buy/OfferTabPost/styled.ts
index 23641164..b8dd5859 100644
--- a/src/components/shop/buy/OfferTabPost/styled.ts
+++ b/src/components/shop/buy/OfferTabPost/styled.ts
@@ -1,8 +1,9 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Image, Text, Button } from '@offer-ui/react'
 
 export const Container = styled.li`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -15,17 +16,19 @@ export const Container = styled.li`
   `}
 `
 export const ProductWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: grid;
     flex: 1;
     grid-template-columns: 90px 1fr;
-    align-items: center;
     gap: 16px;
+    align-items: center;
+
     padding: 20px 0 20px 20px;
 
     ${theme.mediaQuery.tablet} {
       grid-template-columns: 68px 1fr;
       gap: 8px;
+
       padding: 16px 24px;
     }
 
@@ -36,7 +39,7 @@ export const ProductWrapper = styled.div`
   `}
 `
 export const ProductImg = styled(Image)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     width: 90px;
     height: 90px;
 
@@ -47,46 +50,51 @@ export const ProductImg = styled(Image)`
   `}
 `
 export const SellerName = styled(Text)`
-  ${({ theme }): string => `
-    text-align: center;
-    color: ${theme.colors.grayScale70};
+  ${({ theme }) => css`
+    overflow: hidden;
+
     max-width: 100px;
+
+    color: ${theme.colors.grayScale70};
+    text-align: center;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
-  ${theme.mediaQuery.tablet} {
-    ${theme.fonts.caption01M};
-  }
-`}
+    ${theme.mediaQuery.tablet} {
+      ${theme.fonts.caption01M};
+    }
+  `}
 `
 
 export const ProductMetaWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-around;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
+      align-items: flex-start;
     }
   `}
 `
 export const ProductName = styled(Text)`
-  ${({ theme }): string => `
-    text-align: center;
+  ${({ theme }) => css`
+    overflow: hidden;
+
     width: 150px;
+
+    text-align: center;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
     ${theme.mediaQuery.tablet} {
-      text-align: left;
       max-width: 460px;
       margin-bottom: 6px;
+
+      text-align: left;
     }
 
     ${theme.mediaQuery.mobile} {
@@ -95,21 +103,21 @@ export const ProductName = styled(Text)`
   `}
 `
 export const ProductInfoWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
+    gap: 12px;
     align-items: center;
     justify-content: space-around;
-    gap: 12px;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
       gap: 0;
+      align-items: flex-start;
     }
-`}
+  `}
 `
 export const Price = styled.span`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     ${theme.fonts.body02R};
 
     ${theme.mediaQuery.tablet} {
@@ -119,11 +127,13 @@ export const Price = styled.span`
   `}
 `
 export const TradeStatusName = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     flex-direction: column;
     align-items: center;
+
     width: 100px;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -132,8 +142,9 @@ export const TradeStatusName = styled(Text)`
   `}
 `
 export const Date = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: inline-block;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -144,12 +155,13 @@ export const Date = styled(Text)`
   `}
 `
 export const ReviewButtonWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     flex-direction: column;
-    min-width: 120px;
     align-items: flex-end;
 
+    min-width: 120px;
+
     ${theme.mediaQuery.tablet} {
       display: flex;
       align-items: center;
@@ -157,17 +169,18 @@ export const ReviewButtonWrapper = styled.div`
   `}
 `
 export const ReviewButton = styled(Button)<{ hasReview: boolean }>`
-  ${({ theme, hasReview }): string => `
-    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+  ${({ theme, hasReview }) => css`
     margin-right: 20px;
 
+    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+
     ${theme.mediaQuery.tablet} {
       width: 100%;
+      margin-right: 0;
+      padding: 20px 0;
       border: none;
       border-top: 1px solid ${theme.colors.grayScale10};
       border-radius: 0;
-      padding: 20px 0;
-      margin-right: 0;
     }
   `}
 `
@@ -175,10 +188,11 @@ export const ReviewBlankButton = styled(Text)`
   align-self: center;
 `
 export const LikeButton = styled(Button)`
-  ${({ theme }): string => `
-    color: ${theme.colors.grayScale90};
+  ${({ theme }) => css`
     margin-right: 20px;
 
+    color: ${theme.colors.grayScale90};
+
     ${theme.mediaQuery.tablet} {
       display: none;
     }
diff --git a/src/components/shop/buy/ReviewModal/styled.ts b/src/components/shop/buy/ReviewModal/styled.ts
index af7a3508..54cfcee1 100644
--- a/src/components/shop/buy/ReviewModal/styled.ts
+++ b/src/components/shop/buy/ReviewModal/styled.ts
@@ -5,11 +5,11 @@ import type { StyledReviewStateProps } from './types'
 const ReviewModal = styled(Modal)`
   width: 400px;
 
-  ${({ theme }): string => theme.mediaQuery.tablet} {
+  ${({ theme }) => theme.mediaQuery.tablet} {
     width: 320px;
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
+  ${({ theme }) => theme.mediaQuery.mobile} {
     width: 320px;
   }
 `
@@ -28,40 +28,40 @@ const FirstSection = styled.div`
 `
 
 const NickName = styled.div`
-  color: ${({ theme }): string => theme.colors.brandPrimary};
-  ${({ theme }): string => theme.fonts.headline01B};
+  color: ${({ theme }) => theme.colors.brandPrimary};
+  ${({ theme }) => theme.fonts.headline01B};
 
-  ${({ theme }): string => theme.mediaQuery.tablet} {
-    ${({ theme }): string => theme.fonts.headline02B};
+  ${({ theme }) => theme.mediaQuery.tablet} {
+    ${({ theme }) => theme.fonts.headline02B};
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    ${({ theme }): string => theme.fonts.headline02B};
+  ${({ theme }) => theme.mediaQuery.mobile} {
+    ${({ theme }) => theme.fonts.headline02B};
   }
 `
 
 const NormalText = styled.span`
-  ${({ theme }): string => theme.fonts.headline01B};
-  ${({ theme }): string => theme.mediaQuery.tablet} {
-    ${({ theme }): string => theme.fonts.headline02B};
+  ${({ theme }) => theme.fonts.headline01B};
+  ${({ theme }) => theme.mediaQuery.tablet} {
+    ${({ theme }) => theme.fonts.headline02B};
   }
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    ${({ theme }): string => theme.fonts.headline02B};
+  ${({ theme }) => theme.mediaQuery.mobile} {
+    ${({ theme }) => theme.fonts.headline02B};
   }
 `
 
 const ProductText = styled.div`
   margin-top: 8px;
 
-  color: ${({ theme }): string => theme.colors.grayScale70};
-  ${({ theme }): string => theme.fonts.body01R};
+  color: ${({ theme }) => theme.colors.grayScale70};
+  ${({ theme }) => theme.fonts.body01R};
 
-  ${({ theme }): string => theme.mediaQuery.tablet} {
-    ${({ theme }): string => theme.fonts.body02R};
+  ${({ theme }) => theme.mediaQuery.tablet} {
+    ${({ theme }) => theme.fonts.body02R};
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
-    ${({ theme }): string => theme.fonts.body02R};
+  ${({ theme }) => theme.mediaQuery.mobile} {
+    ${({ theme }) => theme.fonts.body02R};
   }
 `
 
@@ -75,13 +75,13 @@ const ReviewIconContainer = styled.div`
 
   cursor: pointer;
 
-  ${({ theme }): string => theme.mediaQuery.tablet} {
+  ${({ theme }) => theme.mediaQuery.tablet} {
     gap: 32px;
 
     margin: 24px 0;
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
+  ${({ theme }) => theme.mediaQuery.mobile} {
     gap: 32px;
 
     margin: 24px 0;
@@ -102,9 +102,9 @@ const ReviewState = styled.button<StyledReviewStateProps>`
   place-items: center center;
 
   * {
-    color: ${({ isFill, theme }): string =>
+    color: ${({ isFill, theme }) =>
       isFill ? theme.colors.brandPrimary : theme.colors.grayScale30};
-    ${({ theme }): string => theme.fonts.body01M};
+    ${({ theme }) => theme.fonts.body01M};
   }
 `
 
@@ -120,8 +120,8 @@ const ReadModeReviewContent = styled.div`
   height: 120px;
   padding: 10px 12px;
 
-  background: ${({ theme }): string => theme.colors.bgGray02};
-  ${({ theme }): string => theme.fonts.body02M};
+  background: ${({ theme }) => theme.colors.bgGray02};
+  ${({ theme }) => theme.fonts.body02M};
 `
 
 const ReviewTextArea = styled(TextArea)`
@@ -132,11 +132,11 @@ const ReviewTextArea = styled(TextArea)`
 const ReviewSendButton = styled(Button)`
   height: 64px;
   margin-top: 40px;
-  ${({ theme }): string => theme.mediaQuery.tablet} {
+  ${({ theme }) => theme.mediaQuery.tablet} {
     height: 48px;
   }
 
-  ${({ theme }): string => theme.mediaQuery.mobile} {
+  ${({ theme }) => theme.mediaQuery.mobile} {
     height: 48px;
   }
 `
diff --git a/src/components/shop/review/ReviewTabPost/styled.ts b/src/components/shop/review/ReviewTabPost/styled.ts
index 5b0c94aa..75a4a487 100644
--- a/src/components/shop/review/ReviewTabPost/styled.ts
+++ b/src/components/shop/review/ReviewTabPost/styled.ts
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import {
   Avatar as AvatarComponent,
@@ -6,13 +7,14 @@ import {
 } from '@offer-ui/react'
 
 const Wrapper = styled.li`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
-    padding: 24px;
     gap: 8px;
 
+    padding: 24px;
+
     ${theme.mediaQuery.tablet} {
-      padding 16px 24px;
+      padding: 16px 24px;
     }
 
     ${theme.mediaQuery.mobile} {
@@ -41,11 +43,13 @@ const NickNameWrapper = styled.div`
 `
 
 const NickName = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: inline-block;
+    overflow: hidden;
+
     max-width: 350px;
+
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
@@ -60,11 +64,13 @@ const Badge = styled(BadgeComponent)`
 `
 
 const PostTitle = styled(Text)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: block;
+    overflow: hidden;
+
     margin-top: 4px;
+
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
diff --git a/src/components/shop/sale/SaleTabPost/styled.ts b/src/components/shop/sale/SaleTabPost/styled.ts
index d954fbb7..99b60a16 100644
--- a/src/components/shop/sale/SaleTabPost/styled.ts
+++ b/src/components/shop/sale/SaleTabPost/styled.ts
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import {
   Image,
@@ -7,7 +8,7 @@ import {
 } from '@offer-ui/react'
 
 const Container = styled.li`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,17 +21,19 @@ const Container = styled.li`
   `}
 `
 const ProductWrapper = styled.div<{ isLogin: boolean }>`
-  ${({ theme, isLogin }): string => `
+  ${({ theme, isLogin }) => css`
     display: grid;
     flex: 1;
     grid-template-columns: ${isLogin ? '90px 90px 1fr' : '90px 1fr'};
-    align-items: center;
     gap: 16px;
+    align-items: center;
+
     padding: 20px 0 20px 20px;
 
     ${theme.mediaQuery.tablet} {
       grid-template-columns: 68px 1fr 90px;
       gap: 8px;
+
       padding: 16px 24px;
     }
 
@@ -41,10 +44,11 @@ const ProductWrapper = styled.div<{ isLogin: boolean }>`
   `}
 `
 const ProductImg = styled(Image)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
+    order: 1;
+
     width: 90px;
     height: 90px;
-    order:1;
 
     ${theme.mediaQuery.tablet} {
       width: 68px;
@@ -53,7 +57,7 @@ const ProductImg = styled(Image)`
   `}
 `
 const SelectBox = styled(SelectBoxComponent)`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     order: 2;
 
     ${theme.mediaQuery.tablet} {
@@ -63,32 +67,35 @@ const SelectBox = styled(SelectBoxComponent)`
 `
 
 const ProductMetaWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     align-items: center;
     justify-content: space-around;
     order: 3;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
-      order: 2;
       gap: 4px;
+      align-items: flex-start;
+      order: 2;
     }
   `}
 `
 const ProductName = styled(Text)`
-  ${({ theme }): string => `
-    text-align: center;
+  ${({ theme }) => css`
+    overflow: hidden;
+
     width: 150px;
+
+    text-align: center;
     text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
     word-break: break-word;
 
     ${theme.mediaQuery.tablet} {
-      text-align: left;
       width: 460px;
+
+      text-align: left;
     }
 
     ${theme.mediaQuery.mobile} {
@@ -97,21 +104,21 @@ const ProductName = styled(Text)`
   `}
 `
 const ProductInfoWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
+    gap: 12px;
     align-items: center;
     justify-content: space-around;
-    gap: 12px;
 
     ${theme.mediaQuery.tablet} {
-      align-items: flex-start;
       flex-direction: column;
       gap: 0;
+      align-items: flex-start;
     }
-`}
+  `}
 `
 const Price = styled.span`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     ${theme.fonts.body02R};
 
     ${theme.mediaQuery.tablet} {
@@ -121,12 +128,14 @@ const Price = styled.span`
   `}
 `
 const FavoriteWrapper = styled.div<{ isOnlyOther: boolean }>`
-  ${({ theme, isOnlyOther }): string => `
+  ${({ theme, isOnlyOther }) => css`
     display: ${isOnlyOther ? 'none' : 'flex'};
+    gap: 2px;
     align-items: center;
     justify-content: center;
-    gap: 2px;
+
     width: 100px;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -136,8 +145,9 @@ const FavoriteWrapper = styled.div<{ isOnlyOther: boolean }>`
   `}
 `
 const Date = styled(Text)<{ isLogin: boolean }>`
-  ${({ theme, isLogin }): string => `
+  ${({ theme, isLogin }) => css`
     display: inline-block;
+
     color: ${theme.colors.grayScale50};
 
     ${theme.mediaQuery.tablet} {
@@ -148,12 +158,13 @@ const Date = styled(Text)<{ isLogin: boolean }>`
   `}
 `
 const ReviewButtonWrapper = styled.div`
-  ${({ theme }): string => `
+  ${({ theme }) => css`
     display: flex;
     flex-direction: column;
-    min-width: 120px;
     align-items: flex-end;
 
+    min-width: 120px;
+
     ${theme.mediaQuery.tablet} {
       display: flex;
       align-items: center;
@@ -161,17 +172,18 @@ const ReviewButtonWrapper = styled.div`
   `}
 `
 const ReviewButton = styled(Button)<{ hasReview: boolean }>`
-  ${({ theme, hasReview }): string => `
-    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+  ${({ theme, hasReview }) => css`
     margin-right: 20px;
 
+    color: ${hasReview ? theme.colors.grayScale70 : theme.colors.brandPrimary};
+
     ${theme.mediaQuery.tablet} {
       width: 100%;
+      margin-right: 0;
+      padding: 20px 0;
       border: none;
       border-top: 1px solid ${theme.colors.grayScale10};
       border-radius: 0;
-      padding: 20px 0;
-      margin-right: 0;
     }
   `}
 `