Feedback Form 추가 (#72)

* feat: post issue feature add * feat: feedback text 추가 * feat: textarea ui 추가 * Update apps/web/src/components/TextArea.tsx Co-authored-by: hyesung oh <[email protected]> * fix: 리뷰 반영 * feat: feedback pc ui 추가 * feat: mobile ui design 적용 * refactor: label select component 분리 * feat: content hook 추가 * feat: feedback content 수집 * feat: feedback form 전송 * feat: feedback form submit * feat: feedback open logic 추가 * feat: feedback 제출 후 창 닫기 * refactor: 사용하지 않는코드 제거 * refactor: 사용하지 않는 파일 제거 * feat: feedback z-index 추가 * fix: 혜성님 리뷰 반영 * style: fix style position --------- Co-authored-by: hyesung oh <[email protected]>
git-goods · Jun 20, 2024 · 9ec06f9 · 9ec06f9
1 parent 5828603
commit 9ec06f9
Show file tree

Hide file tree

Showing 11 changed files with 427 additions and 59 deletions.
diff --git a/apps/web/public/feedback/feedback-profile.png b/apps/web/public/feedback/feedback-profile.png
diff --git a/apps/web/src/apis/github/usePostIssue.ts b/apps/web/src/apis/github/usePostIssue.ts
@@ -0,0 +1,31 @@
+import type { UseMutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+const ISSUE_TOKEN = process.env.NEXT_PUBLIC_ISSUE_TOKEN;
+const POST_ISSUE_URL = 'https://api.github.com/repos/git-goods/git-animal-client/issues';
+
+export interface PostIssueRequest {
+  title: string;
+  body: string;
+  assignees?: string[];
+  labels?: string[];
+}
+async function postIssue(request: PostIssueRequest) {
+  const response = await fetch(POST_ISSUE_URL, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${ISSUE_TOKEN}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to post issue');
+  }
+
+  return response.json();
+}
+
+export const usePostIssue = (options?: UseMutationOptions<unknown, unknown, PostIssueRequest>) =>
+  useMutation({ mutationFn: postIssue, ...options });
diff --git a/apps/web/src/app/test/layout.tsx b/apps/web/src/app/test/layout.tsx
diff --git a/apps/web/src/app/test/page.tsx b/apps/web/src/app/test/page.tsx
diff --git a/apps/web/src/components/Button/Button.tsx b/apps/web/src/components/Button/Button.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  padding: 8px 42px;
+  border-radius: 6px;
+  border: 1px solid #000;
+  background-color: #fcfd9c;
+
+  box-shadow:
+    0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+    0px -3px 0px 0px #c4c382 inset,
+    0px 3px 0px 0px #fdfed2 inset;
+  color: #000;
+
+  /* glyph16 regular */
+  font-family: 'Product Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 24px */
+  letter-spacing: -0.3px;
+
+  &:disabled {
+    background: #cccccc;
+    box-shadow:
+      0px -3px 0px 0px #a3a3a3 inset,
+      0px 3px 0px 0px #dbdbdb inset,
+      0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  }
+`;
+
+export default Button;
diff --git a/...components/FeedBack/FeedBack.constants.ts → ...omponents/FeedBack/FeedBack.constants.tsx b/...components/FeedBack/FeedBack.constants.ts → ...omponents/FeedBack/FeedBack.constants.tsx
diff --git a/apps/web/src/components/FeedBack/FeedBack.icons.tsx b/apps/web/src/components/FeedBack/FeedBack.icons.tsx
@@ -0,0 +1,147 @@
+// TODO : icon packages로 분리
+
+export function FeedBackCloseIcon() {
+  return (
+    <svg width="110" height="109" viewBox="0 0 110 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d_102_5999)">
+        <rect x="23.3359" y="23.668" width="63.3333" height="56.6667" fill="white" />
+        <rect x="26.6641" y="20.332" width="56.6667" height="63.3333" fill="#141414" />
+        <path d="M47 45H42V50H47V55H52V60H57V55H62V50H67V45H62V50H57V55H52V50H47V45Z" fill="white" />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M26.6689 20.332V26.999H23.3359V80.3324H26.6689V83.6654L83.3356 83.666L83.3359 80.3324H86.6689V26.999H83.3359V20.332H26.6689ZM33.3359 70.332H36.6689V73.666H73.3359V70.332H76.6689V33.6654H73.3359V30.332H36.6689V33.6654H33.3359V70.332Z"
+          fill="#141414"
+        />
+        <rect x="30" y="17" width="50" height="3.33333" fill="#141414" />
+        <rect x="30" y="83.668" width="50" height="3.33333" fill="#141414" />
+        <rect x="26.668" y="20.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="26.668" y="80.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="23.3359" y="23.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="23.3359" y="77" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="20" y="27" width="3.33333" height="50" fill="#141414" />
+        <rect x="80" y="20.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="83.3359" y="23.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="80" y="80.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="83.3359" y="77" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="86.6641" y="27" width="3.33333" height="50" fill="#141414" />
+        <rect x="56.6641" y="83.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="76.6641" y="83.668" width="3.33333" height="3.33333" fill="#141414" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_102_5999"
+          x="0"
+          y="0.333333"
+          width="110"
+          height="120"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="3.33333" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_102_5999" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_5999" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export function FeedBackOpenIcon() {
+  return (
+    <svg width="110" height="121" viewBox="0 0 110 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d_102_5955)">
+        <rect x="23.332" y="23.666" width="63.3333" height="56.6667" fill="white" />
+        <rect x="26.668" y="20.334" width="56.6667" height="63.3333" fill="white" />
+        <rect x="26.668" y="20.334" width="56.6667" height="10" fill="#EBEBEB" />
+        <rect x="26.668" y="73.668" width="56.6667" height="10" fill="#EBEBEB" />
+        <rect x="26.668" y="70.332" width="10" height="13.3333" fill="#EBEBEB" />
+        <rect x="73.332" y="70.332" width="10" height="13.3333" fill="#EBEBEB" />
+        <rect x="73.332" y="20.334" width="10" height="13.3333" fill="#EBEBEB" />
+        <rect x="26.668" y="20.334" width="10" height="13.3333" fill="#EBEBEB" />
+        <rect x="76.668" y="27" width="10" height="53.3333" fill="#EBEBEB" />
+        <rect x="23.332" y="27" width="10" height="53.3333" fill="#EBEBEB" />
+        <rect x="30" y="17" width="50" height="3.33333" fill="#141414" />
+        <rect x="30" y="83.668" width="50" height="3.33333" fill="#141414" />
+        <rect x="26.668" y="20.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="26.668" y="80.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="23.332" y="23.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="23.332" y="77" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="20" y="27" width="3.33333" height="50" fill="#141414" />
+        <rect x="80" y="20.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="83.332" y="23.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="80" y="80.334" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="83.332" y="77" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="86.668" y="27" width="3.33333" height="50" fill="#141414" />
+        <rect x="56.668" y="83.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="60" y="87" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="63.332" y="87" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="66.668" y="87" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="70" y="87" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="66.668" y="90.332" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="63.332" y="83.668" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="66.668" y="83.668" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="70" y="83.668" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="73.332" y="83.668" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="60" y="83.668" width="3.33333" height="3.33333" fill="#EBEBEB" />
+        <rect x="63.332" y="90.332" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="66.668" y="93.668" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="70" y="90.332" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="73.332" y="87" width="3.33333" height="3.33333" fill="#141414" />
+        <rect x="76.668" y="83.668" width="3.33333" height="3.33333" fill="#141414" />
+        <path d="M40.832 49.5H45.832V54.5H40.832V49.5Z" fill="#141414" />
+        <path d="M52.4987 49.5H57.4987V54.5H52.4987V49.5Z" fill="#141414" />
+        <path d="M69.1654 49.5H64.1654V54.5H69.1654V49.5Z" fill="#141414" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_102_5955"
+          x="0"
+          y="0.333333"
+          width="110"
+          height="120.002"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="3.33333" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_102_5955" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_5955" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export function CloseIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.68076 2.62009C3.38788 2.32718 2.91301 2.32716 2.6201 2.62004C2.3272 2.91291 2.32717 3.38779 2.62005 3.6807L8.93938 10.0006L2.62004 16.3206C2.32716 16.6135 2.32718 17.0884 2.62009 17.3812C2.91299 17.6741 3.38787 17.6741 3.68075 17.3812L9.99999 11.0613L16.3192 17.3812C16.6121 17.6741 17.087 17.6741 17.3799 17.3812C17.6728 17.0884 17.6728 16.6135 17.3799 16.3206L11.0606 10.0006L17.3799 3.6807C17.6728 3.38779 17.6728 2.91291 17.3799 2.62004C17.087 2.32716 16.6121 2.32718 16.3192 2.62009L9.99999 8.93992L3.68076 2.62009Z"
+        fill="black"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+}