Merge pull request #90 from softeerbootcamp4th/TASK-42

[Feature][Task-42] 소켓 연결, 기대평 디자인 수정, setCookie 허용

packages/admin/src/components/chat/Chat.tsx

@@ -2,6 +2,9 @@ import { BlockedChat, ChatProps, Message, Notice } from '@softeer/common/compone
 import { FunctionComponent, useCallback } from 'react';
 
 export default function Chat({ type, team, sender, content }: ChatProps) {
+	const handleHide = () => {
+		console.log('hide!');
+	};
 	const Render: FunctionComponent = useCallback(() => {
 		switch (type) {
 			case 'n':
@@ -11,8 +14,15 @@ export default function Chat({ type, team, sender, content }: ChatProps) {
 			case 'm':
 			default:
 				return (
-					<Message sender={sender} team={team} isMyMessage={false}>
-						{content}
+					<Message
+						sender={sender}
+						team={team}
+						isMyMessage={false}
+						hideAction={() => {
+							handleHide();
+						}}
+					>
+						<div className="text-cream-100 flex mi-w-fit flex-1">{content}</div>
 					</Message>
 				);
 		}

packages/admin/src/components/chat/RealTimeChatting.tsx

@@ -1,13 +1,32 @@
 import { ChatList } from '@softeer/common/components';
+import { useRef } from 'react';
 import { UseSocketReturnType } from 'src/hooks/socket/index.ts';
+import { useAlert } from 'src/store/provider/AlertProvider.tsx';
+import { Button } from '../ui/button.tsx';
+import { Input } from '../ui/input.tsx';
 import Chat from './Chat.tsx';
 
 /** 실시간 기대평 섹션 */
 
 function RealTimeChatting({ chatSocket: { messages } }: Pick<UseSocketReturnType, 'chatSocket'>) {
+	const { openAlert, addAlertCallback } = useAlert();
+	const noticeInputRef = useRef<HTMLInputElement>(null);
+	const handleSend: React.FormEventHandler<HTMLFormElement> = (event) => {
+		event.preventDefault();
+		addAlertCallback(() => {
+			// 삭제하는 로직 들어가야함
+			if (noticeInputRef.current) {
+				noticeInputRef.current.value = '';
+			}
+		});
+		openAlert(<p>정말로 전송하겠습니까?<br />전송 이후엔 수정이 불가능합니다.</p>, 'confirm');
+	};
 	return (
 		<section className="container flex max-w-[1200px] snap-start flex-col items-center pb-[115px] pt-[50px]">
-			<h6 className="text-heading-10 mb-[25px] font-medium">기대평을 남겨보세요!</h6>
+			<form className="flex w-full flex-row mb-4 gap-2" onSubmit={handleSend}>
+				<Input ref={noticeInputRef} className="flex flex-1" placeholder="공지사항을 입력하세요." />
+				<Button type="submit">공지사항 전송</Button>
+			</form>
 			<div className="h-[1000px] w-full overflow-y-auto rounded-[10px] bg-neutral-800 py-10">
 				<ChatList>
 					{messages.map((message) => (

packages/admin/src/hooks/socket/index.ts

@@ -9,9 +9,12 @@ export type UseSocketReturnType = ReturnType<typeof useSocket>;
 export default function useSocket() {
 	const accessToken = Cookie.getCookie<string>(ACCESS_TOKEN_KEY) ?? '';
 	const chatSocket = useChatSocket();
+	console.log(chatSocket)
 	const { onReceiveMessage, ...chatSocketProps } = chatSocket;
 	useEffect(() => {
-		socketManager.connectSocketClient({ token: accessToken, onReceiveMessage });
+		if(accessToken !== ""){
+			socketManager.connectSocketClient({ token: accessToken, onReceiveMessage });
+		}
 	}, [socketManager, accessToken]);
 
 	return { chatSocket: chatSocketProps };

packages/admin/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
 			src: path.resolve(__dirname, './src'),
 		},
 	},
+	publicDir: './public',
 	define: {
 		global: 'window', // web socket
 	},

packages/common/src/components/chat/Message.tsx

@@ -1,10 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { FormEventHandler, PropsWithChildren } from 'react';
 import { MessageChatProps } from 'src/components/chat/index.ts';
 import { SocketCategory } from 'src/types/category.ts';
 import { cn } from 'src/utils/index.ts';
 
 interface MessageProps extends Pick<MessageChatProps, 'sender' | 'team'> {
 	isMyMessage?: boolean;
+	hideAction?: () => void;
 }
 
 const TYPES: Record<SocketCategory, { casper: string; textColor: string }> = {
@@ -19,17 +20,34 @@ export default function Message({
 	team,
 	isMyMessage = false,
 	children,
+	hideAction,
 }: PropsWithChildren<MessageProps>) {
 	const { casper, textColor } = TYPES[team.toLowerCase() as SocketCategory];
-
+	const handlehide: FormEventHandler<HTMLFormElement> = (event) => {
+		event.preventDefault();
+		if (hideAction) {
+			hideAction();
+		}
+	};
 	return (
 		<div className="flex w-full items-center gap-12">
 			<div className="flex min-w-[180px] max-w-[180px] items-center gap-3">
 				<img src={casper} className="h-8 w-11" alt="캐스퍼" />
 				<p className={cn(textColor, 'text-body-3 truncate font-medium')}>익명 {sender} </p>
 				{isMyMessage && <p className={cn(textColor, 'text-body-3 font-medium')}>(나)</p>}
 			</div>
-			<p className={`text-body-3 truncate ${isMyMessage && 'font-medium'}`}>{children}</p>
+			<div className="flex flex-row justify-between flex-1">
+				<p className={`text-body-3 truncate ${isMyMessage && 'font-medium'}`}>{children}</p>
+				{
+
+					hideAction ?
+					<form onSubmit={handlehide}>
+						<button type="submit" className="text-cream-100">Hide</button>
+					</form>
+					:
+					<div />
+				}
+			</div>
 		</div>
 	);
 }

packages/common/src/components/chat/index.ts

@@ -30,3 +30,4 @@ export { default as BlockedChat } from './BlockedChat.tsx';
 export { default as ChatList } from './ChatList.tsx';
 export { default as Message } from './Message.tsx';
 export { default as Notice } from './Notice.tsx';
+

packages/common/src/utils/api/index.ts

@@ -49,7 +49,7 @@ export default class FetchWrapper {
 
 	async get<T>(url: string): Promise<T> {
 		return this.request<T>(url, {
-			// credentials: 'include',
+			credentials: 'include',
 		});
 	}
 
@@ -60,7 +60,7 @@ export default class FetchWrapper {
 			headers: {
 				...generateDefaultHeaders(),
 			},
-			// credentials: 'include',
+			credentials: 'include',
 		});
 	}
 
@@ -71,7 +71,7 @@ export default class FetchWrapper {
 			headers: {
 				...generateDefaultHeaders(),
 			},
-			// credentials: 'include',
+			credentials: 'include',
 		});
 	}