Merge branch '6/feat' into develop

playQR · Jun 16, 2024 · 476b926 · 476b926
2 parents 685e30c + 7cd4ca7
commit 476b926
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/components/buttons/like_button.tsx b/src/components/buttons/like_button.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import like_icon_true from './img/like_icon_true.png';
+import like_icon_false from './img/like_icon_false.png';
+type Props = {
+    like : boolean,
+    like_num : number
+}
+{/* 10px가 안되는 부분 */}
+const LikeButton = (props: Props) => {
+    const { like,like_num } = props;
+    return (
+
+            <button className="absolute top-2 right-2 bg-white rounded-full w-60px h-30px p-1 shadow-md border-primary"
+                style={{
+                boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
+                backdropFilter: 'blur(10px)',
+                WebkitBackdropFilter: 'blur(10px)',
+                background: 'rgba(255, 255, 255, 0.01)',
+                borderRadius: '16px',
+                border: '1px solid rgba(30, 218, 0)'
+
+                }}>
+            <div className='flex flex-row items-center justify-center'>
+                { like ? <img src={like_icon_true} alt="like" className="mr-1 w-18px h-4" /> :
+                <img src={like_icon_false} alt="like" className="mr-1 w-18px h-4" />}
+            <span className="text-xs text-green-600">{like_num}</span>
+            </div>
+            </button>
+    )
+}
+
+export default LikeButton
diff --git a/src/components/search/searchcard.tsx b/src/components/search/searchcard.tsx
@@ -5,6 +5,7 @@ import checker_img from './img/checker_img.png';
 import like_icon_true from './img/like_icon_true.png';
 import like_icon_false from './img/like_icon_false.png';
 import simple_img from './img/simple_img.png';
+import LikeButton from '../buttons/like_button';
 
 
 type Result = {
@@ -32,23 +33,7 @@ const SearchCard : React.FC<Props> = (props: Props) => {
         <div className="h-40 w-full flex items-center justify-center">
           <img src={simple_img} alt="checker" className="h-full w-full object-cover" />
         </div>
-        {/* 10px가 안되는 부분 */}
-        <button className="absolute top-2 right-2 bg-white rounded-full w-60px h-30px p-1 shadow-md border-primary"
-            style={{
-              boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
-              backdropFilter: 'blur(10px)',
-              WebkitBackdropFilter: 'blur(10px)',
-              background: 'rgba(255, 255, 255, 0.01)',
-              borderRadius: '16px',
-              border: '1px solid rgba(30, 218, 0)'
-
-            }}>
-          <div className='flex flex-row items-center justify-center'>
-            { like ? <img src={like_icon_true} alt="like" className="mr-1 w-18px h-4" /> :
-             <img src={like_icon_false} alt="like" className="mr-1 w-18px h-4" />}
-          <span className="text-xs text-green-600">{like_num}</span>
-          </div>
-        </button>
+        <LikeButton like={like} like_num={like_num}/>
       </div>
       <div className="pt-2 px-10px">
         <h2 className="text-pxs text-text-plain">{band_name}</h2>