diff --git a/GapLog-Client b/GapLog-Client
new file mode 160000
index 0000000..c003b4a
--- /dev/null
+++ b/GapLog-Client
@@ -0,0 +1 @@
+Subproject commit c003b4ad2b8c7de9addab4aeb160783ba7aedd8e
diff --git a/src/components/bars/MyPageBar.jsx b/src/components/bars/MyPageBar.jsx
index 977e61d..81d1c6a 100644
--- a/src/components/bars/MyPageBar.jsx
+++ b/src/components/bars/MyPageBar.jsx
@@ -39,11 +39,11 @@ function MyPageBar() {
diff --git a/src/components/bars/TitleBar.jsx b/src/components/bars/TitleBar.jsx
index 57d178c..022e6cd 100644
--- a/src/components/bars/TitleBar.jsx
+++ b/src/components/bars/TitleBar.jsx
@@ -80,7 +80,7 @@ const MenuItem = styled.div`
`;
function TitleBar(props) {
- const { user, isLoggedIn, setUser } = useUser();
+ const { user, isLoggedIn, setUser, setIsLoggedIn } = useUser();
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const [isDMModalOpen, setIsDMModalOpen] = useState(false);
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); // 로그인 모달 상태
@@ -114,7 +114,7 @@ function TitleBar(props) {
// 사용자 상태를 null로 설정
setUser(null);
-
+ setIsLoggedIn(false);
// 홈 페이지로 리디렉션
nav('/');
} catch (error) {
@@ -140,6 +140,9 @@ function TitleBar(props) {
{isProfileMenuOpen && (
+
diff --git a/src/components/comment/CommentItem.jsx b/src/components/comment/CommentItem.jsx
index 3ff1289..0c8cf0d 100644
--- a/src/components/comment/CommentItem.jsx
+++ b/src/components/comment/CommentItem.jsx
@@ -75,6 +75,35 @@ const HideButton = styled.button`
`;
function CommentItem({ comment, hasReplies, onToggleHide }) {
+ const [isLiked, setIsLiked] = useState(comment.isLiked);
+
+ const toggleLike = async () => {
+ try {
+ const accessToken = localStorage.getItem('accessToken');
+ const response = await fetch(
+ `http://3.37.43.129/api/comments/${comment.id}/like`,
+ {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${accessToken}`,
+ },
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error('Failed to toggle like');
+ }
+
+ const data = await response.json(); // API로부터 반환된 데이터
+
+ // 상태 업데이트
+ setIsLiked(data.isLiked); // boolean 값 업데이트
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
return (
@@ -87,7 +116,12 @@ function CommentItem({ comment, hasReplies, onToggleHide }) {
{comment.content}
-
+
+
+
{hasReplies && (
{comment.isHidden ? '댓글 보기' : '댓글 숨기기'}
diff --git a/src/components/user/FollowItem.jsx b/src/components/user/FollowItem.jsx
index 6aac7db..fae7c2a 100644
--- a/src/components/user/FollowItem.jsx
+++ b/src/components/user/FollowItem.jsx
@@ -52,17 +52,39 @@ const UserBio = styled.div`
margin-right: 830px;
`;
-function FollowItem() {
+function FollowItem({ props }) {
+ const { followeeId } = props;
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchUser = async () => {
+ const response = await fetch(
+ `http://3.37.43.129/api/users/${followeeId}`
+ );
+ if (response.ok) {
+ const data = await response.json();
+ setUser(data);
+ }
+ setLoading(false);
+ };
+
+ fetchUser();
+ }, [followeeId]);
+
+ if (loading) return Loading...
;
+ if (!user) return null;
+
return (
- ![profile]()
+ 
- 나는다연
- @hongdari
+ {user.nickName}
+ {user.userId}
- 안녕하시소
+ {user.introduce}
);
diff --git a/src/components/user/FollowerList.jsx b/src/components/user/FollowerList.jsx
index a6bcd34..90fd83b 100644
--- a/src/components/user/FollowerList.jsx
+++ b/src/components/user/FollowerList.jsx
@@ -1 +1,56 @@
-//mypage에서 보여질 user의 follower list 컴포넌트
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import FollowItem from './FollowItem';
+
+// Post Item을 그리드 형식으로 출력
+const Container = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+const Wrapper = styled.div`
+ display: grid;
+ grid-template-rows: repeat(auto-fill, minmax(60px, 1fr)); // 세로로 나열
+ gap: 16px;
+ justify-items: center;
+ height: auto; // 콘텐츠에 맞게 높이 자동 조정
+`;
+
+function FollowerList({ props }) {
+ const { userId } = props;
+ const [follower, setFollower] = useState([]);
+
+ useEffect(() => {
+ const fetchFollower = async () => {
+ try {
+ const response = await fetch(
+ `http://3.37.43.129/api/user/${userId}/followers`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+ const data = await response.json();
+ setFollower(data);
+ } catch (error) {
+ console.error('Error fetching follower list:', error);
+ }
+ };
+
+ fetchFollower();
+ }, []);
+
+ return (
+
+
+ {follower.map((user) => (
+
+ ))}
+
+
+ );
+}
+
+export default FollowerList;
diff --git a/src/components/user/FollowingList.jsx b/src/components/user/FollowingList.jsx
index 097c2d3..51fa5fd 100644
--- a/src/components/user/FollowingList.jsx
+++ b/src/components/user/FollowingList.jsx
@@ -1 +1,56 @@
//mypage에서 보여질 user의 following list 컴포넌트
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import FollowItem from './FollowItem';
+
+const Container = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+const Wrapper = styled.div`
+ display: grid;
+ grid-template-rows: repeat(auto-fill, minmax(60px, 1fr));
+ gap: 16px;
+ justify-items: center;
+ height: auto;
+`;
+
+function FollowingList({ props }) {
+ const { userId } = props;
+ const [following, setFollowing] = useState([]);
+
+ useEffect(() => {
+ const fetchFollowing = async () => {
+ try {
+ const response = await fetch(
+ `http://3.37.43.129/api/user/${userId}/followees`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+ const data = await response.json();
+ setFollowing(data);
+ } catch (error) {
+ console.error('Error fetching following list:', error);
+ }
+ };
+
+ fetchFollowing();
+ }, []);
+
+ return (
+
+
+ {following.map((user) => (
+
+ ))}
+
+
+ );
+}
+
+export default FollowingList;
diff --git a/src/components/user/Wandubat.jsx b/src/components/user/Wandubat.jsx
index d5b3981..9c467ea 100644
--- a/src/components/user/Wandubat.jsx
+++ b/src/components/user/Wandubat.jsx
@@ -141,12 +141,14 @@ function Wandubat(props) {
useEffect(() => {
const fetchWandu = async () => {
try {
+ const accessToken = localStorage.getItem('accessToken');
const response = await fetch(
- `http://3.37.43.129/api/user/${userId}/seriousness/seriousness-field`,
+ `http://3.37.43.129/api/user/seriousness/seriousness-field`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${accessToken}`,
},
}
);
diff --git a/src/pages/FollowListPage.jsx b/src/pages/FollowListPage.jsx
index 344cece..3702e3f 100644
--- a/src/pages/FollowListPage.jsx
+++ b/src/pages/FollowListPage.jsx
@@ -2,7 +2,8 @@
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import TitleBar from '../components/bars/TitleBar';
-import FollowItem from '../components/user/FollowItem';
+import FollowingList from '../components/user/FollowingList';
+import FollowerList from '../components/user/FollowerList';
const Container = styled.div`
width: calc(100% - 32px);
@@ -56,22 +57,42 @@ const TitleWrapper = styled.div`
}
`;
-function FollowListPage() {
- return (
-
-
-
-
- ![profile]()
-
- jinji123의 팔로워
-
-
- 20명의 팔로워
-
-
-
- );
+function FollowListPage({ props }) {
+ const { userId, title } = props;
+
+ if (title == 'following') {
+ return (
+
+
+
+
+ ![profile]()
+
+ jinji123의 팔로워
+
+
+ 20명의 팔로워
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+ ![profile]()
+
+ jinji123의 팔로워
+
+
+ 20명의 팔로워
+
+
+
+ );
+ }
}
export default FollowListPage;
diff --git a/src/pages/LoginAlertPage.jsx b/src/pages/LoginAlertPage.jsx
index 094c5d3..03313c4 100644
--- a/src/pages/LoginAlertPage.jsx
+++ b/src/pages/LoginAlertPage.jsx
@@ -87,14 +87,31 @@ const LoginAlertPage = ({ isOpen, onClose }) => {
}
const data = await response.json();
+ console.log(data);
const token = data.accessToken;
// JWT 토큰을 로컬 스토리지에 저장
localStorage.setItem('accessToken', token);
- setIsLoggedIn(true);
+ const userResponse = await fetch('http://3.37.43.129/api/user', {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${token}`, // access token을 Authorization 헤더에 추가
+ },
+ });
+
+ if (!userResponse.ok) {
+ throw new Error('Failed to retrieve user information');
+ }
+
+ const userData = await userResponse.json();
+ console.log(userData);
+
+ // 사용자 정보를 상태에 저장
+ setUser(userData);
+ setIsLoggedIn(true);
// 사용자 대시보드로 리디렉션
- navigate('/mypage');
+ navigate('/');
} catch (error) {
setError(error.message);
}
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index b61769b..5b8ee5f 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -19,7 +19,6 @@ const ContentWrapper = styled.div`
margin-top: 20px;
`;
-//mainbar(gaplog, 팔로잉, 인기글) layout -> 추후에 mainbar로 옮겨갈지 고민..
const MainBarWrapper = styled.div`
top: 0;
width: calc(100% - 32px);
@@ -28,7 +27,8 @@ const MainBarWrapper = styled.div`
background-color: white;
`;
-function MainPage() {
+function MainPage(props) {
+ const { posttype } = props;
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -36,14 +36,17 @@ function MainPage() {
useEffect(() => {
const fetchPosts = async () => {
try {
- const response = await fetch('http://3.37.43.129/api/posts/recent', {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- },
- });
+ const response = await fetch(
+ `http://3.37.43.129/api/posts/${posttype}`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
if (!response.ok) {
- throw new Error('Failed to fetch user info');
+ throw new Error('Failed to fetch info');
}
const data = await response.json();
console.log('Posts Data: ', data);
@@ -56,7 +59,7 @@ function MainPage() {
};
fetchPosts();
- }, []);
+ }, [posttype]);
return (
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index 4eec066..2d9a063 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -211,7 +211,8 @@ const CategoryWrapper = styled.div`
margin-right: 174px;
`;
-function MyPage() {
+function MyPage(props) {
+ const { nav } = props;
const { user } = useUser();
const [tier, setTier] = useState('');
const [posts, setPosts] = useState([]);
@@ -219,8 +220,16 @@ function MyPage() {
useEffect(() => {
const fetchTiers = async () => {
try {
+ const accessToken = localStorage.getItem('accessToken');
const response = await fetch(
- `http://3.37.43.129/api/user/${user.userId}/seriousness`
+ `http://3.37.43.129/api/user/seriousness`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${accessToken}`,
+ },
+ }
);
if (!response.ok) {
throw new Error('Failed to fetch user info');
@@ -234,12 +243,39 @@ function MyPage() {
};
const fetchUserPosts = async () => {
+ try {
+ const accessToken = localStorage.getItem('accessToken');
+ const response = await fetch(`http://3.37.43.129/api/user/posts`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${accessToken}`,
+ },
+ });
+ if (!response.ok) {
+ throw new Error('Failed to fetch user posts');
+ }
+ const data = await response.json();
+ console.log(data);
+ setPosts(data);
+ } catch (err) {
+ console.error(err);
+ }
+ };
+
+ const fetchScrapPosts = async () => {
try {
const response = await fetch(
- `http://3.37.43.129/api/user/${user.userId}/posts`
+ `http://3.37.43.129/api/user/${user.userId}/scraps`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
);
if (!response.ok) {
- throw new Error('Failed to fetch user posts');
+ throw new Error('Failed to fetch user scraps');
}
const data = await response.json();
console.log(data);
@@ -249,18 +285,98 @@ function MyPage() {
}
};
+ const fetchComments = async () => {
+ try {
+ const accessToken = localStorage.getItem('accessToken');
+ const response = await fetch(`http://3.37.43.129/api/user/comments`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${accessToken}`,
+ },
+ });
+ if (!response.ok) {
+ throw new Error('Failed to fetch user comments');
+ }
+ const data = await response.json();
+ console.log(data);
+ } catch (err) {
+ console.error(err);
+ }
+ };
+
if (user) {
fetchTiers();
- fetchUserPosts(); // 사용자 정보가 있을 때만 글 목록을 가져옴
+ fetchUserPosts();
+ fetchScrapPosts();
+ fetchComments();
}
}, [user]);
+ const renderContent = () => {
+ switch (nav) {
+ case 'post':
+ return (
+
+
+
+
+
+
+
+
+ );
+ case 'comment':
+ return ;
+ case 'scrap':
+ return (
+
+
+
+
+
+
+
+
+ );
+ default:
+ return (
+
+
+ {user && (
+ <>
+
+ {TierNames[tier.tier] || 'Unknown Tier'}
+
+
+ {tier.tier}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+ }
+ };
+
return (
- {/* data에서 user의 배경이미지와 연결 */}
@@ -284,33 +400,7 @@ function MyPage() {
-
-
- {user && (
- <>
-
- {TierNames[tier.tier] || 'Unknown Tier'}
-
-
- {tier.tier}
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
+ {renderContent()}
);
}
diff --git a/src/routes/Router.jsx b/src/routes/Router.jsx
index b5152e4..49a58ed 100644
--- a/src/routes/Router.jsx
+++ b/src/routes/Router.jsx
@@ -10,9 +10,11 @@ function Router() {
return (
- } />
- {/* test: /mypage로 임시 url 설정 */}
- } />
+ } />
+ } />
+ } />
+ } />
+ } />
}
@@ -21,8 +23,8 @@ function Router() {
path="/mypage/following"
element={}
/>
- } />
- } />
+ } />
+ } />
} />
} />
diff --git a/src/user.json b/src/user.json
deleted file mode 100644
index 73d4a30..0000000
--- a/src/user.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "user": {
- "id": "jinji123",
- "bio": "안녕하시소",
- "tier": 1,
- "score": 75,
- "follower": 20,
- "following": 35,
- "profile": "https://example.com/path/to/profile.png",
- "background": "https://example.com/path/to/background.png"
- }
-}