Merge pull request #87 from Team-Remini/design/#85

design/#85/회고step개수표시
Team-Remini · Dec 19, 2023 · fa53db2 · fa53db2
2 parents 6b8c99c + 01909f7
commit fa53db2
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 10 deletions.
diff --git a/src/components/RecommendSort/AAR.tsx b/src/components/RecommendSort/AAR.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const AAR: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">AAR 회고</h3>
+      <div className="title">
+        <span>AAR 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>3</span>
+      </div>
       <div className="text_box">
         <p>
           AAR은 After Action Review/Report의 줄임말로 짧은 시간 내에 유연하고

diff --git a/src/components/RecommendSort/Continue.tsx b/src/components/RecommendSort/Continue.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const Continue: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">Continue-Stop-Start 회고</h3>
+      <div className="title">
+        <span>Continue-Stop-Start 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>3</span>
+      </div>
       <div className="text_box">
         <p>
           Continue-Stop-Start 회고는 해결법 지향적이고, 무엇을 시작하고

diff --git a/src/components/RecommendSort/FiveF.tsx b/src/components/RecommendSort/FiveF.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const FiveF: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">5F 회고</h3>
+      <div className="title">
+        <span>5F 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>5</span>
+      </div>
       <div className="text_box">
         <p>
           5F 회고는 다섯 가지 차원(Five Dimensions)을 기반으로 순서대로 진행하는

diff --git a/src/components/RecommendSort/FourL.tsx b/src/components/RecommendSort/FourL.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const FourL: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">4L 회고</h3>
+      <div className="title">
+        <span>4L 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>4</span>
+      </div>
       <div className="text_box">
         <p>
           4L 회고는 오로지 내가 수행하였던 일에만 집중해서 솔직하게 정리하는

diff --git a/src/components/RecommendSort/KPT.tsx b/src/components/RecommendSort/KPT.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const KPT: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">KPT 회고</h3>
+      <div className="title">
+        <span>KPT 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>3</span>
+      </div>
       <div className="text_box">
         <p>KPT는 각각 Keep, Problem, Try의 약자입니다.</p>
         <p>

diff --git a/src/components/RecommendSort/ORID.tsx b/src/components/RecommendSort/ORID.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const ORID: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">ORID 회고</h3>
+      <div className="title">
+        <span>ORID 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>4</span>
+      </div>
       <div className="text_box">
         <p>
           ORID 회고는 Objective(지각 단계)-Reflective(반응

diff --git a/src/components/RecommendSort/Performance.tsx b/src/components/RecommendSort/Performance.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const Performance: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">성과/수치 중심 회고</h3>
+      <div className="title">
+        <span>성과/수치 중심 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>8</span>
+      </div>
       <div className="text_box">
         <p>
           성과/수치 중심 회고는 보통 분기/일 년 회고를 할 때 많이 사용하는

diff --git a/src/components/RecommendSort/Personal.tsx b/src/components/RecommendSort/Personal.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const Personal: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">개인적 회고</h3>
+      <div className="title">
+        <span>개인적 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>11</span>
+      </div>
       <div className="text_box">
         <p>
           개인적 회고는 주로 일 년을 돌아보는 회고로, 개인이 보낸 한 해를

diff --git a/src/components/RecommendSort/RecommendSortWrap.tsx b/src/components/RecommendSort/RecommendSortWrap.tsx
@@ -25,6 +25,14 @@ const RecommendSortWrap = styled.div`
     font-weight: 700;
     line-height: normal;
     margin: 0;
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .stepNumImg {
+      margin-left: 12px;
+    }
   }
   p {
     color: var(--text-medium-emphasis, rgba(255, 255, 255, 0.6));

diff --git a/src/components/RecommendSort/TIL.tsx b/src/components/RecommendSort/TIL.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const TIL: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">TIL 회고</h3>
+      <div className="title">
+        <span>TIL 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>3</span>
+      </div>
       <div className="text_box">
         <p>
           TIL 회고는 Today I Learned의 줄임말로 매일의 배움을 기록하는 회고예요.

diff --git a/src/components/RecommendSort/YWT.tsx b/src/components/RecommendSort/YWT.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
+import stepNum from "../../img/UI/stepNum.svg";
 
 export const YWT: React.FC = () => {
   return (
     <RecommendSortWrap>
-      <h3 className="title">YWT 회고</h3>
+      <div className="title">
+        <span>YWT 회고</span>
+        <img src={stepNum} alt="stepNumImg" className="stepNumImg" />
+        <span>3</span>
+      </div>
       <div className="text_box">
         <p>YWT는 일본 도요타에서 사용한 방식으로 짧게 진행되는 회고예요.</p>
         <br />

diff --git a/src/img/UI/stepNum.svg b/src/img/UI/stepNum.svg