- ;
export const Skin = {
args: {
size: 'medium',
- imgSrc: '/images/character/character-default-sunglass-yellow-h240w240.png',
+ imgSrc: './images/character/character-default-sunglass-yellow-h240w240.png',
borderSize: '1x',
borderColor: 'black',
backgroundColor: 'gray200',
@@ -67,7 +67,7 @@ export const Skin = {
export const Map: Story = {
args: {
size: 'medium',
- imgSrc: '/images/map/background/factorymap.png',
+ imgSrc: './images/map/background/factorymap.png',
borderSize: '1x',
borderColor: 'black',
children: ;
export const Player1 = {
args: {
size: 'large',
- imgSrc: '/images/character/character-default-none-clone-h240w240.png',
+ imgSrc: './images/character/character-default-none-clone-h240w240.png',
borderSize: '5x',
borderColor: 'pink',
backgroundColor: 'white',
@@ -97,7 +97,7 @@ export const Player1 = {
responsive
color={color}
text='방장'
- icon='/images/ui/icon/shape/icon-shape-white-small-player0-h16w16.png'
+ icon='./images/ui/icon/shape/icon-shape-white-small-player0-h16w16.png'
/>
);
@@ -107,7 +107,7 @@ export const Player1 = {
export const Player2 = {
args: {
size: 'large',
- imgSrc: '/images/character/character-default-sunglass-yellow-h240w240.png',
+ imgSrc: './images/character/character-default-sunglass-yellow-h240w240.png',
borderSize: '5x',
borderColor: 'green',
backgroundColor: 'white',
@@ -125,7 +125,7 @@ export const Player2 = {
responsive
color={color}
text='READY'
- icon='/images/ui/icon/shape/icon-shape-white-small-player1-h16w16.png'
+ icon='./images/ui/icon/shape/icon-shape-white-small-player1-h16w16.png'
/>
);
diff --git a/src/components/image-box/index.tsx b/src/components/image-box/index.tsx
index e4843727..a5995d19 100644
--- a/src/components/image-box/index.tsx
+++ b/src/components/image-box/index.tsx
@@ -11,12 +11,14 @@ type StyleProps = NonNullable<
type Props = {
children?: React.ReactNode;
imgSrc: string;
+ alt?: string;
} & Required> &
Omit;
const RoundCornerImageBox = ({
children,
imgSrc,
+ alt,
size,
borderSize,
borderColor,
@@ -24,9 +26,6 @@ const RoundCornerImageBox = ({
}: Props) => {
return (
;
@@ -65,7 +65,7 @@ export const GameResult: Story = {
args: {
label: '손님',
nickname: '허스키한 자라',
- imgSrc: '/images/character/character-default-none-clone-h240w240.png',
+ imgSrc: './images/character/character-default-none-clone-h240w240.png',
},
render: (args) => {
return (
diff --git a/src/components/prompt/index.css.ts b/src/components/prompt/index.css.ts
new file mode 100644
index 00000000..42705f72
--- /dev/null
+++ b/src/components/prompt/index.css.ts
@@ -0,0 +1,43 @@
+import { style } from '@vanilla-extract/css';
+
+import { sprinkles } from '@/styles/sprinkles.css';
+
+import { IPHONE_SE } from '@/constants/screen';
+
+export const fullscreenPromptStyle = style([
+ sprinkles({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: 'full',
+ height: 'full',
+ zIndex: 'alert-content',
+ position: 'fixed',
+ }),
+ {
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center',
+ backgroundSize: 'cover',
+ backgroundImage:
+ 'url(/images/background/background-white-large-h991w1922.webp)',
+ overlay: 'auto',
+ top: 0,
+ left: 0,
+
+ '@media': {
+ [`screen and (min-width: ${IPHONE_SE.width})`]: {
+ display: 'none',
+ },
+ },
+ },
+]);
+
+export const fullscreenPromptText = style([
+ {
+ textAlign: 'center',
+ fontSize: '40px',
+ lineHeight: '48px',
+ textShadow: '-3px 0px white, 0px 3px white, 3px 0px white, 0px -3px white',
+ },
+]);
diff --git a/src/components/prompt/index.tsx b/src/components/prompt/index.tsx
new file mode 100644
index 00000000..f9496a39
--- /dev/null
+++ b/src/components/prompt/index.tsx
@@ -0,0 +1,13 @@
+import * as styles from './index.css';
+
+const FullscreenPrompt = () => {
+ return (
+
-
-
+
+
);
};
export default LandingLayout;
diff --git a/src/styles/main.css.ts b/src/styles/main.css.ts
index 4f9b433c..b1123fc4 100644
--- a/src/styles/main.css.ts
+++ b/src/styles/main.css.ts
@@ -27,6 +27,7 @@ globalStyle('html, body, #root', {
globalStyle('body', {
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
+ backgroundSize: 'cover',
backgroundImage:
'url(/images/background/background-white-small-h450w873.webp)',
diff --git a/src/styles/sprinkles.css.ts b/src/styles/sprinkles.css.ts
index 6e7ef9f7..d7d30fb7 100644
--- a/src/styles/sprinkles.css.ts
+++ b/src/styles/sprinkles.css.ts
@@ -81,6 +81,9 @@ const sizeProperties = defineProperties({
properties: {
width: vars.size,
height: vars.size,
+ aspectRatio: {
+ square: '1 / 1',
+ },
},
shorthands: {
size: ['width', 'height'],
- {children}
+ 
+ {children &&
);
};
diff --git a/src/components/player-info/index.stories.tsx b/src/components/player-info/index.stories.tsx
index 9fffb86c..acf87485 100644
--- a/src/components/player-info/index.stories.tsx
+++ b/src/components/player-info/index.stories.tsx
@@ -27,7 +27,7 @@ const meta = {
args: {
label: '너 나보다 못하잖아.',
nickname: '민돌멩이',
- imgSrc: '/images/character/character-default-sunglass-yellow-h240w240.png',
+ imgSrc: './images/character/character-default-sunglass-yellow-h240w240.png',
},
} satisfies Meta{children}
}
+
+ );
+};
+
+export default FullscreenPrompt;
diff --git a/src/components/ranking/index.stories.tsx b/src/components/ranking/index.stories.tsx
index 58b629ea..ab37491a 100644
--- a/src/components/ranking/index.stories.tsx
+++ b/src/components/ranking/index.stories.tsx
@@ -38,7 +38,7 @@ const meta = {
rank: 2,
label: '노컬러랜드 명예 주민',
nickname: 'CELINE',
- skin: '/images/character/character-default-sunglass-yellow-h240w240.png',
+ skin: './images/character/character-default-sunglass-yellow-h240w240.png',
tier: 'rgb',
rating: 6510,
},
@@ -66,7 +66,7 @@ export const Guest: Story = {
rank: 9999,
label: '손님',
nickname: '허스키한 자라',
- skin: '/images/character/character-default-none-clone-h240w240.png',
+ skin: './images/character/character-default-none-clone-h240w240.png',
tier: 'nocolored',
rating: 2000,
},
diff --git a/src/constants/screen.ts b/src/constants/screen.ts
new file mode 100644
index 00000000..05ed2493
--- /dev/null
+++ b/src/constants/screen.ts
@@ -0,0 +1,9 @@
+export const IPHONE_14_PRO_MAX = {
+ width: '932px',
+ height: '431px',
+};
+
+export const IPHONE_SE = {
+ width: '667px',
+ height: '320px',
+};
diff --git a/src/pages/landing/FullScreenPrompt.tsx b/src/pages/landing/FullScreenPrompt.tsx
deleted file mode 100644
index b166a92e..00000000
--- a/src/pages/landing/FullScreenPrompt.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-
-import * as styles from './index.css';
-
-class FullscreenPrompt extends React.Component {
- prompt: HTMLDivElement | null = null;
-
- componentDidMount() {
- window.addEventListener('resize', this.handleResize);
- this.handleResize();
- }
-
- componentWillUnmount() {
- window.removeEventListener('resize', this.handleResize);
- }
-
- handleResize = () => {
- if (window.innerWidth < 780 && window.innerHeight > window.innerWidth) {
- // 세로 모드일 때
- this.showPrompt();
- } else {
- // 가로 모드일 때
- this.hidePrompt();
- }
- };
-
- showPrompt = () => {
- if (this.prompt) {
- this.prompt.style.display = 'flex';
- }
- };
-
- hidePrompt = () => {
- if (this.prompt) {
- this.prompt.style.display = 'none';
- }
- };
-
- render() {
- return createPortal(
- !! 주의 !!
+{'<가로 모드>를'}
+장착하세요!
+ {
- this.prompt = ref;
- }}
- className={styles.fullscreenPromptStyle}
- >
-
,
- document.getElementById('prompt') as HTMLDivElement,
- );
- }
-}
-
-export default FullscreenPrompt;
diff --git a/src/pages/landing/index.css.ts b/src/pages/landing/index.css.ts
index c904a34e..9cf3042a 100644
--- a/src/pages/landing/index.css.ts
+++ b/src/pages/landing/index.css.ts
@@ -72,34 +72,3 @@ export const logInFailMessage = style([
lineHeight: '32px',
},
]);
-
-export const fullscreenPromptStyle = style([
- sprinkles({
- width: 'full',
- height: 'full',
- zIndex: 'alert-content',
- }),
- {
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center',
- backgroundSize: 'cover',
- backgroundImage:
- 'url(/images/background/background-white-large-h991w1922.webp)',
- overlay: 'auto',
- position: 'fixed',
- top: 0,
- left: 0,
- justifyContent: 'center',
- alignItems: 'center',
- flexDirection: 'column',
- },
-]);
-
-export const fullscreenPromptText = style([
- {
- textAlign: 'center',
- fontSize: '40px',
- lineHeight: '48px',
- textShadow: '-3px 0px white, 0px 3px white, 3px 0px white, 0px -3px white',
- },
-]);
diff --git a/src/pages/landing/layout.tsx b/src/pages/landing/layout.tsx
index 201b5d16..06550de3 100644
--- a/src/pages/landing/layout.tsx
+++ b/src/pages/landing/layout.tsx
@@ -4,23 +4,18 @@ import * as styles from './index.css';
import BasicContentFrame from '@/components/frame/index';
-import FullscreenPrompt from '@/pages/landing/FullScreenPrompt';
-
import { useUserStateStore } from '@/states/user';
const LandingLayout = () => {
useUserStateStore.getState().setLogout();
return (
- <>
-
- {`!! 주의 !!\n<가로 모드>를\n장착하세요!`}
-
- {/* */}
-
-
-
+
+