-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1db9840
commit a99ac5d
Showing
6 changed files
with
128 additions
and
8 deletions.
There are no files selected for viewing
35 changes: 35 additions & 0 deletions
35
.../src/components/dashboard/ProcessColumn/ProcessDescription/ProcessDescription.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import ProcessDescription from './index'; | ||
|
||
const meta: Meta<typeof ProcessDescription> = { | ||
title: 'Components/ProcessColumn/ProcessDescription', | ||
component: ProcessDescription, | ||
parameters: { | ||
layout: 'centered', | ||
docs: { | ||
description: { | ||
component: '프로세스의 설명을 렌더링합니다. 더보기 버튼을 클릭하면 설명이 전체로 펼쳐집니다.', | ||
}, | ||
}, | ||
}, | ||
tags: ['autodocs'], | ||
decorators: [ | ||
(Child) => ( | ||
<div | ||
style={{ | ||
width: '25rem', | ||
}} | ||
> | ||
<Child /> | ||
</div> | ||
), | ||
], | ||
args: { | ||
description: '프로세스 설명입니다.', | ||
}, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof ProcessDescription>; | ||
|
||
export const Default: Story = {}; |
32 changes: 32 additions & 0 deletions
32
frontend/src/components/dashboard/ProcessColumn/ProcessDescription/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { useLayoutEffect, useRef, useState } from 'react'; | ||
import S from './style'; | ||
|
||
interface ProcessDescriptionProps { | ||
description: string; | ||
} | ||
|
||
export default function ProcessDescription({ description }: ProcessDescriptionProps) { | ||
const [isOverflow, setOverflow] = useState(false); | ||
const [showMore, setShowMore] = useState(false); | ||
|
||
const toggleShowMore = () => setShowMore((prev) => !prev); | ||
|
||
const descriptionRef = useRef<HTMLDivElement>(null); | ||
useLayoutEffect(() => { | ||
if (descriptionRef.current) { | ||
setOverflow(descriptionRef.current.scrollWidth > descriptionRef.current.clientWidth); | ||
} | ||
}, [description]); | ||
|
||
return ( | ||
<S.Container showMore={showMore}> | ||
<S.Description | ||
ref={descriptionRef} | ||
showMore={showMore} | ||
> | ||
{description} | ||
</S.Description> | ||
{isOverflow && <S.MoreButton onClick={toggleShowMore}>{showMore ? '접기' : '..더보기'}</S.MoreButton>} | ||
</S.Container> | ||
); | ||
} |
48 changes: 48 additions & 0 deletions
48
frontend/src/components/dashboard/ProcessColumn/ProcessDescription/style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { css } from '@emotion/react'; | ||
import styled from '@emotion/styled'; | ||
|
||
const Container = styled.div<{ showMore: boolean }>` | ||
width: 100%; | ||
display: flex; | ||
align-items: baseline; | ||
${({ showMore }) => | ||
showMore && | ||
css` | ||
flex-direction: column; | ||
align-items: flex-end; | ||
`} | ||
`; | ||
|
||
const Description = styled.p<{ showMore: boolean }>` | ||
width: 100%; | ||
${({ theme }) => theme.typography.common.block}; | ||
color: ${({ theme }) => theme.baseColors.grayscale[700]}; | ||
margin-bottom: 0; | ||
padding: 0.4rem; | ||
${({ showMore }) => | ||
!showMore && | ||
css` | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
`} | ||
`; | ||
|
||
const MoreButton = styled.button` | ||
${({ theme }) => theme.typography.common.block}; | ||
color: ${({ theme }) => theme.baseColors.grayscale[500]}; | ||
white-space: nowrap; | ||
margin: 0; | ||
`; | ||
|
||
const S = { | ||
Container, | ||
Description, | ||
MoreButton, | ||
}; | ||
|
||
export default S; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters