diff --git a/app/koi-client/README.md b/app/koi-client/README.md index 347116ed..f4c3621d 100644 --- a/app/koi-client/README.md +++ b/app/koi-client/README.md @@ -47,6 +47,6 @@ KOI-CLIENT는 파티 게임 플랫폼의 프론트엔드 애플리케이션입 ``` ## 스타일 가이드 -- Emotion과 Linaria를 사용한 스타일링 (Deprecated Linaria) +- Emotion을 사용한 스타일링 - DungGeunMo 폰트 기본 적용 - 모바일 우선 반응형 디자인 \ No newline at end of file diff --git a/app/koi-client/src/component-presentation/Box.tsx b/app/koi-client/src/component-presentation/Box.tsx index 0facffef..c45637f2 100644 --- a/app/koi-client/src/component-presentation/Box.tsx +++ b/app/koi-client/src/component-presentation/Box.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties } from 'react'; -import { styled } from '@linaria/react'; +import styled from '@emotion/styled'; interface BoxProps { title?: string; diff --git a/app/koi-client/src/component-presentation/Header.tsx b/app/koi-client/src/component-presentation/Header.tsx index 2c566878..c0768193 100644 --- a/app/koi-client/src/component-presentation/Header.tsx +++ b/app/koi-client/src/component-presentation/Header.tsx @@ -1,5 +1,4 @@ -import { css } from '@linaria/core'; -import { styled } from '@linaria/react'; +import styled from '@emotion/styled'; import { Avatar } from 'antd'; import { UserOutlined } from '@ant-design/icons'; import React from 'react'; @@ -28,18 +27,7 @@ const Header = ({ title, avatar = { isVisible: false }, LeftComponent, RightComp const { isVisible, src, onClick } = avatar; return ( -
+ {LeftComponent || ( )} -
- {title} -
-
- {RightComponent} -
-
+ {title} + {RightComponent} + ); }; +const Container = styled.div` + position: relative; + min-height: 64px; + max-height: 64px; + background-color: #fefefe; + padding: 12px; + box-sizing: border-box; + display: flex; + align-items: center; +`; + +const RightComponentWrapper = styled.div` + flex: 80px; + display: flex; + justify-content: flex-end; +`; + +const Title = styled.div` + flex: 1 0 auto; + display: flex; + justify-content: center; +`; + const AvatarWrapper = styled.div` flex: 80px; `; diff --git a/app/koi-client/src/component-presentation/MobileLayout.tsx b/app/koi-client/src/component-presentation/MobileLayout.tsx index c5e89c2d..b9436b0c 100644 --- a/app/koi-client/src/component-presentation/MobileLayout.tsx +++ b/app/koi-client/src/component-presentation/MobileLayout.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties } from 'react'; -import { css } from '@linaria/core'; +import styled from '@emotion/styled'; import { useMediaQuery } from 'react-responsive'; import { ScrollView } from './ScrollView'; @@ -24,35 +24,14 @@ const MobileLayout = ({ const isDesktop = useMediaQuery({ query: `(min-width: 800px)` }); return ( -
-
+ {HeaderComponent} -
{children} -
-
-
+ + + ); }; +const Container = styled.div` + display: flex; + justify-content: center; + width: 100%; + height: 100%; +`; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; + max-width: 400px; + height: 100%; +`; + +const Inner = styled.div` + display: flex; + flex-direction: column; + flex: 1 1 auto; + /* 이걸 넣어야 내부 스크롤 가능 */ + min-height: 0; +`; + export default MobileLayout; diff --git a/app/koi-client/src/component-presentation/ScrollView.tsx b/app/koi-client/src/component-presentation/ScrollView.tsx index 7b5cba35..22462448 100644 --- a/app/koi-client/src/component-presentation/ScrollView.tsx +++ b/app/koi-client/src/component-presentation/ScrollView.tsx @@ -1,6 +1,6 @@ import React from 'react'; import * as Radix from '@radix-ui/react-scroll-area'; -import { css, cx } from '@linaria/core'; +import styled from '@emotion/styled'; export type ScrollViewProps = React.PropsWithChildren<{ /** @@ -9,55 +9,48 @@ export type ScrollViewProps = React.PropsWithChildren<{ * @default true */ showScrollbar?: boolean; - onScroll?: (args: React.UIEvent) => void; }>; export const ScrollView = ({ showScrollbar = true, children, onScroll, ...props }: ScrollViewProps) => { return ( - - + + {children} - - - - - + + + + + ); }; -const scrollViewStyle = css` +const Thumb = styled(Radix.Thumb)` + flex: 1; + position: relative; +`; + +const RootContainer = styled(Radix.Root)` width: 100%; height: 100%; `; -const viewportStyle = css` +const Viewport = styled(Radix.Viewport)` width: 100%; height: 100%; border-radius: inherit; `; -const scrollbarStyle = css` +const ScrollbarComponent = styled(Radix.Scrollbar)<{ showScrollbar: boolean }>( + ` all: revert; display: flex; /* ensures no selection */ user-select: none; /* disable browser handling of all panning and zooming gestures on touch devices */ touch-action: none; -`; - -const hiddenScrollbar = css` - visibility: hidden; -`; - -/** - * increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html - */ -const thumbStyle = css` - flex: 1; - position: relative; -`; +`, + ({ showScrollbar }) => ` + ${showScrollbar && 'visibility: hidden'} + `, +); diff --git a/app/koi-client/src/component/NoSession/Splash.tsx b/app/koi-client/src/component/NoSession/Splash.tsx index 942e3b3a..3f4221ba 100644 --- a/app/koi-client/src/component/NoSession/Splash.tsx +++ b/app/koi-client/src/component/NoSession/Splash.tsx @@ -1,6 +1,5 @@ -import { styled } from '@linaria/react'; +import styled from '@emotion/styled'; import { Auth } from '@supabase/auth-ui-react'; -import React from 'react'; import { ThemeSupa } from '@supabase/auth-ui-shared'; import { Button } from 'antd'; import authLocalization from '../../library/supabase/authLocalization'; diff --git a/app/koi-client/src/page/@/index.tsx b/app/koi-client/src/page/@/index.tsx index 6ee58c42..f5420d59 100644 --- a/app/koi-client/src/page/@/index.tsx +++ b/app/koi-client/src/page/@/index.tsx @@ -1,4 +1,4 @@ -import { styled } from '@linaria/react'; +import styled from '@emotion/styled'; import { Suspense } from 'react'; import MobileLayout from '../../component-presentation/MobileLayout'; import MainHeader from './component/MainHeader'; @@ -24,7 +24,6 @@ export default function Main() { const Wrapper = styled.div` width: 100%; height: 100%; - display: flex; flex-direction: column; align-items: stretch; diff --git a/app/koi-client/src/page/@backoffice@party/index.tsx b/app/koi-client/src/page/@backoffice@party/index.tsx index 739a5e96..5f843166 100644 --- a/app/koi-client/src/page/@backoffice@party/index.tsx +++ b/app/koi-client/src/page/@backoffice@party/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { PartySchemaWithId } from 'shared~type-party'; -import { css } from '@linaria/core'; +import { css } from '@emotion/react'; import BackofficePartyDetail from '../../component/BackofficePartyDetail'; import { Query } from '../../hook'; import PartyCreate from './component/PartyCreate'; @@ -72,7 +72,7 @@ const BackofficeParty = () => { return ( <> { {headerGroup.headers.map((header) => (
{ <> { {headerGroup.headers.map((header) => (
{ <> { {headerGroup.headers.map((header) => (
{ onClick={() => { navigate(-1); }} - className={css` + css={css` &:hover { cursor: pointer; } diff --git a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Result.tsx b/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Result.tsx index 0fa52a7c..4583b6fc 100644 --- a/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Result.tsx +++ b/app/koi-client/src/page/@party@[partyId]/component/Stock/component/Result.tsx @@ -5,7 +5,7 @@ import { commaizeNumber } from '@toss/utils'; import { Button } from 'antd'; import html2canvas from 'html2canvas'; import saveAs from 'file-saver'; -import { css } from '@linaria/core'; +import { css } from '@emotion/react'; import { UserStore } from '../../../../../store'; import { Query } from '../../../../../hook'; @@ -125,7 +125,7 @@ const Result = ({ stockId }: Props) => {