From 69951da8ec31c352294766b1cd6a2d39323b16e1 Mon Sep 17 00:00:00 2001 From: nijesmik Date: Wed, 15 Oct 2025 02:30:52 +0900 Subject: [PATCH 1/5] =?UTF-8?q?:recycle:=20screen=20constants=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/frame/constants.ts | 10 ++++++---- src/constants/screen.ts | 9 +++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 src/constants/screen.ts diff --git a/src/components/frame/constants.ts b/src/components/frame/constants.ts index 3e4b5fc2..d38d7e17 100644 --- a/src/components/frame/constants.ts +++ b/src/components/frame/constants.ts @@ -1,13 +1,15 @@ import { vars } from '@/styles/vars.css'; +import { IPHONE_14_PRO_MAX, IPHONE_SE } from '@/constants/screen'; + export const FRAME_STYLE = { width: { - max: '932px', // iphone 14 pro max - min: '667px', // iphone se + max: IPHONE_14_PRO_MAX.width, + min: IPHONE_SE.width, }, height: { - max: '431px', - min: '320px', + max: IPHONE_14_PRO_MAX.height, + min: IPHONE_SE.height, }, padding: vars.space['4x'], }; 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', +}; From 61e0532615db60de485b51dee988d403b2a171d6 Mon Sep 17 00:00:00 2001 From: nijesmik Date: Wed, 15 Oct 2025 02:59:48 +0900 Subject: [PATCH 2/5] =?UTF-8?q?:recycle:=20prompt=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=8F=99=20#57?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 ++- src/app/index.tsx | 3 ++ src/components/frame/with-buttons/index.tsx | 3 -- src/components/prompt/index.css.ts | 43 +++++++++++++++ src/components/prompt/index.tsx | 13 +++++ src/pages/landing/FullScreenPrompt.tsx | 58 --------------------- src/pages/landing/index.css.ts | 31 ----------- src/pages/landing/layout.tsx | 17 +++--- 8 files changed, 68 insertions(+), 107 deletions(-) create mode 100644 src/components/prompt/index.css.ts create mode 100644 src/components/prompt/index.tsx delete mode 100644 src/pages/landing/FullScreenPrompt.tsx diff --git a/index.html b/index.html index 6eb61148..cc165eee 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,13 @@ - - - + + + NoColored -
diff --git a/src/app/index.tsx b/src/app/index.tsx index f5477d63..5795af09 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -2,6 +2,8 @@ import { RouterProvider } from 'react-router-dom'; import router from './router'; +import FullScreenPrompt from '@/components/prompt'; + import { useSoundSetting } from '@/features/sound'; const App = () => { @@ -9,6 +11,7 @@ const App = () => { return (
+
); diff --git a/src/components/frame/with-buttons/index.tsx b/src/components/frame/with-buttons/index.tsx index 79b9c8e4..b37f8aed 100644 --- a/src/components/frame/with-buttons/index.tsx +++ b/src/components/frame/with-buttons/index.tsx @@ -7,8 +7,6 @@ import MenuButton from './menu-button'; import SettingNavigationButton from '@/components/button/SettingNavigationButton/index'; -import FullScreenPrompt from '@/pages/landing/FullScreenPrompt'; - interface Props { children: ReactNode; leftButton?: { @@ -34,7 +32,6 @@ const BasicContentFrame = ({ return (
- {!rightButtonsDisabled && (
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 FullscreenPrompt; 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} - > - 
-          {`!! 주의 !!\n<가로 모드>를\n장착하세요!`}
-
- {/* */} -
, - 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 ( - <> - - -
- - click to start! -
- - + +
+ + click to start! +
+ ); }; export default LandingLayout; From 4693890d86f7f3ae68a401632e4e225a1198bd9c Mon Sep 17 00:00:00 2001 From: nijesmik Date: Mon, 20 Oct 2025 20:55:05 +0900 Subject: [PATCH 3/5] =?UTF-8?q?:lipstick:=20=EB=B0=B0=EA=B2=BD=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=82=AC=EC=9D=B4=EC=A6=88=20cover?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#14?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/main.css.ts | 1 + 1 file changed, 1 insertion(+) 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)', From b392310379b3c123a43d996dbec5b92e61dfe8f9 Mon Sep 17 00:00:00 2001 From: nijesmik Date: Mon, 20 Oct 2025 22:08:30 +0900 Subject: [PATCH 4/5] =?UTF-8?q?:necktie:=20ImageBox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20div?= =?UTF-8?q?=EC=9D=98=20background=EA=B0=80=20=EC=95=84=EB=8B=8C=20img=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=EB=A1=9C=20=EC=B2=98=EB=A6=AC=20#33?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/image-box/index.css.ts | 42 +++++++++++++++++++++------ src/components/image-box/index.tsx | 8 ++--- src/styles/sprinkles.css.ts | 3 ++ 3 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/components/image-box/index.css.ts b/src/components/image-box/index.css.ts index b2c47c35..d14b6c74 100644 --- a/src/components/image-box/index.css.ts +++ b/src/components/image-box/index.css.ts @@ -7,20 +7,13 @@ import { flexOptions } from '@/styles/common.css'; import { sprinkles } from '@/styles/sprinkles.css'; const base = style([ - flexOptions({ option: 'column' }), sprinkles({ borderRadius: '2x', - paddingY: '2x', - alignItems: 'center', + aspectRatio: 'square', + position: 'relative', }), { - boxSizing: 'border-box', overflow: 'hidden', - aspectRatio: '1 / 1', - backgroundRepeat: 'no-repeat', - backgroundClip: 'border-box', - backgroundSize: 'cover', - backgroundPosition: 'center', }, ]); @@ -33,3 +26,34 @@ export const roundCornerImageBox = recipe({ backgroundColor, }, }); + +export const image = style([ + sprinkles({ + position: 'absolute', + height: 'full', + zIndex: 'z-1', + aspectRatio: 'square', + }), + { + objectFit: 'cover', + objectPosition: 'center', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + }, +]); + +export const contents = style([ + flexOptions({ option: 'column' }), + sprinkles({ + paddingY: '2x', + alignItems: 'center', + position: 'relative', + zIndex: 'z-2', + height: 'full', + aspectRatio: 'square', + }), + { + boxSizing: 'border-box', + }, +]); 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 (
- {children} + {alt} + {children &&
{children}
}
); }; 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'], From 665af5720e2a06d44b3e3f9262439583f000d093 Mon Sep 17 00:00:00 2001 From: nijesmik Date: Mon, 20 Oct 2025 22:19:22 +0900 Subject: [PATCH 5/5] =?UTF-8?q?:bug:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20=EC=83=81?= =?UTF-8?q?=EB=8C=80=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#51?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/ColoredIconButton/index.stories.tsx | 14 +++++++------- src/components/chip/index.stories.tsx | 6 +++--- src/components/image-box/index.stories.tsx | 12 ++++++------ src/components/player-info/index.stories.tsx | 4 ++-- src/components/ranking/index.stories.tsx | 4 ++-- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/button/ColoredIconButton/index.stories.tsx b/src/components/button/ColoredIconButton/index.stories.tsx index 8af0ff2b..9c587885 100644 --- a/src/components/button/ColoredIconButton/index.stories.tsx +++ b/src/components/button/ColoredIconButton/index.stories.tsx @@ -53,7 +53,7 @@ export const Play: Story = { args: { size: 'medium', color: 'red', - icon: '/images/ui/icon/button/icon-button-play-h50w50.png', + icon: './images/ui/icon/button/icon-button-play-h50w50.png', text: 'Play', }, }; @@ -62,7 +62,7 @@ export const Collection: Story = { args: { size: 'medium', color: 'blue', - icon: '/images/ui/icon/button/icon-button-collection-h50w50.png', + icon: './images/ui/icon/button/icon-button-collection-h50w50.png', text: 'Collection', }, }; @@ -71,7 +71,7 @@ export const Ranking: Story = { args: { size: 'medium', color: 'green', - icon: '/images/ui/icon/button/icon-button-ranking-h50w50.png', + icon: './images/ui/icon/button/icon-button-ranking-h50w50.png', text: 'Ranking', }, }; @@ -80,7 +80,7 @@ export const FriendlyMatch: Story = { args: { size: 'xlarge', color: 'pink', - icon: '/images/ui/icon/button/icon-button-modemulti-h50w50.png', + icon: './images/ui/icon/button/icon-button-modemulti-h50w50.png', text: '친선전', }, }; @@ -89,7 +89,7 @@ export const RankedMatch: Story = { args: { size: 'xlarge', color: 'yellow', - icon: '/images/ui/icon/button/icon-button-moderank-h50w50.png', + icon: './images/ui/icon/button/icon-button-moderank-h50w50.png', text: '랭킹전', }, }; @@ -100,7 +100,7 @@ export const GameReady: Story = { args: { size: 'large', color: 'gray300', - icon: '/images/ui/icon/shape/icon-shape-white-big-player1-h48w48.png', + icon: './images/ui/icon/shape/icon-shape-white-big-player1-h48w48.png', text: '준비취소', }, render: (args: Required) => { @@ -119,7 +119,7 @@ export const GameStart: Story = { args: { size: 'large', color: 'blue', - icon: '/images/ui/icon/shape/icon-shape-white-big-player3-h48w48.png', + icon: './images/ui/icon/shape/icon-shape-white-big-player3-h48w48.png', text: '게임시작', }, render: (args: Required) => { diff --git a/src/components/chip/index.stories.tsx b/src/components/chip/index.stories.tsx index 3499d8e8..6984b128 100644 --- a/src/components/chip/index.stories.tsx +++ b/src/components/chip/index.stories.tsx @@ -58,7 +58,7 @@ export const MapInfo: Story = { size='medium' borderSize='1x' borderColor='black' - imgSrc='/images/map/background/factorymap.png' + imgSrc='./images/map/background/factorymap.png' > @@ -87,7 +87,7 @@ export const PlayerState: Story = { responsive: true, color: 'blue', text: 'READY', - icon: '/images/ui/icon/shape/icon-shape-white-small-player3-h16w16.png', + icon: './images/ui/icon/shape/icon-shape-white-small-player3-h16w16.png', }, argTypes: { color: { @@ -103,7 +103,7 @@ export const PlayerState: Story = { borderSize='5x' borderColor={borderColor} backgroundColor='white' - imgSrc='/images/character/character-default-sunglass-yellow-h240w240.png' + imgSrc='./images/character/character-default-sunglass-yellow-h240w240.png' > diff --git a/src/components/image-box/index.stories.tsx b/src/components/image-box/index.stories.tsx index 2ee06360..bb2302a6 100644 --- a/src/components/image-box/index.stories.tsx +++ b/src/components/image-box/index.stories.tsx @@ -48,7 +48,7 @@ type Story = StoryObj; 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: , @@ -79,7 +79,7 @@ type ChipColor = Exclude; 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/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; @@ -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/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, },