Merge branch 'main' into deploy

.github/workflows/deploy.yml

@@ -35,6 +35,13 @@ jobs:
       - name: Build User
         run: yarn run build:user
 
+      - name: Clear Admin S3 Bucket
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        run: |
+          aws s3 rm s3://yangbong-admin --recursive --region ap-northeast-2
+
       - name: Deploy-Admin
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -45,6 +52,13 @@ jobs:
             --region ap-northeast-2 \
             packages/admin/dist s3://yangbong-admin
 
+      - name: Clear User S3 Bucket
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        run: |
+          aws s3 rm s3://yangbong-front --recursive --region ap-northeast-2
+
       - name: Deploy-User
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

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/src/hooks/socket/useChatSocket.ts

@@ -9,7 +9,6 @@ export type UseChatSocketReturnType = ReturnType<typeof useChatSocket>;
 
 export default function useChatSocket() {
 	// const { toast } = useToast();
-
 	const socketClient = socketManager.getSocketClient();
 	const [chatMessages, setChatMessages] = useState<ChatProps[]>([]);
 

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',
 		});
 	}
 

packages/common/src/utils/socket.ts

@@ -25,17 +25,20 @@ export default class Socket {
 
 	private subscriptions: Map<string, StompSubscription> = new Map();
 
-	private headers?: Record<string, string> = {};
+	private token?: string | undefined | null = undefined;
 
 	constructor(url: string, token?: string | null) {
-		this.client = this.setup(url);
-		this.headers = token ? { Authorization: token } : {};
+		let baseUrl = url;
+		if (token) {
+			this.token = token;
+			baseUrl += `?Authorization=${token}`;
+		}
+		this.client = this.setup(baseUrl);
 	}
 
 	private setup(url: string): Client {
 		const stompClient = new Client({
-			webSocketFactory: () => new SockJS(`${url}/ws`),
-			connectHeaders: this.headers,
+			webSocketFactory: () => new SockJS(url),
 			reconnectDelay: 5000, // Reconnect if the connection drops
 		});
 		this.client = stompClient;
@@ -63,15 +66,14 @@ export default class Socket {
 		}
 	}
 
-	sendMessages({ destination, body, headers = {} }: SendMessageProps) {
-		if (!this.headers?.Authorization) {
+	sendMessages({ destination, body }: SendMessageProps) {
+		if (!this.token) {
 			throw new Error('로그인 후 참여할 수 있어요!');
 		}
 
 		const messageProps = {
 			destination,
 			body: JSON.stringify(body),
-			headers: { ...this.headers, ...headers },
 		};
 
 		if (!this.client.connected) {
@@ -86,7 +88,7 @@ export default class Socket {
 	private createSubscription({ destination, callback, headers = {} }: SubscriptionProps) {
 		const subscriptionProps = {
 			destination,
-			headers: { ...this.headers, ...headers },
+			headers,
 			callback: (message: IMessage) => {
 				const messageId = message.headers['message-id'];
 				const data = JSON.parse(message.body);

packages/user/src/App.tsx

@@ -1,19 +1,20 @@
 import { RouterProvider } from 'react-router-dom';
 import ToasterStack from 'src/components/common/toast/ToasterStack.tsx';
 import GlobalErrorBoundary from 'src/components/layout/GlobalErrorBoundary.tsx';
+import LayoutSuspenseFallback from 'src/components/layout/LayoutSuspenseFallback.tsx';
 import AppProviders from 'src/libs/index.tsx';
 import router from 'src/routes/router.tsx';
 import CasperCursor from './components/cursor/CasperCursor.tsx';
 import useCursor from './hooks/useCursor.ts';
 
 export default function App() {
 	useCursor();
+
 	return (
 		<>
 			<AppProviders>
 				<GlobalErrorBoundary>
-					{/* TODO: create global loading component */}
-					<RouterProvider router={router} fallbackElement={<>loading...</>} />
+					<RouterProvider router={router} fallbackElement={<LayoutSuspenseFallback />} />
 				</GlobalErrorBoundary>
 				<ToasterStack />
 			</AppProviders>

packages/user/src/components/cursor/CasperCursor.tsx

@@ -12,7 +12,7 @@ function CasperCursor() {
 			}}
 		>
 			<img
-				src="/cursor/cursor-100.png"
+				src="/cursor/cursor-50.png"
 				alt="커서"
 				style={{ pointerEvents: 'none', width: 25, height: 25 }}
 			/>

packages/user/src/components/shared/modal/fcfs/ErrorStep.tsx

@@ -16,6 +16,12 @@ export default function ErrorStep({ error, resetErrorBoundary }: FallbackProps)
 					</Button>
 				</InfoStep>
 			);
+		case 400:
+			return (
+				<InfoStep>
+					<p className="text-heading-10 font-medium">이미 마감된 이벤트입니다.</p>
+				</InfoStep>
+			);
 		case 404:
 			return (
 				<InfoStep>

packages/user/src/components/shared/modal/teamSelectModal/ModalContent.tsx

@@ -3,6 +3,7 @@ import PendingStep from 'src/components/shared/modal/PendingStep.tsx';
 import useSubmitTeamTypeQuizAnswers, {
 	type SubmitQuizAnswersRequest,
 } from 'src/hooks/query/useSubmitTeamTypeQuizAnswers.ts';
+import useAuth from 'src/hooks/useAuth.ts';
 import useFunnel from 'src/hooks/useFunnel.ts';
 import CustomError from 'src/utils/error.ts';
 import ErrorStep from './ErrorStep.tsx';
@@ -15,6 +16,8 @@ interface TeamSelectModalContentProps {
 export default function TeamSelectModalContent({
 	initialStep = 'quiz',
 }: TeamSelectModalContentProps) {
+	const { user } = useAuth();
+
 	const [Funnel, setStep] = useFunnel(
 		['quiz', 'pending', 'success', 'error', 'already-done'] as NonEmptyArray<string>,
 		{ initialStep },
@@ -48,15 +51,15 @@ export default function TeamSelectModalContent({
 			<Funnel.Step name="pending">
 				<PendingStep>내 유형 불러오는 중 ...</PendingStep>
 			</Funnel.Step>
-			<Funnel.Step name="success">
-				<ResultStep />
-			</Funnel.Step>
+			<Funnel.Step name="success">{user?.type && <ResultStep />}</Funnel.Step>
 			<Funnel.Step name="already-done">
-				<ResultStep>
-					<p className="text-detail-1">
-						이미 유형 검사를 완료하셨군요! 이전 검사 결과를 보여드릴게요
-					</p>
-				</ResultStep>
+				{user?.type && (
+					<ResultStep>
+						<p className="text-detail-1">
+							이미 유형 검사를 완료하셨군요! 이전 검사 결과를 보여드릴게요
+						</p>
+					</ResultStep>
+				)}
 			</Funnel.Step>
 			<Funnel.Step name="error">
 				<ErrorStep setQuizStep={() => setStep('quiz')}>

packages/user/src/components/shared/modal/teamSelectModal/ResultStep.tsx

@@ -8,7 +8,15 @@ import useAuth from 'src/hooks/useAuth.ts';
 export default function ResultStep({ children }: PropsWithChildren) {
 	const { user } = useAuth();
 
-	const type = useMemo(() => user?.type as Category, [user]);
+	const type = useMemo(() => {
+		if (user?.type) {
+			return user.type;
+		}
+	}, [user?.type]);
+
+	if (!type) {
+		return null;
+	}
 
 	const { title, shortTitle, details } = TEAM_DESCRIPTIONS[type];
 	const displayTitle = shortTitle ?? title;