style: 위치 핀 프로필 사진 변경

변경이용
GDSC-Hongik · Aug 15, 2024 · 0412951 · 0412951
1 parent 1a2391c
commit 0412951
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 66 deletions.
diff --git a/src/components/ProfileImg.tsx b/src/components/ProfileImg.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import axios from '~/libs/axios';
+import ProfileImg from '~/assets/images/Profile.png';
+
+const useProfileImg = () => {
+	const [profileImg, setProfileImg] = useState(ProfileImg);
+
+	useEffect(() => {
+		async function fetchData() {
+			try {
+				const res = await axios.get('/profile');
+				setProfileImg(`https://43.203.225.31.nip.io${res.data.profile_img}`);
+			} catch (error) {
+				console.log('에러');
+			}
+		}
+		fetchData();
+	}, []);
+
+	return profileImg;
+};
+
+export default useProfileImg;
diff --git a/src/components/SmallButton.tsx b/src/components/SmallButton.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import theme from '../styles/theme';
+
+interface SmallButtonProps {
+	decline?: boolean;
+}
+
+const SmallButton = styled.button<SmallButtonProps>`
+	background-color: ${({ decline }) =>
+		decline ? theme.colors.gray : theme.colors.orange};
+	color: ${theme.colors.white};
+	box-sizing: border-box;
+	width: 50px;
+	height: 20px;
+	font-size: 10px;
+	border-radius: 8px;
+	border: none;
+	margin-top: 2px;
+	margin-right: 10px;
+	&:hover,
+	&:active {
+		background-color: ${theme.colors.grayorange};
+		color: ${theme.colors.white};
+	}
+`;
+
+export default SmallButton;
diff --git a/src/components/map/UserLocation.tsx b/src/components/map/UserLocation.tsx
@@ -1,9 +1,9 @@
 import { Marker } from 'react-naver-maps';
 import Loading from '~/components/common/Loading';
-import ProfileImg from '~/assets/images/Profile.png';
 import { useAtom } from 'jotai';
 import { geoLocationAtom, geoLocationErrorAtom } from '~/store/geoLocates';
 import useGeoLocation from '~/hooks/useGeoLocation';
+import useProfileImg from '~/components/ProfileImg';
 
 interface UserLocationProps {
 	navermaps: typeof naver.maps;
@@ -47,8 +47,9 @@ const UserLocation: React.FC<UserLocationProps> = ({ navermaps }) => {
 export default UserLocation;
 
 const ProfileMarker = () => {
+	const profileImg = useProfileImg();
 	const div = document.createElement('div');
-	div.style.backgroundImage = `url(${ProfileImg})`;
+	div.style.backgroundImage = `url(${profileImg})`;
 	div.style.width = '30px';
 	div.style.height = '30px';
 	div.style.backgroundSize = 'cover';

diff --git a/src/components/navBar/ProfileIcon.tsx b/src/components/navBar/ProfileIcon.tsx
@@ -1,19 +1,34 @@
-// TODO: 임시로 이 이미지만 넣어봅시다. 나중애 바꿔야해요.
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import axios from '~/libs/axios';
 import ProfileImg from '~/assets/images/Profile.png';
 
-const StyledProfileIcon = styled.div`
-	background-image: url(${ProfileImg});
+const ProfileIcon = () => {
+	const [profileImg, setProfileImg] = useState(ProfileImg);
+
+	useEffect(() => {
+		async function fetchData() {
+			try {
+				const res = await axios.get('/profile');
+				setProfileImg(`https://43.203.225.31.nip.io${res.data.profile_img}`);
+			} catch (error) {
+				console.log('에러');
+			}
+		}
+		fetchData();
+	}, []);
+
+	return <StyledProfileIcon profileImg={profileImg} />;
+};
+
+export default ProfileIcon;
+
+const StyledProfileIcon = styled.div<{ profileImg: string }>`
+	background-image: url(${({ profileImg }) => profileImg});
 	width: 24px;
 	height: 24px;
 	background-size: cover; /* 이미지가 div를 덮도록 설정 */
 	background-position: center; /* 이미지가 div의 중앙에 위치하도록 설정 */
 	outline: 0px solid ${({ theme }) => theme.colors.gray};
 	border-radius: 50%;
 `;
-
-const ProfileIcon = () => {
-	return <StyledProfileIcon />;
-};
-
-export default ProfileIcon;
diff --git a/src/pages/FriendMapPage.tsx b/src/pages/FriendMapPage.tsx
@@ -10,6 +10,7 @@ import Head from '~/components/common/Head';
 import theme from '../styles/theme';
 import axios from '../libs/axios';
 import BackButton from '~/components/BackButton';
+import SmallButton from '~/components/SmallButton';
 interface Friend {
 	id: number;
 	name: string;
@@ -39,7 +40,7 @@ const FriendMapPage = () => {
 			const res = await axios.get(`/friends/${id}/restaurants`);
 			setFriend(res.data.friend);
 			setRestaurants(res.data.restaurants);
-			if (res.data.friend.isExist === true) {
+			if (res.data.friend.is_evaluated === true) {
 				setShowButtons(false);
 			}
 		}
@@ -90,15 +91,15 @@ const FriendMapPage = () => {
 
 					{showButtons ? (
 						<AddButton>
-							<FriendButton value="like" onClick={handleClick}>
+							<SmallButton value="like" onClick={handleClick}>
 								좋아요
-							</FriendButton>
-							<FriendButton dislike value="dislike" onClick={handleClick}>
+							</SmallButton>
+							<SmallButton decline value="dislike" onClick={handleClick}>
 								싫어요
-							</FriendButton>
+							</SmallButton>
 						</AddButton>
 					) : (
-						<Reliability>신뢰도 {friend?.reliability}%</Reliability> // 버튼 클릭 후 나타날 텍스트
+						<Reliability real={true}>신뢰도 {friend?.reliability}%</Reliability>
 					)}
 				</Space>
 			</ProfileContainer>
@@ -127,6 +128,7 @@ const Container = styled.div`
 `;
 const ProfileContainer = styled.div`
 	box-sizing: border-box;
+	border: 1px;
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -151,26 +153,12 @@ const Space = styled.div`
 	display: flex;
 	flex-direction: column;
 `;
-const Reliability = styled.p`
-	font-size: 12px;
-`;
-interface FriendButtonProps {
-	dislike?: boolean;
+interface ReliabilityProps {
+	real?: boolean;
 }
-const FriendButton = styled.button<FriendButtonProps>`
-	background-color: ${({ dislike }) =>
-		dislike ? theme.colors.gray : theme.colors.orange};
-	color: ${theme.colors.white};
-	box-sizing: border-box;
-	width: 50px;
-	height: 20px;
-	font-size: 10px;
-	border-radius: 8px;
-	border: none;
-	margin-right: 10px;
-	&:hover,
-	&:active {
-		background-color: ${theme.colors.grayorange};
-		color: ${theme.colors.white};
-	}
+const Reliability = styled.p<ReliabilityProps>`
+	font-size: 12px;
+	font-weight: ${({ real }) =>
+		real ? theme.fontWeights.Bold : theme.fontWeights.Normal};
+	color: ${({ real }) => (real ? theme.colors.orange : theme.colors.black)};
 `;
diff --git a/src/pages/FriendPage.tsx b/src/pages/FriendPage.tsx
@@ -5,6 +5,7 @@ import NavBar from '~/components/navBar/NavBar';
 import theme from '../styles/theme';
 import Title from '../components/Title';
 import { useNavigate } from 'react-router-dom';
+import SmallButton from '~/components/SmallButton';
 
 interface Friend {
 	id: number;
@@ -119,21 +120,21 @@ const FriendPage = () => {
 								함께 저장한 식당 {newFriendRequest.common_restaurant_count}개
 							</Space>
 							<AddButton>
-								<FriendButton
+								<SmallButton
 									data-action="accept"
 									value={newFriendRequest.id}
 									onClick={handleClick}
 								>
 									Accept
-								</FriendButton>
-								<FriendButton
+								</SmallButton>
+								<SmallButton
 									decline
 									data-action="decline"
 									value={newFriendRequest.id}
 									onClick={handleClick}
 								>
 									Decline
-								</FriendButton>
+								</SmallButton>
 							</AddButton>
 						</FriendItem>
 					))}
@@ -174,13 +175,13 @@ const FriendPage = () => {
 							<Space restourant={true}>
 								함께 저장한 식당 {recommendfriend.common_restaurant_count}개
 							</Space>
-							<FriendButton
+							<SmallButton
 								data-action="send"
 								value={recommendfriend.id}
 								onClick={handleClick}
 							>
 								Add
-							</FriendButton>
+							</SmallButton>
 						</FriendItem>
 					))}
 				</FriendList>
@@ -200,9 +201,6 @@ const AddButton = styled.div`
 	display: flex;
 	flex-direction: column;
 `;
-interface FriendButtonProps {
-	decline?: boolean;
-}
 interface FriendItemProps {
 	friendrequest?: boolean;
 }
@@ -218,23 +216,6 @@ const Reliability = styled.p`
 	font-size: 10px;
 	margin-top: 2px;
 `;
-const FriendButton = styled.button<FriendButtonProps>`
-	background-color: ${({ decline }) =>
-		decline ? theme.colors.gray : theme.colors.orange};
-	color: ${theme.colors.white};
-	box-sizing: border-box;
-	width: 50px;
-	height: 20px;
-	font-size: 10px;
-	border-radius: 8px;
-	margin: 2px;
-	border: none;
-	&:hover,
-	&:active {
-		background-color: ${theme.colors.grayorange};
-		color: ${theme.colors.white};
-	}
-`;
 
 const FriendList = styled.ul`
 	list-style-type: none;

diff --git a/src/pages/ProfileEditPage.tsx b/src/pages/ProfileEditPage.tsx
@@ -23,6 +23,7 @@ const ProfileEditPage = () => {
 		async function fetchData() {
 			const response = await axios.get('/profile', { withCredentials: true });
 			setNewName(response.data.name);
+			setNewProfileImage(response.data.profile_img);
 		}
 		fetchData();
 	}, []);

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -92,9 +92,10 @@ const Container = styled.div`
 const ProfileImage = styled.img`
 	border-radius: 100%;
 	box-sizing: border-box;
-	width: 150px;
-	height: 150px;
+	width: 160px;
+	height: 160px;
 	margin: 10px;
+	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 `;
 
 interface SpaceProps {