Skip to content

refactor: 스타일 통합 진행 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jhlee0409 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

refactor: 스타일 통합 진행 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d0220c
refactor: linaria 기반의 css를 emotion으로 통합
jhlee0409 Jan 1, 2025
a7ae4f3
docs: 스타일 관련 docs 수정
jhlee0409 Jan 1, 2025
496b87d
Merge branch 'main' into feat/integration-style
jhlee0409 Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/koi-client/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,6 @@ KOI-CLIENT는 파티 게임 플랫폼의 프론트엔드 애플리케이션입
```

## 스타일 가이드
- Emotion과 Linaria를 사용한 스타일링 (Deprecated Linaria)
- Emotion을 사용한 스타일링
- DungGeunMo 폰트 기본 적용
- 모바일 우선 반응형 디자인
2 changes: 1 addition & 1 deletion app/koi-client/src/component-presentation/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { CSSProperties } from 'react';
import { styled } from '@linaria/react';
import styled from '@emotion/styled';

interface BoxProps {
title?: string;
Expand Down
61 changes: 28 additions & 33 deletions app/koi-client/src/component-presentation/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -28,18 +27,7 @@ const Header = ({ title, avatar = { isVisible: false }, LeftComponent, RightComp
const { isVisible, src, onClick } = avatar;

return (
<div
className={css`
position: relative;
min-height: 64px;
max-height: 64px;
background-color: #fefefe;
padding: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
`}
>
<Container>
<AvatarWrapper>
{LeftComponent || (
<Avatar
Expand All @@ -51,28 +39,35 @@ const Header = ({ title, avatar = { isVisible: false }, LeftComponent, RightComp
/>
)}
</AvatarWrapper>
<div
className={css`
flex: 1 0 auto;
display: flex;
justify-content: center;
`}
>
{title}
</div>
<div
className={css`
flex: 80px;
display: flex;
justify-content: flex-end;
`}
>
{RightComponent}
</div>
</div>
<Title>{title}</Title>
<RightComponentWrapper>{RightComponent}</RightComponentWrapper>
</Container>
);
};

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;
`;
Expand Down
58 changes: 30 additions & 28 deletions app/koi-client/src/component-presentation/MobileLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -24,46 +24,48 @@ const MobileLayout = ({
const isDesktop = useMediaQuery({ query: `(min-width: 800px)` });

return (
<div
className={css`
display: flex;
justify-content: center;
width: 100%;
height: 100%;
`}
>
<div
className={css`
display: flex;
flex-direction: column;
width: 100%;
max-width: 400px;
height: 100%;
`}
<Container>
<Wrapper
style={{
maxWidth: isDesktop ? '400px' : '100%',
}}
>
{HeaderComponent}
<div
className={css`
display: flex;
flex-direction: column;
flex: 1 1 auto;
/* 이걸 넣어야 내부 스크롤 가능 */
min-height: 0;
`}
<Inner
style={{
backgroundColor,
justifyContent,
padding,
}}
>
<ScrollViewComponent>{children}</ScrollViewComponent>
</div>
</div>
</div>
</Inner>
</Wrapper>
</Container>
);
};

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;
51 changes: 22 additions & 29 deletions app/koi-client/src/component-presentation/ScrollView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<{
/**
Expand All @@ -9,55 +9,48 @@ export type ScrollViewProps = React.PropsWithChildren<{
* @default true
*/
showScrollbar?: boolean;

onScroll?: (args: React.UIEvent<HTMLDivElement, UIEvent>) => void;
}>;

export const ScrollView = ({ showScrollbar = true, children, onScroll, ...props }: ScrollViewProps) => {
return (
<Radix.Root type="always" className={scrollViewStyle} data-f="SR-5f71" {...props}>
<Radix.Viewport className={viewportStyle} onScroll={onScroll} data-f="SV-3fb5">
<RootContainer type="always" data-f="SR-5f71" {...props}>

@omizha omizha Jan 6, 2025

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Radix 라이브러리를 참조하고 있다는 것을 명확하게 나타내는 것이 좋다고 생각하기에
이전 그대로 두는 것은 어떤가요?

@jhlee0409 jhlee0409 Jan 6, 2025 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 UI kit의 역할을 하는 컴포넌트의 경우 본질적으로 구현부를 알 필요가 없다고 판단하기도 했고,
관리 포인트를 하나로 묶는 것이 좋다라고 생각해서 별도의 컴포넌트로 나누었습니다만 하이안의 의견을 반영해서 좀 더 찾아보니

import { css } from '@emotion/react'

const cardCss = {
  self: css({
    backgroundColor: 'white',
    border: '1px solid #eee',
    borderRadius: '0.5rem',
    padding: '1rem'
  }),

  title: css({
    fontSize: '1.25rem'
  })
}

export function Card({ title, children }) {
  return (
    <div css={cardCss.self}>
      <h5 css={cardCss.title}>{title}</h5>
      {children}
    </div>
  )
}

이런 식으로 radix의 참조를 직관적으로 표기하되, css에 대한 관리체계를 더 명확하게 할 수 있을것 같네요.
헤드리스의 포인트와, 실질적일 스타일링의 분리도 하나의 장점이 될 수 있을 것 같습니다.

두 가지 관점모두 장단점이 있을 것 같습니다

한번 참고해서 수정해보고 다시 리뷰 요청드리겠습니다

<Viewport onScroll={onScroll} data-f="SV-3fb5">
{children}
</Radix.Viewport>
<Radix.Scrollbar
orientation="vertical"
className={cx(scrollbarStyle, !showScrollbar && hiddenScrollbar)}
data-f="SS-f84d"
>
<Radix.Thumb className={thumbStyle} data-f="ST-5450" />
</Radix.Scrollbar>
</Radix.Root>
</Viewport>
<ScrollbarComponent orientation="vertical" data-f="SS-f84d" showScrollbar={showScrollbar}>
<Thumb data-f="ST-5450" />
</ScrollbarComponent>
</RootContainer>
);
};

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'}
`,
);
3 changes: 1 addition & 2 deletions app/koi-client/src/component/NoSession/Splash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
3 changes: 1 addition & 2 deletions app/koi-client/src/page/@/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,7 +24,6 @@ export default function Main() {
const Wrapper = styled.div`
width: 100%;
height: 100%;

display: flex;
flex-direction: column;
align-items: stretch;
Expand Down
6 changes: 3 additions & 3 deletions app/koi-client/src/page/@backoffice@party/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -72,7 +72,7 @@ const BackofficeParty = () => {
return (
<>
<table
className={cssTable}
css={cssTable}
style={{
width: table.getCenterTotalSize(),
}}
Expand All @@ -82,7 +82,7 @@ const BackofficeParty = () => {
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
className={cssTh}
css={cssTh}
key={header.id}
colSpan={header.colSpan}
style={{ width: header.getSize() }}
Expand Down
6 changes: 3 additions & 3 deletions app/koi-client/src/page/@backoffice@poll/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { PollSchemaWithId } from 'shared~type-poll';
import { css } from '@linaria/core';
import { css } from '@emotion/react';
import { Query } from '../../hook';
import PollSubTable from './component/PollSubTable';
import PollCreateForm from './component/PollCreateForm';
Expand Down Expand Up @@ -71,7 +71,7 @@ const BackofficePoll = () => {
<>
<PollCreateForm />
<table
className={cssTable}
css={cssTable}
style={{
width: table.getCenterTotalSize(),
}}
Expand All @@ -81,7 +81,7 @@ const BackofficePoll = () => {
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
className={cssTh}
css={cssTh}
key={header.id}
colSpan={header.colSpan}
style={{ width: header.getSize() }}
Expand Down
6 changes: 3 additions & 3 deletions app/koi-client/src/page/@backoffice@stock/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { css } from '@linaria/core';
import { css } from '@emotion/react';
import { StockSchemaWithId } from 'shared~type-stock';
import RemoveStockSessionButton from '../../component/RemoveStockSessionButton';
import { Query } from '../../hook';
Expand Down Expand Up @@ -73,7 +73,7 @@ const BackofficeStock = () => {
<>
<StockCreateForm />
<table
className={cssTable}
css={cssTable}
style={{
width: table.getCenterTotalSize(),
}}
Expand All @@ -83,7 +83,7 @@ const BackofficeStock = () => {
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
className={cssTh}
css={cssTh}
key={header.id}
colSpan={header.colSpan}
style={{ width: header.getSize() }}
Expand Down
5 changes: 2 additions & 3 deletions app/koi-client/src/page/@party@[partyId]/component/MainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import { Button, Dropdown, MenuProps, message } from 'antd';
import { ArrowLeftOutlined, EllipsisOutlined } from '@ant-design/icons';
import { useAtomValue } from 'jotai';
import { css } from '@linaria/core';
import { css } from '@emotion/react';
import { useNavigate, useParams } from 'react-router-dom';
import Header from '../../../component-presentation/Header';
import ProfileValidator from '../../../component/ProfileValidator';
Expand Down Expand Up @@ -55,7 +54,7 @@ const PartyHeader = () => {
onClick={() => {
navigate(-1);
}}
className={css`
css={css`
&:hover {
cursor: pointer;
}
Expand Down
Loading