Skip to content

Commit d0eb216

Browse files
prgmr99prgmr99
authored
feat: 회고 분석 다이얼로그 분석 탭 작업(팀) (depromeet#544)
* feat: depromeet#542 회고 컴포넌트 분리 * feat: depromeet#542 차트 컴포넌트 추가
1 parent 33345b6 commit d0eb216

5 files changed

Lines changed: 583 additions & 222 deletions

File tree

‎apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisIndividualContents.tsx‎

Lines changed: 2 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { SATISTFACTION_COLOR } from "@/component/write/template/template.const";
44

55
import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
66
import { css } from "@emotion/react";
7+
import RetrospectsOverview from "./RetrospectsOverview";
78

89
const EMOTIONS: IconType[] = ["ic_very_poor", "ic_poor", "ic_commonly", "ic_good", "ic_very_good"];
910

@@ -288,187 +289,7 @@ export default function AnalysisIndividualContents() {
288289
</article>
289290

290291
{/* ---------- 회고 ---------- */}
291-
<article>
292-
{/* ---------- 제목 ---------- */}
293-
<section
294-
css={css`
295-
display: flex;
296-
gap: 0.7rem;
297-
margin-bottom: 1.2rem;
298-
`}
299-
>
300-
<Typography
301-
variant="body14Strong"
302-
color="gray800"
303-
css={css`
304-
display: flex;
305-
align-items: center;
306-
307-
&::after {
308-
content: "";
309-
width: 0.1rem;
310-
height: 1.4rem;
311-
background-color: ${DESIGN_TOKEN_COLOR.gray400};
312-
margin-left: 0.7rem;
313-
}
314-
`}
315-
>
316-
회고
317-
</Typography>
318-
<Typography variant="body14SemiBold" color="gray800">
319-
나는 이렇게 회고하고 있어요!
320-
</Typography>
321-
</section>
322-
323-
{/* ---------- 컨텐츠 ---------- */}
324-
<section
325-
css={css`
326-
width: 100%;
327-
height: 24rem;
328-
display: flex;
329-
flex-shrink: 0;
330-
background-color: ${DESIGN_TOKEN_COLOR.gray100};
331-
border-radius: 1.2rem;
332-
padding: 2.4rem 2rem;
333-
`}
334-
>
335-
{/* ---------- 회고 내용 3개 컬럼 ---------- */}
336-
<div
337-
css={css`
338-
display: flex;
339-
gap: 2.4rem;
340-
width: 100%;
341-
height: 100%;
342-
`}
343-
>
344-
{/* ---------- 잘 하고 있어요 ---------- */}
345-
<div
346-
css={css`
347-
display: flex;
348-
flex-direction: column;
349-
gap: 2rem;
350-
flex: 1;
351-
`}
352-
>
353-
<Typography variant="title16Bold" color="gray900">
354-
잘 하고 있어요
355-
</Typography>
356-
<div
357-
css={css`
358-
display: flex;
359-
flex-direction: column;
360-
gap: 0.8rem;
361-
`}
362-
>
363-
{/* 긍정적 항목들 */}
364-
{["회의 내용 문서화", "꾸준한 글 작성", "적극적인 피드백"].map((item, index) => (
365-
<div
366-
key={index}
367-
css={css`
368-
display: flex;
369-
align-items: center;
370-
gap: 1.2rem;
371-
height: 4.4rem;
372-
padding: 1.2rem 1.6rem;
373-
background-color: white;
374-
border-radius: 0.8rem;
375-
`}
376-
>
377-
<Icon icon="ic_good_mark" size={1.6} />
378-
<Typography variant="subtitle14Bold" color="gray800">
379-
{item}
380-
</Typography>
381-
</div>
382-
))}
383-
</div>
384-
</div>
385-
386-
{/* ---------- 이런 점은 부족해요 ---------- */}
387-
<div
388-
css={css`
389-
display: flex;
390-
flex-direction: column;
391-
gap: 2rem;
392-
flex: 1;
393-
`}
394-
>
395-
<Typography variant="title16Bold" color="gray900">
396-
이런 점은 부족해요
397-
</Typography>
398-
<div
399-
css={css`
400-
display: flex;
401-
flex-direction: column;
402-
gap: 0.8rem;
403-
`}
404-
>
405-
{/* 부족한 항목들 */}
406-
{["짧은 회의 늘어짐", "회의 시간 준수", "꾸준한 글 작성"].map((item, index) => (
407-
<div
408-
key={index}
409-
css={css`
410-
display: flex;
411-
align-items: center;
412-
gap: 1.2rem;
413-
height: 4.4rem;
414-
padding: 1.2rem 1.6rem;
415-
background-color: white;
416-
border-radius: 0.8rem;
417-
`}
418-
>
419-
<Icon icon="ic_bad_mark_red" size={1.6} />
420-
<Typography variant="subtitle14Bold" color="gray800">
421-
{item}
422-
</Typography>
423-
</div>
424-
))}
425-
</div>
426-
</div>
427-
428-
{/* ---------- 개선이 필요해요 ---------- */}
429-
<div
430-
css={css`
431-
display: flex;
432-
flex-direction: column;
433-
gap: 2rem;
434-
flex: 1;
435-
`}
436-
>
437-
<Typography variant="title16Bold" color="gray900">
438-
개선이 필요해요
439-
</Typography>
440-
<div
441-
css={css`
442-
display: flex;
443-
flex-direction: column;
444-
gap: 0.8rem;
445-
`}
446-
>
447-
{/* 개선 필요 항목들 */}
448-
{["설득력 갖추기", "꾸준한 자기계발", "적극적인 피드백"].map((item, index) => (
449-
<div
450-
key={index}
451-
css={css`
452-
display: flex;
453-
align-items: center;
454-
gap: 1.2rem;
455-
height: 4.4rem;
456-
padding: 1.2rem 1.6rem;
457-
background-color: white;
458-
border-radius: 0.8rem;
459-
`}
460-
>
461-
<Icon icon="ic_improve_blue_mark" size={1.6} />
462-
<Typography variant="subtitle14Bold" color="gray800">
463-
{item}
464-
</Typography>
465-
</div>
466-
))}
467-
</div>
468-
</div>
469-
</div>
470-
</section>
471-
</article>
292+
<RetrospectsOverview description="나는 이렇게 회고 하고 있어요!" />
472293
</section>
473294
);
474295
}

‎apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisTab.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useState } from "react";
33

44
import TeamIndividualToggle from "./TeamIndividualToggle";
55
import AnalysisIndividualContents from "./AnalysisIndividualContents";
6+
import AnalysisTeamContents from "./AnalysisTeamContents";
67

78
type ViewType = "개인" | "팀";
89

@@ -32,7 +33,7 @@ export default function AnalysisTab() {
3233
flex: 1;
3334
`}
3435
>
35-
{selectedView === "개인" ? <AnalysisIndividualContents /> : <div>팀 분석 콘텐츠</div>}
36+
{selectedView === "개인" ? <AnalysisIndividualContents /> : <AnalysisTeamContents />}
3637
</div>
3738
</section>
3839
);

0 commit comments

Comments
 (0)