Merge pull request #3 from TOY-2-9/T29-17--chat/socket

styled component, layout, api 적용
KDT1-FE · Nov 7, 2023 · 4be4604 · 4be4604
2 parents 4ded7e7 + 3f24d34
commit 4be4604
Show file tree

Hide file tree

Showing 11 changed files with 338 additions and 477 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
+const nextConfig = {
+    reactStrictMode: true,
+    swcMinify: true,
+    compiler: {
+        styledComponents: true,
+    },
+};
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -9,16 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^2.1.4",
+    "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.1"
+    "socket.io-client": "^4.7.2",
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.0.1"
+    "eslint-config-next": "14.0.1",
+    "typescript": "^5"
   }
 }
diff --git a/src/app/chating/page.tsx b/src/app/chating/page.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import io from 'socket.io-client';
+
+export default function Chating() {
+    useEffect(() => {
+        socketInitilizer();
+    }, []);
+
+    async function socketInitilizer() {
+        const socket = await io('https://fastcampus-chat.net', {
+            path: '/chat',
+            query: {
+                chatId: '7aaf3ab8-d85d-4441-b770-dcaac583eba6',
+            },
+            extraHeaders: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+            },
+            transports: ['websocket'],
+        });
+    }
+
+    const SignUp = async () => {
+        const response = await fetch('https://fastcampus-chat.net/signup', {
+            method: 'POST',
+            body: JSON.stringify({
+                id: 'test09',
+                password: '12345',
+                name: 'test09',
+                picture: 'https://avatars.githubusercontent.com/u/66263916?v=4',
+            }),
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const LogIn = async () => {
+        const response = await fetch('https://fastcampus-chat.net/login', {
+            method: 'POST',
+            body: JSON.stringify({
+                id: 'test10',
+                password: '12345',
+            }),
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const Users = async () => {
+        const response = await fetch('https://fastcampus-chat.net/users', {
+            method: 'GET',
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QwOSIsImlhdCI6MTY5OTI4NDM2NywiZXhwIjoxNjk5ODg5MTY3fQ.NhoDlvb724HSCCnPg2vGIlv_BeNeOlsiv67C17UvZSE',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const CreateChat = async () => {
+        const response = await fetch('https://fastcampus-chat.net/chat', {
+            method: 'POST',
+            body: JSON.stringify({
+                name: 'testChat09',
+                users: [
+                    {
+                        id: 'test09',
+                        name: 'test09',
+                        picture: 'https://gravatar.com/avatar/cba9a2c84d258bba340f336e2cd538ba?s=200&d=retro',
+                    },
+
+                    {
+                        id: 'test10',
+                        name: 'test10',
+                        picture: 'https://gravatar.com/avatar/cba9a2c84d258bba340f336e2cd538ba?s=200&d=retro',
+                    },
+                ],
+                isPrivate: false,
+            }),
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QwOSIsImlhdCI6MTY5OTI4NDM2NywiZXhwIjoxNjk5ODg5MTY3fQ.NhoDlvb724HSCCnPg2vGIlv_BeNeOlsiv67C17UvZSE',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const ChatAll = async () => {
+        const response = await fetch('https://fastcampus-chat.net/chat/all', {
+            method: 'GET',
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QwOSIsImlhdCI6MTY5OTI4NDM2NywiZXhwIjoxNjk5ODg5MTY3fQ.NhoDlvb724HSCCnPg2vGIlv_BeNeOlsiv67C17UvZSE',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const MyChat = async () => {
+        const response = await fetch('https://fastcampus-chat.net/chat', {
+            method: 'GET',
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QwOSIsImlhdCI6MTY5OTI4NDM2NywiZXhwIjoxNjk5ODg5MTY3fQ.NhoDlvb724HSCCnPg2vGIlv_BeNeOlsiv67C17UvZSE',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const ParticipateChat = async () => {
+        const response = await fetch('https://fastcampus-chat.net/chat/participate', {
+            method: 'PATCH',
+            body: JSON.stringify({
+                chatId: '7aaf3ab8-d85d-4441-b770-dcaac583eba6',
+            }),
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QxMCIsImlhdCI6MTY5OTI4NDYzNSwiZXhwIjoxNjk5ODg5NDM1fQ.DWlYHCXfZd8UEBP2z-Xqlvzvx1cjYYlW_TAcPyPjfAA',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    const LeaveChat = async () => {
+        const response = await fetch('https://fastcampus-chat.net/chat/leave', {
+            method: 'PATCH',
+            body: JSON.stringify({
+                chatId: '7aaf3ab8-d85d-4441-b770-dcaac583eba6',
+            }),
+            headers: {
+                'content-type': 'application/json',
+                serverId: '53b9f98a',
+                Authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjUzYjlmOThhOnRlc3QxMCIsImlhdCI6MTY5OTI4NDYzNSwiZXhwIjoxNjk5ODg5NDM1fQ.DWlYHCXfZd8UEBP2z-Xqlvzvx1cjYYlW_TAcPyPjfAA',
+            },
+        });
+        const data = await response.json();
+        console.log(data);
+    };
+
+    return (
+        <main>
+            <div>채팅 페이지</div>
+            <button>회원가입</button>
+            <button onClick={LogIn}>로그인</button>
+            <button onClick={Users}>모든 유저 조회</button>
+            <button onClick={CreateChat}>채팅 생성</button>
+            <button onClick={ChatAll}>모든 채팅 조회</button>
+            <button onClick={MyChat}>나의 채팅 조회</button>
+            <button onClick={ParticipateChat}>채팅 참여하기</button>
+            <button onClick={LeaveChat}>채팅 나가기</button>
+        </main>
+    );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,37 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+'use client';
 
-const inter = Inter({ subsets: ['latin'] })
+import styled from 'styled-components';
+import StyledComponentsRegistry from '../lib/registry';
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <StyledComponentsRegistry>
+                <Body>
+                    <Container>{children}</Container>
+                </Body>
+            </StyledComponentsRegistry>
+        </html>
+    );
 }
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
+const Body = styled.body`
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #efefef;
+    * {
+        box-sizing: border-box;
+    }
+`;
+
+const Container = styled.div`
+    width: 100%;
+    max-width: 800px;
+    height: 100%;
+
+    margin: 0 auto;
+    position: relative;
+
+    background-color: #fff;
+`;