fix: avatar를 button이 아니라 a태그로 감싸도록 변경

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

Hide file tree

Showing 2 changed files with 12 additions and 24 deletions.
diff --git a/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx b/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx
@@ -6,17 +6,17 @@ import {avatarImageStyle, avatarStyle} from './Avatar.style';
 interface Props {
   imagePath: string;
   name: string;
-  onClick: () => void;
+  navigateUrl: string;
 }
 
-const Avatar = ({imagePath, name, onClick}: Props) => {
+const Avatar = ({imagePath, name, navigateUrl}: Props) => {
   return (
-    <button onClick={onClick} css={avatarStyle}>
+    <a href={navigateUrl} target="_blank" css={avatarStyle}>
       <img src={`${process.env.IMAGE_URL}/${imagePath}.png`} css={avatarImageStyle} />
       <Text size="bodyBold" textColor="white" responsive={true}>
         {name}
       </Text>
-    </button>
+    </a>
   );
 };
 

diff --git a/client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx b/client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx
@@ -17,14 +17,10 @@ const CreatorSection = () => {
           FRONTEND
         </Text>
         <div css={avatarContainerStyle}>
-          <Avatar imagePath="todari" name="토다리" onClick={() => window.open('https://github.com/Todari', '_blank')} />
-          <Avatar
-            imagePath="cookie"
-            name="쿠키"
-            onClick={() => window.open('https://github.com/jinhokim98', '_blank')}
-          />
-          <Avatar imagePath="soha" name="소하" onClick={() => window.open('https://github.com/soi-ha', '_blank')} />
-          <Avatar imagePath="weadie" name="웨디" onClick={() => window.open('https://github.com/pakxe', '_blank')} />
+          <Avatar imagePath="todari" name="토다리" navigateUrl="https://github.com/Todari" />
+          <Avatar imagePath="cookie" name="쿠키" navigateUrl="https://github.com/jinhokim98" />
+          <Avatar imagePath="soha" name="소하" navigateUrl="https://github.com/soi-ha" />
+          <Avatar imagePath="weadie" name="웨디" navigateUrl="https://github.com/pakxe" />
         </div>
       </div>
       <div
@@ -39,18 +35,10 @@ const CreatorSection = () => {
           BACKEND
         </Text>
         <div css={avatarContainerStyle}>
-          <Avatar
-            imagePath="2sang"
-            name="이상"
-            onClick={() => window.open('https://github.com/kunsanglee', '_blank')}
-          />
-          <Avatar
-            imagePath="baekho"
-            name="백호"
-            onClick={() => window.open('https://github.com/Arachneee', '_blank')}
-          />
-          <Avatar imagePath="mangcho" name="망쵸" onClick={() => window.open('https://github.com/3Juhwan', '_blank')} />
-          <Avatar imagePath="gamja" name="감자" onClick={() => window.open('https://github.com/khabh', '_blank')} />
+          <Avatar imagePath="2sang" name="이상" navigateUrl="https://github.com/kunsanglee" />
+          <Avatar imagePath="baekho" name="백호" navigateUrl="https://github.com/Arachneee" />
+          <Avatar imagePath="mangcho" name="망쵸" navigateUrl="https://github.com/3Juhwan" />
+          <Avatar imagePath="gamja" name="감자" navigateUrl="https://github.com/khabh" />
         </div>
       </div>
     </div>