Merge pull request #33 from Leets-Official/feat-32-채팅api연결

#32 채팅api연결
Leets-Official · Nov 14, 2024 · f05d390 · f05d390
2 parents 863cb81 + 16ba4d3
commit f05d390
Show file tree

Hide file tree

Showing 66 changed files with 1,260 additions and 781 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,13 +12,19 @@
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
+    "@types/sockjs-client": "^1.5.4",
     "cookie": "^1.0.1",
     "dotenv": "^16.4.5",
     "lucide-react": "^0.454.0",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "sockjs-client": "^1.6.1",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/public/mock/profile10.png b/public/mock/profile10.png
diff --git a/public/mock/profile11.png b/public/mock/profile11.png
diff --git a/public/mock/profile12.png b/public/mock/profile12.png
diff --git a/public/mock/profile13.png b/public/mock/profile13.png
diff --git a/public/mock/profile14.png b/public/mock/profile14.png
diff --git a/public/mock/profile15.png b/public/mock/profile15.png
diff --git a/public/mock/profile16.png b/public/mock/profile16.png
diff --git a/public/mock/profile2.png b/public/mock/profile2.png
diff --git a/public/mock/profile4.png b/public/mock/profile4.png
diff --git a/public/mock/profile5.png b/public/mock/profile5.png
diff --git a/public/mock/profile6.png b/public/mock/profile6.png
diff --git a/public/mock/profile7.png b/public/mock/profile7.png
diff --git a/public/mock/profile8.png b/public/mock/profile8.png
diff --git a/public/mock/profile9.png b/public/mock/profile9.png
diff --git a/src/app/(route)/(auth)/welcome/page.tsx b/src/app/(route)/(auth)/welcome/page.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 const welcome = () => {
   return (
     <div className="flex justify-center items-center bg-white w-[480px]">
-      <WelcomeSignup nickname={'일단하드코딩'} />
+      <WelcomeSignup />
     </div>
   );
 };

diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
+import UserProvider from '../components/common/layouts/useProvider';
 import '../styles/globals.css';
 
 export const metadata: Metadata = {
@@ -20,8 +21,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ko" className={`${pretendard.variable} min-w-[500px] bg-main-4 font-pretendard`}>
-      <body className="w-full h-full flex-center">{children}</body>
+    <html lang="ko" className={`${pretendard.variable} min-w-[500px] bg-gray-100 font-pretendard`}>
+      <UserProvider>
+        <body className="w-full h-full flex-center">{children}</body>
+      </UserProvider>
     </html>
   );
 }
diff --git a/src/app/(route)/page.tsx b/src/app/(route)/page.tsx
@@ -3,7 +3,7 @@ import MainContainer from '../components/main/MainContainer';
 
 export default function mainPage() {
   return (
-    <div className="flex h-screen bg-white w-[480px] rounded-lg">
+    <div className="flex h-screen bg-white w-[480px] rounded-2xl shadow-xl">
       <SideBar />
       <MainContainer />
     </div>

diff --git a/src/app/(route)/post/[id]/page.tsx b/src/app/(route)/post/[id]/page.tsx
@@ -15,7 +15,7 @@ export default async function PostDetailPage({ params }: Props) {
       <SideBar />
       <div className="flex-1 flex flex-col h-screen gap-y-5 overflow-y-auto">
         <PostDetail postId={id} />
-        <CommentContainer />
+        <CommentContainer postId={id} />
       </div>
     </div>
   );

diff --git a/src/app/_types/chat.ts b/src/app/_types/chat.ts
@@ -11,3 +11,11 @@ interface ChatTypes {
   message: string;
   date: string;
 }
+
+interface Message {
+  id: number;
+  content: string;
+  senderTag: string;
+  receiverTag: string;
+  sentAt: string;
+}
diff --git a/src/app/_types/main.ts b/src/app/_types/main.ts
@@ -15,11 +15,19 @@ interface PostTypes {
   totalComment: number;
   files: string[];
 }
-export interface Follower {
+interface Follower {
   id: string;
   name: string;
   username: string;
   bio: string;
   isFollowing: boolean;
   profile: string;
-}
+}
+interface SearchUserTypes {
+  birthDate: string;
+  tag: string;
+  nickname: string;
+  introduction: string | null;
+  profilePicture: string | null;
+}
+
diff --git a/src/app/_types/post.ts b/src/app/_types/post.ts
@@ -23,7 +23,23 @@ interface PostDetailTypes {
   content: string;
   imageUrls: string[];
   parentPostId: number | null;
-  quotePost: number | null;
-  childPosts: string[];
+  quotePost: QuotePostTypes;
+  childPosts: PostDetailTypes[];
   createdAt: string;
 }
+
+interface UserTagTypes {
+  tag: string;
+}
+
+interface QuotePostTypes {
+  id: number;
+  authorNickname: string;
+  authorTag: string;
+  content: string;
+  imageUrls: string[];
+  parentPostId?: number | null;
+  quotePost?: QuotePostTypes;
+  childPosts?: PostDetailTypes[];
+  createdAt?: string;
+}
diff --git a/src/app/_types/socket.ts b/src/app/_types/socket.ts
@@ -0,0 +1,17 @@
+import { Server as HTTPServer } from 'http';
+import { NextApiResponse } from 'next';
+import { Server as SocketIOServer } from 'socket.io';
+
+export type NextApiResponseServerIO = NextApiResponse & {
+  socket: {
+    server: HTTPServer & {
+      io: SocketIOServer;
+    };
+  };
+};
+
+export interface Message {
+  user: string;
+  text: string;
+  timestamp: string;
+}
diff --git a/src/app/api/follow/route.ts b/src/app/api/follow/route.ts
@@ -0,0 +1,18 @@
+import { unFollowUser } from '@/app/service/deleteRequest';
+import { followUser } from '@/app/service/postRequest';
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const data = await req.json();
+
+  const response = await followUser(data, req);
+  return NextResponse.json(response);
+}
+
+export async function DELETE(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const tag = searchParams.get('tag') || '';
+
+  const response = await unFollowUser(tag, req);
+  return NextResponse.json(response);
+}
diff --git a/src/app/api/followApis/follower/route.ts b/src/app/api/followApis/follower/route.ts
@@ -1,44 +1,12 @@
-const SERVER_URL = process.env.NEXT_PUBLIC_SERVER;
+import { getFollowers } from '@/app/service/getRequest';
+import { NextResponse } from 'next/server';
 
-import { Follower } from "@/app/_types/main";
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
 
-interface APIResponse {
-  success: boolean;
-  data: {
-    userId: string;
-    nickname: string;
-    tag: string;
-    profile: string;
-    bio?: string;
-  }[];
-  errorCode: number | null;
-  errorMessage: string | null;
-}
+  const tag = searchParams.get('tag') || '';
+
+  const response = await getFollowers(req, tag);
 
-export const fetchFollowers = async (tag: string): Promise<Follower[]> => {
-  try {
-    const response = await fetch(`${SERVER_URL}/api/follows/followers?tag=${tag}`);
-
-    if (!response.ok) {
-      throw new Error('API 호출에 실패했습니다');
-    }
-
-    const data: APIResponse = await response.json();
-
-    if (!data.success) {
-      throw new Error(data.errorMessage || '팔로워 목록을 불러오는데 실패했습니다');
-    }
-
-    return data.data.map(item => ({
-      id: item.userId,
-      name: item.nickname,
-      username: `@${item.tag}`,
-      bio: item.bio || '',
-      profile: item.profile,
-      isFollowing: false,
-    }));
-  } catch (error) {
-    console.error('Fetch error:', error);
-    throw error;
-  }
-};
+  return NextResponse.json(response);
+}
diff --git a/src/app/api/followApis/following/route.ts b/src/app/api/followApis/following/route.ts
@@ -1,76 +1,12 @@
-const SERVER_URL = process.env.NEXT_PUBLIC_SERVER ;
+import { getFollowing } from '@/app/service/getRequest';
+import { NextResponse } from 'next/server';
 
-export interface Following {
-  id: string;
-  name: string;
-  username: string;
-  bio: string;
-  profile: string;
-}
-
-interface APIResponse {
-  success: boolean;
-  data: {
-    id: number;
-    tag: string;
-    nickname: string;
-    profile?: string;
-    bio?: string;
-  }[];
-  errorCode: number | null;
-  errorMessage: string | null;
-}
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
 
-export const fetchFollowings = async (tag: string): Promise<Following[]> => {
-  try {
-    const response = await fetch(`${SERVER_URL}/api/follows/followings?tag=${tag}`);
-
-    if (!response.ok) {
-      throw new Error('API 호출에 실패했습니다');
-    }
-
-    const data: APIResponse = await response.json();
-
-    if (!data.success) {
-      throw new Error(data.errorMessage || '팔로잉 목록을 불러오는데 실패했습니다');
-    }
-
-    return data.data.map(item => ({
-      id: item.id.toString(),
-      name: item.nickname,
-      username: `@${item.tag}`,
-      bio: item.bio || '',
-      profile: item.profile || '',
-    }));
-  } catch (error) {
-    console.error('Fetch error:', error);
-    throw error;
-  }
-};
+  const tag = searchParams.get('tag') || '';
 
-export const unfollowUser = async (userId: string): Promise<boolean> => {
-  try {
-    const response = await fetch(`${SERVER_URL}/api/follows/unfollow`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ userId }),
-    });
+  const response = await getFollowing(req, tag);
 
-    if (!response.ok) {
-      throw new Error('API 호출에 실패했습니다');
-    }
-
-    const data = await response.json();
-
-    if (!data.success) {
-      throw new Error(data.errorMessage || '언팔로우에 실패했습니다');
-    }
-
-    return true;
-  } catch (error) {
-    console.error('Unfollow error:', error);
-    throw error;
-  }
-};
+  return NextResponse.json(response);
+}
diff --git a/src/app/api/logout/route.ts b/src/app/api/logout/route.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(req: Request) {
+  const response = NextResponse.json({ message: '로그아웃 완료, 쿠키 삭제됨' });
+
+  // 각각의 쿠키를 개별 Set-Cookie 헤더로 설정
+  response.headers.append(
+    'Set-Cookie',
+    'refreshToken=; path=/; domain=localhost; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax; HttpOnly',
+  );
+
+  response.headers.append(
+    'Set-Cookie',
+    'accessToken=; path=/; domain=localhost; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax; HttpOnly',
+  );
+
+  return response;
+}
diff --git a/src/app/api/post/route.ts b/src/app/api/post/route.ts
@@ -7,7 +7,7 @@ import { NextResponse } from 'next/server';
 export async function POST(req: Request) {
   const formData = await req.formData();
 
-  const response = await createPost(formData, 'callmeZ', req);
+  const response = await createPost(formData, req);
   return NextResponse.json(response);
 }
 

diff --git a/src/app/api/search/me/route.ts b/src/app/api/search/me/route.ts
@@ -0,0 +1,12 @@
+import { getMember } from '@/app/service/getRequest';
+import { NextResponse } from 'next/server';
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+
+  const tag = searchParams.get('tag') || '';
+
+  const response = await getMember(req, tag);
+
+  return NextResponse.json(response);
+}
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
@@ -0,0 +1,12 @@
+import { getSearchMember } from '@/app/service/getRequest';
+import { NextResponse } from 'next/server';
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+
+  const tag = searchParams.get('tag') || '';
+
+  const response = await getSearchMember(req, tag);
+
+  return NextResponse.json(response);
+}
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
@@ -0,0 +1,7 @@
+import { getTag } from '@/app/service/getRequest';
+import { NextResponse } from 'next/server';
+
+export async function GET(req: Request) {
+  const response = await getTag(req);
+  return NextResponse.json(response);
+}