[feat] 투표 옵션에 이미지, 코드블럭 추가 #68

hwookim · 2023-01-28T05:01:10Z

close #53

💡 개요

📝 작업 내용

SelectOption에 이미지, 코드블럭 기능 추가
CodeEditor 구현 <- 추후 생성 페이지에서도 이용할 예정

‼️ 주의 사항

코드 블럭 표시 방식에 대해서는 논의 중인 내용이 있어서 이후 추가 작업이 필요할 것 같습니다!
next에서 사용 가능하도록 설정 변경한 부분이 있음 참고
전체 document에 다크모드 활성화함

🔗 참고자료

https://github.com/uiwjs/react-textarea-code-editor

- image mock data 추가 - 버튼으로 태그 변경

…d-plus # Conflicts: # __mocks__/data/voteOption.ts # src/components/common/TopicCard/SelectOption/SelectOption.tsx # src/components/common/TopicCard/TopicCard.stories.tsx # src/components/common/TopicCard/TopicCard.tsx # src/components/topic/TopicDetailMain/TopicDetailMain.tsx

KIMSEUNGGYU

오오 점점 완성된 가는거 보니깐 좋네요!!
이번 UI 하면서 재미있었을거 같아요!!

__mocks__/data/voteOption.ts

KIMSEUNGGYU · 2023-01-28T14:06:11Z

src/components/common/CodeEditor/CodeEditor.styles.tsx

+import theme from '@src/styles/theme';
+
+export const CodeEditor = styled(TextAreaCodeEditor)`
+  ${theme.font.code}


스타일이 제대로 적용된건가요?? 속성이 정의가 되지 않고 값만 들어가 있는 거 같아요!

확인해보니 적용되고 있는 것 같은데 어떤 문제가 있을까요?

스토리북에서 확인해보니 기본 폰트 color 가 어두운거 같은데 정상 동작하시나요??
저희 배포된 스토리북(chromatic 및 local)으로 확인해도 해당 부분 컬러가 어둔운데 확인 부탁드립니다!

codeEditor 부분이 viewer 하고 edit 모두 사용하는지 궁금합니다.
만약 viewer 로만 사용한다면 네이밍을 CodeViwer가 더 낫지 않을까 싶습니다!

KIMSEUNGGYU · 2023-01-28T14:07:22Z

src/components/common/CodeEditor/CodeEditor.tsx

+
+export interface CodeEditorProps extends TextareaCodeEditorProps {
+  value: string;
+  language: Languages;


코드 에디터에 language 는 어떻게 사용하는건가요?
아직 제대로 적용이 안된건가요?

정상 적용되고 있는데 storybook에 제대로 된 인자를 안넣어서 혼란을 드린 것 같네요.
관련 storybook 업데이트 했습니다!

KIMSEUNGGYU · 2023-01-28T14:12:02Z

src/components/common/TopicCard/SelectOption/SelectOption.tsx

-      </S.Info>
+    <S.Container>
+      <S.SelectButton $result={result} $selected={selected} onClick={handleClick}>
+        {result && <S.ProgressBar className="progress" $rate={rate} $selected={selected} />}


해당 클래스컴포넌트에 progress 클래스 가 있는데 해당 부분 style 이 없는거 같은데 혹시 넣으신 의도가 궁금해요!

SelectButton 내에서 hover 시 .progress의 background-color를 조정하는 로직이 있습니다!

KIMSEUNGGYU · 2023-01-28T14:12:42Z

src/components/common/TopicCard/TopicCard.tsx

@@ -7,7 +7,7 @@ import VoteOption from '@src/types/VoteOption';

 import Icon from '../Icon';
 import SelectOption from './SelectOption';
-import * as S from './TopicCard.style';
+import * as S from './TopicCard.styles';


ㅋㅋㅋ 굿굿굿!! 👍👍👍😁

hwookim

맞아요 만들면서 너무 재밌었던 것 같아요 ㅋㅋㅋ

리뷰에 답변 남기면서 몇가지는 반영했습니다!
확인 한 번 부탁드려요 👍🏼

hwookim · 2023-01-28T16:58:16Z

src/components/common/CodeEditor/CodeEditor.styles.tsx

+import theme from '@src/styles/theme';
+
+export const CodeEditor = styled(TextAreaCodeEditor)`
+  ${theme.font.code}


확인해보니 적용되고 있는 것 같은데 어떤 문제가 있을까요?

hwookim · 2023-01-28T16:59:35Z

src/components/common/CodeEditor/CodeEditor.tsx

+
+export interface CodeEditorProps extends TextareaCodeEditorProps {
+  value: string;
+  language: Languages;


정상 적용되고 있는데 storybook에 제대로 된 인자를 안넣어서 혼란을 드린 것 같네요.
관련 storybook 업데이트 했습니다!

hwookim · 2023-01-28T17:01:01Z

src/components/common/TopicCard/SelectOption/SelectOption.tsx

-      </S.Info>
+    <S.Container>
+      <S.SelectButton $result={result} $selected={selected} onClick={handleClick}>
+        {result && <S.ProgressBar className="progress" $rate={rate} $selected={selected} />}


SelectButton 내에서 hover 시 .progress의 background-color를 조정하는 로직이 있습니다!

KIMSEUNGGYU

CodeEditor 부분만 확인 부탁드립니다!
확인하시고 현우님 판단하에 처리하시면 괜찮을거 같아요!
나머지는 완벽합니다!! 👍👍👍

KIMSEUNGGYU · 2023-01-30T14:20:13Z

src/components/common/CodeEditor/CodeEditor.styles.tsx

+import theme from '@src/styles/theme';
+
+export const CodeEditor = styled(TextAreaCodeEditor)`
+  ${theme.font.code}


스토리북에서 확인해보니 기본 폰트 color 가 어두운거 같은데 정상 동작하시나요??
저희 배포된 스토리북(chromatic 및 local)으로 확인해도 해당 부분 컬러가 어둔운데 확인 부탁드립니다!

codeEditor 부분이 viewer 하고 edit 모두 사용하는지 궁금합니다.
만약 viewer 로만 사용한다면 네이밍을 CodeViwer가 더 낫지 않을까 싶습니다!

hwookim · 2023-01-30T15:48:17Z

@KIMSEUNGGYU

저는 정상 동작하는 걸로 보이는데,,, 어떤 문제일까요 😭
제 쪽에서 구현이 안되어서 가능하시다면 승규님께 확인 부탁드려도 괜찮을까요 ㅠㅠ

에디터에도 같이 쓸 생각으로 만든 거긴 합니다!
이 부분은 혜진님과도 논의가 한 번 더 필요할 것 같긴 하지만요.

uiwjs/react-textarea-code-editor#31 (comment)

KIMSEUNGGYU

현우님 CodeEditor 스타일 적용확인했습니다.
근데 하나 더 이슈가 보입니다 ㅠㅠ

드래그 했을때 작은 글씨로 덮어쓰이는 거 같은데! 한 번 확인 부탁드립니다!

hwookim · 2023-02-01T13:30:07Z

후,,,, 되게 스타일이 이상하게 적용되고 있었네요...
에디터에서 textarea랑 실제 보여지는 text랑 따로 관리하다보니 폰트가 어그러져 있었습니다 ㅠㅠ
좀 더럽긴 하지만

export const CodeEditorWrapper = styled.div`
  ${theme.font.code}

  .w-tc-editor, * {
    ${theme.font.code}
  }
`;

이런 식으로 하위에 적용하니 되긴 하네요..!

KIMSEUNGGYU

현우님 완벽합니다!!
정말 수고하셨어요~~

여태 일하면서 작업하시다니 대단합니다!! 👍👍👍

hwookim added 10 commits January 23, 2023 16:46

feat: DB 구조와 API docs를 참고한 공통 인터페이스 구현 및 적용

a97332e

refactor: PostCommentRequest 구현

b0dba00

feat: api 스펙 변경에 맞춘 네이밍 변경

e32991c

feat: SelectOption에 이미지 추가

e4e1937

- image mock data 추가 - 버튼으로 태그 변경

refactor: style -> styles

d689a6e

feat: CodeEditor 추가

7f8a5e5

wip

f6d7473

feat: 코드블럭 추가

69d2fcb

fix: 그라데이션 넓이 유동적으로 변경

54cfd56

hwookim added the ✨ feature 기능 개발 label Jan 28, 2023

hwookim requested a review from KIMSEUNGGYU as a code owner January 28, 2023 05:01

hwookim self-assigned this Jan 28, 2023

hwookim changed the title ~~Feat/053 topic card plus~~ [feat] 투표 옵션에 이미지, 코드블럭 추가 Jan 28, 2023

KIMSEUNGGYU reviewed Jan 28, 2023

View reviewed changes

hwookim added 2 commits January 29, 2023 01:53

refactor: codeblock mockdata화

b5d02e8

test: CodeEditor에 대한 props 정의

85f2a3e

hwookim commented Jan 28, 2023

View reviewed changes

KIMSEUNGGYU approved these changes Jan 30, 2023

View reviewed changes

hwookim added 3 commits January 31, 2023 01:20

fix: dark 모드 적용

c94c060

Merge remote-tracking branch 'origin' into feat/053-topic-card-plus

356edd2

feat: next에서 사용 가능하도록 변경

b1142f0

uiwjs/react-textarea-code-editor#31 (comment)

hwookim force-pushed the feat/053-topic-card-plus branch from 412abb1 to b1142f0 Compare January 30, 2023 16:32

hwookim added 2 commits January 31, 2023 01:46

fix: 코드 블록에 스타일 제대로 안먹던 문제 해결

9421523

fix: 쓸데없는 tab 제거

59aa196

KIMSEUNGGYU approved these changes Jan 31, 2023

View reviewed changes

fix: 폰트 변경이 정상적으로 작동하지 않던 문제 해결

acff5bf

KIMSEUNGGYU approved these changes Feb 1, 2023

View reviewed changes

hwookim merged commit 5d0a9bf into develop Feb 1, 2023

hwookim deleted the feat/053-topic-card-plus branch February 1, 2023 14:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] 투표 옵션에 이미지, 코드블럭 추가 #68

[feat] 투표 옵션에 이미지, 코드블럭 추가 #68

hwookim commented Jan 28, 2023 •

edited

KIMSEUNGGYU left a comment

KIMSEUNGGYU Jan 28, 2023

hwookim Jan 28, 2023

KIMSEUNGGYU Jan 30, 2023

KIMSEUNGGYU Jan 28, 2023

hwookim Jan 28, 2023

KIMSEUNGGYU Jan 28, 2023

hwookim Jan 28, 2023

KIMSEUNGGYU Jan 28, 2023

hwookim left a comment •

edited

hwookim Jan 28, 2023

hwookim Jan 28, 2023

hwookim Jan 28, 2023

KIMSEUNGGYU left a comment

KIMSEUNGGYU Jan 30, 2023

hwookim commented Jan 30, 2023 •

edited

KIMSEUNGGYU left a comment

hwookim commented Feb 1, 2023

KIMSEUNGGYU left a comment

[feat] 투표 옵션에 이미지, 코드블럭 추가 #68

[feat] 투표 옵션에 이미지, 코드블럭 추가 #68

Conversation

hwookim commented Jan 28, 2023 • edited

💡 개요

📝 작업 내용

‼️ 주의 사항

🔗 참고자료

KIMSEUNGGYU 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

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

hwookim left a comment • edited

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

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwookim commented Jan 30, 2023 • edited

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

hwookim commented Feb 1, 2023

KIMSEUNGGYU left a comment

Choose a reason for hiding this comment

hwookim commented Jan 28, 2023 •

edited

hwookim left a comment •

edited

hwookim commented Jan 30, 2023 •

edited