From c28e4a8ff4f7291ccb63127b77e3cc572da0adc1 Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Mon, 6 Nov 2023 22:43:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Env:=20styled-component=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98=20=EB=B0=8F=20Layout=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 4 ++ next.config.js | 11 +++-- package.json | 8 ++-- src/app/layout.tsx | 35 ++++++++-------- src/app/page.tsx | 98 +++----------------------------------------- src/lib/registry.tsx | 21 ++++++++++ 6 files changed, 60 insertions(+), 117 deletions(-) create mode 100644 .babelrc create mode 100644 src/lib/registry.tsx diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..9555ba35 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [["styled-components", { "ssr": true }]] +} diff --git a/next.config.js b/next.config.js index 767719fc..7ea6d6f2 100644 --- 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 index 0da5b691..7341c30f 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,18 @@ "lint": "next lint" }, "dependencies": { + "babel-plugin-styled-components": "^2.1.4", + "next": "14.0.1", "react": "^18", "react-dom": "^18", - "next": "14.0.1" + "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/layout.tsx b/src/app/layout.tsx index 40e027fb..815c2716 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,22 +1,21 @@ -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 ( + + + {children} + + + ); } -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - {children} - - ) -} +const Body = styled.body` + margin: 0; + * { + box-sizing: border-box; + } +`; diff --git a/src/app/page.tsx b/src/app/page.tsx index 9ddf9b95..5a7362d8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,95 +1,7 @@ -import Image from 'next/image' -import styles from './page.module.css' - export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs -> -

-

Find in-depth information about Next.js features and API.

- - - -

- Learn -> -

-

Learn about Next.js in an interactive course with quizzes!

- - - -

- Templates -> -

-

Explore the Next.js 13 playground.

- - - -

- Deploy -> -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) + return ( +
+
TOY2-9-chat
+
+ ); } diff --git a/src/lib/registry.tsx b/src/lib/registry.tsx new file mode 100644 index 00000000..4a687aa3 --- /dev/null +++ b/src/lib/registry.tsx @@ -0,0 +1,21 @@ +'use client'; + +import React, { useState } from 'react'; +import { useServerInsertedHTML } from 'next/navigation'; +import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; + +export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) { + // Only create stylesheet once with lazy initial state + // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state + const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement(); + styledComponentsStyleSheet.instance.clearTag(); + return <>{styles}; + }); + + if (typeof window !== 'undefined') return <>{children}; + + return {children}; +} From 6c9c2bc03524df416b9ddead71bb0ebd4fff3b01 Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Mon, 6 Nov 2023 23:29:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=ED=95=98=EB=8B=A8=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=EB=B0=94=20=EC=83=9D=EC=84=B1(=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=AF=B8=EC=A0=81=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 107 ---------------- src/app/layout.tsx | 18 ++- src/app/page.module.css | 229 ---------------------------------- src/app/page.tsx | 5 +- src/components/Navigation.tsx | 55 ++++++++ tsconfig.json | 50 ++++---- 6 files changed, 101 insertions(+), 363 deletions(-) delete mode 100644 src/app/globals.css delete mode 100644 src/app/page.module.css create mode 100644 src/components/Navigation.tsx diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index d4f491e1..00000000 --- a/src/app/globals.css +++ /dev/null @@ -1,107 +0,0 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 815c2716..bca5e02d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,7 +7,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - {children} + + {children} + ); @@ -15,7 +17,21 @@ export default function RootLayout({ children }: { children: React.ReactNode }) 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; +`; diff --git a/src/app/page.module.css b/src/app/page.module.css deleted file mode 100644 index 6676d2c6..00000000 --- a/src/app/page.module.css +++ /dev/null @@ -1,229 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ''; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/app/page.tsx b/src/app/page.tsx index 5a7362d8..5a4f7a46 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,10 @@ +import Navigation from '@/components/Navigation'; + export default function Home() { return (
-
TOY2-9-chat
+
메인 페이지
+
); } diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx new file mode 100644 index 00000000..68a57da3 --- /dev/null +++ b/src/components/Navigation.tsx @@ -0,0 +1,55 @@ +'use client'; + +import styled from 'styled-components'; + +export default function Navigation() { + return ( + + + 1 + + + 2 + + + 3 + + + 4 + + + ); +} + +const NavigationContainer = styled.div` + width: 100%; + height: 80px; + + position: absolute; + bottom: 0; + + display: flex; + + background-color: #00956e; + border-top: 1px solid black; +`; + +const NavigationBox = styled.div` + width: 25%; + height: 100%; +`; + +const NavigationAnchor = styled.a` + color: white; + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + text-decoration: none; + &:hover { + color: #efefef; + } +`; diff --git a/tsconfig.json b/tsconfig.json index e59724b2..cd2484e2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,27 +1,27 @@ { - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./src/*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/lib/registry.js"], + "exclude": ["node_modules"] } From 3f24d34b9c75c0612f3b166115786f69d1904470 Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Tue, 7 Nov 2023 14:22:38 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20API=20=EB=AA=85=EC=84=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/app/chating/page.tsx | 179 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 180 insertions(+) create mode 100644 src/app/chating/page.tsx diff --git a/package.json b/package.json index 7341c30f..7cf15602 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "next": "14.0.1", "react": "^18", "react-dom": "^18", + "socket.io-client": "^4.7.2", "styled-components": "^6.1.0" }, "devDependencies": { diff --git a/src/app/chating/page.tsx b/src/app/chating/page.tsx new file mode 100644 index 00000000..e95742c0 --- /dev/null +++ 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 ( +
+
채팅 페이지
+ + + + + + + + +
+ ); +}