Skip to content

Commit

Permalink
feat: 마이페이지 - 취미 탭 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
maylh committed Nov 12, 2024
1 parent a86f8e3 commit 549c73c
Showing 5 changed files with 177 additions and 9 deletions.
17 changes: 17 additions & 0 deletions week4/assignment/src/apis/getMyHobby.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import axios from 'axios';

export const getMyHobby = async () => {
const token = localStorage.getItem('authToken');

try {
const response = await axios.get(`${import.meta.env.VITE_APP_BASE_URL}/user/my-hobby`, {
headers: {
token: token,
},
});

return response.data?.result?.hobby || null;
} catch (err: any) {
throw err;
}
};
17 changes: 17 additions & 0 deletions week4/assignment/src/apis/getOtherHobby.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import axios from 'axios';

export const getOtherHobby = async (no: number) => {
const token = localStorage.getItem('authToken');

try {
const response = await axios.get(`${import.meta.env.VITE_APP_BASE_URL}/user/${no}/hobby`, {
headers: {
token: token,
},
});

return response.data?.result?.hobby || null;
} catch (err: any) {
throw err;
}
};
2 changes: 1 addition & 1 deletion week4/assignment/src/components/common/Input.tsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export interface InputProps extends HTMLAttributes<HTMLInputElement> {
name: string;
placeholder?: string;
errorMessage?: string;
isValid: boolean;
isValid?: boolean;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

129 changes: 124 additions & 5 deletions week4/assignment/src/components/mypage/HobbyTab.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,128 @@
import { useEffect, useState } from 'react';
import { getMyHobby } from '../../apis/getMyHobby';
import styled from '@emotion/styled';
import { Theme } from '../../styles/theme';
import Input from '../common/Input';
import Button from '../common/Button';
import { getOtherHobby } from '../../apis/getOtherHobby';

const HobbyTab = () => {
return(
const [hobby, setHobby] = useState<string | null>(null);
const [userId, setUserId] = useState<string>('');
const [searchResult, setSearchResult] = useState<string | null>(null);

useEffect(() => {
const fetchMyHobby = async () => {
const myHobby = await getMyHobby();
setHobby(myHobby);
};

fetchMyHobby();
}, []);

const handleNumChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUserId(e.target.value);
};

const handleSearch = async () => {
try {
const fetchedHobby = await getOtherHobby(Number(userId));

if (fetchedHobby !== null) {
setSearchResult(`${userId}번 사용자의 취미: ${fetchedHobby}`);
}
} catch (err: any) {
if (err.response?.status === 404 && err.response?.data?.code === '01') {
alert('존재하지 않는 사용자입니다.');
} else {
alert('오류가 발생했습니다. 다시 시도해주세요.');
}
}
};


return (
<HobbyTabContainer>
<HobbyTabSection>
<Title>취미</Title>
<MyHobbySection>
<h2>나의 취미</h2>
<p>{hobby}</p>
</MyHobbySection>
<SearchHobbySection>
<h2>다른 사람들의 취미</h2>
<Input
type="text"
value={userId}
name="userId"
placeholder="사용자 번호를 입력하세요"
onChange={handleNumChange}
/>
<Button type="button" onClick={handleSearch}>검색</Button>
{searchResult && (
<p>{searchResult}</p>
)}
</SearchHobbySection>
</HobbyTabSection>
</HobbyTabContainer>
);
};

export default HobbyTab;

const HobbyTabContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
& p {
font-size: 1.1rem;
color: ${Theme.colors.brown};
}
& h2 {
font-size: 1.2rem;
font-weight: 600;
}
`;

const HobbyTabSection = styled.div`
display: flex;
flex-direction: column;
width: 50%;
max-width: 550px;
gap: 2rem;
`;

const Title = styled.h1`
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-align: center;
`;

const MyHobbySection = styled.section`
display: flex;
flex-direction: column;
gap: 0.8rem;
`;

const SearchHobbySection = styled.section`
display: flex;
flex-direction: column;
<div>취미탭</div>
)
& h2 {
margin-bottom: 0.8rem;
}
}
& button {
margin-top: 0.4rem;
}
export default HobbyTab;
& p {
margin-top: 0.8rem;
}
`;
21 changes: 18 additions & 3 deletions week4/assignment/src/pages/mypage/MyPage.tsx
Original file line number Diff line number Diff line change
@@ -2,16 +2,31 @@ import { useState } from 'react';
import Header from '../../components/mypage/Header';
import HobbyTab from '../../components/mypage/HobbyTab';
import MyInfoTab from '../../components/mypage/MyInfoTab';
import styled from '@emotion/styled';

const MyPage = () => {
const [isHobbyTab, setIsHobbyTab] = useState(true);

return (
<div>
<MyPageContainer>
<Header setIsHobbyTab={setIsHobbyTab} />
{isHobbyTab ? <HobbyTab /> : <MyInfoTab />}
</div>
<Content>{isHobbyTab ? <HobbyTab /> : <MyInfoTab />}</Content>
</MyPageContainer>
);
};

export default MyPage;

const MyPageContainer = styled.div`
display: flex;
flex-direction: column;
height: 100vh;
`;

const Content = styled.main`
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

0 comments on commit 549c73c

Please sign in to comment.