refactor: avatar style 분ㄹ

woowacourse-teams · Oct 23, 2024 · 0eecb95 · 0eecb95
1 parent b4360ae
commit 0eecb95
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/client/src/pages/MainPage/Section/CreatorSection/Avatar.style.ts b/client/src/pages/MainPage/Section/CreatorSection/Avatar.style.ts
@@ -0,0 +1,17 @@
+import {css} from '@emotion/react';
+
+export const avatarStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '0.5rem',
+  '@media (min-width: 1200px)': {
+    gap: '1rem',
+  },
+});
+
+export const avatarImageStyle = css({
+  width: '100%',
+  height: '100%',
+  borderRadius: '25%',
+});
diff --git a/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx b/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx
@@ -1,6 +1,7 @@
 import {css} from '@emotion/react';
 
 import {Text} from '@components/Design';
+import {avatarImageStyle, avatarStyle} from './Avatar.style';
 
 interface Props {
   imagePath: string;
@@ -10,26 +11,8 @@ interface Props {
 
 const Avatar = ({imagePath, name, onClick}: Props) => {
   return (
-    <button
-      onClick={onClick}
-      css={css({
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '0.5rem',
-        '@media (min-width: 1200px)': {
-          gap: '1rem',
-        },
-      })}
-    >
-      <img
-        src={`${process.env.IMAGE_URL}/${imagePath}.png`}
-        css={css({
-          width: '100%',
-          height: '100%',
-          borderRadius: '25%',
-        })}
-      />
+    <button onClick={onClick} css={avatarStyle}>
+      <img src={`${process.env.IMAGE_URL}/${imagePath}.png`} css={avatarImageStyle} />
       <Text size="bodyBold" textColor="white" responsive={true}>
         {name}
       </Text>