feat(editor): 에디터의 제목, 태그 구현 #19

Collection50 · 2024-08-03T16:22:32Z

3. 관련 스크린샷을 첨부해주세요.

4. 완료 사항

5. 추가 사항 / 코드 리뷰 받고 싶은 부분

PR의 크기가 커져, 이후 PR에서 API 연결을 수행하겠습니다.

qkrdmstlr3

수고하셨습니다!

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

qkrdmstlr3 · 2024-08-03T19:47:54Z

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

+>({ name: 'tag-selector' });
+
+function Title({ className, ...props }: StrictPropsWithChildren<{ className?: string }>) {
+  return <div {...props} className={cn('flex items-center w-28 h-40 text-14 font-semibold', className)} />;


h나 span태그는 어떠신가요?

넵 h1 태그로 변경하겠습니다 !

qkrdmstlr3 · 2024-08-03T19:53:00Z

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

+    <li>
+      <Button {...props} className={cn('py-4 px-8 text-[14px] rounded-4 font-medium leading-20', props.className)} />
+    </li>


li태그가 컴포넌트 상위에 있는 것이 조금 어색해보여요.
Chakra의 List컴포넌트 같은 경우 ListItem이름에서 li를 유추할 수 있지만, 태그의 경우에는 조금 다를 수 있다고 생각해요..!
context를 통해 Tag가 TagList하위에서만 사용된다는 것을 보장하거나, �TagList컴포넌트에서 Li로 감싸는 것은 어떠신가요??

좋습니다 !!
두번째 방법을 사용하겠습니다 !!

qkrdmstlr3 · 2024-08-03T19:54:13Z

src/system/token/typography.ts

-  label2: '0.0194em',
-  caption1: '0.0252em',
-  caption2: '0.0311em',
+export const letterSpacing: Record<Typography, `${number}rem`> = {


qkrdmstlr3 · 2024-08-03T20:00:40Z

src/hooks/useCallbackOnce.ts

+
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useCallbackOnce<T extends (...args: any[]) => any>(callback: T): (...args: any[]) => any {


이름만 보았을 때는 callback을 최초 1회만 실행하는 함수인 줄 알았는데요. 구현체를 보니 함수의 주소를 보존하는 방식인 것 같아요. usePreservedCallback 같은 이름은 어떠신가요??

좋습니다 !

qkrdmstlr3 · 2024-08-03T20:06:47Z

src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts

+    if (isOpen) {
+      setIsOpen(false);
+      return;
+    }
+    setIsOpen(true);


아래처럼 줄일 수 있을 것 같아요!

Suggested change

if (isOpen) {

setIsOpen(false);

return;

}

setIsOpen(true);

setIsOpen(!isOpen)

qkrdmstlr3 · 2024-08-03T20:13:21Z

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

+function Content({ children }: StrictPropsWithChildren) {
+  const { isOpen, getContentProps } = useTagSelectorContext();
+
+  return isOpen && <article {...getContentProps()}>{children}</article>;


이거 가끔 false로 렌더될 때도 있던데 isOpen이 false면 null을 반환하는 것 어떠신가요?

좋습니다 !

qkrdmstlr3 · 2024-08-03T20:33:27Z

src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts

+export function useTagSelector({ ...props }: UseTagSelectorProps) {
+  const { as, ref, classNames } = props;
+  const Component = as || 'div';
+  const domRef = useDOMRef(ref);


이름을 좀 더 맞게 잘 지어주는 것은 어떠신가요?

useDOMRef의 반환값이므로 domRef라고 지었는데, baseDOMRef 네이밍은 어떨까요??

좋아요! 어제 정신이 없어서 너무 막 적었는데, 아래쪽에 ref가 넘어갈 수 있는 다른 요소들도 있어서 이름을 지어주는 것이 좀 더 좋겠다 싶었어요!

qkrdmstlr3 · 2024-08-03T20:46:59Z

src/system/token/typography.ts

@@ -10,6 +10,7 @@ export const typographyVariant = [
  'label2',
  'caption1',
  'caption2',
+  'input-title',


이거는 typography에 있는 토큰인가요??

어떤 typography를 말씀하시는 건가요?? 코드 폴더를 말씀하시는 걸까요??

디자인 시스템입니다! 약속된 토큰이 아니라면 우선은 별도로 관리하거나 디자이너와 이야기해서 추가해보면 어떨까요??

tailwind.config.ts

woo-jk

고생하셨습니다! 코멘트 확인부탁드려요👍

woo-jk · 2024-08-03T20:54:04Z

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

+function Tag({ ...props }: StrictPropsWithChildren<ButtonProps>) {
+  return (
+    <li>
+      <Button {...props} className={cn('py-4 px-8 text-[14px] rounded-4 font-medium leading-20', props.className)} />


공통 컴포넌트에 Tag 컴포넌트가 있는데, 혹시 사용하지 않는 이유가 있을까요?

span 태그가 아닌 button이 필요했기 때문입니다

같은 스타일 코드가 중복되면 유지보수에 안좋으니 추후 하나로 합치는게 필요할 것 같아요~

woo-jk · 2024-08-03T21:10:24Z

src/app/(sidebar)/write/components/TagSelector/constants.ts

+export const abilityTags = [
+  { value: '커뮤니케이션', type: 'ability' },
+  { value: '시각화', type: 'ability' },
+  { value: '서비스 운영경험', type: 'ability' },
+  { value: '프로젝트 경험', type: 'ability' },
+  { value: '성능개선', type: 'ability' },
+  { value: '코드 품질', type: 'ability' },
+  { value: '지식 공유', type: 'ability' },
+  { value: '테스트 코드', type: 'ability' },
+  { value: 'UX', type: 'ability' },
+  { value: 'UI', type: 'ability' },
+] as const;


interface InfoCardTag { id: number; name: string; type: '인성' | '역량'; }

서버에서 제공하는 태그의 타입은 위와 같고, 제가 types 폴더에도 정의 해놨었습니다! mock 데이터이긴 하지만, 이 데이터에 맞춰보는건 어떨까요?

PR의 크기가 커져, 이후 PR에서 API 연결을 수행하겠습니다.

추후 PR에서 수정해두겠습니다~!

woo-jk · 2024-08-03T21:20:51Z

src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts

+  const getBaseProps = useCallback(
+    (props = {}) => ({
+      ref: domRef,
+      className: cn('w-[660px] flex items-center gap-8 relative', classNames?.base),
+      ...props,
+    }),
+    [ref, classNames?.base],
+  );


컴포넌트에 프롭스를 직접 넣어주는 방식이 아니라 props getter 방식을 선택한 이유가 궁금합니다!

props getter + hooks를 사용해서 가독성과 유지보수성이 향상하기 때문입니다

woo-jk · 2024-08-03T21:26:02Z

src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts

+  const getTriggerProps = useCallback(
+    (props = {}) => ({
+      className: cn(
+        'w-[624px] h-52 flex gap-8 items-center py-8 pl-16 pr-16 border-1 border-transparent rounded-8 text-neutral-20',
+        isOpen && 'rounded-bl-none rounded-br-none border-neutral-5 bg-neutral-1',
+        classNames?.trigger,
+      ),
+      onClick: handleTriggerClick,
+      ...props,
+    }),
+    [handleTriggerClick, classNames?.trigger, isOpen],
+  );


트리거 요소는 외부에서 주입하는 형식이 일반적인 것 같은데, 자체적인 스타일 요소가 있어도 될까요??

classNames={{ trigger: '' }}을 지정하여 스타일을 자유롭게 커스터마이징할 수 있습니다

eunbeann · 2024-08-04T01:20:45Z

src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx

+  );
+}
+
+function Trigger({ children }: StrictPropsWithChildren) {


혹시 이 트리거 어떤 상황에서 동작하는 함수인가요??

에디터의 태그를 선택할 때 동작하는 트리거입니다 !

Collection50 · 2024-08-07T02:14:24Z

src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts

+    () => ({
+      className: cn(
+        'absolute top-39 left-116 w-[624px] bg-[white] border-1 rounded-bl-8 rounded-br-8',
+        isOpen && 'z-[20000]',


isOpen && z-${zIndex.overlay}로 사용하게 되면 아래와 같은 오류가 발생합니다.
tailwind에서 템플릿 리터럴을 사용하는 경우 발생하는 오류로 보이는데 일단 위와같이 하면 정상 동작해서, 이렇게 두겠습니다 !
추후 수정하면 좋을 것 같아요

맞아요.. 테일윈드가 생각보다 멍청한 부분이 있어서, 저거 처리가 안되더라구요 😢

Collection50 · 2024-08-08T01:09:01Z

src/components/Editor/extensions/EditorButton/EditorButton.tsx

-      <Button ref={ref} disabled={disabled} className={buttonClassName} {...rest}>
+      <button ref={ref} disabled={disabled} className={buttonClassName} {...rest}>
        {children}
-      </Button>
+      </button>


공통 컴포넌트인 버튼 컴포넌트를 사용하면 팝오버가 발생하지 않는 현상이 발생해 이렇게 두었습니다 !

eunbeann

멋지십니다

woo-jk

👍

* feat * feat * 중복 처리 * fix * f * fix * import * fix * a * fix ui * fix * fix * fix * fix * fix * fix * fix * yarn * fix * fix

* feat * feat * 중복 처리 * fix * f * feat * feat(recruit): 내 공고 생성 모달 구현 (#20) * feat(recruit): 내 공고 생성 모달 구현 * update * feat(editor): 에디터의 제목, 태그 구현 (#19) * feat * feat * 중복 처리 * fix * f * fix * import * fix * a * fix ui * fix * fix * fix * fix * fix * fix * fix * yarn * fix * fix * feat * feat * feat * feat * feat * fix * fix * f * fix * fix * f --------- Co-authored-by: shellboy <[email protected]>

Collection50 added 2 commits August 4, 2024 00:52

feat

a9186b7

feat

6de0440

Collection50 requested review from qkrdmstlr3, woo-jk and eunbeann as code owners August 3, 2024 16:22

Collection50 and others added 6 commits August 4, 2024 01:23

Merge branch 'main' into feat/editor-ui

22d21f6

중복 처리

2921e6f

fix

f3ae1a6

f

5d97208

fix

4a8aa05

import

955911a

qkrdmstlr3 reviewed Aug 3, 2024

View reviewed changes

woo-jk reviewed Aug 3, 2024

View reviewed changes

Collection50 added 2 commits August 4, 2024 06:44

fix

4a5663f

a

579a24d

eunbeann reviewed Aug 4, 2024

View reviewed changes

Collection50 added 2 commits August 7, 2024 10:37

fix ui

3dab4d8

fix

208de28

Collection50 commented Aug 7, 2024

View reviewed changes

Collection50 and others added 7 commits August 7, 2024 12:40

fix

22318f6

fix

ad13788

fix

a7993b4

fix

60faf94

fix

8fa0220

Merge branch 'main' into feat/editor-ui

22434ea

fix

e668241

Collection50 commented Aug 8, 2024

View reviewed changes

Collection50 added 3 commits August 8, 2024 10:10

yarn

faf4637

fix

c0302d0

fix

844cbec

eunbeann approved these changes Aug 12, 2024

View reviewed changes

woo-jk approved these changes Aug 12, 2024

View reviewed changes

Collection50 merged commit aa45492 into main Aug 12, 2024
1 check passed

qkrdmstlr3 assigned Collection50 Aug 18, 2024

Collection50 added a commit that referenced this pull request Aug 22, 2024

feat(editor): 에디터의 제목, 태그 구현 (#19)

2f15841

* feat * feat * 중복 처리 * fix * f * fix * import * fix * a * fix ui * fix * fix * fix * fix * fix * fix * fix * yarn * fix * fix


		import { useCallback, useEffect, useRef } from 'react';

		export function useCallbackOnce<T extends (...args: any[]) => any>(callback: T): (...args: any[]) => any {

feat(editor): 에디터의 제목, 태그 구현 #19

feat(editor): 에디터의 제목, 태그 구현 #19

Conversation

Collection50 commented Aug 3, 2024 • edited Loading

3. 관련 스크린샷을 첨부해주세요.

4. 완료 사항

5. 추가 사항 / 코드 리뷰 받고 싶은 부분

qkrdmstlr3 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

qkrdmstlr3 Aug 3, 2024 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woo-jk 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

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

eunbeann left a comment

Choose a reason for hiding this comment

woo-jk left a comment

Choose a reason for hiding this comment

Collection50 commented Aug 3, 2024 •

edited

Loading

qkrdmstlr3 Aug 3, 2024 •

edited

Loading