Skip to content
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

Refactor/css modal inner #487

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Refactor/css modal inner #487

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
673a283
feat: change modal inner's css
Sanghou May 1, 2024
545fb1b
feat: change text to p with token css
Sanghou May 1, 2024
c8b44f8
feat: change text box
Sanghou May 1, 2024
ecf046a
feat: fix vote options
Sanghou May 1, 2024
d1b294c
feat: update modalInner TextBox
Sanghou May 8, 2024
fcd5998
fix: change justiry for option
Sanghou May 8, 2024
3bfa4ad
fix: update voteChoice flex
Sanghou May 8, 2024
5755ddb
fix: change box to submitterable button
Sanghou May 8, 2024
c86b1ad
fix: change to button
Sanghou May 8, 2024
064ffff
fix: change button style
Sanghou May 8, 2024
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
259 changes: 109 additions & 150 deletions packages/web/src/components/molecules/ModalInnerTextBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import React, { type PropsWithChildren } from "react";
import {
BorderedBox,
Box,
Text,
GrayTextButton,
Scroll,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Lines 329-331에 사용되는 Scroll은 deprecated component 이어서 이부분도 scroll, scrollBar을 사용하게 바꾸는 것이 좋을 것 같아요!

TextInput,
Expand All @@ -29,6 +26,9 @@ import {
gap,
border,
round,
row,
center,
justify,
} from "@biseo/web/styles";

interface ModalInnerProps extends PropsWithChildren {
Expand Down Expand Up @@ -80,115 +80,81 @@ export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
children,
required = false,
}: ModalInnerProps) => (
<Box dir="column" w="fill" gap={8}>
<Box w="fill" dir="row" align="flex-end" justify="space-between">
<Box dir="row" align="center" gap={8}>
<Box dir="row" gap={2}>
<Text variant="body" color="black">
{title}
</Text>
{required && (
<Text variant="body" color="blue600">
*
</Text>
)}
</Box>
<div css={[column, w("fill"), gap(8)]}>
<div css={[w("fill"), row, align.end, justify.between]}>
<div css={[row, align.center, gap(8)]}>
<div css={[row, gap(2)]}>
<p css={[text.body, text.black]}>{title}</p>
{required && <p css={[text.body, text.blue600]}>*</p>}
</div>
{count !== undefined && (
<Box
bg="blue200"
round={5}
align="center"
justify="center"
w={20}
h={20}
>
<Text color="blue600">{count}</Text>
</Box>
<div css={[center, bg.blue200, round.md, w(20), h(20)]}>
<p css={[text.blue600, text.body]}>{count}</p>
</div>
)}
</Box>
</div>
<GrayTextButton onClick={buttonOnClick}>{buttonText}</GrayTextButton>
</Box>
</div>
{children}
</Box>
</div>
);

const TextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
<BorderedBox
borderColor="gray200"
bg="gray100"
w={300}
borderSize={1}
padVertical={10}
padHorizontal={15}
round={5}
borderStyle="solid"
gap={10}
<div
css={[
border.gray200,
round.md,
bg.gray100,
w(300),
padding.vertical(10),
padding.horizontal(15),
gap(10),
]}
>
<Text color="gray600" variant="subtitle">
{children}
</Text>
</BorderedBox>
<p css={[colors.gray600, text.subtitle]}>{children}</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

text css에서는 colors.gray600 대신에 text.gray600을 사용하여야 색깔 설정이 되는 것 같아요.

</div>
);
ModalInner.TextBox = TextBox;
const WhiteTextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
<BorderedBox
borderColor="gray200"
bg="white"
w={300}
borderSize={1}
padVertical={10}
padHorizontal={15}
round={5}
borderStyle="solid"
gap={10}
<div
css={[
border.gray200,
round.md,
bg.white,
w(300),
padding.vertical(10),
padding.horizontal(15),
gap(10),
]}
>
<Text color="gray600" variant="subtitle">
{children}
</Text>
</BorderedBox>
<p css={[colors.gray600, text.subtitle]}>{children}</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 colors.gray600를 text.gray600으로 바꿔야 할 것 같아요!

</div>
);
ModalInner.WhiteTextBox = WhiteTextBox;
const InputBox: React.FC<InputProps> = ({ value = undefined, onChange }) => (
<BorderedBox
w={300}
borderColor="gray200"
bg="gray100"
borderSize={1}
round={5}
borderStyle="solid"
dir="row"
align="center"
>
<div css={[border.gray200, round.md, bg.gray100, w(300), row, align.center]}>
<TextInput
placeholder="내용을 입력하세요"
value={value}
onChange={onChange}
maxLength={maxTextLength}
/>
</BorderedBox>
</div>
);
ModalInner.InputBox = InputBox;

const TextAreaInputBox: React.FC<TextAreaProps> = ({
value = undefined,
onChange,
}) => (
<BorderedBox
w={300}
h={68}
borderColor="gray200"
bg="gray100"
borderSize={1}
round={5}
borderStyle="solid"
>
<div css={[w(300), h(68), border.gray200, round.md, bg.gray100]}>
<TextAreaFixedsize
placeholder="내용을 입력하세요"
value={value}
onChange={onChange}
maxLength={maxTextLength}
/>
</BorderedBox>
</div>
);
ModalInner.TextAreaInputBox = TextAreaInputBox;

Expand All @@ -198,15 +164,7 @@ const TextButton: React.FC<SubmitProps> = ({
onClick,
onSubmit,
}) => (
<BorderedBox
w={300}
bg="gray100"
borderSize={1}
borderStyle="solid"
dir="row"
align="center"
padRight={15}
>
<div css={[w(300), bg.gray100, row, align.center, padding.right(15), border]}>
Comment on lines -201 to +167
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 BorderedBox는 borderColor attribute가 없기 때문에 border 색깔이 default로 transparent로 설정이 되어서 그냥 평범한 Box와 appearance가 똑같아요. 그래서 line 167에서 border attribute를 빼는 게 좋을 것 같은데, 어떻게 생각하시나요?

<TextInput
value={value}
placeholder={children?.toString()}
Expand All @@ -220,9 +178,9 @@ const TextButton: React.FC<SubmitProps> = ({
}}
/>
<Button w={20} h={20} onClick={onSubmit}>
<Text css={[colors.blue600, text.boldtitle2, "line-height: 1"]}>+</Text>
<p css={[colors.blue600, text.boldtitle2, "line-height: 1"]}>+</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 colors.blue600를 text.blue600으로 바꿔야 할 것 같아요!

</Button>
</BorderedBox>
</div>
);
ModalInner.TextButton = TextButton;

Expand All @@ -232,44 +190,46 @@ const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => {
${scrollBar}
overflow-y: scroll;
`;
const flexWrap = css`
flex-wrap: wrap;
`;
return (
<Box
dir="row"
gap={8}
w="fill"
h={150}
wrap="wrap"
justify="flex-start"
css={scrollTyle}
<div
css={[
row,
justify.start,
w("fill"),
h(150),
scrollTyle,
gap(8),
flexWrap,
]}
>
{children}
</Box>
</div>
);
};
ModalInner.VoteOptions = VoteOptions;

const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
<BorderedBox
borderColor="gray200"
bg="white"
w="hug"
h="hug"
justify="center"
borderSize={1}
padVertical={7}
padHorizontal={15}
round={5}
borderStyle="solid"
<div
css={[
w("hug"),
h("hug"),
justify.center,
border.gray200,
round.md,
padding.vertical(7),
padding.horizontal(15),
]}
style={{
maxWidth: "100%",
wordBreak: "break-all",
overflowWrap: "break-word",
}}
>
<Text color="gray600" variant="subtitle">
{children}
</Text>
</BorderedBox>
<p css={[colors.gray600, text.subtitle]}>{children}</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 colors.gray600를 text.gray600으로 바꿔야 할 것 같아요!

</div>
);
ModalInner.VoteOption = VoteOption;

Expand Down Expand Up @@ -307,61 +267,60 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
children = null,
onClick = () => {},
}) => (
<BorderedBox
borderColor="gray200"
bg="white"
w="fill"
h="hug"
borderSize={1}
padVertical={8}
padHorizontal={12}
round={5}
borderStyle="solid"
justify="space-between"
gap={5}
dir="row"
align="flex-start"
<div
css={[
w("fill"),
h("hug"),
bg.white,
justify.between,
align.start,
border.gray200,
round.md,
padding.vertical(8),
padding.horizontal(12),
row,
gap(5),
]}
style={{
minHeight: 32,
}}
>
<Text
color="gray500"
variant="subtitle"
<p
css={[colors.gray600, text.subtitle]}
Comment on lines -328 to +289
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기 text 색깔을 gray500 에서 gray600으로 바꾼 이유가 있나요?

Copy link
Collaborator

Choose a reason for hiding this comment

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

그리고 colors => text 로 바꾸어야 할 것 같아요!

style={{
wordBreak: "break-all",
overflowWrap: "break-word",
}}
>
{children}
</Text>
</p>
<Clickable>
<Box w={13} h={13} justify="center" align="center" onClick={onClick}>
<Button
css={[w(13), h(13)]}
style={{ background: "transparent" }}
onClick={onClick}
>
<TrashIcon />
</Box>
</Button>
</Clickable>
</BorderedBox>
</div>
);
ModalInner.VoteChoice = VoteChoice;

const TagChoice: React.FC<PropsWithChildren> = ({ children = null }) => (
<BorderedBox
borderColor="gray200"
bg="white"
h={30}
borderSize={1}
padVertical={0}
padHorizontal={15}
round={5}
borderStyle="solid"
gap={8}
justify="center"
align="center"
<div
css={[
h(30),
bg.white,
border.gray200,
padding.horizontal(15),
round.md,
gap(8),
center,
]}
>
<Text color="gray600" variant="subtitle">
{children}
</Text>
</BorderedBox>
<p css={[colors.gray600, text.subtitle]}>{children}</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 colors.gray600를 text.gray600으로 바꿔야 할 것 같아요!

</div>
);
ModalInner.TagChoice = TagChoice;

Expand Down
Loading