Feat#58 순위 페이지 API 연동

package.json

@@ -16,7 +16,9 @@
     "@types/jest": "^27.5.2",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+
     "@types/styled-components": "^5.1.26",
+
     "chart.js": "^4.3.3",
     "i18next": "^23.4.4",
     "react": "^18.2.0",

src/component/Lank/LankBox.tsx

@@ -4,6 +4,7 @@ import FONT from '../../styles/Font';
 import { Mobile, PC } from '../common/Responsive';
 import LikeButton from './LikeButton';
 import SignUpBeforeLogo from '../../assets/img/SignUpBeforeLogo.png';
+import avatar from '../../assets/img/avatar/M_Avatar.png';
 
 const Box = styled.div`
   width: 67rem;
@@ -106,6 +107,14 @@ const MobileLike = styled.div`
   position: absolute;
 `;
 
+const CenteredImage = styled.img`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+
 const LankBox = ({
   name,
   statusmessage,
@@ -124,7 +133,7 @@ const LankBox = ({
           <Lanking>
             <LankNum style={FONT.L1}>{lankNum}</LankNum>
           </Lanking>
-          <OutfitPic></OutfitPic>
+          <OutfitPic><CenteredImage src={avatar} alt='OutfitPic' height='100%' /></OutfitPic>
           <ButtonStyling>
             <LikeButton />
           </ButtonStyling>
@@ -140,7 +149,7 @@ const LankBox = ({
             <Text style={FONT.H7}>
               {name}
               <div style={FONT.L6}>{statusmessage}</div>
-            </Text>
+              </Text>
           </TopBox>
           <ImgBox>
             <MobileLike>
@@ -158,5 +167,4 @@ const LankBox = ({
     </>
   );
 };
-
-export default LankBox;
+export default LankBox;

src/component/Lank/LikeButton.tsx

@@ -1,33 +1,67 @@
 import React from 'react';
 import {HeartOutlined, HeartFilled} from '@ant-design/icons';
-import styled from 'styled-components';
 
-class LikeButton extends React.Component{
+class LikeButton extends React.Component {
     state = {
-        isChecked: false,		
+      isChecked: false,
+      loading: false,
+      responseData: {},
     };
-
-    onClick = () => {				
-        this.state.isChecked ?		
-        this.setState({
-            isChecked: false,		
-        })
-        :
-        this.setState({				
-            isChecked: true,		
-        });
+
+    componentDidMount() {
+      this.fetchLikeStatus();
     }
-
-    render(){
-        return(
-            <React.Fragment>
-                <div className="icons-list">
-                    {this.state.isChecked ? 															
-                    <HeartFilled style={{ color: 'red', fontSize: '2rem'}} onClick={this.onClick}/> :	
-                    <HeartOutlined style={{ color: 'white', fontSize: '2rem'}} onClick={this.onClick}/>}				
-                </div>
-            </React.Fragment> 
-        )
+
+    fetchLikeStatus = async (codyId = 0) => {
+      this.setState({ loading: true });
+
+      try {
+        const response = await fetch(
+          `http://13.209.15.210:8080/cody/like?codyId=${codyId}`
+        );
+        const data = await response.json();
+
+        if (data.success) {
+          this.setState({
+            responseData: data.data,
+          });
+        }
+      } catch (error) {
+        console.error("좋아요 오류:", error);
+      } finally {
+        this.setState({ loading: false });
+      }
+    };
+
+    onClick = () => {
+      this.state.isChecked
+        ? this.setState({
+            isChecked: false,
+          })
+        : this.setState({
+            isChecked: true,
+          });
+    };
+    render() {
+      return (
+        <React.Fragment>
+          <div className="icons-list">
+            {this.state.isChecked ? (
+              <HeartFilled
+                style={{ color: "red", fontSize: "2rem" }}
+                onClick={this.onClick}
+                disabled={this.state.loading}
+              />
+            ) : (
+              <HeartOutlined
+                style={{ color: "white", fontSize: "2rem" }}
+                onClick={this.onClick}
+                disabled={this.state.loading}
+              />
+            )}
+          </div>
+        </React.Fragment>
+      );
     }
-}
-export default LikeButton;
+  }
+  export default LikeButton;

src/pages/Lank.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import FONT from '../styles/Font';
 import LankBox from '../component/Lank/LankBox';
@@ -52,6 +52,8 @@ const Lank = () => {
   };
   const isMobile = window.innerWidth < 768;
 
+
+
   return (
     <Content>
       <Header>
@@ -63,32 +65,22 @@ const Lank = () => {
         </HeaderContainer>
       </Header>
       <Body>
-        {lankData.map((data, index) => (
+        {lankData.slice(0, expanded ? lankData.length : 3).map((data, index) => (
           <LankBox
             key={index}
             name={data.name}
             statusmessage={data.statusmessage}
             lankNum={data.lankNum}
           />
         ))}
-        {expanded === true
-          ? lankData
-              .slice(3)
-              .map((data, index) => (
-                <LankBox
-                  key={index}
-                  name={data.name}
-                  statusmessage={data.statusmessage}
-                  lankNum={data.lankNum}
-                />
-              ))
-          : null}
       </Body>
-      <MoreBox>
-        <MoreButton onClick={ButtonHandler} expanded={expanded} style={FONT.L3}>
-          {MoreButtonText}
-        </MoreButton>
-      </MoreBox>
+      {lankData.length > 3 && (
+        <MoreBox>
+          <MoreButton onClick={ButtonHandler} expanded={expanded} style={FONT.L3}>
+            {MoreButtonText}
+          </MoreButton>
+        </MoreBox>
+      )}
     </Content>
   );
 };
@@ -108,7 +100,7 @@ const Header = styled.div`
 const HeaderContainer = styled.div`
   width: 50rem;
   margin: 0 auto;
-  padding-top: 5rem;
+  padding-top: 50px;
   padding-bottom: 6rem;
   @media (max-width: 768px) {
     width: 100%;

yarn.lock

@@ -2240,6 +2240,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-responsive@^8.0.5":
+  version "8.0.5"
+  resolved "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-8.0.5.tgz"
+  integrity sha512-k3gQJgI87oP5IrVZe//3LKJFnAeFaqqWmmtl5eoYL2H3HqFcIhUaE30kRK1CsW3DHdojZxcVj4ZNc2ClsEu2PA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.0":
   version "5.3.3"
   resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz"