기본 질문 리스트 #123

sumi-0011 · 2023-05-21T13:18:43Z

🤔 해결하려는 문제가 무엇인가요?

기본 질문 컴포넌트 생성

🎉 변경 사항

기존에 작성했던 CardList를 QuestionList로 교채하는 작업 중입니다.
기본 질문 (Dnd 없는) 컴포넌트를 구현하였어요

이곳은 꼭 봐주세요 🙏

밑의 코드는 기본질문, 주관식, 객관식에 따라 태그의 내용과, 배경색이 바뀌는 것을 위한 것입니다.
개선할 만한 방법이 있을까요?

const basicInformationCss = (theme: Theme) => css`
  background-color: ${theme.colors.bluegreen};
`;
const shortCss = (theme: Theme) => css`
  background-color: ${theme.colors.yellowgreen};
`;

const choiceCss = (theme: Theme) => css`
  background-color: ${theme.colors.pink};
`;

const getType = (type: QuestionType, formType: QuestionFormType) => {
  if (formType === 'tendency') {
    return {
      tag: '기본정보',
      css: basicInformationCss,
    };
  }
  if (type === 'short') {
    return {
      tag: '주관식',
      css: shortCss,
    };
  }

  return {
    tag: '객관식',
    css: choiceCss,
  };
};

🌄 스크린샷

cloudflare-workers-and-pages · 2023-05-21T13:20:13Z

Deploying with Cloudflare Pages

Latest commit:	`c0f4b23`
Status:	✅ Deploy successful!
Preview URL:	https://3930393b.na-lab.pages.dev
Branch Preview URL:	https://feat-qustion.na-lab.pages.dev

View logs

codecov-commenter · 2023-05-21T13:20:20Z

Codecov Report

Patch coverage: 100.00% and project coverage change: -1.89 ⚠️

Comparison is base (761b41d) 95.90% compared to head (2d2fbcb) 94.01%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #123      +/-   ##
==========================================
- Coverage   95.90%   94.01%   -1.89%     
==========================================
  Files          39       37       -2     
  Lines         244      234      -10     
  Branches       41       41              
==========================================
- Hits          234      220      -14     
- Misses         10       14       +4

Impacted Files	Coverage Δ
src/styles/typo.ts	`100.00% <100.00%> (ø)`

... and 3 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

github-actions · 2023-05-21T13:20:22Z

Bundle Sizes

Compared against fffae88

Route: No significant changes found

Dynamic import: None found.

hyesungoh

👍 👍 고생하셨습니다

의견만 남겨봤어요!

hyesungoh · 2023-05-21T14:56:22Z

src/components/icons/EditIcon.tsx

+const EditIcon = ({ size = 21, color = '#3D4350', ...rest }: ComponentProps<typeof Svg>) => {
  return (
    <Svg size={size} isUsingFill {...rest}>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M11.8787 1.70729C13.0034 0.582583 14.799 0.537595 15.9773 1.57233L16.1213 1.70729L19.2929 4.87887C20.4176 6.00358 20.4626 7.79914 19.4279 8.97752L19.2929 9.12151L8.29289 20.1215C7.77717 20.6372 7.09301 20.9458 6.36971 20.9936L6.17157 21.0002H3C1.40232 21.0002 0.0963391 19.7513 0.00509269 18.1765L0 18.0002V14.8286C0 14.0993 0.265587 13.3973 0.743204 12.852L0.87868 12.7073L11.8787 1.70729ZM3.499 12.9136L2.29289 14.1215C2.13661 14.2778 2.0374 14.4805 2.00867 14.6972L2 14.8286V18.0002C2 18.513 2.38604 18.9357 2.88338 18.9935L3 19.0002H6.17157C6.39259 19.0002 6.60606 18.927 6.7796 18.7941L6.87868 18.7073L8.085 17.4996L3.499 12.9136ZM14.7071 3.12151C14.3466 2.76102 13.7794 2.73329 13.3871 3.03832L13.2929 3.12151L4.914 11.4996L9.5 16.0856L17.8787 7.70729C18.2392 7.34681 18.2669 6.77958 17.9619 6.38729L17.8787 6.29308L14.7071 3.12151Z"
-        fill="#3D4350"
+        fill={color}


👍 👍 👍

오 제가 빠트렸던 부분이네요!
감사합니다 ㅎㅎ

hyesungoh · 2023-05-21T14:56:53Z

src/features/createSurvey/CreateSurvey.test.tsx

hyesungoh · 2023-05-21T14:58:57Z

src/features/createSurvey/questionList/Question.tsx

+const getType = (type: QuestionType, formType: QuestionFormType) => {
+  if (formType === 'tendency') {
+    return {
+      tag: '기본정보',
+      css: basicInformationCss,
+    };
+  }
+  if (type === 'short') {
+    return {
+      tag: '주관식',
+      css: shortCss,
+    };
+  }
+
+  return {
+    tag: '객관식',
+    css: choiceCss,
+  };
+};


오브젝트로 대체할 수 있지 않을거 같긴해요!

오브젝트로 한다면 tag와 css를 같이 반환하는 것이 아닌 한 번에 한 개씩 반환하는 방법도 나쁘지 않을 거 같기도 하구요 ...!

오브젝트로 대체할 수 있지 않을거 같긴해요!

오브젝트로 한다면 tag와 css를 같이 반환하는 것이 아닌 한 번에 한 개씩 반환하는 방법도 나쁘지 않을 거 같기도 하구요 ...!

어떻게 대체할 수 있을까요?!
딱 떠오르는 방법이 없어서요 ㅜㅜ
혹시 예시가 있을까요?!

hyesungoh · 2023-05-21T14:59:36Z

src/features/createSurvey/types.ts

+  choices: {
+    content: string;
+    order: number;
+  }[];


요 부분은 interface Choice를 만들어서

choices: Choice[]

이렇게 해도 괜찮을 거 같기도 해요!

oyeon-kwon · 2023-05-22T02:18:35Z

src/features/createSurvey/questionList/Question.tsx

+  border-radius: 10px;
+`;
+
+const basicInformationCss = (theme: Theme) => css`


오호 요런 방법으로 상태별 css 렌더링을 하는 방법도 있군용
저는 이렇게 해봤어요!

상태가 Boolean인 경우

<article css={QuestionWrapperCss(isSelected)}> </article> const QuestionWrapperCss = (isSelected: boolean) => css` background-color: ${isSelected ? colors.primary_50 : colors.white}; `;

상태가 다양할 경우

const CollaborationBadge = ({ variant = 'default' }) => ( <div css={[BODY_2_REGULAR, collaborationBadgeCss(variant)]}>협업했던 팀원</div> ); const styles: Record<string, Record<string, string>> = { default: { color: colors.white, backgroundColor: colors.primary_200, }, gray: { color: colors.gray_500, backgroundColor: colors.gray_100, }, }; const collaborationBadgeCss = (variant: string) => css` ${styles[variant]} `;

sumi-0011 added 4 commits May 21, 2023 21:38

feat: 타이포그래피 Detail 추가

9130c49

feat: 질문 타입 지정

37d9856

feat: 기본 질문 컴포넌트 생성

f29d5d4

feat: list props로 변경

2d2fbcb

sumi-0011 self-assigned this May 21, 2023

sumi-0011 requested review from hyesungoh, oyeon-kwon and sjoleee as code owners May 21, 2023 13:18

github-actions bot added style Change style or request it test: unit Generate or update unit test labels May 21, 2023

sumi-0011 linked an issue May 21, 2023 that may be closed by this pull request

기본 질문 컴포넌트 제작 #118

Closed

hyesungoh approved these changes May 21, 2023

View reviewed changes

hyesungoh mentioned this pull request May 21, 2023

추가 질문 컴포넌트 #124

Merged

oyeon-kwon reviewed May 22, 2023

View reviewed changes

oyeon-kwon approved these changes May 22, 2023

View reviewed changes

feat: 리뷰 반영

c0f4b23

sumi-0011 merged commit 648c607 into main May 22, 2023

sumi-0011 deleted the feat/Qustion branch May 22, 2023 12:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

기본 질문 리스트 #123

기본 질문 리스트 #123

sumi-0011 commented May 21, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented May 21, 2023 •

edited

Loading

codecov-commenter commented May 21, 2023

github-actions bot commented May 21, 2023 •

edited

Loading

hyesungoh left a comment •

edited

Loading

hyesungoh May 21, 2023

sumi-0011 May 22, 2023

hyesungoh May 21, 2023

hyesungoh May 21, 2023

sumi-0011 May 22, 2023

hyesungoh May 21, 2023

oyeon-kwon May 22, 2023

기본 질문 리스트 #123

기본 질문 리스트 #123

Conversation

sumi-0011 commented May 21, 2023 • edited Loading

🤔 해결하려는 문제가 무엇인가요?

🎉 변경 사항

이곳은 꼭 봐주세요 🙏

🌄 스크린샷

cloudflare-workers-and-pages bot commented May 21, 2023 • edited Loading

Deploying with Cloudflare Pages

codecov-commenter commented May 21, 2023

Codecov Report

github-actions bot commented May 21, 2023 • edited Loading

Bundle Sizes

hyesungoh left a comment • edited Loading

Choose a reason for hiding this comment

hyesungoh May 21, 2023

Choose a reason for hiding this comment

sumi-0011 May 22, 2023

Choose a reason for hiding this comment

hyesungoh May 21, 2023

Choose a reason for hiding this comment

hyesungoh May 21, 2023

Choose a reason for hiding this comment

sumi-0011 May 22, 2023

Choose a reason for hiding this comment

hyesungoh May 21, 2023

Choose a reason for hiding this comment

oyeon-kwon May 22, 2023

Choose a reason for hiding this comment

sumi-0011 commented May 21, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented May 21, 2023 •

edited

Loading

github-actions bot commented May 21, 2023 •

edited

Loading

hyesungoh left a comment •

edited

Loading