From 6ad7d5e38343716788a6ad6866b41ee532ace7d5 Mon Sep 17 00:00:00 2001
From: Danah <danah.kim@kakao.com>
Date: Sun, 19 Jan 2025 00:06:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20hash=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/Block/Block.styles.ts           | 32 +++++++++++++++++
 src/components/molecules/Block/Block.tsx      | 28 +++++++++++++++
 src/components/molecules/Block/index.ts       |  3 ++
 src/pages/privacy/page.tsx                    | 35 ++++++++-----------
 src/pages/terms/page.tsx                      | 33 +++++++----------
 5 files changed, 90 insertions(+), 41 deletions(-)
 create mode 100644 src/components/molecules/Block/Block.styles.ts
 create mode 100644 src/components/molecules/Block/Block.tsx
 create mode 100644 src/components/molecules/Block/index.ts

diff --git a/src/components/molecules/Block/Block.styles.ts b/src/components/molecules/Block/Block.styles.ts
new file mode 100644
index 0000000..1c90335
--- /dev/null
+++ b/src/components/molecules/Block/Block.styles.ts
@@ -0,0 +1,32 @@
+import styled from "basic-styled";
+
+export const StyledBlock = styled.div`
+  & ul {
+    list-style: disc;
+    padding: ${({ theme: { spacing } }) => `0 ${spacing(2.5)}px`};
+    & li {
+      padding: ${({ theme: { spacing } }) => `${spacing(0.5)}px 0`};
+      & ul {
+        list-style: square;
+      }
+    }
+  }
+`;
+
+export const TitleWrapper = styled.div``;
+
+export const Title = styled.div`
+  position: relative;
+  margin-bottom: ${({ theme: { spacing } }) => `${spacing(1)}px`};
+  max-width: fit-content;
+
+  ${({
+    theme: {
+      typography: { headline }
+    }
+  }) => ({
+    fontSize: headline.small.size,
+    fontWeight: 700,
+    letterSpacing: headline.small.letterSpacing
+  })}
+`;
diff --git a/src/components/molecules/Block/Block.tsx b/src/components/molecules/Block/Block.tsx
new file mode 100644
index 0000000..5270a7c
--- /dev/null
+++ b/src/components/molecules/Block/Block.tsx
@@ -0,0 +1,28 @@
+import { PropsWithChildren, ReactNode } from "react";
+
+import Divider from "@components/atoms/Divider";
+import Typography from "@components/atoms/Typography";
+
+import { StyledBlock, Title, TitleWrapper } from "./Block.styles";
+
+interface HashBlockProps {
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+function Block({ children, title, description }: PropsWithChildren<HashBlockProps>) {
+  return (
+    <StyledBlock>
+      <TitleWrapper>
+        <Title>{title}</Title>
+        <Divider />
+      </TitleWrapper>
+      <Typography display="flex" flexDirection="column" gap={2} pt={2} pb={2}>
+        {description}
+        {children}
+      </Typography>
+    </StyledBlock>
+  );
+}
+
+export default Block;
diff --git a/src/components/molecules/Block/index.ts b/src/components/molecules/Block/index.ts
new file mode 100644
index 0000000..9927c89
--- /dev/null
+++ b/src/components/molecules/Block/index.ts
@@ -0,0 +1,3 @@
+import Block from "./Block";
+
+export default Block;
diff --git a/src/pages/privacy/page.tsx b/src/pages/privacy/page.tsx
index beed155..d4c0ef0 100644
--- a/src/pages/privacy/page.tsx
+++ b/src/pages/privacy/page.tsx
@@ -7,8 +7,8 @@ import Button from "@components/atoms/Button";
 import Icon from "@components/atoms/Icon";
 import Typography from "@components/atoms/Typography";
 import GeneralLayout from "@components/layouts/GeneralLayout";
+import Block from "@components/molecules/Block";
 import Footer from "@components/molecules/Footer";
-import HashBlock from "@components/molecules/HashBlock";
 import Header from "@components/molecules/Header";
 import { GoogleFirebase } from "@utils/google-firebase";
 
@@ -29,10 +29,9 @@ function PrivacyPage() {
         Information Collected by the Service
       </Typography>
       <Box display="flex" flexDirection="column" gap={3} mt={2}>
-        <HashBlock
+        <Block
           title="Reminder Information"
           description={`The Service collects reminder information from the device with the user's consent. The collected information is used within the device to provide the following features of the Service and is not stored on external servers managed by the Service Provider.`}
-          to="/privacy#reminder-information"
         >
           <ul>
             <li>Display and edit reminders</li>
@@ -52,11 +51,10 @@ function PrivacyPage() {
               iCloud Reminder Apple Privacy Policy(opens new window)
             </Button>
           </Link>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Calendar and Event Information"
           description={`The Service collects calendar information (event information) from the device with the user's consent. The collected information is used within the device to provide the following features of the Service and is not stored on external servers managed by the Service Provider.`}
-          to="/privacy#calendar-and-event-information"
         >
           <ul>
             <li>Display and edit calendars</li>
@@ -95,21 +93,19 @@ function PrivacyPage() {
               </Button>
             </Link>
           </Box>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Contact Information"
           description={`The Service collects contact information (thumbnail photos, display names) from the device with the user's consent. The collected information is used within the device to provide the following features of the Service and is not stored on external servers managed by the Service Provider.`}
-          to="/privacy#contact-information"
         >
           <ul>
             <li>Display thumbnail photos and display names of event attendees</li>
             <li>Display thumbnail photos for birthday events</li>
           </ul>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Feedback and Inquiry Information"
           description="When the user contacts the Service Provider for feedback or inquiries about the Service, the following information may be collected. The collected information is used to respond to inquiries and improve the Service."
-          to="/privacy#feedback-and-inquiry-information"
         >
           <ul>
             <li>Name</li>
@@ -117,11 +113,10 @@ function PrivacyPage() {
             <li>Inquiry details</li>
             <li>Screenshots and other images</li>
           </ul>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Usage Data"
           description="The Service collects the following usage data upon the commencement of Service use. The collected information is used to improve the Service."
-          to="/privacy#usage-data"
         >
           <ul>
             <li>
@@ -156,11 +151,10 @@ function PrivacyPage() {
               Google Calenda Google Privacy Policy(opens new window)
             </Button>
           </Link>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Information for Ad Delivery"
           description={`The Service collects advertising identifiers (IDFA) with the user's consent. The collected information is used for ad delivery.`}
-          to="/privacy#information-for-ad-delivery"
         >
           <div>
             The Service uses third-party advertising services. These advertising service providers
@@ -180,11 +174,10 @@ function PrivacyPage() {
             By using Plandy of the Paid subscription services, ad delivery will be stopped, and
             information for the purpose of ad delivery will no longer be collected.
           </div>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Contact"
           description="For opinions, questions, complaints, or other inquiries regarding the handling of user information related to the privacy policy of the Service, please contact us using the email(support@case-d.com)."
-          to="/privacy#contact"
         />
       </Box>
     </GeneralLayout>
diff --git a/src/pages/terms/page.tsx b/src/pages/terms/page.tsx
index f901943..f309023 100644
--- a/src/pages/terms/page.tsx
+++ b/src/pages/terms/page.tsx
@@ -7,8 +7,8 @@ import Button from "@components/atoms/Button";
 import Icon from "@components/atoms/Icon";
 import Typography from "@components/atoms/Typography";
 import GeneralLayout from "@components/layouts/GeneralLayout";
+import Block from "@components/molecules/Block";
 import Footer from "@components/molecules/Footer";
-import HashBlock from "@components/molecules/HashBlock";
 import Header from "@components/molecules/Header";
 import { GoogleFirebase } from "@utils/google-firebase";
 
@@ -29,15 +29,14 @@ function TermsPage() {
               "service provider").`}
       </Typography>
       <Box display="flex" flexDirection="column" gap={3} mt={4}>
-        <HashBlock
+        <Block
           title="General"
           description={
             "By using this service, you are deemed to have agreed to this agreement. Please be sure to\n" +
-            "          read these Terms before using this service."
+            "read these Terms before using this service."
           }
-          to="/terms#general"
         />
-        <HashBlock title="Disclaimer" to="/terms#disclaimer">
+        <Block title="Disclaimer">
           <ul>
             <li>
               {`Preparation of equipment and network environment to operate this application shall be
@@ -69,16 +68,14 @@ function TermsPage() {
               paid services
             </li>
           </ul>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Usage Fees"
           description="This application shall be basically free of charge."
-          to="/terms#usage-fees"
         />
-        <HashBlock
+        <Block
           title="Prohibited matter"
           description="When using this service, the user shall not perform the following acts."
-          to="/terms#prohibited-matter"
         >
           <ul>
             <li>Acts that violate copyrights, portrait rights, honor rights, privacy, etc.</li>
@@ -112,23 +109,21 @@ function TermsPage() {
             <li>Acts that impose a load more than necessary on the target equipment</li>
             <li>Other acts that the service provider deems inappropriate</li>
           </ul>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Change, Suspension, Termination of Service"
           description={
             "The service provider may change, suspend, or terminate part or all of the service at any\n" +
             "          time for any reason without prior notice to the user."
           }
-          to="/terms#change-suspension-termination-of-service"
         />
-        <HashBlock
+        <Block
           title="Privacy policy"
           description={
             "User privacy information and personal information will be handled appropriately in\n" +
             "          accordance with the privacy policy. By using this service, you agree to our privacy\n" +
             "          policy."
           }
-          to="/terms#privacy-policy"
         >
           <Link to="/privacy">
             <Button
@@ -139,16 +134,14 @@ function TermsPage() {
               Privacy policy
             </Button>
           </Link>
-        </HashBlock>
-        <HashBlock
+        </Block>
+        <Block
           title="Changes to Terms of Use"
           description="The service provider may revise these Terms without obtaining the User's prior consent, and the User shall consent to this. The revised Terms of Use shall take effect from the time they are posted on this service."
-          to="/terms#change-to-terms-of-use"
         />
-        <HashBlock
+        <Block
           title="Contact"
           description="If you have any comments, questions, complaints, or other inquiries regarding the handling of user information regarding the terms of use of this service, please contact us using the email(support@case-d.com)."
-          to="/terms#contact"
         />
       </Box>
     </GeneralLayout>