diff --git a/Components/Wrapper.tsx b/Components/Wrapper.tsx new file mode 100644 index 0000000..de1e65c --- /dev/null +++ b/Components/Wrapper.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Wrapper = ({ children }: { children: React.ReactNode }) => { + return ( +
+
+ 헤더 +
+ {children} +
+ ); +}; + +export default Wrapper; diff --git a/app/layout.tsx b/app/layout.tsx index 4435ed7..0cdcedf 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; import ClientProviders from '@/Components/Provider/ClientProvider'; +import Wrapper from '@/Components/Wrapper'; const inter = Inter({ subsets: ['latin'] }); @@ -18,7 +19,11 @@ export default function RootLayout({ return ( - {children} + +
+ {children} +
+ ); diff --git a/app/open/open.constant.ts b/app/open/open.constant.ts new file mode 100644 index 0000000..94801a5 --- /dev/null +++ b/app/open/open.constant.ts @@ -0,0 +1 @@ +export const 문자열 = '문자열'; diff --git a/app/open/open.type.ts b/app/open/open.type.ts new file mode 100644 index 0000000..5b833c2 --- /dev/null +++ b/app/open/open.type.ts @@ -0,0 +1,3 @@ +export type 모든것 = { + name: string; +}; diff --git a/app/open/open.utils.ts b/app/open/open.utils.ts new file mode 100644 index 0000000..8554931 --- /dev/null +++ b/app/open/open.utils.ts @@ -0,0 +1,12 @@ +export const fetchAllChat = async (token: string, userId: string) => { + const res = await fetch('https://fastcampus-chat.net/chat', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${token}`, + serverId: process.env.SERVER_KEY as string, + }, + }); + const data = await res.json(); + return data; +}; diff --git a/app/open/page.tsx b/app/open/page.tsx new file mode 100644 index 0000000..3e2296b --- /dev/null +++ b/app/open/page.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { fetchAllChat } from './open.utils'; + +type ChatData = { + id: string; + name: string; + users: string[]; + isPrivate: boolean; + latestMessage: string; + updatedAt: string; +}; + +const Open = async () => { + const accessToken = process.env.ACCESS_TOKEN as string; + const result = await fetchAllChat(accessToken, 'minseob'); + console.log(result); + return ( +
+ {result.chats.map((chat: ChatData) => { + return ( +
+
{chat.name}
+
+ ); + })} +
+ ); +}; + +export default Open; diff --git a/app/search/page.tsx b/app/search/page.tsx new file mode 100644 index 0000000..c01a8b1 --- /dev/null +++ b/app/search/page.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { fetchAllOpenChat } from './search.utils'; + +const accessToken = process.env.ACCESSTOKEN as string; // 임시 access token + +const Search = async () => { + const allOpenChat = await fetchAllOpenChat(accessToken); + console.log(allOpenChat); + + return ( + <> +

Search 페이지

+ + ); +}; + +export default Search; diff --git a/app/search/search.constant.ts b/app/search/search.constant.ts new file mode 100644 index 0000000..0cabc16 --- /dev/null +++ b/app/search/search.constant.ts @@ -0,0 +1,9 @@ +// http Method +export const GET = 'GET'; + +// API URL +export const BASE_URL = 'https://fastcampus-chat.net/'; +export const GET_CHAT_ALL = 'chat/all'; + +// API Request 조건 정보 +export const CONTENT_TYPE = 'application/json'; diff --git a/app/search/search.type.ts b/app/search/search.type.ts new file mode 100644 index 0000000..ca070aa --- /dev/null +++ b/app/search/search.type.ts @@ -0,0 +1,36 @@ +export type AllOpenChat = Chat[]; + +export type AllOpenChatJSON = { + chats: AllOpenChat; +}; + +type Chat = { + id: string; + name: string; + users: User[]; + isPrivate: boolean; + latestMessage: Message | null; + updatedAt: Date; +}; + +type User = { + id: string; + name: string; + picture: string; +}; + +type Message = { + id: string; + text: string; + userId: string; + createAt: Date; +}; + +export type Request = { + method: string; + headers: { + 'content-type': string; + serverId: string; + Authorization: string; + }; +}; diff --git a/app/search/search.utils.ts b/app/search/search.utils.ts new file mode 100644 index 0000000..01af8c8 --- /dev/null +++ b/app/search/search.utils.ts @@ -0,0 +1,19 @@ +import { Request, AllOpenChatJSON, AllOpenChat } from './search.type'; +import { GET, CONTENT_TYPE, BASE_URL, GET_CHAT_ALL } from './search.constant'; + +export const fetchAllOpenChat = async (accessToken: string) => { + const Request: Request = { + method: GET, + headers: { + 'content-type': CONTENT_TYPE, + serverId: process.env.SERVER_ID as string, // 서버 아이디 임시 사용 + Authorization: `Bearer ${accessToken}`, + }, + }; + + const res = await fetch(`${BASE_URL}${GET_CHAT_ALL}`, Request); + const resJson: AllOpenChatJSON = await res.json(); + const allOpenChat: AllOpenChat = resJson.chats; + + return allOpenChat; +}; diff --git a/package-lock.json b/package-lock.json index b620c62..f1afe71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "next": "14.0.1", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.48.2", "recoil": "^0.7.7", "socket.io": "^4.7.2" }, @@ -4025,6 +4026,21 @@ "react": "^18.2.0" } }, + "node_modules/react-hook-form": { + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 0fb7796..1c4b136 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "14.0.1", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.48.2", "recoil": "^0.7.7", "socket.io": "^4.7.2" }, diff --git a/tailwind.config.ts b/tailwind.config.ts index 7d89807..79d51a5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,6 +11,11 @@ const config: Config = withMT({ 'path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}', ], theme: { + screens: { + sm: '425px', + md: '768px', + lg: '1024px', + }, extend: { colors: { primary: '#FF6363',