From 06b2f908f3a4fb11b28b1cd24da6a2e796ea13a5 Mon Sep 17 00:00:00 2001
From: Danah <danah.kim@kakao.com>
Date: Sun, 1 Dec 2024 18:47:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20faq=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.test.tsx                              |  2 +-
 src/assets/icons/outline/export_outline.svg   |  5 +++
 src/assets/icons/outline/index.ts             |  1 +
 .../faq/_components/FagList/FagList.styles.ts |  8 ++++
 src/pages/faq/_components/FagList/FagList.tsx | 42 ++++++++++---------
 src/pages/faq/how-to-connect/page.tsx         | 20 ---------
 6 files changed, 38 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/icons/outline/export_outline.svg
 delete mode 100644 src/pages/faq/how-to-connect/page.tsx

diff --git a/src/App.test.tsx b/src/App.test.tsx
index faa3cf6..4e72020 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -15,7 +15,7 @@ describe("상단 네비게이션", () => {
 
     await userEvent.click(screen.getByRole("button", { name: /FAQ/ }));
     expect(
-      await screen.findByText(/How to connect an external calendar（iCloud、Google、Outlook）/i)
+      await screen.findByText(/If your iCloud Contacts, Calendars, or Reminders won’t sync/i)
     ).toBeInTheDocument();
   });
 
diff --git a/src/assets/icons/outline/export_outline.svg b/src/assets/icons/outline/export_outline.svg
new file mode 100644
index 0000000..a186717
--- /dev/null
+++ b/src/assets/icons/outline/export_outline.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M12.9999 11.75C12.8099 11.75 12.6199 11.68 12.4699 11.53C12.1799 11.24 12.1799 10.76 12.4699 10.47L20.6699 2.26999C20.9599 1.97999 21.4399 1.97999 21.7299 2.26999C22.0199 2.55999 22.0199 3.03999 21.7299 3.32999L13.5299 11.53C13.3799 11.68 13.1899 11.75 12.9999 11.75Z" fill="#101010"/>
+<path d="M22 7.55C21.59 7.55 21.25 7.21 21.25 6.8V2.75H17.2C16.79 2.75 16.45 2.41 16.45 2C16.45 1.59 16.79 1.25 17.2 1.25H22C22.41 1.25 22.75 1.59 22.75 2V6.8C22.75 7.21 22.41 7.55 22 7.55Z" fill="currentColor"/>
+<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H11C11.41 1.25 11.75 1.59 11.75 2C11.75 2.41 11.41 2.75 11 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V13C21.25 12.59 21.59 12.25 22 12.25C22.41 12.25 22.75 12.59 22.75 13V15C22.75 20.43 20.43 22.75 15 22.75Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/outline/index.ts b/src/assets/icons/outline/index.ts
index 1930ca9..be5ce04 100644
--- a/src/assets/icons/outline/index.ts
+++ b/src/assets/icons/outline/index.ts
@@ -1 +1,2 @@
 export { default as ShieldOutline } from "./shield-outline.svg";
+export { default as ExportOutline } from "./export_outline.svg";
diff --git a/src/pages/faq/_components/FagList/FagList.styles.ts b/src/pages/faq/_components/FagList/FagList.styles.ts
index 6a02769..5f0bba2 100644
--- a/src/pages/faq/_components/FagList/FagList.styles.ts
+++ b/src/pages/faq/_components/FagList/FagList.styles.ts
@@ -7,8 +7,16 @@ export const StyledFagList = styled.ul`
 export const FagListItem = styled.li`
   & button {
     text-align: left;
+    color: ${({ theme }) => theme.palette.grey["700"]};
   }
   & button > svg {
     min-width: fit-content;
   }
 `;
+
+export const Bullet = styled.span`
+  min-width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: ${({ theme: { palette } }) => palette.grey["700"]};
+`;
diff --git a/src/pages/faq/_components/FagList/FagList.tsx b/src/pages/faq/_components/FagList/FagList.tsx
index 913f26c..f0de035 100644
--- a/src/pages/faq/_components/FagList/FagList.tsx
+++ b/src/pages/faq/_components/FagList/FagList.tsx
@@ -1,33 +1,37 @@
-import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import Button from "@components/atoms/Button";
 import Icon from "@components/atoms/Icon";
 
-import { FagListItem, StyledFagList } from "./FagList.styles";
+import { matchSupportLanguage } from "@utils/i18n";
+
+import { Bullet, FagListItem, StyledFagList } from "./FagList.styles";
 
 function FagList() {
+  const { t, i18n } = useTranslation();
+  const fullLangCode = matchSupportLanguage(i18n.resolvedLanguage).fullLangCode;
+
   return (
     <StyledFagList>
       <FagListItem>
-        <Link to="/faq/how-to-connect">
-          <Button variant="text" startIcon={<Icon name="DocumentBold" />}>
-            How to connect an external calendar（iCloud、Google、Outlook）
-          </Button>
-        </Link>
-      </FagListItem>
-      <FagListItem>
-        <Link to="/faq/how-to-connect">
-          <Button variant="text" startIcon={<Icon name="DocumentBold" />}>
-            How to change which calendars to show/hide
-          </Button>
-        </Link>
+        <Button
+          variant="text"
+          endIcon={<Icon name="ExportOutline" width={15} height={15} />}
+          onClick={() => window.open(`https://support.apple.com/${fullLangCode}/102543`)}
+        >
+          <Bullet />
+          {t("faq_apple_102543")}
+        </Button>
       </FagListItem>
       <FagListItem>
-        <Link to="/faq/how-to-connect">
-          <Button variant="text" startIcon={<Icon name="DocumentBold" />}>
-            How to change the displayed month
-          </Button>
-        </Link>
+        <Button
+          variant="text"
+          endIcon={<Icon name="ExportOutline" width={15} height={15} />}
+          onClick={() => window.open(`https://support.apple.com/${fullLangCode}/105124`)}
+        >
+          <Bullet />
+          {t("faq_apple_105124")}
+        </Button>
       </FagListItem>
     </StyledFagList>
   );
diff --git a/src/pages/faq/how-to-connect/page.tsx b/src/pages/faq/how-to-connect/page.tsx
deleted file mode 100644
index 01259e5..0000000
--- a/src/pages/faq/how-to-connect/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Typography from "@components/atoms/Typography";
-import GeneralLayout from "@components/layouts/GeneralLayout";
-import Footer from "@components/molecules/Footer";
-import Header from "@components/molecules/Header";
-
-function HowToConnectPage() {
-  return (
-    <GeneralLayout header={<Header />} footer={<Footer />}>
-      <Typography variant="headline" fontWeight={700} mt={2} mb={2}>
-        How to connect an external calendar（iCloud、Google、Outlook）
-      </Typography>
-      <Typography>
-        If the external calendar you want to display, such as Google Calendar or Outlook, is not in
-        minical, please check the Settings app settings.
-      </Typography>
-    </GeneralLayout>
-  );
-}
-
-export default HowToConnectPage;