replace plain text to emotion css in shop components

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`

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};
   }
 `
 

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,38 +155,41 @@ 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;
     }
   `}
 `
 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;
     }