feat: faq 데이터 추가

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();
   });
 

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";

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"]};
+`;

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>
   );