Merge branch 'develop' into feature/connect-sign-up-api

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",

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%;
+    }
+  }
+}

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<UserType>[];
+};
+
+const FollowingList = ({ followingUsers }: FollowingListProps) => {
+  const router = useRouter();
+
+  const moveUserProfilePage = (userId: number) => {
+    router.push(`/profile/${userId}`);
+  };
+
+  return (
+    <ul className={styles.following_ul}>
+      {followingUsers.length > 0 &&
+        followingUsers.map((user) => {
+          return (
+            <li
+              className={styles.following_li}
+              onClick={() => moveUserProfilePage(user.userId!)}
+              aria-hidden="true"
+            >
+              {user.profileUrl === '' && (
+                <Image
+                  className={styles.user_img}
+                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s"
+                  alt=""
+                  width="50"
+                  height="50"
+                />
+              )}
+              <Image
+                className={styles.user_img}
+                src={user.profileUrl!}
+                alt=""
+                width="50"
+                height="50"
+              />
+              <Typo
+                as="div"
+                fontSize="body-14"
+                textAlign="center"
+                marginTop="6px"
+              >
+                {user.userName}
+              </Typo>
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default FollowingList;

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 (
     <div className={styles.container}>
+      <FollowingList followingUsers={MOCK_DATA_OF_FOLLOWING_DATA} />
       <Feed feed={MOCK_BASIC_FEED_DATA} />
       <Feed feed={MOCK_DEBATE_FEED_DATA} />
       <ReadOnlyCommonFeed commonFeedData={MOCK_DATA_OF_COMMON_FEED} />

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;

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 (
+        <div>
+          {fallback}
+          <button onClick={this.resetError}>Retry</button>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

src/components/common/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';