Skip to content

Commit

Permalink
Merge pull request #92 from APPS-sookmyung/feat/#91-cards-apis
Browse files Browse the repository at this point in the history
#91 [FEAT] 내 명함 & 남의 명함 API 기본 셋팅, HomePage에 API 일부 연결
  • Loading branch information
misung-dev authored Oct 1, 2024
2 parents f1c48f5 + b66f09d commit 2f806d6
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 22 deletions.
29 changes: 29 additions & 0 deletions src/apis/cards.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { authAxios } from '../axios';

// 전체 명함 조회
export const getCards = async ({ member_id }) => {
const response = await authAxios.get(`/cards/${member_id}`);
// console.log(response.data.result);
return response;
};

// 명함 생성
export const postCards = async ({ member_id, data }) => {
const response = await authAxios.post(`/cards/${member_id}`, data);
// console.log(response);
return response;
};

// 명함 삭제
export const deleteCards = async ({ card_id }) => {
const response = await authAxios.delete(`/cards/${card_id}`);
// console.log(response);
return response;
};

// 명함 수정
export const putCards = async ({ card_id, data }) => {
const response = await authAxios.put(`/cards/${card_id}`, data);
// console.log(response);
return response;
};
2 changes: 1 addition & 1 deletion src/apis/group.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const putGroup = async ({ name }) => {
const data = {
name: name,
};
const response = await authAxios.patch(
const response = await authAxios.put(
`/categories/${member_id}/${category_id}`,
editedPost
);
Expand Down
29 changes: 29 additions & 0 deletions src/apis/myCard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { authAxios } from '../axios';

// 내 명함 가져오기
export const getMyCard = async ({ member_id }) => {
const response = await authAxios.get(`/me/${member_id}`);
console.log(response);
return response;
};

// 내 명함 생성
export const postMyCard = async ({ member_id, data }) => {
const response = await authAxios.post(`/categories/${member_id}`, data);
console.log(response);
return response;
};

// 내 명함 삭제
export const deleteMyCard = async (member_id) => {
const response = await authAxios.delete(`/me/${member_id}`);
console.log(response);
return response;
};

// 내 명함 수정
export const putMyCard = async ({ member_id, data }) => {
const response = await authAxios.put(`/me/${member_id}`, data);
console.log(response);
return response;
};
11 changes: 5 additions & 6 deletions src/components/CardInfo/CardInfo.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { Link } from 'react-router-dom';

export default function CardInfo({
name,
team,
job,
role,
company,
imageUrl,
isDeleteMode = false,
Expand All @@ -30,9 +29,9 @@ export default function CardInfo({
</S.ProfileImgWrapper>
<S.Info>
<S.Name isSelected={isSelected}>{name}</S.Name>
<S.Job isSelected={isSelected}>
{job} / {team}, {company}
</S.Job>
<S.Role isSelected={isSelected}>
{role} / {company}
</S.Role>
</S.Info>
</S.CardWrapper>
{!isDeleteMode && (
Expand All @@ -57,7 +56,7 @@ export default function CardInfo({

CardInfo.propTypes = {
name: PropTypes.string.isRequired,
job: PropTypes.string.isRequired,
role: PropTypes.string.isRequired,
company: PropTypes.string.isRequired,
imageUrl: PropTypes.string,
isDeleteMode: PropTypes.bool,
Expand Down
2 changes: 1 addition & 1 deletion src/components/CardInfo/CardInfo.style.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Name = styled.h1`
letter-spacing: -0.7px;
`;

export const Job = styled.span`
export const Role = styled.span`
color: ${(props) =>
props.isSelected ? 'var(--white, #FFF)' : 'var(--grey3, #555)'};
font-size: 12px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyCard/MyCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MdLogin } from 'react-icons/md';

export default function MyCard({
name,
job,
role,
company,
imageUrl,
tel,
Expand Down
55 changes: 42 additions & 13 deletions src/pages/HomePage/HomePage.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useRef } from 'react';
import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import * as S from './HomePage.style';
import {
Expand All @@ -8,14 +8,42 @@ import {
MyCard,
AddGroupModal,
} from '../../components';
import MY_CARD_SAMPLE_DATA from '../../constants/myCardSampleData';
import { useVisibleCardsEffect } from '../../utils/HomePageUtils/homePageEffects';
import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData.js';
import { getMyCard } from '../../apis/myCard.js';
import { getCards } from '../../apis/cards.js';

const member_id = 5; // dummy data

export default function HomePage() {
const navigate = useNavigate();
const [filterdList, setFilterdList] = useState([]);
useVisibleCardsEffect(setFilterdList, CARDS_SAMPLE_DATA);
const [myCardData, setMyCardData] = useState([]);
const [cardsData, setCardsData] = useState([]);
// useVisibleCardsEffect(setFilterdList, cardsData);

async function fetchMyCard(member_id) {
try {
const response = await getMyCard({ member_id: member_id });
setMyCardData(response.data);
} catch (error) {
console.error('내 카드 정보를 불러오지 못했습니다.', error);
}
}

async function fetchCards(member_id) {
try {
const response = await getCards({ member_id: member_id });
setCardsData(response.data.cards);
} catch (error) {
console.error('카드 리스트를 불러오지 못했습니다.', error);
}
}

useEffect(() => {
fetchMyCard(member_id);
fetchCards(member_id);
}, []);

return (
<S.HomePage>
Expand All @@ -31,13 +59,14 @@ export default function HomePage() {
<S.MyCardContainer>
<MyCard
backgroundColor='#fff'
name={MY_CARD_SAMPLE_DATA.name}
job={MY_CARD_SAMPLE_DATA.job}
company={MY_CARD_SAMPLE_DATA.company}
imageUrl={MY_CARD_SAMPLE_DATA.imageUrl}
tel={MY_CARD_SAMPLE_DATA.tel}
email={MY_CARD_SAMPLE_DATA.email}
address={MY_CARD_SAMPLE_DATA.address}
name={myCardData.name}
role={myCardData.role}
company={myCardData.company}
imageUrl={myCardData.imageUrl}
phone={myCardData.phone}
tel={myCardData.tel}
email={myCardData.email}
address={myCardData.address}
onClick={() => navigate('/mypage')}
/>
</S.MyCardContainer>
Expand All @@ -50,13 +79,13 @@ export default function HomePage() {
<p style={{ color: '#000' }}>둘러보기</p>
<p style={{ color: '#555' }}>최근 등록된 명함</p>
</S.CardListTitle>
{filterdList.length > 0 && (
{cardsData.length > 0 && (
<S.CardContainer>
{filterdList.map((data, index) => (
{cardsData.map((data, index) => (
<CardInfo
key={index}
name={data.name}
job={data.job}
role={data.role}
company={data.company}
imageUrl={data.imageUrl}
/>
Expand Down

0 comments on commit 2f806d6

Please sign in to comment.