setIsDeleteConfirmModalOpened(true)}>
+
@@ -160,17 +175,6 @@ const ProjectDetail: FC
= ({ projectId }) => {
))}
-
- {isDeleteConfirmModalOpened && (
- setIsDeleteConfirmModalOpened(false)}
- onConfirm={handleDeleteProject}
- cancelText='삭제'
- confirmButtonVariable='danger'
- />
- )}
);
};
diff --git a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
index 44b68a31d..e0b89283a 100644
--- a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
+++ b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
@@ -6,12 +6,11 @@ import TrophyIcon from 'public/icons/icon-trophy.svg';
import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
import { useGetCurrentWinnerName } from '@/api/endpoint/wordchain/getWordchain';
import { useNewGameMutation } from '@/api/endpoint/wordchain/newGame';
-import { Confirm } from '@/components/common/Modal/Confirm';
+import useConfirm from '@/components/common/Modal/useConfirm';
import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
import StartWordChatMessage from '@/components/wordchain/WordchainChatting/StartWordChatMessage';
import { Word } from '@/components/wordchain/WordchainChatting/types';
import WordChatMessage from '@/components/wordchain/WordchainChatting/WordChatMessage';
-import { legacyColors } from '@/styles/colors';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import { textStyles } from '@/styles/typography';
@@ -48,21 +47,22 @@ export default function Wordchain({ initial, order, wordList, isProgress, winner
const { data: currentWinnerName } = useGetCurrentWinnerName();
const { mutate } = useNewGameMutation();
const { data: me } = useGetMemberOfMe();
+ const { confirm } = useConfirm();
const queryClient = useQueryClient();
const onClickGiveUp = async () => {
- const confirm = await Confirm({
+ const confirmResult = await confirm({
title: '정말 포기하시겠어요?',
- content: `지금 포기하면 '${currentWinnerName ?? ''}'님이 우승자가 돼요.`,
- cancelText: '돌아가기',
- okText: '새로 시작하기',
+ description: `지금 포기하면 '${currentWinnerName ?? ''}'님이 우승자가 돼요.`,
+ cancelButtonText: '돌아가기',
+ okButtonText: '새로 시작하기',
});
- if (confirm) {
+ if (confirmResult) {
mutate(undefined, {
onSuccess: () => {
logSubmitEvent('wordchainNewGame');
queryClient.invalidateQueries({
- queryKey: ['getWordchainWinners']
+ queryKey: ['getWordchainWinners'],
});
},
});
diff --git a/src/components/wordchain/WordchainChatting/index.tsx b/src/components/wordchain/WordchainChatting/index.tsx
index d91632659..9d93de3c0 100644
--- a/src/components/wordchain/WordchainChatting/index.tsx
+++ b/src/components/wordchain/WordchainChatting/index.tsx
@@ -53,14 +53,11 @@ export default function WordchainChatting({ className }: WordchainChattingProps)
const { data: activeWordchain } = useGetActiveWordchain();
- const scrollToBottom = useCallback(
- () => () => {
- if (wordchainListRef.current) {
- scrollTo(wordchainListRef.current.scrollHeight);
- }
- },
- [],
- );
+ const scrollToBottom = useCallback(() => {
+ if (wordchainListRef.current) {
+ scrollTo(wordchainListRef.current.scrollHeight);
+ }
+ }, []);
useEffect(() => {
setTimeout(() => {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 898db09c7..3429d301b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import ProgressBar from '@badrap/bar-of-progress';
import { colors } from '@sopt-makers/colors';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { OverlayProvider } from '@toss/use-overlay';
import { LazyMotion } from 'framer-motion';
import type { AppProps } from 'next/app';
import dynamic from 'next/dynamic';
@@ -44,6 +45,26 @@ function MyApp({ Component, pageProps }: AppProps) {
};
}, [router.events]);
+ useEffect(() => {
+ const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+ const $existingMeta = document.querySelector('meta[name="viewport"]');
+
+ /** 모바일 환경에서 input focus 시 화면이 확대되는 현상을 막아요 */
+ if (isMobile) {
+ const $meta = $existingMeta ?? document.createElement('meta');
+
+ $meta.setAttribute('name', 'viewport');
+ $meta.setAttribute(
+ 'content',
+ 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0',
+ );
+
+ if (!$existingMeta) {
+ document.head.appendChild($meta);
+ }
+ }
+ }, []);
+
return (
-
-
-
+
+
+
+
+
{DEBUG && }
diff --git a/src/pages/projects/upload/index.tsx b/src/pages/projects/upload/index.tsx
index 137387726..4ba06b109 100644
--- a/src/pages/projects/upload/index.tsx
+++ b/src/pages/projects/upload/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
import AuthRequired from '@/components/auth/AuthRequired';
-import { Confirm } from '@/components/common/Modal/Confirm';
+import useConfirm from '@/components/common/Modal/useConfirm';
import useToast from '@/components/common/Toast/useToast';
import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
import ProjectForm from '@/components/projects/upload/form/ProjectForm';
@@ -23,11 +23,14 @@ const ProjectUploadPage = () => {
const toast = useToast();
const queryClient = useQueryClient();
const { logSubmitEvent } = useEventLogger();
+ const { confirm } = useConfirm();
const handleSubmit = async (formData: ProjectFormType) => {
- const notify = await Confirm({
+ const notify = await confirm({
title: '알림',
- content: '프로젝트를 업로드 하시겠습니까?',
+ description: '프로젝트를 업로드 하시겠습니까?',
+ okButtonText: '업로드',
+ cancelButtonText: '취소',
});
if (notify && myProfileData) {
createProjectMutate(convertToProjectData(formData, myProfileData.id), {
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 48d478bb8..7fd2c209e 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -1,5 +1,6 @@
import { css } from '@emotion/react';
import { colors } from '@sopt-makers/colors';
+import { fontBase } from '@sopt-makers/fonts';
import font from '@/styles/font';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
@@ -9,6 +10,10 @@ export const global = css`
${reset};
${font}
+ * {
+ ${fontBase}
+ }
+
:root {
color-scheme: dark;
}
diff --git a/yarn.lock b/yarn.lock
index 19cfcc812..219dd51fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5343,6 +5343,13 @@ __metadata:
languageName: node
linkType: hard
+"@sopt-makers/fonts@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "@sopt-makers/fonts@npm:1.0.0"
+ checksum: 576e3689dfa95ef8b6bbebab646141286cbe93208236e83d61170351ccdd64dd327ef951685248e77a4a201b0971893a3cfd2eabcf426c39f0d8845df9077025
+ languageName: node
+ linkType: hard
+
"@sopt-makers/playground-common@workspace:playground-common":
version: 0.0.0-use.local
resolution: "@sopt-makers/playground-common@workspace:playground-common"
@@ -6791,6 +6798,17 @@ __metadata:
languageName: node
linkType: hard
+"@toss/use-overlay@npm:^1.3.6":
+ version: 1.3.6
+ resolution: "@toss/use-overlay@npm:1.3.6"
+ dependencies:
+ "@types/react": ^18.0.21
+ peerDependencies:
+ react: ^16.8 || ^17 || ^18
+ checksum: 90c7cf24a9523cfda5a37a4bc47aab1b4bab764fe3b0f21dcf0527f0f94ccc2b17f9a5c81da76671a5aee0f7bcd6346b9206dd81c33a5cbd3ea4e2027d53048f
+ languageName: node
+ linkType: hard
+
"@toss/utils@npm:^1.4.4":
version: 1.4.4
resolution: "@toss/utils@npm:1.4.4"
@@ -7337,6 +7355,17 @@ __metadata:
languageName: node
linkType: hard
+"@types/react@npm:^18.0.21":
+ version: 18.2.34
+ resolution: "@types/react@npm:18.2.34"
+ dependencies:
+ "@types/prop-types": "*"
+ "@types/scheduler": "*"
+ csstype: ^3.0.2
+ checksum: 16446542228cba827143caf0ecb4718cbf02ae5befd4a6bc6d67ed144fe1c0cb4b06b20facf3d2b972d86c67a17cc82f5ec8a03fce42d50e12b2dcd0592fc66e
+ languageName: node
+ linkType: hard
+
"@types/scheduler@npm:*":
version: 0.16.3
resolution: "@types/scheduler@npm:0.16.3"
@@ -18228,6 +18257,7 @@ __metadata:
"@radix-ui/react-tabs": ^1.0.2
"@radix-ui/react-tooltip": ^1.0.5
"@sopt-makers/colors": ^3.0.0
+ "@sopt-makers/fonts": ^1.0.0
"@storybook/addon-actions": ^7.0.23
"@storybook/addon-docs": ^7.0.23
"@storybook/addon-essentials": ^7.0.23
@@ -18243,6 +18273,7 @@ __metadata:
"@testing-library/jest-dom": ^6.1.3
"@testing-library/react": ^14.0.0
"@toss/emotion-utils": ^1.1.10
+ "@toss/use-overlay": ^1.3.6
"@types/jest": ^29.4.0
"@types/jscodeshift": ^0
"@types/lodash-es": ^4.17.6