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

soosoo22 · 2025-01-02T13:47:03Z

resolves [FE] 강점 키워드 컴포넌트를 구현한다 #1030

🚀 어떤 기능을 구현했나요 ?

목록 페이지에서 사용되던 ReviewCard 컴포넌트의 강점 키워드 부분을 ReviewKeyword 컴포넌트로 분리하여 적용했습니다. 그리고 겸사겸사 목록 페이지 ReviewCard와 상세 페이지 디자인도 같이 수정했습니다. (피그마 토대로)
강점 키워드에서 (예: ~~ 부분을 제거하고 이모지와 키워드만 표시되도록 수정했습니다. (목록, 상세 페이지 둘 다)

🔥 어떻게 해결했나요 ?

실제 API 응답에서는 (예: ~~ 부분이 포함되는데, 목 데이터에서는 해당 부분이 누락되어 있었습니다. 그래서 목록 페이지와 상세 페이지의 목 데이터를 실제 서버 응답과 일치시켰습니다. 그리고 강점 키워드 포맷팅 함수를 유틸로 분리해서 목록 페이지, 상세 페이지 모두 사용하도록 했습니다.

  const formattedCategories = categories.map((category) => {
    // 카테고리 내용에서 '(예: ' 앞부분만 추출
    const contentWithoutExample = Array.from(category.content.split(' (예: ')[0]);

    const emoji = contentWithoutExample.shift();
    const keyword = contentWithoutExample.join('');

    return {
      optionId: category.optionId,
      content: `${emoji} ${keyword}`,
    };
  });

📝 어떤 부분에 집중해서 리뷰해야 할까요?

현재 카드 형식의 컴포넌트가 목록 페이지, 리뷰 링크 관리 페이지, 작성한 리뷰 확인 페이지에서 각각 사용되고 있습니다. 각 페이지에서 프로젝트 이름, 리뷰이 이름 유무 등 자잘한 차이가 존재하지만, 이거를 옵셔널로 각 페이지에 필요한 내용만 전달할 수 있게끔 Reviewcard를 공통 컴포넌트로 리팩토링하는 것이 좋을 것 같습니다.

📚 참고 자료, 할 말

참고 1

BadaHertz52 · 2025-01-03T08:02:12Z

frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx

@@ -7,11 +8,13 @@ interface KeywordSectionProps {
 }


배열이 아닌데 타입명이 Options로 되어있었네요

원래는 아래의 빨간 영역을 KeywordSection으로 정해서 options로 받는게 맞는데... 컴포넌트명에서 다소 혼란이 오는 것 같네요...😅 변경하겠습니다!

BadaHertz52 · 2025-01-03T08:11:38Z

frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx

@@ -7,11 +8,13 @@ interface KeywordSectionProps {
 }

 const KeywordSection = ({ options }: KeywordSectionProps) => {


Keyword 라고 되어 있어서, 강점 키워드인줄 알았는데 선택된 객관식 답변이였네요.
컴포넌트명을 선택된 객관식 답변이라는 명으로 바뀌면 좋을 것 같아요.

(이건 쑤쑤에게 변경하라는 의미보다, 잊어먹을까봐 이런 것 변경해야겠다라는 식의 메모용으로 남기는 거니끼 부담가지 말아요!)

ㅋㅋㅋㅋ저도 순간 왜 키워드 컴포넌트가 2개나 있지...? 싶었는데 덕분에 기존 키워드 컴포넌트인 걸 알았네요ㅋㅋㅋㅋ

Keyword 라고 되어 있어서, 강점 키워드인줄 알았는데 선택된 객관식 답변이였네요. 컴포넌트명을 선택된 객관식 답변이라는 명으로 바뀌면 좋을 것 같아요.

변경하겠습니당! 다만 제가 헷갈리는 부분이 있어서요!!! 강점 키워드가 선택된 객관식 답변 아닌가요???

DetailedReviewPageContents.tsx

parsedDetailedReview.sections.map((section) => section.questions.map((question) => ( <S.ReviewContentContainer key={question.questionId}> <ReviewSection question={question.content} answer={question.answer!} /> {question.questionType === 'CHECKBOX' && <KeywordSection options={question.optionGroup!.options} />} </S.ReviewContentContainer> )), )}

ReviewSection.tsx

<S.ReviewSection> <ReviewSectionHeader text={question} /> {answer && ( <S.Answer> <MultilineTextViewer text={answer} /> </S.Answer> )} </S.ReviewSection>

현재 리뷰 상세 페이지에서 질문-답변 구조가 이렇게 되어 있는데,
KeywordSection가 객관식 답변에 대한 컴포넌트에요. 첫번째 강점 질문에 대한 객관식 답변은 키워드가 될 수 있지만 꼬리 질문에서는 키워드가 될 수 없어요. 키워드보다는, 'MultilineTextViewer'라는 컴포넌트명 처럼 객관식 답변이라는 명칭이 네이밍에 들어가는게 헷갈리지 않을 것 같아요.

추가적으로 객관식 답변과 주관식 답변이 다른 컴포넌트에 있다보니 구조가 헷갈려서, 객관식 답변도 ReviewSection안으로 옮긴다면 ReviewSection이 '질문-답'을 보여주는 컴포넌트로서의 역할이라는 점이 더 명확해질 것 같아요.

BadaHertz52

쑤쑤 코드 잘 봤어요. 바쁜데 기존 목록, 상세 페이지 다지인도 변경했네요
목 데이터 부분 오류도 찾고 고생했어요!!!

목록, 상세 페이지가 기존과 달리 색상이 빠져서 border색을 조금 더 어두운 색으로 하는개 어떨가 싶어요.
색상이 빠지니까 배경과 구역의 구분이 잘 안되어서 개인적으로는 횡한 느낌이 드네요.

BadaHertz52 · 2025-01-03T08:15:22Z

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

+
+import media from '@/utils/media';
+
+export const KeywordList = styled.div`


div, span 태그를 사용한 이유가 있을까요?
스타일 컴포넌트 네이밍명은 list, item이고 시멘틱 구조 사 ul, li 좋을 것 같아서요.

허걱!!! 저도 모르게 너무 익숙한 div, span으로 했네요... 수정하겠습니다!

ImxYJL

겸사겸사 카드 디자인까지 구현해줬군요!! 전보다 더 깔끔해져서 좋아요~~~
다만 저도 Card의 border 색상은 조금 더 진하게 해야 할 것 같다고 생각합니다. 색상이 많이 빠지니까 구분감을 주는 게 border 하나만 남은지라 더 눈에 잘 띄게 해야할 것 같아요!

쑤쑤 말대로 Card 컴포넌트는 이곳저곳에서 재활용하니 공통으로 빼야할 것 같아요. 정확한 구현 방식은 정한 바 없지만 합성 스타일로 만들면 사용할 때 편할 것 같다는 생각이 듭니다!

border 외에는 수정할 게 없다고 생각해서 먼저 어프루브할게요~!

ImxYJL · 2025-01-03T12:51:34Z

frontend/src/mocks/mockData/detailedReviewMockData.ts

-              { optionId: 2, content: '💡 문제 해결 능력', isChecked: false },
+              {
+                optionId: 1,
+                content: '🗣️커뮤니케이션, 협업 능력 (예: 팀원간의 원활한 정보 공유, 명확한 의사소통)',


목데이터와 실제 데이터가 같아졌네요! 헷갈렸는데 좋네요~~

ImxYJL · 2025-01-03T13:00:12Z

frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx

@@ -7,11 +8,13 @@ interface KeywordSectionProps {
 }

 const KeywordSection = ({ options }: KeywordSectionProps) => {


ㅋㅋㅋㅋ저도 순간 왜 키워드 컴포넌트가 2개나 있지...? 싶었는데 덕분에 기존 키워드 컴포넌트인 걸 알았네요ㅋㅋㅋㅋ

ImxYJL · 2025-01-03T13:13:54Z

frontend/src/utils/formattedCategories.ts

@@ -0,0 +1,14 @@
+const formattedCategories = <T extends { optionId: number; content: string }>(categories: T[]) => {


객체가 이렇게 사용될 때의 컨벤션은 없지만 리뷰미에서 객체 리터럴로 타입을 표시하지 않고 인터페이스를 선언하는 기조라 여기도 별도의 타입이 선언된다면 통일성이 더 좋아지지 않을까 싶습니다!

통일성을 고려한다면 인터페이스를 선언하는게 좋겠네요!!

soosoo22 · 2025-01-04T11:33:24Z

⭐️ 변경 사항 v0.0.1⭐️

강점 키워드에서 예시를 제거하는 포맷팅 함수에서 props로 단일 문자열만 받도록 변경
목록 페이지에서 강점 키워트를 ReviewKeyword 컴포넌트로 변경
상세 페이지에서, 선택된 객관식 답변을 MultipleChoiceAnswer 컴포넌트로 변경
목록 및 상세 페이지에서 border를 더 진하게 변경

대략적인 컴포넌트 구조는 아래와 같습니다!

chysis

리팩토링에 디자인 수정까지 많은 작업을 했네요👍🏻디테일한 부분까지 챙겨준 덕분에 더 예쁜 UI가 된 것 같아요.

상세 보기 페이지에서 버그를 발견해서 코멘트 남겨두었습니다!

chysis · 2025-01-04T17:33:43Z

frontend/src/pages/DetailedReviewPage/components/MultipleChoiceAnswerList/index.tsx

+    <S.MultipleChoiceAnswerList>
+      {answerList.map(({ optionId, content }) => (
+        <MultipleChoiceAnswer key={optionId} answer={content} />
+      ))}
+    </S.MultipleChoiceAnswerList>


이모지가 없는 객관식 선택 항목에도 formattedAnswer 함수가 적용되어 첫 번째 글자와 두 번째 글자 사이에 공백이 들어가고 있어요.

이모지를 포함한 문자열에 대해서만 해당 함수의 반환값을 사용하고, 그렇지 않으면 그대로 보여주도록 해야 할 것 같아요!

soosoo22 · 2025-01-06T08:03:41Z

⭐️ 변경사항 v0.0.2 ⭐️

QuestionAnswerSection 의 구조를 질문 - 답(객관식/주관식) 구조로 변경
객관식 답변에서 예시 포함 여부에 따라 포맷팅 함수로 답변을 처리하거나 원본 답변을 그대로 표시하도록 변경

chysis

변경 사항 확인했어요! 고생했어요😊

chysis · 2025-01-06T13:28:22Z

frontend/src/utils/formatKeyword.ts

@@ -0,0 +1,9 @@
+const formatKeyword = (content: string) => {
+  const contentWithoutExample = Array.from(content.split(' (예: ')[0]);


우선은 키워드 항목인지 여부를 이렇게 판단해도 괜찮겠네요👍🏻

BadaHertz52 · 2025-01-07T03:07:07Z

frontend/src/pages/DetailedReviewPage/components/QuestionAnswerSection/index.tsx

+
+const QuestionAnswerSection = ({ question, questionType, answer, options }: QuestionAnswerProps) => {
+  return (
+    <S.QuestionAnswerSection>


👍 주관식,객관식 답변이 한 군데 있으니까 구조 파악하기에 더 좋네요

BadaHertz52

기존 리뷰 목록,상세 페이지까지 고치느라 고생했어요

soosoo22 added 3 commits January 2, 2025 20:00

fix: 강점 키워드 데이터 서버 응답 형식과 통일

9ea0611

feat: StrengthKeywordList 컴포넌트 생성

46488a1

refactor: ReviewCard 폴더 위치 이동 및 디자인 수정

7ff2091

soosoo22 added 🍀 FE 🛠️ 리팩터링 🎨 디자인 labels Jan 2, 2025

soosoo22 added this to the 7차 스프린트 milestone Jan 2, 2025

soosoo22 self-assigned this Jan 2, 2025

soosoo22 requested review from chysis, BadaHertz52 and ImxYJL as code owners January 2, 2025 13:47

soosoo22 linked an issue Jan 2, 2025 that may be closed by this pull request

[FE] 강점 키워드 컴포넌트를 구현한다 #1030

Closed

1 task

soosoo22 added 4 commits January 2, 2025 23:18

refactor: formattedCategories 함수 유틸로 분리 및 목록, 상세 페이지에 적용

42bd98f

refactor: 작성일 표시 방식을 ReviewDate 컴포넌트를 사용하도록 변경

3db5773

design: 상세 페이지 디자인 변경

2078ac0

chore: 작성일 형식을 '-'에서 '.'으로 변경

679a8de

BadaHertz52 reviewed Jan 3, 2025

View reviewed changes

ImxYJL approved these changes Jan 3, 2025

View reviewed changes

soosoo22 added 5 commits January 4, 2025 19:48

refactor: 배열을 처리하던 함수를 단일 문자열을 포맷팅하는 formatKeyword 함수로 변경

330db3b

refactor: ReviewCard에서 강점 키워드를 표시하는 ReviewKeyword 컴포넌트 분리

0a1fc8c

refactor: KeywordSection에서 MultipleChoiceAnswer 컴포넌트명으로 변경

5f81c4e

refactor: formatKeyword 함수에서 반환 타입을 명시하지 않도록 변경

70634cc

style: css 속성 정렬

27f0b9c

soosoo22 changed the title ~~[FE] refactor: ReviewCard의 강점 키워드 섹션을 StrengthKeywordList 컴포넌트로 분리~~ [FE] refactor: ReviewCard에서 강점 키워드를 표시하는 ReviewKeyword 컴포넌트 분리 및 불필요한 예시 제거 Jan 4, 2025

chysis reviewed Jan 4, 2025

View reviewed changes

soosoo22 added 2 commits January 6, 2025 16:05

refactor: QuestionAnswerSection을 질문과 답변(객관식/주관식) 구조로 변경

8cf2414

refactor: MultilineTextViewer 상세 페이지 관련 컴포넌트로 폴더 위치 변경

62eaf4c

soosoo22 added 2 commits January 6, 2025 16:23

refactor: 예시 포함 여부에 따라 포맷팅된 답변 또는 원본 답변 표시

33a44c4

refactor: MultilineTextViewer 컴포넌트 위치를 src/components/common/으로 복원

541b890

chysis approved these changes Jan 6, 2025

View reviewed changes

BadaHertz52 reviewed Jan 7, 2025

View reviewed changes

BadaHertz52 approved these changes Jan 7, 2025

View reviewed changes

BadaHertz52 merged commit 62fb095 into develop Jan 7, 2025
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

soosoo22 commented Jan 2, 2025 •

edited

Loading

BadaHertz52 Jan 3, 2025

soosoo22 Jan 3, 2025 •

edited

Loading

BadaHertz52 Jan 3, 2025 •

edited

Loading

ImxYJL Jan 3, 2025

soosoo22 Jan 3, 2025 •

edited

Loading

BadaHertz52 Jan 5, 2025

BadaHertz52 left a comment

BadaHertz52 Jan 3, 2025

soosoo22 Jan 3, 2025

ImxYJL left a comment

ImxYJL Jan 3, 2025

ImxYJL Jan 3, 2025

ImxYJL Jan 3, 2025

soosoo22 Jan 4, 2025

soosoo22 commented Jan 4, 2025 •

edited

Loading

chysis left a comment

chysis Jan 4, 2025

soosoo22 commented Jan 6, 2025

chysis left a comment

chysis Jan 6, 2025

BadaHertz52 Jan 7, 2025

BadaHertz52 left a comment

		@@ -7,11 +8,13 @@ interface KeywordSectionProps {
		}

		const KeywordSection = ({ options }: KeywordSectionProps) => {


		import media from '@/utils/media';

		export const KeywordList = styled.div`

		@@ -0,0 +1,14 @@
		const formattedCategories = <T extends { optionId: number; content: string }>(categories: T[]) => {

		@@ -0,0 +1,9 @@
		const formatKeyword = (content: string) => {
		const contentWithoutExample = Array.from(content.split(' (예: ')[0]);

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

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

Conversation

soosoo22 commented Jan 2, 2025 • edited Loading

🚀 어떤 기능을 구현했나요 ?

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

Choose a reason for hiding this comment

soosoo22 Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

BadaHertz52 Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 commented Jan 4, 2025 • edited Loading

⭐️ 변경 사항 v0.0.1⭐️

chysis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 commented Jan 6, 2025

⭐️ 변경사항 v0.0.2 ⭐️

chysis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 left a comment

Choose a reason for hiding this comment

soosoo22 commented Jan 2, 2025 •

edited

Loading

soosoo22 Jan 3, 2025 •

edited

Loading

BadaHertz52 Jan 3, 2025 •

edited

Loading

soosoo22 Jan 3, 2025 •

edited

Loading

soosoo22 commented Jan 4, 2025 •

edited

Loading