[FE] refactor: ReviewCard에서 강점 키워드를 표시하는 ReviewKeyword 컴포넌트 분리 및 불필요한 예시 제거

frontend/src/components/common/MultilineTextViewer/index.tsx

@@ -6,14 +6,14 @@ interface MultilineTextViewerProps {
 
 const MultilineTextViewer = ({ text }: MultilineTextViewerProps) => {
   return (
-    <>
+    <S.MultilineTextContainer>
       {text.split('\n').map((line, index) => (
         <S.MultilineText key={index}>
           {line}
           <br />
         </S.MultilineText>
       ))}
-    </>
+    </S.MultilineTextContainer>
   );
 };
 

frontend/src/components/common/MultilineTextViewer/styles.ts

@@ -1,5 +1,19 @@
 import styled from '@emotion/styled';
 
+export const MultilineTextContainer = styled.div`
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 20rem;
+  padding: 1rem 1.5rem;
+
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+`;
+
 export const MultilineText = styled.div`
   word-wrap: break-word;
 `;

frontend/src/components/common/OptionSwitch/styles.ts

@@ -10,13 +10,12 @@ export const OptionSwitchContainer = styled.ul`
 
   width: 20rem;
   height: 4.4rem;
+  margin-top: 0.9rem;
   padding: 0.7rem;
 
   background-color: ${({ theme }) => theme.colors.lightGray};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
-  margin-top: 0.9rem;
-
   @media screen and (max-width: 530px) {
     width: 100%;
   }

frontend/src/components/ReviewCard/index.tsx → frontend/src/components/common/ReviewCard/index.tsx

@@ -1,5 +1,8 @@
 import { Category } from '@/types';
 
+import ReviewDate from '../ReviewDate';
+import ReviewKeyword from '../ReviewKeyword';
+
 import * as S from './styles';
 
 interface ReviewCardProps {
@@ -10,19 +13,21 @@ interface ReviewCardProps {
 }
 
 const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: ReviewCardProps) => {
+  const date = new Date(createdAt);
+
   return (
     <S.Layout onClick={handleClick}>
       <S.Header>
-        <S.Date>{createdAt}</S.Date>
+        <ReviewDate date={date} dateTitle={`작성일`} />
       </S.Header>
       <S.Main>
         <S.ContentPreview>{contentPreview}</S.ContentPreview>
         <S.Footer>
-          <S.Keyword>
-            {categories.map((category) => (
-              <div key={category.optionId}>{category.content}</div>
+          <S.ReviewKeywordList>
+            {categories.map(({ optionId, content }) => (
+              <ReviewKeyword key={optionId} content={content} />
             ))}
-          </S.Keyword>
+          </S.ReviewKeywordList>
         </S.Footer>
       </S.Main>
     </S.Layout>

frontend/src/components/ReviewCard/styles.ts → frontend/src/components/common/ReviewCard/styles.ts

@@ -5,15 +5,15 @@ import media from '@/utils/media';
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  border: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+  border: 0.2rem solid ${({ theme }) => theme.colors.disabled};
   border-radius: 1rem;
 
   &:hover {
     cursor: pointer;
-    border: 0.15rem solid ${({ theme }) => theme.colors.primaryHover};
+    border: 0.2rem solid ${({ theme }) => theme.colors.primaryHover};
 
-    & > div:first-of-type {
-      background-color: ${({ theme }) => theme.colors.lightPurple};
+    & > div {
+      background-color: ${({ theme }) => theme.colors.palePurple};
     }
   }
 `;
@@ -23,27 +23,22 @@ export const Header = styled.div`
   align-items: center;
 
   width: 100%;
-  height: 3.8rem;
+  padding: 2rem 0 0 2.5rem;
 
-  background-color: ${({ theme }) => theme.colors.lightGray};
   border-radius: 1rem 1rem 0 0;
 `;
 
-export const Date = styled.p`
-  height: fit-content;
-  padding: 0 3rem;
-  font-size: 1.3rem;
-`;
-
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
 
   width: 100%;
-  padding: 2rem 3rem;
+  padding: 2rem 2.5rem;
 
   font-size: 1.6rem;
+
+  border-radius: 0 0 1rem 1rem;
 `;
 
 export const ContentPreview = styled.p`
@@ -52,10 +47,10 @@ export const ContentPreview = styled.p`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 
-  height: 6rem;
+  height: 7.5rem;
   padding-right: 2rem;
 
-  line-height: 2rem;
+  line-height: 2.5rem;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 `;
@@ -73,21 +68,16 @@ export const Footer = styled.div`
   }
 `;
 
-export const Keyword = styled.div`
+export const ReviewKeywordList = styled.ul`
   display: flex;
   flex-wrap: wrap;
   gap: 2.5rem;
   align-items: center;
 
-  font-size: 1.4rem;
+  font-size: 1.2rem;
+  list-style-type: none;
 
   ${media.small} {
     gap: 1.2rem;
   }
-
-  div {
-    padding: 0.5rem 3rem;
-    background-color: ${({ theme }) => theme.colors.lightPurple};
-    border-radius: 0.8rem;
-  }
 `;

frontend/src/components/common/ReviewDate/index.tsx

@@ -1,4 +1,3 @@
-import ClockIcon from '@/assets/clock.svg';
 import { formatDate } from '@/utils';
 
 import * as S from './styles';
@@ -10,15 +9,11 @@ export interface ReviewDateProps {
 
 const ReviewDate = ({ date, dateTitle }: ReviewDateProps) => {
   const { year, month, day } = formatDate(date);
+
   return (
     <S.ReviewDate>
-      <S.ReviewDateText>
-        <S.ClockImg src={ClockIcon} alt="시계 아이콘" />
-        <span>{dateTitle}</span>
-        <S.Colon>:</S.Colon>
-      </S.ReviewDateText>
       <span>
-        {year}-{month}-{day}
+        {dateTitle} | {year}.{month}.{day}
       </span>
     </S.ReviewDate>
   );

frontend/src/components/common/ReviewDate/styles.ts

@@ -2,31 +2,13 @@ import styled from '@emotion/styled';
 
 import media from '@/utils/media';
 
-export const ReviewDateText = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  ${media.small} {
-    display: none;
-  }
-`;
-
-export const ClockImg = styled.img`
-  width: auto;
-  height: 1.6rem;
-  margin-right: 0.8rem;
-`;
-
 export const ReviewDate = styled.div`
   display: flex;
   align-items: center;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  color: ${({ theme }) => theme.colors.gray};
 
   ${media.xSmall} {
     font-size: ${({ theme }) => theme.fontSize.small};
   }
 `;
-
-export const Colon = styled.span`
-  margin: 0 1rem;
-`;

frontend/src/components/common/ReviewKeyword/index.tsx

@@ -0,0 +1,11 @@
+import formatKeyword from '@/utils/formatKeyword';
+
+import * as S from './styles';
+
+const ReviewKeyword = ({ content }: { content: string }) => {
+  const formattedKeyword = formatKeyword(content);
+
+  return <S.ReviewKeyword>{formattedKeyword}</S.ReviewKeyword>;
+};
+
+export default ReviewKeyword;

frontend/src/components/common/ReviewKeyword/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const ReviewKeyword = styled.li`
+  padding: 0.5rem 2rem;
+
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  color: ${({ theme }) => theme.colors.primary};
+
+  background-color: ${({ theme }) => theme.colors.lightPurple};
+  border-radius: 1.4rem;
+`;

frontend/src/mocks/mockData/detailedReviewMockData.ts

@@ -26,8 +26,16 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
             minCount: 1,
             maxCount: 2,
             options: [
-              { optionId: 1, content: '🗣️ 커뮤니케이션, 협업 능력', isChecked: true },
-              { optionId: 2, content: '💡 문제 해결 능력', isChecked: false },
+              {
+                optionId: 1,
+                content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)',
+                isChecked: true,
+              },
+              {
+                optionId: 2,
+                content: '💡문제 해결 능력 (예: 프로젝트 중 만난 버그/오류를 분석하고 이를 해결하는 능력)',
+                isChecked: true,
+              },
             ],
           },
         },