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 @@
+
\ 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 (
-
- }>
- How to connect an external calendar(iCloud、Google、Outlook)
-
-
-
-
-
- }>
- How to change which calendars to show/hide
-
-
+ }
+ onClick={() => window.open(`https://support.apple.com/${fullLangCode}/102543`)}
+ >
+
+ {t("faq_apple_102543")}
+
-
- }>
- How to change the displayed month
-
-
+ }
+ onClick={() => window.open(`https://support.apple.com/${fullLangCode}/105124`)}
+ >
+
+ {t("faq_apple_105124")}
+
);
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 (
- } footer={}>
-
- How to connect an external calendar(iCloud、Google、Outlook)
-
-
- If the external calendar you want to display, such as Google Calendar or Outlook, is not in
- minical, please check the Settings app settings.
-
-
- );
-}
-
-export default HowToConnectPage;