From 9b9eac2d6f8e08158b592c89566c4c423caa886e Mon Sep 17 00:00:00 2001 From: IMHOJEONG <39ghwjd@naver.com> Date: Tue, 26 Dec 2023 00:52:40 +0900 Subject: [PATCH] [revise]: revise scrollbar & Link --- .../app/design/atoms/Link/Link.stories.tsx | 4 ++++ .../app/design/atoms/Link/Link.tsx | 9 +++++++ .../atoms/TextArea/TextArea.stories.tsx | 4 ++-- .../app/design/atoms/TextArea/TextArea.tsx | 24 ++++++++++++++++--- .../organisms/CardGroup/CardGroup.stories.tsx | 2 +- .../design/organisms/CardGroup/CardGroup.tsx | 11 ++++++--- .../CardGroupDataComponent.server.tsx | 6 +---- 7 files changed, 46 insertions(+), 14 deletions(-) diff --git a/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx b/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx index 36e5988..0f9da05 100755 --- a/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx +++ b/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx @@ -28,9 +28,13 @@ export const MainLink: Story = { afterIcon: '->', fontStyle: 'normal', fontWeight: '400', + fontSize: '1.5vmin', whiteSpace: 'nowrap', textDecorationLine: 'none', color: 'black', + padding: '1vh 2vw', + border: '3px solid #c2d1d9', + borderRadius: '10px', }, }; diff --git a/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx b/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx index 926d6be..158f019 100755 --- a/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx +++ b/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx @@ -18,6 +18,9 @@ export interface LinkProps { whiteSpace?: string; textDecorationLine?: string; color?: string; + padding?: string; + borderRadius?: string; + border?: string; } export function CustomLink(props: LinkProps) { @@ -32,6 +35,9 @@ export function CustomLink(props: LinkProps) { whiteSpace={props.whiteSpace} textDecorationLine={props.textDecorationLine} color={props.color} + padding={props.padding} + borderRadius={props.borderRadius} + border={props.border} > {props.text} @@ -47,6 +53,9 @@ const Component = styled.div` white-space: ${(props) => props.whiteSpace}; text-decoration-line: ${(props) => props.textDecorationLine}; color: ${(props) => props.color}; + padding: ${(props) => props.padding}; + border: ${(props) => props.border}; + border-radius: ${(props) => props.borderRadius}; &::after { content: ' ${(props) => props.afterIcon}'; color: black; diff --git a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx index 7a2b729..f3660b4 100755 --- a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx +++ b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx @@ -31,7 +31,7 @@ export const MainTextArea: Story = { textAlign: 'center', flexShrink: '0', flex: '1 1 100%', - overflow: 'scroll', + overflow: 'auto', color: '#505D68', }, }; @@ -48,7 +48,7 @@ export const SearchTextArea: Story = { flexShrink: '0', flex: '1 1 100%', color: '#505D68', - overflow: 'scroll', + overflow: 'auto', alignSelf: 'stretch', }, }; diff --git a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx index 7915b7c..55e83d9 100755 --- a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx +++ b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx @@ -57,9 +57,22 @@ export function TextArea(props: TextAreaProps) { const { src, ...rest } = props; return ; }, + // code(props) { const { children, className, node, ...rest } = props; - return ; + const language = className?.match(/language-(\w+)/)?.at(1); + return ( + + ); }, }} remarkPlugins={[remarkMdx, remarkBreaks]} @@ -89,8 +102,13 @@ const Component = styled.div` grid-template-columns: ${(props) => props.gridTemplateColumns}; gap: ${(props) => props.gap}; grid-auto-flow: ${(props) => props.gridAutoFlow}; - + cursor: pointer; &::-webkit-scrollbar { - display: none; + background: #f2f5f7; + border-radius: 10px; + } + &::-webkit-scrollbar-thumb { + background: #ebe3d5; + border-radius: 10px; } `; diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx index 230cd3d..6475958 100755 --- a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx +++ b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx @@ -55,7 +55,7 @@ export const SearchCardGroupStory: Story = { alignItems: 'center', gap: '10px', padding: '6.03vmax 1.158vmax 10px 1.158vmax', - overflow: 'scroll', + overflow: 'auto', children: , }, }; diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx index 2f30f3e..f280204 100755 --- a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx +++ b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx @@ -11,8 +11,6 @@ import { CardGroupSearchDataServerComponent, ResponseBodyProps, } from './CardGroupDataComponent.server'; -import { useAtomValue } from 'jotai'; -import { searchKeywordAtom } from '@/app/state'; export interface CardGroupProps extends PropsWithChildren { children?: ReactElement; @@ -60,6 +58,13 @@ const Component = styled.div` align-items: ${(props) => props.alignItems}; &::-webkit-scrollbar { - display: none; + background: #f2f5f7; + + border-radius: 10px; + } + &::-webkit-scrollbar-thumb { + background: #ebe3d5; + border: 1px solid black; + border-radius: 10px; } `; diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx index d6b6043..fa00e5c 100755 --- a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx +++ b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx @@ -129,7 +129,7 @@ const StyledMainComponent = styled.div` const variants = { open: { x: 0, y: 0, zIndex: 3 }, closed: { x: '1vmax', y: '1vmax', zIndex: 2 }, - boxed: { x: '0vw', y: '70vh', zIndex: 1 }, + boxed: { x: '0vw', y: '70vh', zIndex: 4 }, }; export function CardGroupMainDataServerComponent( @@ -185,8 +185,6 @@ export function CardGroupMainDataServerComponent( ); } -// const reusedAtom = atom((get) => get(searchKeywordAtom); - export function CardGroupSearchDataServerComponent( props: CardDataServerComponentProps, ) { @@ -220,5 +218,3 @@ export function CardGroupSearchDataServerComponent( ); } - -// const Component = styled.div``;