diff --git a/package-lock.json b/package-lock.json index c68cde0..84d7f0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,8 @@ "name": "prostargram-frontend-next", "version": "0.1.0", "dependencies": { - "@tanstack/react-query": "^5.59.15", "axios": "^1.7.7", + "@tanstack/react-query": "^5.59.15", "clsx": "^2.1.1", "next": "14.2.3", "react": "^18", @@ -21,6 +21,7 @@ "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.5", "@testing-library/user-event": "^14.5.2", + "@types/axios": "^0.14.4", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -3151,6 +3152,16 @@ "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true }, + "node_modules/@types/axios": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.4.tgz", + "integrity": "sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==", + "deprecated": "This is a stub types definition. axios provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "axios": "*" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", diff --git a/package.json b/package.json index 7796157..bbd8cdf 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.5", "@testing-library/user-event": "^14.5.2", + "@types/axios": "^0.14.4", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/(MainLayout)/components/FollowingList/FollowingList.module.scss b/src/app/(MainLayout)/components/FollowingList/FollowingList.module.scss new file mode 100644 index 0000000..99986d5 --- /dev/null +++ b/src/app/(MainLayout)/components/FollowingList/FollowingList.module.scss @@ -0,0 +1,18 @@ +@use '../../../../styles/helpers/index' as *; + +.following_ul { + @include flex-start-center; + width: 100%; + gap: 30px; + overflow-x: auto; + + .following_li { + @include flex-column; + justify-content: center; + cursor: pointer; + + .user_img { + border-radius: 50%; + } + } +} diff --git a/src/app/(MainLayout)/components/FollowingList/FollowingList.tsx b/src/app/(MainLayout)/components/FollowingList/FollowingList.tsx new file mode 100644 index 0000000..5d39916 --- /dev/null +++ b/src/app/(MainLayout)/components/FollowingList/FollowingList.tsx @@ -0,0 +1,61 @@ +'use client'; + +import { useRouter } from 'next/navigation'; +import Image from 'next/image'; +import Typo from '@/components/common/Typo'; +import { UserType } from '@/app/my/types/my'; +import styles from './FollowingList.module.scss'; + +type FollowingListProps = { + followingUsers: Partial[]; +}; + +const FollowingList = ({ followingUsers }: FollowingListProps) => { + const router = useRouter(); + + const moveUserProfilePage = (userId: number) => { + router.push(`/profile/${userId}`); + }; + + return ( + + ); +}; + +export default FollowingList; diff --git a/src/app/(MainLayout)/page.tsx b/src/app/(MainLayout)/page.tsx index d67702d..0faca0f 100644 --- a/src/app/(MainLayout)/page.tsx +++ b/src/app/(MainLayout)/page.tsx @@ -3,6 +3,7 @@ import ReadOnlyDebateFeed from './components/ReadOnlyDebateFeed'; import styles from './page.module.scss'; import Feed from './components/Feed/Feed'; +import FollowingList from './components/FollowingList/FollowingList'; const MOCK_BASIC_FEED_DATA = { post: { @@ -118,9 +119,67 @@ const MOCK_DATA_OF_DEBATE_FEED = { }, }; +const MOCK_DATA_OF_FOLLOWING_DATA = [ + { + userId: 1, + userName: '정민욱', + profileImgUrl: 'https://profileImg1.url', + departmentName: '네이버', + }, + { + userId: 2, + userName: '제이슨', + profileImgUrl: 'https://profileImg2.url', + departmentName: '카카오', + }, + { + userId: 3, + userName: '진성진', + profileImgUrl: 'https://profileImg3.url', + departmentName: '우아한형제들', + }, + { + userId: 1, + userName: '정민욱', + profileImgUrl: 'https://profileImg1.url', + departmentName: '네이버', + }, + { + userId: 2, + userName: '제이슨', + profileImgUrl: 'https://profileImg2.url', + departmentName: '카카오', + }, + { + userId: 3, + userName: '진성진', + profileImgUrl: 'https://profileImg3.url', + departmentName: '우아한형제들', + }, + { + userId: 1, + userName: '정민욱', + profileImgUrl: 'https://profileImg1.url', + departmentName: '네이버', + }, + { + userId: 2, + userName: '제이슨', + profileImgUrl: 'https://profileImg2.url', + departmentName: '카카오', + }, + { + userId: 3, + userName: '진성진', + profileImgUrl: 'https://profileImg3.url', + departmentName: '우아한형제들', + }, +]; + const MainPage = () => { return (
+ diff --git a/src/app/my/types/my.ts b/src/app/my/types/my.ts index a92a151..10c64cf 100644 --- a/src/app/my/types/my.ts +++ b/src/app/my/types/my.ts @@ -1,6 +1,8 @@ interface UserType { + userId: number; profileUrl: string; nickname: string; + userName: string; currentState: string; description: string; followers: number; diff --git a/src/components/common/ErrorBoundary/ErrorBoundary.tsx b/src/components/common/ErrorBoundary/ErrorBoundary.tsx new file mode 100644 index 0000000..d1ac946 --- /dev/null +++ b/src/components/common/ErrorBoundary/ErrorBoundary.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +interface ErrorBoundaryProps { + fallback: React.ReactNode; + children: React.ReactNode; +} + +interface ErrorBoundaryState { + hasError: boolean; +} + +class ErrorBoundary extends React.Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError() { + console.log('a'); + return { hasError: true }; + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { + console.log('a'); + console.error('Error caught by componentDidCatch', error, errorInfo); + } + + resetError = () => { + this.setState({ hasError: false }); + }; + + render() { + const { hasError } = this.state; + const { fallback, children } = this.props; + + if (hasError) { + return ( +
+ {fallback} + +
+ ); + } + + return children; + } +} + +export default ErrorBoundary; diff --git a/src/components/common/ErrorBoundary/index.ts b/src/components/common/ErrorBoundary/index.ts new file mode 100644 index 0000000..257f6a2 --- /dev/null +++ b/src/components/common/ErrorBoundary/index.ts @@ -0,0 +1 @@ +export { default } from './ErrorBoundary';