Merge pull request #114 from Devminjeong-eum/feat/DEV-164

[DEV-164] 단어 추가 폼 버튼 UI 구현
Devminjeong-eum · Jul 29, 2024 · 5ec466e · 5ec466e
2 parents 609892c + 3994c1e
commit 5ec466e
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 33 deletions.
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/components/pages/detail/ReportButton.tsx b/src/components/pages/detail/ReportButton.tsx
@@ -4,7 +4,7 @@ import { WORD_INQUIRY_FORM_URL } from '@/routes/path';
 
 export default function ReportButton() {
   return (
-    <a href={WORD_INQUIRY_FORM_URL} target="_blank">
+    <a href={WORD_INQUIRY_FORM_URL} target="_blank" rel="noreferrer noopener">
       <div className="w-full h-[74px] mt-2 bg-[#F1F4FA] flex justify-between items-center rounded-[16px] px-[18px] shadow-base">
         <div className="flex gap-3">
           <NoticeIconSvg />

diff --git a/src/components/pages/profile/Modal/InquiryModal.tsx b/src/components/pages/profile/Modal/InquiryModal.tsx
@@ -1,8 +1,13 @@
 import { createPortal } from 'react-dom';
 import InquirySvg from '@/components/svg-component/InquirySvg';
 import CloseSvg from '@/components/svg-component/CloseSvg';
-import { OTHER_INQUIRY_FORM_URL, WORD_INQUIRY_FORM_URL } from '@/routes/path';
+import {
+  OTHER_INQUIRY_FORM_URL,
+  WORD_INQUIRY_FORM_URL,
+  WORD_REPORT_FORM_URL,
+} from '@/routes/path';
 import Link from 'next/link';
+import RightAngleBracketSvg from '@/components/svg-component/RightAngleBracketSvg';
 
 interface Props {
   isOpen: boolean;
@@ -17,7 +22,7 @@ export default function InquiryModal({ isOpen, handleModalClick }: Props) {
       <div className="bg-white rounded-[16px] mx-[34px] w-full flex flex-col items-center justify-center">
         <div className="flex w-full justify-between">
           <div className="mt-[28px] ml-[42%]">
-            <InquirySvg width={58} height={58} />
+            <InquirySvg width={52} height={52} />
           </div>
           <div
             className="m-4 cursor-pointer h-[24px]"
@@ -30,24 +35,55 @@ export default function InquiryModal({ isOpen, handleModalClick }: Props) {
           원하시는 문의를 선택해주세요.
         </div>
 
-        <div className="w-full mb-[20px] flex flex-col gap-[10px]">
-          <Link href={WORD_INQUIRY_FORM_URL} target="_blank">
-            <div className="p-5 text-[15px] text-[#737374] font-medium mx-[20px] bg-[#E7EBF8] rounded-[17px] hover:cursor-pointer hover:ring-[#435ADF] hover:ring-[1.5px]">
-              <span className="text-[16px] text-[#2D45D1] font-semibold">
-                잘못된 정보 문의하기
-              </span>
-              <br />
-              잘못된 용어 정보가 있나요?
+        <div className="w-full mb-[20px] flex flex-col gap-2">
+          <Link
+            href={WORD_INQUIRY_FORM_URL}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <div className="flex items-center justify-between p-5 text-[14px] ring-[1px] ring-[#DDE3FA] text-[#737374] font-medium mx-[20px] bg-[#E7EBF8] rounded-[17px] hover:ring-[#435ADF] hover:ring-[1.5px] h-20 drop-shadow">
+              <div>
+                <span className="text-[16px] text-[#2D45D1] font-semibold">
+                  잘못된 정보 문의하기
+                </span>
+                <br />
+                잘못된 용어 정보가 있나요?
+              </div>
+              <RightAngleBracketSvg color="#999999" />
+            </div>
+          </Link>
+
+          <Link
+            href={WORD_REPORT_FORM_URL}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <div className="flex items-center justify-between p-5 text-[14px] ring-[1px] ring-[#F2F4F9] text-[#737374] font-medium mx-[20px] bg-[#FFFFFF] rounded-[17px] hover:ring-[#435ADF] hover:ring-[1.5px] h-20 drop-shadow">
+              <div>
+                <span className="text-[16px] text-[#2D45D1] font-semibold">
+                  용어 제보하기
+                </span>
+                <br />
+                내가 아는 용어를 제보해 보세요.
+              </div>
+              <RightAngleBracketSvg color="#999999" />
             </div>
           </Link>
 
-          <Link href={OTHER_INQUIRY_FORM_URL} target="blank">
-            <div className="ring-[1px] ring-[#F2F4F9] p-5 text-[15px] text-[#737374] font-medium mx-[20px] bg-[#FBFCFE] rounded-[17px] hover:cursor-pointer hover:ring-[#435ADF] hover:ring-[1.5px]">
-              <span className="text-[16px] text-[#2D45D1] font-semibold">
-                기타 문의하기
-              </span>
-              <br />
-              그밖에 문의할 사항이 있나요?
+          <Link
+            href={OTHER_INQUIRY_FORM_URL}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <div className="flex items-center justify-between ring-[1px] ring-[#F2F4F9] p-5 text-[14px] text-[#737374] font-medium mx-[20px] bg-[#FFFFFF] rounded-[17px] hover:ring-[#435ADF] hover:ring-[1.5px] h-20 drop-shadow">
+              <div>
+                <span className="text-[16px] text-[#2D45D1] font-semibold">
+                  기타 문의하기
+                </span>
+                <br />
+                그밖에 문의할 사항이 있나요?
+              </div>
+              <RightAngleBracketSvg color="#999999" />
             </div>
           </Link>
         </div>

diff --git a/src/components/pages/profile/index.tsx b/src/components/pages/profile/index.tsx
@@ -72,7 +72,7 @@ export default function Profile({
             <span className="w-[20px] mr-[20px]">
               <WordBookSvg />
             </span>
-            <span className="text-white text-[17px]">좋아요를 누른 단어</span>
+            <span className="text-white text-[17px]">좋아요를 누른 용어</span>
             <span className="text-white h-[18px] w-[18px] flex items-center ml-auto">
               {likeCount ? likeCount : 0}
             </span>
@@ -88,7 +88,7 @@ export default function Profile({
             </span>
             <span className="text-[17px]">개발 용어 발음 퀴즈</span>
             <span className="ml-auto">
-              <RightAngleBracketSvg />
+              <RightAngleBracketSvg color="#888888" />
             </span>
           </div>
         </Link>
@@ -100,7 +100,7 @@ export default function Profile({
             </span>
             <span className=" text-[17px]">문의하기</span>
             <span className="ml-auto">
-              <RightAngleBracketSvg />
+              <RightAngleBracketSvg color="#888888" />
             </span>
           </div>
         </button>

diff --git a/src/components/pages/quiz/QuizPlay.tsx b/src/components/pages/quiz/QuizPlay.tsx
@@ -124,7 +124,7 @@ export default function QuizPlay() {
             ></div>
           </div>
           <div className="text-[14px] flex flex-col items-center mt-[73px]">
-            <p className="text-main-gray">아래 단어의 발음은?</p>
+            <p className="text-main-gray">아래 용어의 발음은?</p>
             <div className={`text-[32px] font-semibold mb-[42px]`}>
               {data?.[currentQuiz].name}
             </div>

diff --git a/src/components/pages/search/AutoComplete.tsx b/src/components/pages/search/AutoComplete.tsx
@@ -1,5 +1,8 @@
+import RightArrowSvg from '@/components/svg-component/RightArrowSvg';
 import { AutoCompleteWordData } from '@/fetcher/types';
+import { WORD_REPORT_FORM_URL } from '@/routes/path';
 import clsx from 'clsx';
+import Link from 'next/link';
 
 type Props = {
   searchWordResult: AutoCompleteWordData[] | null;
@@ -32,9 +35,27 @@ export default function AutoComplete({
           isSearchWordEmpty && 'pb-[0px]',
         )}
       >
-        {isSearchWordEmpty
-          ? '검색 결과가 없어요.'
-          : '검색은 세 글자 이상 입력 후 검색해 주세요.'}
+        {isSearchWordEmpty ? (
+          <>
+            <p>검색 결과가 없어요.</p>
+            <Link
+              href={WORD_REPORT_FORM_URL}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <div className="flex items-center gap-2.5 pt-[15.5px]">
+                <p className="font-semibold text-[15px] text-main-charcoal flex items-center">
+                  이 용어 제보하기
+                </p>
+                <div className="flex items-center">
+                  <RightArrowSvg />
+                </div>
+              </div>
+            </Link>
+          </>
+        ) : (
+          <p>검색어는 세 글자 이상 입력해 주세요.</p>
+        )}
       </div>
       {searchWordResult?.slice(0, 6).map((word, idx) => (
         <li

diff --git a/src/components/pages/search/NotFoundWord.tsx b/src/components/pages/search/NotFoundWord.tsx
@@ -1,12 +1,22 @@
 import BigMagnifierSvg from '@/components/svg-component/BigMagnifierSvg';
+import { WORD_REPORT_FORM_URL } from '@/routes/path';
+import Link from 'next/link';
 
 export default function NotFoundWord() {
   return (
     <div className="flex flex-col justify-center items-center pt-[200px] h-full">
       <BigMagnifierSvg />
       <div className="mt-5 text-[#A8AEBC] text-center">
-        앗! 찾으시는 검색 결과가 없어요. <br />
-        영문 검색만 가능합니다.
+        앗! 찾으시는 검색 결과가 없어요.
+        <Link
+          href={WORD_REPORT_FORM_URL}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <div className="rounded-2xl bg-[#E7EBF8] w-[212px] h-14 py-4 mt-7 text-[#383697] text-[16px] font-semibold">
+            용어 제보하러 가기
+          </div>
+        </Link>
       </div>
     </div>
   );

diff --git a/src/components/pages/wordbook/WordbookHeader.tsx b/src/components/pages/wordbook/WordbookHeader.tsx
@@ -7,7 +7,7 @@ export default function WordbookHeader() {
         <BackButton />
       </div>
       <h1 className="flex-1 text-center text-white text-base font-semibold">
-        좋아요 누른 단어
+        좋아요를 누른 용어
       </h1>
       <div className="flex-1" />
     </header>

diff --git a/src/components/pages/wordbook/index.tsx b/src/components/pages/wordbook/index.tsx
@@ -50,7 +50,7 @@ export default function Wordbook() {
             <div className="bg-[#FBFCFE] flex flex-col items-center gap-2.5 pt-[8.438rem] pb-[8.125rem]">
               <NoWordSvg />
               <span className="text-[#A8AEBC] font-medium text-center tracking-[-0.02em]">
-                좋아요를 누른 단어가 없어요.
+                좋아요를 누른 용어가 없어요.
               </span>
             </div>
           ) : (
@@ -78,7 +78,7 @@ export default function Wordbook() {
               href={WORD_LIST_PATH}
               className="flex items-center justify-center w-10/12 h-14 bg-[#E7EBF8] rounded-2xl "
             >
-              <p className="text-[#383697] font-semibold">단어 검색하러 가기</p>
+              <p className="text-[#383697] font-semibold">용어 검색하러 가기</p>
             </Link>
           ) : (
             <div className="flex items-center justify-center w-10/12 h-14">

diff --git a/src/components/svg-component/RightAngleBracketSvg.tsx b/src/components/svg-component/RightAngleBracketSvg.tsx
@@ -1,4 +1,8 @@
-export default function RightAngleBracketSvg() {
+type Props = {
+  color: string;
+};
+
+export default function RightAngleBracketSvg({ color }: Props) {
   return (
     <svg
       width="18"
@@ -9,7 +13,7 @@ export default function RightAngleBracketSvg() {
     >
       <path
         d="M6.74902 3.75024L11.999 9.00024L6.74902 14.2502"
-        stroke="#8B8B8B"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"