Skip to content

Commit

Permalink
🐛 Fix: Section 카드 크기 오류 수정 및 Kudos 설명창 반응형 수정 (#344)
Browse files Browse the repository at this point in the history
Co-authored-by: geumbin <[email protected]>
  • Loading branch information
sunflower888 and geumbin authored Jul 25, 2024
1 parent 0f3cad9 commit 47259a1
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 9 deletions.
1 change: 1 addition & 0 deletions src/components/createRetro/modal/TemplateSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const TemplateSelect: React.FC<TemplateSelectProps> = ({ onChange, defaultTempla
return (
<>
<div>Template</div>
<p style={{ fontSize: '10px', fontWeight: '400', color: '#898ea9' }}>템플릿 설정 안할 시, KPT(default)</p>
<Select
placeholder="Select option"
onChange={e => onChange(Number(e.target.value))}
Expand Down
172 changes: 163 additions & 9 deletions src/components/writeRetro/explainModal/explainRetro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -164,18 +164,172 @@ export const ExplainKPT = () => {
);
};

// export const ExplainKudos = () => {
// return (
// <>
// <S.ExplainStyle>
// <div style={{ display: 'flex' }}>
// <div style={{ display: 'flex', marginTop: '15px', position: 'absolute', left: '120px' }}>
// <IoPeopleSharp color="#878787" size="26px" />
// <S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
// </div>
// <S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
// </div>
// <div style={{ display: 'flex' }}>
// {/* ExplainKudos */}
// <S.ExplainBody>
// <S.ExplainSubTitle>진행 방법</S.ExplainSubTitle>
// <S.ExplainContent style={{ marginBottom: '9px' }}>
// <S.ExplainContentSpan>1.</S.ExplainContentSpan>
// <S.ExplainContentSpan>
// 팀원 모두가 <span style={{ fontWeight: '700' }}>Kudos, Went Well, To Improve 섹션</span> 먼저 정해진
// 기한 내에 입력해 둡니다.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent style={{ width: '396px', marginLeft: '15px', marginBottom: '17px' }}>
// <S.ExplainContentSpan>1-1.</S.ExplainContentSpan>
// <S.ExplainContentSpan>
// <span style={{ fontWeight: '700' }}>Kudos 섹션</span>은
// <div style={{ display: 'inline-flex', margin: '0px 5px' }}>
// <BiSolidLike size={17} color="gray" />
// <S.ExplainTextImg>
// <IoPersonCircleSharp size={15} color="#ADB8CC" />
// <span
// style={{
// fontSize: '8px',
// fontWeight: '500',
// color: '#ADB8CC',
// lineHeight: '16px',
// marginLeft: '3px',
// }}
// >
// 닉네임
// </span>
// </S.ExplainTextImg>
// </div>
// 해당 버튼에 칭찬하고자<br></br>
// 하는 팀원을 지정하면 됩니다.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent style={{ marginBottom: '17px' }}>
// <S.ExplainContentSpan>2.</S.ExplainContentSpan>
// <S.ExplainContentSpan>
// 같은 시간에 모여 작성된 <span style={{ fontWeight: '700' }}>3개의 섹션</span>을 함께 읽어보고, <br></br>{' '}
// 다음 활동 떄 진행해야 하는 활동을 정합니다.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent style={{ marginBottom: '17px' }}>
// <S.ExplainContentSpan>3.</S.ExplainContentSpan>
// <S.ExplainContentSpan>
// 지정한 활동을 <span style={{ fontWeight: '700' }}>Action Items 섹션</span>에 입력합니다.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent>
// <S.ExplainContentSpan>4.</S.ExplainContentSpan>
// <S.ExplainContentSpan>
// <span style={{ fontWeight: '700' }}>Action Items</span>에 작성된 활동을 담당할 담당자를 정하여<br></br>
// <div style={{ display: 'inline-flex', margin: '0 5px' }}>
// <BsPersonFillCheck size={17} color="gray" />
// <S.ExplainTextImg>
// <IoPersonCircleSharp size={15} color="#ADB8CC" />
// <span
// style={{
// fontSize: '8px',
// fontWeight: '500',
// color: '#ADB8CC',
// lineHeight: '16px',
// marginLeft: '3px',
// }}
// >
// 닉네임
// </span>
// </S.ExplainTextImg>
// </div>
// 해당 버튼에 팀원을 지정합니다.
// </S.ExplainContentSpan>
// </S.ExplainContent>
// </S.ExplainBody>

// <S.ExplainLine></S.ExplainLine>

// <S.ExplainBody>
// <S.ExplainSubTitle>각 섹션 설명</S.ExplainSubTitle>
// <S.ExplainContent style={{ marginBottom: '40px' }}>
// <S.ExplainImgStyle>
// <S.ExplainImgLine></S.ExplainImgLine>
// <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>Kudos</span>
// </S.ExplainImgStyle>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
// 팀원이 활동 기간 동안 잘한 점을 칭찬해주세요.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent style={{ marginBottom: '40px' }}>
// <S.ExplainImgStyle>
// <S.ExplainImgLine></S.ExplainImgLine>
// <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
// Went Well
// </span>
// </S.ExplainImgStyle>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
// 프로젝트나 스프린트 동안 잘 진행된 사항을 공유하세요.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent style={{ marginBottom: '40px' }}>
// <S.ExplainImgStyle>
// <S.ExplainImgLine></S.ExplainImgLine>
// <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
// To Improve
// </span>
// </S.ExplainImgStyle>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
// 개선이 필요한 부분을 솔직하게 공유하세요.
// </S.ExplainContentSpan>
// </S.ExplainContent>

// <S.ExplainContent>
// <S.ExplainImgStyle>
// <S.ExplainImgLine></S.ExplainImgLine>
// <span style={{ fontSize: '13px', fontWeight: '700', color: '#ffffff', lineHeight: '28px' }}>
// Action Items
// </span>
// </S.ExplainImgStyle>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>: </S.ExplainContentSpan>
// <S.ExplainContentSpan style={{ fontSize: '15px', lineHeight: '26px' }}>
// <span style={{ fontWeight: '700' }}>Went Well</span>에서 지속되어야 할 행동과<br></br>
// <span style={{ fontWeight: '700' }}>To Improve</span>에서 도출된 문제를 해결하기 위한 구체적인 행동
// 계획을 수립하세요.
// </S.ExplainContentSpan>
// </S.ExplainContent>
// </S.ExplainBody>
// </div>
// </S.ExplainStyle>
// </>
// );
// };

export const ExplainKudos = () => {
return (
<>
<S.ExplainStyle>
<div style={{ display: 'flex' }}>
<div style={{ display: 'flex', marginTop: '15px', position: 'absolute', left: '120px' }}>
<IoPeopleSharp color="#878787" size="26px" />
<S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
</div>
<S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
</div>
<div style={{ display: 'flex' }}>
<Flex justifyContent="center">
<Flex margin="0 auto" flexDirection={{ md: 'row', base: 'column' }}>
<Flex margin="auto 10px">
<IoPeopleSharp color="#878787" size="26px" />
<S.ExplainSideTitle>팀 단위 회고에 추천!</S.ExplainSideTitle>
</Flex>
<S.ExplainTitle>Kudos 회고 더 잘 활용하기</S.ExplainTitle>
</Flex>
</Flex>
<Flex flexDirection={{ md: 'row', base: 'column' }}>
{/* ExplainKudos */}
<S.ExplainBody>
<S.ExplainSubTitle>진행 방법</S.ExplainSubTitle>
Expand Down Expand Up @@ -310,7 +464,7 @@ export const ExplainKudos = () => {
</S.ExplainContentSpan>
</S.ExplainContent>
</S.ExplainBody>
</div>
</Flex>
</S.ExplainStyle>
</>
);
Expand Down

0 comments on commit 47259a1

Please sign in to comment.