문의하기 모달 생성 #777

Hain-tain · 2024-10-11T16:28:25Z

⚡️ 관련 이슈

[FEAT] 문의하기 모달 생성 #751

🪧 주요 목표

✔️ 문의하기 모달 생성

페이지가 아닌 모달로 구현한 이유 : 모든 페이지에서 쉽게 접근하고, 쉽게 보낼 수 있도록 하는게 중요하다고 생각했기 때문입니다. 새템플릿을 작성하고 있는 와중에 페이지 이동이 되면 불편할 것이라고 판단되어 모달로 구현하였습니다.

📍주요 변경 사항

1. `Textarea` 컴포넌트 생성

사용의 편의성을 위해 Input 컴포넌트와 유사한 구조로 구현하였습니다.
minRow 와 maxRow를 받아 최소 minRow만큼 보여주고, maxRow가 넘어갈 경우 스크롤 처리가 됩니다.

2. `ContactUs` 컴포넌트 생성

본 컴포넌트가 바로 문의하기 모달입니다.
현재 Header 와 Footer에 달아주었습니다.
별도의 훅으로 로직을 분리하지 않고, 구글시트와 연동 등 모든 로직을 컴포넌트 내부에 함께 두었습니다. 그 이유는 로직이 단순하고, 변경될 여지가 적으며, 재사용될 가능성이 현저히 낮기 때문입니다.

3. `Header` 현재 위치에 따라 스타일 변경

현재 사용자가 위치한 라우터에 따라 Header 에서 어디에 있는지 알 수 있도록 스타일을 변경해주었습니다.

🎸기타

- 구글 시트 관련 env 를 추가하였습니다. 현재 빌드 과정에서는 자동으로 포함되게 해두었습니다.

Jaymyong66

좋네요! 사소한 코멘트 반영 여부는 자유롭게 해주시면 될 것 같아서, approve 하겠습니다.
요즘 작업 속도가 빠르네요 헤인~! 감사합니다.

Jaymyong66 · 2024-10-12T07:56:43Z

frontend/src/components/ContactUs/ContactUs.tsx

+  const sendData = () => {
+    const URL = process.env.GOOGLE_URL || '';
+
+    return fetch(URL, {
+      method: 'POST',
+      mode: 'no-cors',
+      body: JSON.stringify({ message, email }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  };


다음 부분에서 env 변수가 없을 때, 빈 문자열을 넣는게 아니라, 그냥 google URL을 넣어줘도 되지 않을까 했는데 해당 URL은 key인 건가요?!

네네 특정 web app(구글 시트에 값을 넣어줄 수 있도록 구글에서 제공해주는 웹앱)의 url입니다! URL이 무조건 string 타입이어야해서 env 변수가 없을 경우 빈 문자열로 처리하도록 하였습니다.

Jaymyong66 · 2024-10-12T07:59:02Z

frontend/src/components/ContactUs/ContactUs.tsx

+
+  const { failAlert, successAlert } = useToast();
+
+  const isValidContents = message.trim().length;


사소하지만 isValidContents 변수명을 length가 들어가도록 바꾸거나, 아예 조건문을 넣어도 괜찮지 않을까 했습니다!
is-로 시작하니 boolean이면 좋지않을까 하는 생각이었어요.

아주 좋은 의견입니다.👍👍 isValidContents을 boolean으로 사용하도록 조건문으로 변경하겠습니다~!

Jaymyong66 · 2024-10-12T07:59:45Z

frontend/src/components/Footer/Footer.tsx

-      <S.ContactEmail href='mailto:[email protected]'>
-        <Text.Small color='inherit' weight='bold'>
-          문의 :
-        </Text.Small>{' '}
-        <Text.Small color='inherit'>[email protected]</Text.Small>{' '}
+      <S.ContactEmail>
+        <ContactUs />


Jaymyong66 · 2024-10-12T08:01:25Z

frontend/src/components/Header/Header.tsx

+        <Text.Medium
+          weight='bold'
+          color={isCurrentPage ? theme.color.light.primary_500 : theme.color.light.secondary_800}
+        >


색으로만 구분하니 직관적이지 않을 것 같아서, 색 말고 밑줄 혹은 색과 함께 밑줄까지 하면 어떨까요?
디자인적인 의견이라 이야기해보면 좋을 것 같아요.
좋은 VoC 반영입니다!

Jaymyong66 · 2024-10-12T08:04:53Z

frontend/src/components/Textarea/Textarea.tsx

+  const adjustHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      const scrollHeight = textareaRef.current.scrollHeight;
+
+      textareaRef.current.style.height = `${Math.min(scrollHeight, maxRows * (fontSize[size] * 1.5))}px`;
+    }
+  };
+


오호 이렇게 해야 늘어나나 보네요?!

Jaymyong66 · 2024-10-12T08:05:27Z

frontend/src/utils/reactChildrenHelpers.ts

@@ -0,0 +1,13 @@
+import { Children, isValidElement, ReactNode } from 'react';


* 문의하기 모달 생성 (#777) * design(Header): border-bottom 1px 로 변경 및 색상 secondary_300으로 변경 * feat(src): Textarea 컴포넌트 생성 * refactor(src): getChildOfType, getChildrenWithoutTypes 함수 utils로 파일로 분리 * feat(src): ContactUs 컴포넌트 생성 * feat(Modal): Modal 컴포넌트에 usePressESC, useScrollDisable 적용 * feat(components): Header 및 Footer에 ContactUs 적용, Header 에서 현재 경로 스타일 변경 * feat(ContactUs): 구글 시트 연동 추가 * refactor(ContactUs): isValidContents 상태 boolean 으로 관리하도록 변경 * design(Header): 헤더 '코드잽' secondary_800 으로 색상 변경 * refactor(Header): 헤더 '코드잽' 로고에도 현재 경로 스타일 적용 * 태그 버튼 색상 적용 (#765) * feat(style): 태그 버튼 팔레트 정의 * feat(utils): 태그 버튼의 색상 선택 유틸함수 구현 * feat(src): 태그 버튼, 필터 디자인 변경 및 태그 색상 적용 * refactor(utils): getTagColor 유틸함수를 컴포넌트 내부에 구현 * refactor(TagInput): 템플릿 업로드/수정 중 태그 색상 기본색으로 변경 * refactor(src): 태그 필터에서 선택된 태그 구분을 위한 디자인 수정 * fix(TemplateCard): SourceCodeViewer에 filename 전달 * refactor(TagButton): 함수 분리 및 메모이제이션 수행 * refactor(TagButton): 불필요한 useMemo 제거 --------- Co-authored-by: 헤인 <[email protected]> * api 변경에 따른 /login 엔드포인트 제거 (#808) * 카테고리, 태그, 템플릿 목록 로딩 처리 개선 (#813) * refactor(components): ScrollTopButton 컴포넌트 분리 * refactor(MyTemplatePage): 컴포넌트 분리 및 태그목록, 카테고리 목록 서스펜스 적용 * refactor(components): TemplateDeleteSelection, TemplateListSectionLoading 컴포넌트 분리 * refactor(src): useKeyword, useShowTemplateList, useSelectAndDeleteTemplateList 훅 분리 및 MyTemplatePage 적용 * refactor(templates): 사용하지 않는 useTemplateCategoryTagQueries 훅 삭제 * refactor(pages): useShowTemplateList => useFilteredTemplateList로 이름 변경 * refactor(src): useKeyword => useSearchKeyword로 이름 변경 * refactor(ConfirmDeleteModal): ConfirmDeleteModalProps =>Props 로 변경 * refactor(CategoryListSection): Flex 대신 스타일드 컴포넌트로 스타일 지정 * refactor(ConfirmDeleteModal): Modal 합성 컴포넌트의 하위 컴포넌트 사용하도록 변경 * refactor(queries): useSuspenseQuery를 사용하는 훅들 수동으로 error 전파 * 템플릿 공개 범위 설정(�visibility) 기능 구현 (#787) * feat(components): Toggle 컴포넌트 * feat(images): PrivateIcon, PublicIcon 추가 * refactor(mocks): templateList mock data에 "visibility" 추가 * feat(src): visibility 기능 추가 * feat(src): visibility가 private인 경우 템플릿 카드, 상세 페이지에서 privateIcon 보이도록 설정 * refactor(TemplateCard): 사용하지 않는 스타일드 컴포넌트 제거 * refactor(src): PRIVATE 상수화 * refactor(Toggle): Toggle.style 에서 불필요한 calc() 제거 * refactor(src): ICON_SIZE 상수 선언 및 적용 * refactor(components): CategoryDropdown 스타일 변경 * refactor(Toggle): Toggle 스타일 변경 및 showOptions 생성 * refactor(pages): 템플릿 생성 및 수정 페이지 Toggle 변경사항 반영 * ApiError 및 ApiClient 생성으로 HTTP 요청 및 에러 핸들링 리팩토링 (#783) * feat(Error): ApiError 객체 생성 * feat(api): ApiClient 객체 생성 및 template 구경가기, 업로드 요청 적용 * chore: react-error-boundary 라이브러리 설치 * feat(TemplateExplorePage): 일시적 에러에 대한 Local ErrorBoundary 적용 * feat(api): ApiClient - 인증 실패 시, localStorage에서 유저 정보 제거 * refactor(api): templates - JSON.stringify 중복 적용 제거 * feat(api): ApiClient - 응답 본문이 없을 때, 반환값 처리 * refactor(api): getLoginState - apiClient 적용 및 중복 코드 제거 * refactor(api): ApiClient - fetch문에 try-catch 추가, error handling 메서드 분리 * feat(frontend): setupTests - MSW 서버의 unhandled handler 디버깅 코드 추가 * refactor(api): API_URL에 기본값 문자열 추가 * refactor(api): ApiClient - 에러 확인 분기문을 hasError 메서드 밖으로 분리 * refactor(Error): TempError -> TemporaryError로 컴포넌트 명 변경 * refactor(api): ApiClient - method의 타입을 string에서 HttpMethod 타입 정의 * refactor(Error): ApiError - switch-case 문을 매핑으로 변경 * refactor(Error): errorCode, detail에 기본값 정의 * refactor(api): errorCode의 타입을 string -> number로 변경 * refactor(Error): TemporaryError - 불필요한 조건문 제거 * refactor(api): ApiClient - customFetch에서 response body가 아닌 response 자체를 반환하도록 변경 * refactor(templates): useTemplateUploadMutation - 요청 성공에 따라 location 라우트 이동, 에러 처리 변경 * refactor(api): templates - Endpoint 상수화 * refactor(templates): useTemplateUploadMutation - wrapper 추가 * feat(src): 확장자 기반으로 언어 태그 자동 생성 기능 추가 (#814) * chore: version 1.1.4로 변경 (#817) --------- Co-authored-by: 월하 <[email protected]> Co-authored-by: MYONG JAEWI <[email protected]>

Hain-tain added 7 commits October 12, 2024 00:49

design(Header): border-bottom 1px 로 변경 및 색상 secondary_300으로 변경

58faa60

feat(src): Textarea 컴포넌트 생성

1adf9ac

refactor(src): getChildOfType, getChildrenWithoutTypes 함수 utils로 파일로 분리

e82ea1f

feat(src): ContactUs 컴포넌트 생성

ce6d6eb

feat(Modal): Modal 컴포넌트에 usePressESC, useScrollDisable 적용

ed8726a

feat(components): Header 및 Footer에 ContactUs 적용, Header 에서 현재 경로 스타일 변경

ab27700

feat(ContactUs): 구글 시트 연동 추가

b7ff8b9

Hain-tain added feature 기능 추가 FE 프론트엔드 labels Oct 11, 2024

Hain-tain added this to the 6차 스프린트 🦴 milestone Oct 11, 2024

Hain-tain requested review from vi-wolhwa and Jaymyong66 October 11, 2024 16:28

Hain-tain self-assigned this Oct 11, 2024

Jaymyong66 previously approved these changes Oct 12, 2024

View reviewed changes

Hain-tain added 2 commits October 14, 2024 17:02

refactor(ContactUs): isValidContents 상태 boolean 으로 관리하도록 변경

58d50ee

design(Header): 헤더 '코드잽' secondary_800 으로 색상 변경

51d15d8

Hain-tain dismissed Jaymyong66’s stale review via 51d15d8 October 14, 2024 08:03

Hain-tain added the zap 리뷰 우선순위가 높은 사항 label Oct 14, 2024

vi-wolhwa previously approved these changes Oct 14, 2024

View reviewed changes

refactor(Header): 헤더 '코드잽' 로고에도 현재 경로 스타일 적용

bb228c6

Hain-tain dismissed vi-wolhwa’s stale review via bb228c6 October 14, 2024 08:14

vi-wolhwa approved these changes Oct 14, 2024

View reviewed changes

Jaymyong66 approved these changes Oct 14, 2024

View reviewed changes

Jaymyong66 merged commit 4df2f8a into dev/fe Oct 14, 2024
3 checks passed

Jaymyong66 deleted the feat/751-contact-us branch October 14, 2024 08:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

문의하기 모달 생성 #777

문의하기 모달 생성 #777

Hain-tain commented Oct 11, 2024

Jaymyong66 left a comment

Jaymyong66 Oct 12, 2024

Hain-tain Oct 12, 2024

Jaymyong66 Oct 12, 2024

Hain-tain Oct 12, 2024

Jaymyong66 Oct 12, 2024

Jaymyong66 Oct 12, 2024

Jaymyong66 Oct 12, 2024

Jaymyong66 Oct 12, 2024


		const { failAlert, successAlert } = useToast();

		const isValidContents = message.trim().length;

		@@ -0,0 +1,13 @@
		import { Children, isValidElement, ReactNode } from 'react';

문의하기 모달 생성 #777

문의하기 모달 생성 #777

Conversation

Hain-tain commented Oct 11, 2024

⚡️ 관련 이슈

🪧 주요 목표

✔️ 문의하기 모달 생성

📍주요 변경 사항

1. Textarea 컴포넌트 생성

2. ContactUs 컴포넌트 생성

3. Header 현재 위치에 따라 스타일 변경

🎸기타

- 구글 시트 관련 env 를 추가하였습니다. 현재 빌드 과정에서는 자동으로 포함되게 해두었습니다.

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

Choose a reason for hiding this comment

1. `Textarea` 컴포넌트 생성

2. `ContactUs` 컴포넌트 생성

3. `Header` 현재 위치에 따라 스타일 변경