Skip to content

Commit

Permalink
Dev -> release (#628)
Browse files Browse the repository at this point in the history
  • Loading branch information
lolWK authored Apr 3, 2024
2 parents efc7210 + 4fcd007 commit 374eb82
Show file tree
Hide file tree
Showing 12 changed files with 142 additions and 43 deletions.
6 changes: 6 additions & 0 deletions fe/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions fe/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.4",
"react-hook-form": "^7.49.2",
"react-image-file-resizer": "^0.4.8",
"react-loading-skeleton": "^3.3.1",
"react-router-dom": "^6.16.0",
"react-slick": "^0.29.0",
Expand Down
2 changes: 1 addition & 1 deletion fe/src/components/common/carousel/Carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const Carousel: React.FC<Props> = ({ images }) => {
<CustomCarousel {...settings}>
{images.map((image) => (
<Slide key={image.id}>
<Image src={image.image.url} alt="푸디무디메뉴사진" />{' '}
<Image src={image.image.url} alt={image.menu.name} loading="lazy" />
{/* alt 추가하기. */}
<MenuRateTag
menu={{ name: image.menu.name, rating: image.menu.rating }}
Expand Down
53 changes: 31 additions & 22 deletions fe/src/components/common/icon/NotiIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,26 @@ type Props = {
};

export const NotiIcon: React.FC<Props> = ({ onClick }) => {
const [notiCount, setNotiCount] = useState(0);
const [notiCount, setNotiCount] = useState<number>(0);
const { isLogin } = useAuthState();
const accessToken = useRecoilValue(accessTokenState);
const accessToken = useRecoilValue<string>(accessTokenState);

useEffect(() => {
if (isLogin) {
const updateNotiCount = (newCount: number) => {
setNotiCount((currentCount) => {
if (currentCount !== newCount) {
return newCount;
}
return currentCount;
});
};
let eventSource: EventSourcePolyfill | null = null;
const MAX_RECONNECT_ATTEMPTS = 3;
let reconnectAttempts = 0;

if (!isLogin || !accessToken) {
return;
}

const openConnection = () => {
if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
console.log('Max reconnect attempts reached, will not reconnect.');
return;
}

const eventSource = new EventSourcePolyfill(`${BASE_API_URL}/sse`, {
eventSource = new EventSourcePolyfill(`${BASE_API_URL}/sse`, {
headers: {
'Content-Type': 'text/event-stream',
Authorization: `Bearer ${accessToken}`,
Expand All @@ -37,25 +41,30 @@ export const NotiIcon: React.FC<Props> = ({ onClick }) => {
eventSource.addEventListener('notification', (event) => {
const messageEvent = event as MessageEvent;
const { count } = JSON.parse(messageEvent.data);
updateNotiCount(count);
setNotiCount(count);
});

eventSource.onerror = (err) => {
if (eventSource.readyState === EventSource.CLOSED) {
console.log(err, 'SSE closed');
console.error('SSE error:', err);
if (eventSource?.readyState === EventSource.CLOSED) {
console.log('SSE closed, attempting to reconnect...');
eventSource.close();
reconnectAttempts += 1;
setTimeout(openConnection, 5000); // 5초 후 재연결 시도
}
return; // 그 전의 에러가 너무 시끄러워서 넣었는데 다른 방법 있으면 추천 plz
};
};

return () => {
eventSource.close();
};
}
openConnection();

return () => {
eventSource?.close();
};
}, [isLogin, accessToken]);

return (
<Wrapper>
<NotificationIcon onClick={onClick} />
<Wrapper onClick={onClick}>
<NotificationIcon />
{notiCount > 0 ? (
<NotiCount>{notiCount > 99 ? '99+' : notiCount}</NotiCount>
) : null}
Expand Down
17 changes: 13 additions & 4 deletions fe/src/components/common/menuItemEditor/ImageBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useToast } from 'recoil/toast/useToast';
import { usePostImage } from 'service/queries/imageUpload';
import { styled } from 'styled-components';
import { generateDefaultUserImage } from 'utils/generateDefaultUserImage';
import { resizeImage } from 'utils/resizeImage';
import { PlusGhostIcon } from '../icon/icons';
import { Spinner } from '../loading/spinner';

Expand Down Expand Up @@ -35,25 +36,33 @@ export const ImageBox: React.FC<Props> = ({
}
};

const handleUploadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleUploadImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];

if (!file) {
return;
}

const ALLOWED_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
const MAX_FILE_SIZE_BYTES = 1024 * 1024 * 2; // 2MB
const MAX_FILE_SIZE_BYTES = 1024 * 1024 * 2.6; // 2MB

if (!ALLOWED_TYPES.includes(file.type) || file.size > MAX_FILE_SIZE_BYTES) {
toast.noti(
'이미지는 2MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니다.'
'이미지는 2.6MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니다.'
);
return;
}

const resizedFile = (await resizeImage({
file,
maxWidth: 850,
maxHeight: 850,
})) as File;
console.log('resizedFile', resizedFile);

const formData = new FormData();
formData.append('file', file);
formData.append('file', resizedFile);
// formData.append('file', file);

imageMutate(formData, {
onSuccess: (res) => {
Expand Down
26 changes: 21 additions & 5 deletions fe/src/components/common/userImage/UserImageEdit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { styled } from 'styled-components';
import { media } from 'styles/mediaQuery';
import { useAuthState } from 'hooks/auth/useAuth';
import { generateDefaultUserImage } from 'utils/generateDefaultUserImage';
import { resizeImage } from 'utils/resizeImage';
import { EditIcon } from '../icon/icons';
import { useModal } from '../modal/useModal';
import { UserImage } from './UserImage';
Expand Down Expand Up @@ -46,25 +47,40 @@ export const UserImageEdit: React.FC<Props> = ({
}
};

const handleUploadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleUploadImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
console.log('file', file);
console.log('file', typeof file);

if (!file) {
return;
}

const ALLOWED_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
const MAX_FILE_SIZE_BYTES = 1024 * 1024 * 2; // 2MB
const ALLOWED_TYPES = [
'image/png',
'image/jpg',
'image/jpeg',
'image/webp',
];
const MAX_FILE_SIZE_BYTES = 1024 * 1024 * 2.6; // 2MB

if (!ALLOWED_TYPES.includes(file.type) || file.size > MAX_FILE_SIZE_BYTES) {
toast.noti(
'이미지는 2MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니다.'
'이미지는 2.6MB 이하의 png, jpg, jpeg 파일만 업로드 가능합니다.'
);
return;
}

const resizedFile = (await resizeImage({
file,
maxWidth: 200,
maxHeight: 200,
})) as File;
console.log('resizedFile', resizedFile);

const formData = new FormData();
formData.append('file', file);
formData.append('file', resizedFile);
// formData.append('file', file);

imageMutate(formData, {
onSuccess: (res) => {
Expand Down
8 changes: 7 additions & 1 deletion fe/src/components/feedMain/FeedMainList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@ export const FeedMainList = () => {
},
});

if (!feeds) return null;
if (!feeds || feeds.length === 0) {
return (
<Wrapper>
<TextBox>피드가 없습니다.</TextBox>
</Wrapper>
);
}

return (
<Wrapper>
Expand Down
10 changes: 9 additions & 1 deletion fe/src/pages/DetailFeedPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ export const DetailFeedModalPage = () => {
<Wrapper ref={wrapperRef}>
{feed && (
<Box>
<Carousel images={feed?.images} />
<Menus>
<Carousel images={feed?.images} />
</Menus>
<Content>
<Info>
<Detail>
Expand Down Expand Up @@ -175,6 +177,12 @@ const Wrapper = styled.div`
}
`;

const Menus = styled.div`
display: flex;
align-items: center;
background-color: ${({ theme: { colors } }) => colors.black};
`;

const Review = styled.p`
font: ${({ theme: { fonts } }) => fonts.displayM14};
color: ${({ theme: { colors } }) => colors.black};
Expand Down
16 changes: 10 additions & 6 deletions fe/src/pages/NotiSettingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
} from 'service/queries/notification';
import { styled } from 'styled-components';
import { Switch } from 'components/common/switch/Switch';
import { debounce } from 'utils/debounce';

const DEFAULT_SETTING: NotiSettingType = {
allNotification: false,
Expand All @@ -19,23 +20,26 @@ const DEFAULT_SETTING: NotiSettingType = {

export const NotiSettingPage = () => {
const { data: settingData } = useNotificationSettings();
const { mutate } = useUpdateNotificationSettings();
const [settings, setSettings] = useState(DEFAULT_SETTING);
const { mutate: updateAll } = useUpdateAllNotificationSettings();
const { mutate: updateNotification } = useUpdateNotificationSettings();
const { mutate: updateAllNotification } = useUpdateAllNotificationSettings();

useEffect(() => {
if (settingData) {
setSettings(settingData);
}
}, [settingData]);

const handleToggle = (setting: keyof NotiSettingType) => {
const debouncedUpdateNotification = debounce(updateNotification, 200);
const debouncedUpdateAll = debounce(updateAllNotification, 200);

const handleToggle = (setting: keyof typeof DEFAULT_SETTING) => {
if (setting === 'allNotification') {
const allNotiState = { allow: !settings['allNotification'] };
updateAll(allNotiState);
const newAllNotiState = !settings.allNotification;
debouncedUpdateAll({ allow: newAllNotiState });
} else {
const updatedSettings = { ...settings, [setting]: !settings[setting] };
mutate(updatedSettings);
debouncedUpdateNotification(updatedSettings);
}
};

Expand Down
3 changes: 0 additions & 3 deletions fe/src/service/axios/collection/collection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ export const getDetailCollection = async (id: string) => {

export const addUserCollection = async (collectionForm: CollectionForm) => {
const { data } = await privateApi.post('/feed_collections', collectionForm);

console.log(data);

return data;
};

Expand Down
16 changes: 16 additions & 0 deletions fe/src/utils/debounce.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function debounce<F extends (...args: any[]) => void>(
func: F,
waitFor: number
) {
let timeout: ReturnType<typeof setTimeout> | null = null;

const debounced = (...args: Parameters<F>) => {
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = setTimeout(() => func(...args), waitFor);
};

return debounced as (...args: Parameters<F>) => ReturnType<F>;
}
27 changes: 27 additions & 0 deletions fe/src/utils/resizeImage.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Resizer from 'react-image-file-resizer';

type Props = {
file: File;
maxWidth: number;
maxHeight: number;
};

export const resizeImage = ({ file, maxWidth, maxHeight }: Props) => {
const format = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
const compressFormat = format === 'png' ? 'png' : 'jpeg';

return new Promise((res) => {
Resizer.imageFileResizer(
file,
maxWidth,
maxHeight,
compressFormat,
100,
0,
(uri) => {
res(uri);
},
'file'
);
});
};

0 comments on commit 374eb82

Please sign in to comment.