Merge pull request #44 from Team-INSERT/layouts/setting

�설정 모달 퍼블리싱

src/components/atoms/Switch.tsx

@@ -0,0 +1,62 @@
+import color from "@/styles/color";
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+interface ISwitchProps {
+  isSwitch: boolean;
+  handleToggle: () => void;
+}
+
+const Switch = ({ isSwitch, handleToggle }: ISwitchProps) => {
+  return (
+    <ToggleButton isSwitch={isSwitch} onClick={handleToggle}>
+      <ToggleCircle isSwitch={isSwitch} />
+    </ToggleButton>
+  );
+};
+
+const moveToLeft = keyframes`
+  from {
+    transform: translateX(4px);
+  }
+  to {
+    transform: translateX(4px);
+  }
+`;
+
+const moveToRight = keyframes`
+  from {
+    transform: translateX(-10px);
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+
+const ToggleButton = styled.div<{ isSwitch: boolean }>`
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 15px;
+  background-color: ${({ isSwitch }) =>
+    isSwitch ? color.primary_blue : color.content};
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+`;
+
+const ToggleCircle = styled.div<{ isSwitch: boolean }>`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: ${color.white};
+  transition: transform 0.3s ease;
+  animation-fill-mode: forwards;
+  transform: ${({ isSwitch }) =>
+    isSwitch ? "translateX(20px)" : `translateX(4px)`};
+  animation: ${(isSwitch) => (isSwitch ? moveToLeft : moveToRight)} 0.3s ease;
+`;
+
+export default Switch;

src/components/common/Modal/EmojiModal/ModalHeader.tsx

@@ -28,6 +28,8 @@ const Container = styled.header`
   gap: 6px;
   align-items: center;
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
 `;
 
 const Title = styled.span`

src/components/common/Modal/EmojiModal/index.tsx

@@ -1,7 +1,6 @@
 import color from "@/styles/color";
 import React from "react";
 import styled, { css } from "styled-components";
-import useModal from "@/hooks/useModal";
 import ModalList from "./ModalList";
 import ModalHeader from "./ModalHeader";
 
@@ -36,6 +35,7 @@ const Container = styled.div<{
   position: absolute;
   z-index: 10;
   width: 30vw;
+  border-radius: 12px;
   height: fit-content;
   display: flex;
   flex-direction: column;

src/components/common/Modal/SettingModal/SettingBody.tsx

@@ -0,0 +1,151 @@
+import Switch from "@/components/atoms/Switch";
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const settingOptions = [
+  {
+    name: "디스플레이",
+    options: [
+      {
+        title: "다크 모드 켜기",
+        isHaveDescription: false,
+      },
+      {
+        title: "홈에만 커스텀 백그라운드 적용",
+        isHaveDescription: true,
+        description:
+          "홈 화면에서만 커스텀으로 설정한 백그라운드를 적용시킬 수 있어요.",
+      },
+      {
+        title: "디스플레이 배율 설정",
+        isHaveDescription: false,
+      },
+    ],
+  },
+  {
+    name: "커뮤니티",
+    options: [
+      {
+        title: "익명 모드 켜놓기",
+        isHaveDescription: true,
+        description: "익명 모드를 기본값으로 설정할 수 있어요.",
+      },
+      {
+        title: "렌더당 렌더링할 게시글 개수",
+        isHaveDescription: true,
+        description:
+          "한 번의 렌더당 몇 개의 게시글을 렌더링할 지 정할 수 있어요.",
+      },
+      {
+        title: "자세한 시간 표시",
+        isHaveDescription: true,
+        description:
+          "게시글이나 댓글에서 시간, 분, 초 등의 자세한 시간을 표시해요.",
+      },
+      {
+        title: "모든 답글 표시",
+        isHaveDescription: true,
+        description: "모든 답글을 항상 표시해요. 답글이 너무 깊을 수 있어요.",
+      },
+      {
+        title: "딥웹 모드",
+        isHaveDescription: true,
+        description: "예전 BSM의 매운 맛을 즐길 수 있어요.",
+      },
+    ],
+  },
+  {
+    name: "알림 설정",
+    options: [
+      {
+        title: "웹 사이트 알림 받기",
+        isHaveDescription: true,
+        description: "급식 등의 여러가지 서비스 알림을 구독할 수 있어요.",
+      },
+    ],
+  },
+];
+
+const SettingBody = () => {
+  const [isSwitch, setIsSwitch] = React.useState(false);
+
+  const handleToggleButton = () => {
+    setIsSwitch(!isSwitch);
+  };
+
+  return (
+    <Container>
+      {settingOptions.map(({ name, options }) => (
+        <SettingSection>
+          <SettingName>{name}</SettingName>
+          {options.map((option) => (
+            <SettingBox>
+              <SettingHandleHGroup>
+                <SettingHandleTitle>{option.title}</SettingHandleTitle>
+                {option.isHaveDescription && (
+                  <SettingHandleDescription>
+                    {option.description}
+                  </SettingHandleDescription>
+                )}
+              </SettingHandleHGroup>
+              <SwitchBox>
+                <Switch isSwitch={isSwitch} handleToggle={handleToggleButton} />
+              </SwitchBox>
+            </SettingBox>
+          ))}
+        </SettingSection>
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 26px;
+  gap: 30px;
+`;
+
+const SettingSection = styled.article`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const SettingName = styled.span`
+  ${font.H5};
+  margin-right: auto;
+`;
+
+const SettingBox = styled.div`
+  width: 100%;
+  padding: 26px 16px 26px 0;
+  border-bottom: 1.5px solid ${color.on_tertiary};
+  display: flex;
+  align-items: center;
+`;
+
+const SettingHandleHGroup = styled.hgroup`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+`;
+
+const SettingHandleTitle = styled.h1`
+  ${font.p2};
+`;
+
+const SettingHandleDescription = styled.p`
+  ${font.p3};
+  color: ${color.gray};
+`;
+
+const SwitchBox = styled.div`
+  margin-left: auto;
+`;
+
+export default SettingBody;

src/components/common/Modal/SettingModal/SettingHeader.tsx

@@ -0,0 +1,48 @@
+import Setting from "@/global/assets/svgs/Setting";
+import XIcon from "@/global/assets/svgs/XIcon";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const SettingHeader = () => {
+  return (
+    <Header>
+      <HGroup>
+        <Setting width={16} height={16} />
+        <SettingTitle />
+      </HGroup>
+      <CloseButton>
+        <XIcon />
+      </CloseButton>
+    </Header>
+  );
+};
+
+const Header = styled.header`
+  width: 100%;
+  padding: 10px 0 10px 18px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
+`;
+
+const HGroup = styled.hgroup`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const SettingTitle = styled.div`
+  ${font.p2};
+  font-weight: 500;
+
+  &:after {
+    content: "설정";
+  }
+`;
+
+const CloseButton = styled.button`
+  margin: 0 20px 0 auto;
+`;
+
+export default SettingHeader;

src/components/common/Modal/SettingModal/index.tsx

@@ -1,16 +1,25 @@
 import color from "@/styles/color";
 import React from "react";
 import styled from "styled-components";
+import SettingHeader from "./SettingHeader";
+import SettingBody from "./SettingBody";
 
 const SettingModal = () => {
-  return <Container />;
+  return (
+    <Container>
+      <SettingHeader />
+      <SettingBody />
+    </Container>
+  );
 };
 
 const Container = styled.div`
-  width: 30vw;
-  height: 40vh;
+  width: 40vw;
+  height: 90vh;
+  overflow-y: scroll;
   background-color: ${color.white};
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
 `;
 
 export default SettingModal;