Merge pull request #35 from lotteon2/develop

Develop

.env

@@ -1,2 +1,3 @@
-REACT_APP_API_URL=https://e62e9111-4ca7-4984-93da-a6b562b71a83.mock.pstmn.io
-REACT_APP_INICIS=imp31336811
+# REACT_APP_API_URL=https://e62e9111-4ca7-4984-93da-a6b562b71a83.mock.pstmn.io
+REACT_APP_INICIS=imp31336811
+REACT_APP_API_URL=https://jeontongju-dev.shop

.eslintrc.json

@@ -14,6 +14,7 @@
             "off",
             { "functions": false, "classes": false }
         ],
+        "react/no-array-index-key": "off",
         "no-console": "off",
         "no-unused-vars": "off",
         "global-require": 0,

.vscode/settings.json

@@ -3,6 +3,6 @@
   "editor.formatOnPaste": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

package.json

@@ -16,6 +16,7 @@
     "@types/react-router-dom": "^5.3.3",
     "antd": "^5.11.0",
     "axios": "^1.5.0",
+    "event-source-polyfill": "^1.0.31",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",

src/apis/notification/notificationAPIService.ts

@@ -0,0 +1,24 @@
+import APIService from '../../libs/core/api/APIService';
+import { ReadAllNotiResponse, ReadNotiByNotiIdResponse } from './notificationAPIService.types';
+
+const BASE_URL = `${process.env.REACT_APP_API_URL}/order-service/api`;
+
+class NotificationAPIService extends APIService {
+	constructor() {
+		super();
+		this.setBaseUrl(BASE_URL);
+	}
+
+	async readAllNoti() {
+		const { data } = await this.patch<ReadAllNotiResponse>(`/notification-service/api/notifications`);
+		return data;
+	}
+
+	async readNotiByNotiId(notificationId: number) {
+		const { data } = await this.patch<ReadNotiByNotiIdResponse>(
+			`/notification-service/api/consumers/notifications/${notificationId}`,
+		);
+		return data;
+	}
+}
+export const notiApi: NotificationAPIService = NotificationAPIService.shared();

src/apis/notification/notificationAPIService.types.ts

@@ -0,0 +1,11 @@
+interface ApiResponse<T> {
+	code: number;
+	message: string;
+	detail?: string;
+	data: T;
+	failure?: string;
+}
+
+export type ReadAllNotiResponse = ApiResponse<string>;
+
+export type ReadNotiByNotiIdResponse = ApiResponse<string>;

src/apis/product/productAPIService.types.ts

@@ -2,6 +2,7 @@ import { CONCEPT } from '../../constants/ProductType/ConceptType';
 import { RAW_MATERIAL } from '../../constants/ProductType/MaterialType';
 import { SNACK } from '../../constants/ProductType/SnackType';
 import { categoryType } from '../../stores/MyInfo/MyInfoStore.types';
+import { Page } from '../search/searchAPIService.typs';
 
 interface ApiResponse<T> {
 	code: number;
@@ -51,6 +52,7 @@ export interface RegisterShortParams {
 	shortsTitle: string;
 	shortsDescription: string;
 	shortsVideoUrl: string;
+	shortsPreviewUrl: string;
 	shortsThumbnailImageUrl: string;
 	productId?: string; // 보내면 상품에 등록, 안 보내면 주모 사이트로 연결
 	isActivate: boolean;
@@ -88,7 +90,7 @@ export type DeleteProductResponse = ApiResponse<string>;
 
 export type RegisterShortResponse = ApiResponse<string>;
 
-export type GetShortListResponse = ApiResponse<GetShortListResponseData[]>;
+export type GetShortListResponse = ApiResponse<Page<GetShortListResponseData[]>>;
 
 export type UpdateShortsResponse = ApiResponse<string>;
 

src/apis/storage/storageAPIService.ts

@@ -1,5 +1,6 @@
+import { AxiosRequestConfig } from 'axios';
 import APIService from '../../libs/core/api/APIService';
-import { UploadS3Response } from './storageAPIService.types';
+import { UploadS3Response, UploadShortsResponse } from './storageAPIService.types';
 
 const BASE_URL = `${process.env.REACT_APP_API_URL}/storage-service/api`;
 
@@ -13,6 +14,11 @@ class StorageAPIService extends APIService {
 		const { data } = await this.post<UploadS3Response>(`/file/${fileName}`);
 		return data;
 	}
+
+	async uploadShorts(formData: FormData, config: AxiosRequestConfig<any>) {
+		const { data } = await this.post<UploadShortsResponse>(`/upload/shorts`, formData, config);
+		return data;
+	}
 }
 
 export const storageApi: StorageAPIService = StorageAPIService.shared();

src/apis/storage/storageAPIService.types.ts

@@ -12,4 +12,10 @@ export interface UploadS3ResponseData {
 	dataUrl: string;
 }
 
+export interface UploadShortsResponseData {
+	dataUrl: string;
+	previewUrl: string;
+}
+
 export type UploadS3Response = ApiResponse<UploadS3ResponseData>;
+export type UploadShortsResponse = ApiResponse<UploadShortsResponseData>;

src/components/Live/LiveContainer.hooks.tsx

@@ -10,14 +10,11 @@ export const useLiveModal = () => {
 	};
 
 	const handleCancel = () => {
-		console.log('here');
 		setIsModalOpen(false);
-		console.log(isModalOpen);
 	};
 	const handleOk = () => {
 		navigate('/etc/live/register');
 		setIsModalOpen(false);
-		console.log(isModalOpen);
 	};
 	return {
 		isModalOpen,

src/components/common/ImageUploader.tsx

@@ -58,14 +58,15 @@ const ImageUploader: React.FC<ImageUploaderInterface> = ({ imageUrl, setImageUrl
 				onChange={handleChangeFile}
 				style={{ display: 'none' }}
 			/>
-			<Avatar style={{ width: '100%', height: '100%' }} src={imgSrc} alt="프로필 이미지" />
+			<Avatar style={{ width: '10rem', height: '10rem' }} src={imgSrc} alt="프로필 이미지" />
 		</StyledButton>
 	);
 };
 
 export default ImageUploader;
 
 const StyledButton = styled.button`
-	width: 10rem;
+	width: 100%;
 	height: 10rem;
+	background: none;
 `;

src/components/common/Notification.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { EventSourcePolyfill, NativeEventSource } from 'event-source-polyfill';
+import styled from '@emotion/styled';
+import FiSrBellSVG from '../../assets/images/fi-sr-bell.svg';
+import NewFiSrBellSVG from '../../assets/images/fi-sr-new-bell.svg';
+import { Toast } from './Toast';
+import { notiApi } from '../../apis/notification/notificationAPIService';
+
+const Notification = () => {
+	const [newNoti, setNewNoti] = useState<string[]>([]);
+	const [notiOpen, setNotiOpen] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			const accessToken = localStorage.getItem('accessToken');
+			if (!accessToken) return;
+
+			const EventSource = EventSourcePolyfill || NativeEventSource;
+			const eventSource = new EventSource(
+				'https://jeontongju-dev.shop/notification-service/api/notifications/connect',
+				{
+					headers: {
+						Authorization: `Bearer ${accessToken}`,
+						Connection: 'keep-alive',
+						Accept: 'text/event-stream',
+					},
+					heartbeatTimeout: 86400000,
+					withCredentials: true,
+				},
+			);
+
+			eventSource.onopen = () => {
+				console.log('OPEN');
+
+				eventSource.removeEventListener('connect', () => {
+					console.log('remove connect');
+				});
+				eventSource.removeEventListener('happy', () => {
+					console.log('remove happy');
+				});
+
+				eventSource.addEventListener('happy', (event: any) => {
+					console.log(event);
+					const currNoti = event.data;
+					console.log('HI');
+					setNewNoti((prev) => [...prev, currNoti]);
+				});
+
+				eventSource.addEventListener('connect', (event: any) => {
+					console.log(event);
+					const { data: receivedConnectData } = event;
+					if (receivedConnectData === 'SSE 연결이 완료되었습니다.') {
+						console.log('SSE CONNECTED');
+					} else {
+						console.log(event);
+					}
+				});
+			};
+
+			/* eslint-disable consistent-return */
+			return () => {
+				eventSource.close();
+				console.log('SSE CLOSED');
+			};
+		}
+	}, []);
+
+	const handleOpenNoti = () => {
+		setNotiOpen((prev: boolean) => !prev);
+	};
+
+	const handleAllRead = async () => {
+		try {
+			const data = await notiApi.readAllNoti();
+			if (data.code === 200) {
+				Toast(true, '전체 읽음 처리에 성공했어요.');
+				setNewNoti([]);
+			}
+		} catch (error) {
+			Toast(false, '전체 읽음 처리에 실패했어요');
+		}
+	};
+
+	const handleReadByNotiId = async () => {
+		try {
+			const data = await notiApi.readNotiByNotiId(1);
+			if (data.code === 200) {
+				Toast(true, '전체 읽음 처리에 성공했어요.');
+				setNewNoti([]);
+			}
+		} catch (error) {
+			Toast(false, '전체 읽음 처리에 실패했어요');
+		}
+	};
+
+	return (
+		<div>
+			<img
+				alt="bell"
+				width={0}
+				height={0}
+				src={newNoti.length > 0 ? NewFiSrBellSVG : FiSrBellSVG}
+				style={{
+					cursor: 'pointer',
+					width: '2rem',
+					height: '2rem',
+					position: 'relative',
+				}}
+				onClick={handleOpenNoti}
+				role="presentation"
+			/>
+
+			{notiOpen &&
+				(newNoti.length === 0 ? (
+					<StyledAlarmBox>알람 확인 완료 끝!</StyledAlarmBox>
+				) : (
+					<StyledAlarmBox>
+						<StyledReadButton role="presentation" onClick={handleAllRead}>
+							전체 읽음
+						</StyledReadButton>
+						{newNoti.map((it, i: number) => (
+							<StyledAlarmDiv key={i} onClick={() => handleReadByNotiId()}>
+								{it}
+							</StyledAlarmDiv>
+						))}
+					</StyledAlarmBox>
+				))}
+		</div>
+	);
+};
+
+export default Notification;
+
+const StyledAlarmBox = styled.div`
+	border: 1px solid #ccc;
+	padding: 1rem 2rem;
+	border-radius: 12px;
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	max-height: 10rem;
+	overflow-y: scroll;
+`;
+
+const StyledAlarmDiv = styled.div`
+	padding: 0.5rem 0;
+`;
+
+const StyledReadButton = styled.div`
+	text-align: right;
+	margin-bottom: 0.5rem;
+	cursor: pointer;
+`;

src/components/common/Table.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Table as AntdTable } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 
 interface TableInterface<T> {
 	columns: ColumnsType<T>;
 	data: T[];
+	pagination?: TablePaginationConfig | false;
 }
 
-const Table = <T,>({ data, columns }: TableInterface<T>) => (
+const Table = <T,>({ data, columns, pagination }: TableInterface<T>) => (
 	<div role="none">
-		<AntdTable key="1" columns={columns as ColumnsType<T>} dataSource={data} />
+		<AntdTable key="1" columns={columns as ColumnsType<T>} dataSource={data} pagination={pagination} />
 	</div>
 );
 

src/components/common/TopHeader.tsx

@@ -1,9 +1,9 @@
 import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
-import { LiaWineBottleSolid } from 'react-icons/lia';
 import { Avatar, Dropdown } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useMyInfoStore } from '../../stores/MyInfo/MyInfoStore';
+import Notification from './Notification';
 
 const TopHeader = () => {
 	const navigate = useNavigate();
@@ -17,6 +17,7 @@ const TopHeader = () => {
 
 	return (
 		<StyledTopHeader>
+			<Notification />
 			<div>{storeName} 주모님</div>
 			<Dropdown
 				menu={{
@@ -25,7 +26,7 @@ const TopHeader = () => {
 							key: 'setMyShopInfo',
 							label: (
 								<button type="button" onClick={() => navigate('/edit/myshop')}>
-									<SettingOutlined />샵 정보 수정하기
+									<SettingOutlined /> 샵 정보 수정하기
 								</button>
 							),
 						},