템플릿 생성 및 수정페이지 컴포넌트 및 훅 분리 #694

Hain-tain · 2024-09-25T15:18:19Z

안녕하세요, 프론트 여러분! 헤인입니다.
먼저 변경사항이 무척 많이 잡히고 있는데, 그 이유는 컴포넌트를 분리하면서 생성/삭제/이름이 변경된 파일들이 많기 때문입니다.
(물론 리팩터링 과정에서 변경사항이 많은 것도 사실입니다🤣)

보다 원할한 코드리뷰를 하실 수 있도록 최대한 부연설명과 구현할 때 고민했던 지점에 대해 적어두었습니다.
이외에 궁금하신 점이 더 있으시다면 코멘트 달아주세요!!

⚡️ 관련 이슈

[REFACTOR] 컴포넌트 및 훅 분리 #649

🪧 이번 리팩터링의 주요 과제

📍주요 변경 사항

1. `TemplateEdit` 컴포넌트 및 `useTemplateUpload`, `useTemplateEdit` hook 삭제

삭제한 이유는 상단 이번 리팩터링의 주요 과제 참고 부탁드립니다.

2. 서브컴포넌트 별도의 파일로 분리

서브컴포넌트를 페이지 컴포넌트 내부에 두었을 때, 하단에 분리되어있다는 것을 한 눈에 인지하기 어렵다는 문제 제기됨
=> 파일을 분리하여 명시적으로 import 해오도록 수정하자고 팀 내부에서 합의했기 때문에 아래와 같이 분리!
TemplateEdit 에서 CategoryDropdown, CategoryGuide, NewCategoryInput 별도의 컴포넌트로 파일 분리
- TemplateUploadPage와 TemplateEditPage 에서 함께 사용하기 때문에 @src/components 에 위치
- CategoryDropdown, CategoryGuide, NewCategoryInput 의 관계

3. `SourceCode` , `SourceCodeEditor`, `SourceCodeViewer` 컴포넌트 분리

4. 커스텀 훅 세분화 및 역할 강화

useTag, useSourceCode 생성
useCategory 훅에서 카테고리 생성에 대한 함수도 반환하도록 변경
useToast 생성 (하단 코멘트로 생성 이유 달아두었습니다.)
useNoSpaceInput 생성 (하단 코멘트로 생성 이유 달아두었습니다.)

5. selectList 의 현재 선택된 파일 상태(`currentFile`)를 `index` 로 통일

변경 전 : 템플릿 상세페이지에서는 id, 템플릿 생성 및 수정페이지에서는 index 로 현재 파일 상태를 설정하고 있었음
=> 이로인해 불필요한 함수 생김
=> id 가 더 명시적이긴 하지만, 복잡한 로직을 감수해야 할 만큼 중요한 정보 아니라고 판단하여 변경하게 됨
변경 후 : 모든 페이지에서 index 로 현재 파일 상태를 저장하도록 통일

6. `filename` 으로 용어 통일

현재 filename 과 fileName을 혼재하여 사용하고 있는 것을 발견
=> cSpell에서 한 단어로 보기도 하고, 백엔드에서도 filename 으로 사용하고 있기 때문에 filename 으로 통일

🎸기타

[우려 사항]

각 페이지에서 UI 를 보여주는 것 외에 로직적인 부분(각 상태 및 핸들러, handleSaveButtonClick 등)도 함께 가지고 있는게 괜찮은가?
TemplateEditPage 와 TemplateUploadPage 는 UI 가 완전히 동일하고, 추후 한 곳에 변경사항이 생긴다면 다른 곳도 함께 변화해야 할 가능성이 크다. 유지보수의 차원에서 중복되는 부분들을 이렇게 각기 관리하는 것이 과연 좋은 방법일까?

[개인적인 고민]

TemplateEdit 이 탄생한 이유는 중복을 줄이기 위해서였습니다.
=> 그러나 지금 depth 및 복잡성을 줄이기 위해 결국 중복을 허용하게 되었습니다.
=> 개인적으로 결국 예전 설계로 회귀한 기분이 듭니다. 문제를 완전히 해결하기보다는 이전 문제로 되돌아온 기분이랄까요?
=> 과연 이 문제가 트레이드오프라 반드시 하나를 택해야 하는 문제인지 아니면 더 좋은 돌파구가 있을지 다른 분들의 견해가 궁금합니다!

…넌트 분리

…wCategoryInput 컴포넌트 분리

…@/hooks/template 으로 변경, useSourceCodeSelectList 내부에서 index로 currentFile 감지하도록 통일

… 을 감싸는 스타일드 컴포넌트 사용하도록 변경

Hain-tain · 2024-09-25T17:38:55Z

frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx

+      <S.FilenameInput
+        value={filename}
+        onChange={handleFilenameChange}
+        placeholder={'파일명.[확장자]'}


기존 placeholder 파일명.js 에서 js 가 눈에 잘 띄지 않는다는 피드백과 js 가 프론트엔드에게만 친숙하다는 점을 고려하여 파일명.[확장자] 로 변경해보았습니다!

Hain-tain · 2024-09-25T17:43:00Z

frontend/src/hooks/useNoSpaceInput.ts

처음에는 함께 논의했던 것처럼 useInput 에 두번째 인자로 isAllowedSpace 라는 boolean인자를 받으려고 했으나 useNoSpaceInput 가 더 명시적이고 선언적이라고 생각하여 새로운 훅을 생성하였습니다.

// useInput 확장한 경우 1 // 두번째 인자가 무엇을 의미하는지 useInput에 들어가야만 파악할 수 있음 const [value, setValue] = useInput('', false); // useInput 확장한 경우 2 // 불필요하게 선언부가 길어지는 느낌이 듬 const [value, setValue] = useInput({initValue: '', isAllowedSpace: false}); // useNoSpaceInput 생성한 경우 // 훨씬 선언적이고 명시적으로 느껴짐 const [value, setValue] = useNoSpaceInput('');

Hain-tain · 2024-09-25T17:46:40Z

frontend/src/hooks/useToast.ts

useAuth 와 같이, 명시적으로 훅을 하나만 불러서 사용할 수 있도록 useToast를 생성하였습니다.

// 변경 전 // import 도 2개 해왔어야 함 const { infoAlert } = useCustomContest(ToastContext); // 변경 후 // 훨씬 편리하고, import 도 1개만 해오면 됨 const { infoAlert } = useToast();

Hain-tain · 2024-09-25T17:49:09Z

frontend/src/service/validates.ts

해당 파일에서는 fileName => filename 만 변경되었습니다.

Hain-tain · 2024-09-25T17:49:15Z

frontend/src/service/index.ts

해당 파일에서는 fileName => filename 만 변경되었습니다.

Hain-tain · 2024-09-25T17:53:12Z

frontend/playwright/tests/templates.actions.ts

@@ -35,7 +35,7 @@ export const uploadTemplateToCodezap = async ({
  }

  // 파일명 입력
-  await page.getByPlaceholder('파일명.js').fill(fileName);
+  await page.getByPlaceholder('파일명.[확장자]').fill(fileName);


하단 SourceCodeEditor 파일 코멘트 참조 부탁드립니다.

코멘트 내용: 기존 placeholder 파일명.js 에서 js 가 눈에 잘 띄지 않는다는 피드백과 js 가 프론트엔드에게만 친숙하다는 점을 고려하여 파일명.[확장자] 로 변경해보았습니다!

흠 테스트용인데도 그러려나 싶었는데, 뭐로 해도 무방할 것 같긴 하네요@!

Hain-tain · 2024-09-30T08:38:36Z

현재 dev/fe 를 받아 Conflict 해결할 수 있으나, 해결 후 파일 변경 사항이 너무 많이 잡히는 것을 확인하여 일단 코드리뷰 후 해결한 커밋을 올리도록 하겠습니다.

Jaymyong66

너무 고생했습니다! 이전보다 분리도 잘 되어있고 가독성도 좋네요.
얼마나 고민했는지 보이고 시간도 꽤 지나서 Approve할까 하다가 제가 남긴 코멘트를 고치고 싶어할 수도 있을거 같아서 우선 남겨둡니다

Jaymyong66 · 2024-10-01T23:56:39Z

frontend/playwright/tests/templates.actions.ts

@@ -35,7 +35,7 @@ export const uploadTemplateToCodezap = async ({
  }

  // 파일명 입력
-  await page.getByPlaceholder('파일명.js').fill(fileName);
+  await page.getByPlaceholder('파일명.[확장자]').fill(fileName);


흠 테스트용인데도 그러려나 싶었는데, 뭐로 해도 무방할 것 같긴 하네요@!

Jaymyong66 · 2024-10-01T23:56:58Z

frontend/playwright/tests/templates.spec.ts

@@ -35,7 +35,7 @@ test('템플릿 제목, 설명, 파일명, 소스코드, 태그를 입력하고
      tag: testTitle,
    });

-    const templateCard = page.getByRole('link', { name: `testTitle` }).first();
+    const templateCard = page.getByRole('link', { name: testTitle }).first();


Jaymyong66 · 2024-10-01T23:57:19Z

frontend/playwright/tests/templates.spec.ts

@@ -50,7 +50,7 @@ test('템플릿 카드를 누르면 템플릿 제목, 설명, 작성자, 생성
 }) => {
  await page.goto('/my-templates');
  // 템플릿 목록
-  await waitForSuccess({ page, apiUrl: '/templates' });
+  await waitForSuccess({ page, apiUrl: '/templates/login?keyword' });


엔드포인트가 얼른 고쳐졌으면 좋겠군요..! ㅜㅜ

Jaymyong66 · 2024-10-02T00:07:44Z

frontend/src/components/CategoryGuide/CategoryGuide.tsx

+    <Guide isOpen={isOpen} css={{ marginTop: '0.5rem', marginBottom: '-0.5rem' }}>
+      {isError ? (
+        <Text.Small color={theme.color.light.analogous_primary_300}>{categoryErrorMessage}</Text.Small>
+      ) : (
+        <Text.Small color={theme.color.light.secondary_400}>엔터로 카테고리를 등록해요</Text.Small>
+      )}
+    </Guide>


이번 PR에서의 변경 사항은 아니지만 이야기해보고 싶어서 남겨둡니다!

해당 부분에서 Guide에 css를 추가로 주는게 어색한거 같아서 생각하게 된건데,
현재는 CategoryGuide와 Dropdown이 같은 계층에 있어서 Guide라는 공통 컴포넌트를 두고 이런 css 속성을 쓰게 되었던 것 같네요. CategoryDropdown이라는 container 개념의 컴포넌트에 Guide와 Dropdown이 있어도 좋을거 같다는 생각입니다!

DropdownInput 컴포넌트로 만들고 Dropdown+Input+Guide 형식의 합성 컴포넌트처럼 만들어 봐도..? 다른 곳에서도 비슷한 기능을 쓸 수도 있을 것 같아서요. 익스텐션에선 씁니다.. ㅜ

Dropdown+Input+Guide 형식의 합성 컴포넌트도 좋은 아이디어네요!
그런데 하루안에 구현할 자신은 없기때문에 다음 리팩토링에서 고려해보겠습니다!!

Jaymyong66 · 2024-10-02T00:11:29Z

frontend/src/components/SourceCode/SourceCode.tsx

+  handleContentChange?: (value: string, viewUpdate: ViewUpdate) => void;
+}
+
+const SourceCode = ({ mode = 'detailView', language, content, handleContentChange }: Props) => {


Jaymyong66 · 2024-10-02T00:14:05Z

frontend/src/components/SourceCodeViewer/SourceCodeViewer.tsx

+              <ChevronIcon />
+            </S.SourceCodeToggleIcon>
+            <S.NoScrollbarContainer>
+              <Text.Small color='#fff' weight='bold'>


혹시 여기도 theme에서 써야할까요? ㅎㅎ white이긴 한데

써야죠!! theme 으로 변경하였습니다~!

Jaymyong66 · 2024-10-02T00:19:15Z

frontend/src/components/SourceCodeViewer/SourceCodeViewer.tsx

+      <S.SourceCodeWrapper isOpen={isSourceCodeOpen}>
+        {isSourceCodeOpen && <SourceCode mode={mode} content={content} language={getLanguageByFilename(filename)} />}
+      </S.SourceCodeWrapper>


이때가 mode가 detailView가 아닌 Thumbnail일 때 인가요?
위에서 mode === 'detailView' 일때는 명확히 보이는데, 만약 mode?: Exclude<SourceCodeMode, 'edit'>;로 타입에서 edit을 제외해서 무조건 해당 부분은 있으니 그런거겠죠?!

아하 thumbnail일때는 content를 5줄 밖에 안주니 detailView일때만 위의 filename 부분이 필요하군요.
이렇게 보니 굳이 mode를 3개로 나누지 않고도, filename이 있냐 없냐에 따라 detailView와 Thumbnail이 구분될거 같고, edit이 가능한지만 구분해도 될거 같다는 생각이 드네요

filename이 있냐 없냐에 따라 결정해볼까 생각도 했으나, 추후 Thumbnail 에서도 파일 이름을 보여주기로 바뀔수도 있고, detailView와 Thumbnail로 명시적으로 타입을 나누는 것이 보기에 더 이해가 쉬울 것이라고 생각하여 mode 를 3가지로 구분해보았습니다!

또한 SourceCode 에서 아래와 같이 스타일을 다르게 주어야 하기 때문에 필요하다고 생각하였습니다!

39 height={mode === 'thumbnailView' ? '10rem' : '100%'}

Jaymyong66 · 2024-10-02T00:25:40Z

frontend/src/hooks/template/useSourceCode.ts

+      if (!sourceCodes[index]) {
+        console.error('존재하지 않는 소스코드는 삭제할 수 없습니다. 삭제하려는 소스코드의 index를 다시 확인해주세요.');
+      }


이 부분을 console.error로 처리하고 있었는데, 사용자한테는 어떻게 나타내면 좋을지 고민해봐야겠네요..

사실 이 부분은 사용자에게 보이면 안되는 부분이긴 합니다...! 이 부분은 개발자를 위한 에러라고 생각했는데요, 이렇게 사용자를 위한 에러와 동료 개발자를 위한 에러를 구분해서 잘 나타내는 방법에 대해서도 함께 고민해보면 좋을 것 같네요!

Jaymyong66 · 2024-10-02T00:32:52Z

frontend/src/hooks/useNoSpaceInput.ts

+export const useNoSpaceInput = (initValue: string = '') => {
+  const [value, setValue] = useState(initValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value.trim());
+
+  const resetValue = () => {
+    setValue('');
+  };
+
+  return [value, handleChange, resetValue] as const;
+};


useTrimInput 같은 네이밍은 어떨지 작은 제안 드려봅니닷
noSpace라고 하니까 아예 띄어쓰기를 못할 것 같은데, 중간에 띄어쓰기가 있는 문자열을 복붙하면 될 것 같아서요

사실 아예 띄어쓰기를 못하게 하는 것이 목표였는데, 중간에 띄어쓰기가 있는 문자열을 복붙하는 경우를 고려하지 못했네요!

현재 useNoSpaceInput 가 쓰이는 곳은 TagInput 인데요, 태그는 띄어쓰기를 허용하고 있지 않습니다.
만약 중간에 띄어쓰기가 있는 문자열을 복붙하는 경우에도 input에서는 띄어쓰기가 보이지만, 태그를 등록하면 띄어쓰기 없이 등록이 됩니다! 따라서 해당 input 에서도 띄어쓰기가 아예 보이지 않도록 수정하겠습니다!

Jaymyong66 · 2024-10-02T00:34:40Z

frontend/src/hooks/useSelectList.ts

-export const useSelectList = (sourceCodes: SourceCodes[]) => {
+export const useSelectList = () => {
  const scrollTo = useScrollToTargetElement();


vi-wolhwa · 2024-09-30T16:45:30Z

frontend/src/hooks/authentication/useAuth.ts

-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }


(질문) AuthProvider 미사용 경고를 삭제한 이유가 궁금합니당

useCustomContext 을 사용해서 구현하도록 변경하였기 때문입니다!
useCustomContext 내부에서 아래와같이 context가 유효한지 검증합니다!

if (!value) { throw new Error('컨텍스트가 존재하지 않습니다.'); }

vi-wolhwa · 2024-09-30T16:47:53Z

frontend/src/pages/TemplatePage/TemplatePage.tsx

-              <div
-                id={sourceCode.filename}
+              <SourceCodeViewer
                key={sourceCode.id}
-                ref={(el) => (sourceCodeRefs.current[index] = el)}
-                css={{ width: '100%' }}
-              >
-                <Flex
-                  justify='space-between'
-                  align='center'
-                  height='3rem'
-                  padding='1rem 1.5rem'
-                  width='100%'
-                  style={{ background: `${theme.color.light.tertiary_600}`, borderRadius: '8px 8px 0 0' }}
-                >
-                  <Flex
-                    justify='space-between'
-                    align='center'
-                    gap='0.5rem'
-                    onClick={handleIsOpenList(index)}
-                    css={{
-                      cursor: 'pointer',
-                      flex: 1,
-                      minWidth: 0,
-                    }}
-                  >
-                    <ChevronIcon
-                      width={16}
-                      height={16}
-                      aria-label='소스코드 펼침'
-                      css={{
-                        transition: 'transform 0.3s ease',
-                        transform: isOpenList[index] ? 'rotate(180deg)' : 'rotate(0deg)',
-                      }}
-                    />
-                    <S.NoScrollbarContainer>
-                      <Text.Small color='#fff' weight='bold'>
-                        {sourceCode.filename}
-                      </Text.Small>
-                    </S.NoScrollbarContainer>
-                  </Flex>
-                  <Button
-                    size='small'
-                    variant='text'
-                    onClick={copyCode(sourceCode)}
-                    css={{
-                      width: 'auto',
-                      padding: '0.25rem 0.5rem',
-                      whiteSpace: 'nowrap',
-                      minWidth: 'fit-content',
-                    }}
-                  >
-                    <Text.Small color={theme.color.light.primary_500} weight='bold'>
-                      {'복사'}
-                    </Text.Small>
-                  </Button>
-                </Flex>
-                <S.SyntaxHighlighterWrapper isOpen={isOpenList[index]}>
-                  {isOpenList[index] && (
-                    <CodeMirror
-                      value={sourceCode.content}
-                      height='100%'
-                      style={{ width: '100%', fontSize: '1rem' }}
-                      theme={quietlight}
-                      extensions={[
-                        loadLanguage(getLanguageByFilename(sourceCode?.filename) as LanguageName) || [],
-                        S.CustomCodeMirrorTheme,
-                        EditorView.editable.of(false),
-                      ]}
-                      css={{
-                        '.cm-editor': {
-                          borderRadius: '0 0 8px 8px',
-                          overflow: 'hidden',
-                        },
-                        '.cm-scroller': {
-                          padding: '1rem 0',
-                          overflowY: 'auto',
-                          height: '100%',
-                        },
-                      }}
-                    />
-                  )}
-                </S.SyntaxHighlighterWrapper>
-              </div>
+                mode='detailView'
+                filename={sourceCode.filename}
+                content={sourceCode.content}
+                sourceCodeRef={(el) => (sourceCodeRefs.current[index] = el)}
+              />


굿굿👍🏻👍🏻⭐

vi-wolhwa · 2024-09-30T16:59:15Z

frontend/src/hooks/template/useSourceCode.ts

+import { validateFilename, validateSourceCode } from '@/service';
+import { SourceCodes } from '@/types';
+
+import { useToast } from '../useToast';


(질문) 공용 유틸 훅들은 common으로 폴더링 하면 어떨까요?

공용 유틸은 그냥 외부 utils 에 두기로 했었던 것 같아서..! 일단 별도의 논의가 따로 진행되기 전까진 폴더링은 유지하도록 하겠습니다!

vi-wolhwa · 2024-09-30T17:01:54Z

frontend/src/hooks/template/useSourceCode.ts

+    [failAlert],
+  );
+
+  const handleContentChange = useCallback((newContent: string, idx: number) => {


useCallback의 사용이 좋다고 생각됩니다! 👍🏻

useCallback를 사용하지 않고 있는 다른 파일에서도 적용할 것인지 궁금합니당

커스텀 훅에서 반환하는 함수들은 useCallback을 사용하는 편이 좋다고 알고있어서 저는 그렇게 구현하는 편인데, 다른 분들의 생각도 동일하면 일관성있게 커스텀훅에서 내보내는 모든 함수를 감싸주는 것도 좋을 것 같네요!! 월하의 생각은 어떤가요?

…tespace 삭제

…de-zap into refactor/649-template-edit

Hain-tain · 2024-10-02T04:48:16Z

frontend/src/hooks/useNoSpaceInput.ts

+  const [value, setValue] = useState(initValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const noSpaceValue = e.target.value.replace(/[\s\u3164\uFEFF\u200B]+/gu, '');


모든 공백을 막기 위함입니다.

ex) ▷ㅤㅤ◁ 공백처럼 보이게 하는 유니코드 (u3164)

\u3164: 한글 자음 필러 (ㅤ)와 일치
\uFEFF: 제로 폭 공백(Zero Width No-Break Space)과 일치
\u200B: 제로 폭 공백(Zero Width Space)과 일치

이야 유니코드.... 고생했습니다

다음과 같은 여러가지 공백 문자들에 대해서도 동일하게 처리해주어야 하지 않을까해서 남겨봐용

2.1. 반각 공백 ' '(U+0020)
2.2. 전각 공백 '　'(U+3000)
2.3. 가로폭이 없는 공백 ''(U+200B)
2.4. 한글 초성 채움 문자 'ᅟ'(U+115F)
2.5. 한글 중성 채움 문자 'ᅠ'(U+1160)
2.6. 한글 채움 문자 'ㅤ'(U+3164)
2.7. 반각 한글 채움 문자 'ﾠ'(U+FFA0)
2.8. 점자 패턴 공백 '⠀' (U+2800)

Hain-tain added 17 commits September 25, 2024 16:08

feat(hooks): useNoSpaceInput

c04425a

refactor(authentication): useAuth useCustomContext 사용하도록 변경

873e9ad

feat(hooks): useToast 생성

de7f1a6

feat(components): SourceCode, SourceCodeEditor, SourceCodeViewer 로 컴포…

3684d05

…넌트 분리

refactor(src): fileName => filename 으로 통일

971db90

refactor(pages): SourceCodeEditor 적용

6a4954a

refactor(src): SourceCodeViewer 적용

274837e

design(TemplateCard): TemplateCardContainer에 gap 1rem 추가

8fd7254

design(SourceCodeEditor): 상위 컨테이너에 position: relative 추가

e8cc42c

feat(components): TemplateEdit 에서 CategoryDropdown, CategoryGuide, Ne…

bf1a5ec

…wCategoryInput 컴포넌트 분리

refactor(category): 카테고리 생성하는 함수(createNewCategory) useCategory 훅으로 이동

ad7e815

feat(template): useSourceCode, useTag

3323899

refactor(src): useSelectList => useSourceCodeSelectList 로 변경 및 파일 위치 …

1678a06

…@/hooks/template 으로 변경, useSourceCodeSelectList 내부에서 index로 currentFile 감지하도록 통일

refactor(TemplateUploadPage): TemplateEdit 및 useTemplateUpload 삭제

3280963

refactor(TemplateEditPage): TemplateEdit 및 useTemplateEdit 삭제

594284a

refactor(SourceCodeViewer): SVGElement 에 isOpen 전달 불가로 인해 ChevronIcon…

788f3a0

… 을 감싸는 스타일드 컴포넌트 사용하도록 변경

refactor(src): useSourceCodeSelectList => useSelectList 로 변경 및 매개변수 제거

c97ada2

Hain-tain added FE 프론트엔드 refactor 요구사항이 바뀌지 않은 변경사항 labels Sep 25, 2024

Hain-tain added this to the 5차 스프린트🍗 milestone Sep 25, 2024

Hain-tain requested review from vi-wolhwa and Jaymyong66 September 25, 2024 15:18

Hain-tain self-assigned this Sep 25, 2024

Hain-tain added 2 commits September 26, 2024 02:31

refactor(src): 소스코드 유효성 검증 로직 useSourceCode 내부에서 하도록 변경

bb6f63b

fix(tests): 파일명 placeholder '파일명.[확장자]'로 변경된 점 playwright에 반영

79e2ac6

Hain-tain commented Sep 25, 2024

View reviewed changes

Hain-tain added 2 commits September 26, 2024 08:58

fix(page): 파일명, 소스코드 내용 공백으로만 채우는 경우 유효성 검사 통과하지 않도록 수정

0ea946b

fix(tests): api 변경으로 인해 e2e 테스트 시 waitForSuccess apiUrl 변경

c43a5b0

Hain-tain force-pushed the refactor/649-template-edit branch from 0774ee2 to c43a5b0 Compare September 30, 2024 08:34

Jaymyong66 reviewed Oct 2, 2024

View reviewed changes

vi-wolhwa reviewed Oct 2, 2024

View reviewed changes

Hain-tain added 4 commits October 2, 2024 13:40

design(SourceCodeViewer): 글자색 theme 적용

b1539f9

refactor(src): useNoSpaceInput 에서 모든 공백 막도록 변경 및 사용하지 않는 removeAllWhi…

4ea93e2

…tespace 삭제

Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…

f7066d0

…de-zap into refactor/649-template-edit

refactor(TemplatePage): hooks index에 useLike 추가 및 import 변경

3a971d5

Hain-tain commented Oct 2, 2024

View reviewed changes

vi-wolhwa previously approved these changes Oct 2, 2024

View reviewed changes

Jaymyong66 previously approved these changes Oct 2, 2024

View reviewed changes

refactor(hooks): useNoSpaceInput 에서 공백처럼 보이는 유니코드 막도록 추가

0e65205

Hain-tain dismissed stale reviews from Jaymyong66 and vi-wolhwa via 0e65205 October 2, 2024 05:01

vi-wolhwa approved these changes Oct 2, 2024

View reviewed changes

Jaymyong66 approved these changes Oct 2, 2024

View reviewed changes

Jaymyong66 merged commit 99f8f38 into dev/fe Oct 2, 2024
3 checks passed

Jaymyong66 deleted the refactor/649-template-edit branch October 2, 2024 05:31

템플릿 생성 및 수정페이지 컴포넌트 및 훅 분리 #694

템플릿 생성 및 수정페이지 컴포넌트 및 훅 분리 #694

Conversation

Hain-tain commented Sep 25, 2024

⚡️ 관련 이슈

🪧 이번 리팩터링의 주요 과제

📍주요 변경 사항

1. TemplateEdit 컴포넌트 및 useTemplateUpload, useTemplateEdit hook 삭제

2. 서브컴포넌트 별도의 파일로 분리

3. SourceCode , SourceCodeEditor, SourceCodeViewer 컴포넌트 분리

4. 커스텀 훅 세분화 및 역할 강화

5. selectList 의 현재 선택된 파일 상태(currentFile)를 index 로 통일

6. filename 으로 용어 통일

🎸기타

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

Hain-tain commented Sep 30, 2024

Jaymyong66 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

Hain-tain Oct 2, 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

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

vi-wolhwa Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1. `TemplateEdit` 컴포넌트 및 `useTemplateUpload`, `useTemplateEdit` hook 삭제

3. `SourceCode` , `SourceCodeEditor`, `SourceCodeViewer` 컴포넌트 분리

5. selectList 의 현재 선택된 파일 상태(`currentFile`)를 `index` 로 통일

6. `filename` 으로 용어 통일

Hain-tain Oct 2, 2024 •

edited

Loading

vi-wolhwa Oct 2, 2024 •

edited

Loading