Merge branch 'main' of https://github.com/TEAM-MOAMOA/Frontend into f…

…eat/Chatting/#57

src/Router.tsx

@@ -16,6 +16,7 @@ import ProfilePage from "./pages/ProfilePage";
 import RecommendedTeacherPage from "./pages/RecommendedTeacherPage";
 import SignupPage from "./pages/SignupPage";
 import Writing from "./pages/Writing";
+import Setting from "./pages/Setting";
 
 export default function Router() {
     return (
@@ -38,6 +39,7 @@ export default function Router() {
           <Route path="/signup" element={<SignupPage />} />
           <Route path="/chatting" element={<Chatting />} />
           <Route path="/chatting-detail" element={<ChattingDetail />} />
+          <Route path="/setting" element={<Setting />} />
         </Routes>
       </BrowserRouter>
     );

src/assets/index.ts

@@ -33,3 +33,5 @@ export { ReactComponent as SearchIcon } from './icon/searchIcon.svg';
 export { ReactComponent as DefaultTeacherImg } from './image/defaultTeacherImg.svg';
 export { ReactComponent as DefaultProfileImg } from './image/defaultProfileImg.svg';
 
+export { ReactComponent as ArrowIcon } from './icon/arrowIcon.svg';
+

src/atom/ToggleInfo.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const ToggleInfo = atom<boolean>({
+  key: 'ToggleInfo',
+  default: false,
+});

src/components/common/Toggle.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { theme } from '../../style/theme';
+import { useRecoilState } from 'recoil';
+import { ToggleInfo } from '../../atom/ToggleInfo';
+
+interface ToggleProps {
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export default function Toggle(props: ToggleProps) {
+  const [checked, setChecked] = useRecoilState(ToggleInfo);
+  const { defaultChecked, onChange} = props;
+
+  const handleChange = () => {
+    setChecked((prev) => !prev);
+    if (onChange) {
+      onChange(!checked);
+    }
+  };
+
+  return (
+    <St.ToggleWrapper checked={checked}>
+      <St.ToggleCheckbox type="checkbox" onChange={handleChange} />
+      <St.ToggleSlider checked={checked} />
+    </St.ToggleWrapper>
+  );
+}
+
+const St = {
+  ToggleWrapper: styled.label<{ checked: boolean }>`
+    position: relative;
+
+    width: 60px;
+    height: 30px;
+
+    border-radius: 15px;
+
+    background-color: ${(props) => (props.checked ? '#5cb85c' : theme.colors.Gray_2)};
+
+    cursor: pointer;
+  `,
+  ToggleSlider: styled.span<{ checked: boolean }>`
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: ${(props) => (props.checked ? '32px' : '2px')};
+
+    width: 26px;
+
+    border-radius: 50%;
+
+    background-color: white;
+
+    transition: left 0.3s;
+  `,
+  ToggleCheckbox: styled.input`
+    display: none;
+  `
+};

src/pages/Setting.tsx

@@ -0,0 +1,80 @@
+import { styled } from "styled-components"
+import TopBar from "../components/common/TopBar"
+import { ArrowIcon } from "../assets"
+import Toggle from "../components/common/Toggle"
+
+export default function Setting () {
+  const list_1 = ['문의하기', '서비스 이용약관'];
+  const list_2 = ['로그아웃', '회원탈퇴'];
+
+  const handleToggleChange = (checked: boolean) => {
+    console.log(checked);
+  };
+
+  return(
+    <St.SettingWrapper>
+      <TopBar message="설정"/>
+      <St.SettingContainer>
+        <St.ServiceSetting>
+          <St.Setting>
+            알림 설정
+            <Toggle defaultChecked={false} onChange={handleToggleChange}/>
+          </St.Setting>
+          {list_1.map((item, index)=> (
+            <St.Setting key={index}>
+              {item}
+              <St.Arrow><ArrowIcon/></St.Arrow>
+          </St.Setting>
+          ))}
+        </St.ServiceSetting>
+        <St.UserSetting>
+          {list_2.map((item, index)=> (
+            <St.Setting key={index}>
+              {item}
+              <St.Arrow><ArrowIcon/></St.Arrow>
+          </St.Setting>
+          ))}
+        </St.UserSetting>
+      </St.SettingContainer>
+      <St.Version>Ver 1.0</St.Version>
+    </St.SettingWrapper>
+  )
+}
+
+const St = {
+  SettingWrapper: styled.div`
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+  `,
+  SettingContainer: styled.div`
+    flex: 5;
+
+    margin: 0 3rem;
+  `,
+  ServiceSetting: styled.div`
+    
+  `,
+  UserSetting: styled.div`
+    margin-top: 3rem;
+  `,
+  Setting: styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 2rem 0;
+
+    border-bottom: 0.1rem solid ${({theme}) => theme.colors.Gray_2};
+    ${({theme}) => theme.fonts.body06};
+  `,
+  Arrow: styled.button`
+  `,
+  Version: styled.div`
+    flex: 1;
+
+    text-align: center;
+    ${({theme}) => theme.fonts.body06};
+  `,
+}