-
Notifications
You must be signed in to change notification settings - Fork 0
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
Showing
38 changed files
with
573 additions
and
219 deletions.
There are no files selected for viewing
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
27 changes: 27 additions & 0 deletions
27
client/src/component/orgamisms/CommentInputBox/index.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,27 @@ | ||
import React from 'react'; | ||
import GlobalThemeProvider from 'style/GlobalThemeProvider'; | ||
import CommentInputBox, { ICommentInputBox } from '.'; | ||
|
||
const props = { | ||
list: [{ | ||
date: new Date(), | ||
owner: 'testowner', | ||
comment: 'testcomment', | ||
name: 'testname', | ||
}], | ||
removeLabel: () => console.log('remove'), | ||
}; | ||
|
||
export default { | ||
title: 'Organisms/CommentInputBox', | ||
component: CommentInputBox, | ||
args: props, | ||
}; | ||
|
||
const Templete = (args: ICommentInputBox) => ( | ||
<GlobalThemeProvider> | ||
<CommentInputBox {...args} /> | ||
</GlobalThemeProvider> | ||
); | ||
|
||
export const Default = (args: ICommentInputBox) => Templete(args); |
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,60 @@ | ||
import React from 'react'; | ||
import getKoreaTime from 'utils/date'; | ||
import { CommentsType } from '../DetailModal/template'; | ||
import * as S from './style'; | ||
|
||
export interface ICommentInputBox { | ||
list: CommentsType[]; | ||
teamId?: string; | ||
myId?: string; | ||
value: string; | ||
className?: string; | ||
maxWidth: number; | ||
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; | ||
onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void; | ||
removeLabel: ( | ||
event: React.MouseEvent<HTMLButtonElement>, | ||
itemName: string, | ||
) => void; | ||
} | ||
|
||
const CommentInputBox = ({ | ||
list = [], | ||
teamId, | ||
myId, | ||
removeLabel, | ||
className, | ||
...inputProps | ||
}: ICommentInputBox) => ( | ||
<S.Container className={className}> | ||
{list.map((item: CommentsType) => ( | ||
<S.LabelWrapper key={`${item.date + item.owner}`}> | ||
<S.TextLabel | ||
className="lb-label" | ||
text={`작성자: ${item.name}`} | ||
/> | ||
<S.TextLabel | ||
className="lb-label" | ||
text={`작성일: ${getKoreaTime(item.date)}`} | ||
/> | ||
<S.Paragraph>{item.comment}</S.Paragraph> | ||
{(item.owner === myId || teamId === myId) | ||
&& <S.LabelRemoveBottton | ||
onClick={(event) => removeLabel && removeLabel(event, `${item.date + item.owner}`)} | ||
> | ||
× | ||
</S.LabelRemoveBottton> | ||
} | ||
</S.LabelWrapper> | ||
))} | ||
{myId | ||
&& <S.BlockContent title='새 댓글' className="ci-block"> | ||
<S.InputContainer> | ||
<S.Input className="lb-input" type='textarea' autoWidth {...inputProps} /> | ||
</S.InputContainer> | ||
</S.BlockContent> | ||
} | ||
</S.Container> | ||
); | ||
|
||
export default CommentInputBox; |
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,81 @@ | ||
import InputText from 'component/atoms/InputText'; | ||
import DetailContent from 'component/molecules/DetailContent'; | ||
import _TextLabel from 'component/atoms/TextLabel'; | ||
import styled from 'styled-components'; | ||
|
||
export const Container = styled.div``; | ||
|
||
export const LabelWrapper = styled.div` | ||
font-size: 1rem; | ||
position: relative; | ||
border-radius: 1rem; | ||
margin-bottom: 2rem; | ||
`; | ||
|
||
export const LabelRemoveBottton = styled.button` | ||
position: absolute; | ||
right: .5rem; | ||
top: .5rem; | ||
width: 1em; | ||
font-size: 1.2em; | ||
line-height: 1em; | ||
border-radius: 50%; | ||
border: 1px solid black; | ||
background-color: white; | ||
box-sizing: content-box; | ||
z-index: 1; | ||
visibility: visible; | ||
cursor: pointer; | ||
transition: opacity 150ms ease-in; | ||
`; | ||
|
||
export const TextLabel = styled(_TextLabel)` | ||
margin-bottom: 0.4em; | ||
margin: 0 0.5rem; | ||
&:not(:last-child) { | ||
margin-right: 0.4em; | ||
} | ||
`; | ||
|
||
export const Paragraph = styled.p` | ||
font-size: 1.2rem; | ||
line-height: 1.2em; | ||
padding: 0.5rem .5rem; | ||
white-space: pre-line; | ||
word-break: break-all; | ||
`; | ||
|
||
export const InputContainer = styled.div` | ||
position: relative; | ||
display: inline-block; | ||
vertical-align: top; | ||
`; | ||
|
||
export const Input = styled(InputText)` | ||
font-size: 1rem; | ||
padding: 0.3em 0.5em; | ||
border-radius: 1em; | ||
border: 2px solid #cdcdcd; | ||
outline: none; | ||
&:focus { | ||
border-color: #abdcbd; | ||
} | ||
&:hover { | ||
border-color: #bcabef; | ||
} | ||
`; | ||
|
||
export const BlockContent = styled(DetailContent)` | ||
text-align: left; | ||
white-space: nowrap; | ||
text-overflow: ellipsis; | ||
overflow: hidden; | ||
.dc-title { | ||
font-size: 1.6rem; | ||
margin-bottom: 0.8em; | ||
} | ||
`; |
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
Oops, something went wrong.