Merge pull request #75 from iOdiO89/develop

FIX: 설정 페이지 디자인 수정
the-kingdoms · Apr 29, 2024 · 100066d · 100066d
2 parents 89167c2 + b94c596
commit 100066d
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 21 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -25,6 +25,7 @@
     "react/no-array-index-key": "off",
     "react-hooks/exhaustive-deps": "off",
     "import/prefer-default-export": "off",
-    "radix": "off"
+    "radix": "off",
+    "jsx-a11y/click-events-have-key-events": "off"
   }
 }
diff --git a/src/libs/settingText.ts b/src/libs/settingText.ts
@@ -3,6 +3,7 @@ export const quitText = [
   "얼루가게를 탈퇴하더라도 회원정보, 서비스 이용기록은 모두 삭제되며, 삭제한 데이터는 복구가 불가능해요.",
   "얼루가게를 탈퇴하고 재가입하더라도 회원정보 및 근무 정보 등 저희가 관리한 정보들은 다시 볼 수 없어요.",
   "가게를 운영 중이시라면 운영 중이신 가게가 폐쇄돼고, 데이터 또한 복구가 불가능해요.",
+  "탈퇴 메일은 탈퇴 요청을 하신 날로 2-3일 내에 발송이 되고, 탈퇴 처리를 해주시면 돼요.",
 ];
 
 export const termText = {

diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
@@ -3,6 +3,7 @@ import AdminControlBanner from "@/assist/banner/AdminControlBanner";
 import { myMemberIdAtom, roleAtom } from "@/data/global";
 import { useGetRelationList } from "@/hooks/query/relation";
 import RelationSlider from "@/screen/mypage/RelationSlider";
+import SettingFAB from "@/screen/mypage/SettingFAB";
 import UserInfo from "@/screen/mypage/UserInfo";
 import WorkHistoryList from "@/screen/mypage/WorkHistoryList";
 import WorkHour from "@/screen/mypage/WorkHour";
@@ -35,7 +36,7 @@ export default function Manage() {
   };
 
   return (
-    <FlexBox direction="col" className="relative h-full justify-between">
+    <FlexBox direction="col" className="relative h-full justify-between w-full">
       <FlexBox direction="col" className="w-full gap-6 py-4">
         <UserInfo />
         <FlexBox direction="col" className="w-full gap-2">
@@ -56,6 +57,7 @@ export default function Manage() {
         <WorkHistoryList memberId={currentMemberId} />
       </FlexBox>
       <TabBarGage />
+      <SettingFAB />
     </FlexBox>
   );
 }
diff --git a/src/pages/mypage/quit/confirm.tsx b/src/pages/mypage/quit/confirm.tsx
@@ -24,6 +24,8 @@ export default function QuitConfirm() {
       title: "탈퇴하기",
       discription: "탈퇴하실 경우, 2-3일 뒤에 탈퇴메일이 발송됩니다.",
       type: "confirm",
+      confirmText: "예, 탈퇴하겠습니다.",
+      closeText: "아니오",
       onAction: () => router.push("/mypage/quit/complete"),
     });
   };
@@ -37,10 +39,20 @@ export default function QuitConfirm() {
             <span className="text-Black H5-bold">{my?.name} </span>님<br />
             탈퇴 전에 확인해주세요!
           </div>
-          <FlexBox direction="col" className="w-full gap-6">
-            {quitText.map(text => (
-              <li className="list-disc text-Gray6 B4-medium break-keep !leading-[22px]">
-                {text}
+          <FlexBox direction="col" className="w-full gap-6 pl-5">
+            {quitText.map((text, i) => (
+              <li
+                className="list-disc text-Gray6 B4-medium break-keep !leading-[22px] list-outside indent-[-20px]"
+                key={i}
+              >
+                {text.includes("2-3일")
+                  ? text.split("2-3일").map((splitedString, index) => (
+                      <span key={index}>
+                        {index !== 0 && <span className="text-Red">2-3일</span>}
+                        {splitedString}
+                      </span>
+                    ))
+                  : text}
               </li>
             ))}
           </FlexBox>
@@ -51,9 +63,14 @@ export default function QuitConfirm() {
               checked={isChecked}
               onClick={onClickCheckBox}
               color="red"
+              size="S"
               type="square"
             />
-            <div className="text-Gray6 B4-regular" onClick={onClickCheckBox}>
+            <div
+              className="text-Gray6 B4-regular"
+              onClick={onClickCheckBox}
+              role="presentation"
+            >
               유의사항을 모두 확인하였으며 동의합니다
             </div>
           </FlexBox>

diff --git a/src/pages/mypage/quit/index.tsx b/src/pages/mypage/quit/index.tsx
@@ -2,7 +2,6 @@ import FlexBox from "@modules/layout/FlexBox";
 import TopTitle from "@modules/layout/TopTitle";
 import { useAtom } from "jotai";
 import { myAtom } from "@/data/global";
-import TextAreaField from "@modules/components/textfields/TextAreaField";
 import TextButton from "@modules/components/button/TextButton";
 import { useState } from "react";
 import { useRouter } from "next/router";
@@ -50,6 +49,7 @@ export default function Quit() {
         />
         <FlexBox direction="col" className="gap-2.5 w-full">
           <button
+            type="button"
             className="underline underline-offset-4 text-Gray5 B5-regular"
             onClick={onClickSkipBtn}
           >

diff --git a/src/pages/mypage/setting.tsx b/src/pages/mypage/setting.tsx
@@ -1,4 +1,3 @@
-import Radio from "@modules/components/selections/Radio";
 import Divider from "@modules/layout/Divider";
 import FlexBox from "@modules/layout/FlexBox";
 import Icon from "@modules/layout/Icon";
@@ -38,8 +37,8 @@ export default function Setting() {
   };
 
   const [isChecked, setIsChecked] = useState<boolean>(false);
-  const onClickSwitch = (isChecked: boolean) => {
-    setIsChecked(isChecked);
+  const onClickSwitch = (checked: boolean) => {
+    setIsChecked(checked);
   };
 
   return (
@@ -60,7 +59,7 @@ export default function Setting() {
               checked={isChecked}
               checkedIcon={false}
               uncheckedIcon={false}
-              onColor={"#000"}
+              onColor="#000"
               width={48}
               height={28}
               handleDiameter={24}
@@ -73,8 +72,13 @@ export default function Setting() {
       <FlexBox direction="col" className="px-4 w-full items-start mt-6 gap-6">
         <div className="text-Gray7 B1-medium">고객센터</div>
         <FlexBox direction="col" className="gap-6 w-full">
-          {parts.map(part => (
-            <button className="w-full" onClick={() => onClickPart(part.path)}>
+          {parts.map((part, i) => (
+            <button
+              type="button"
+              className="w-full"
+              onClick={() => onClickPart(part.path)}
+              key={i}
+            >
               <FlexBox className="justify-between w-full">
                 <div className="text-Gray7 B4-regular">{part.name}</div>
                 <Icon src="/icon/direction/right.svg" sz={24} />

diff --git a/src/pages/mypage/term.tsx b/src/pages/mypage/term.tsx
@@ -4,23 +4,29 @@ import TopTitle from "@modules/layout/TopTitle";
 
 export default function Term() {
   return (
-    <FlexBox direction="col" className="px-4 break-keep">
-      <TopTitle type="back" title="개인정보 처리방침" />
-      <div className="pt-8 pb-6 border-t border-Gray1">
+    <FlexBox direction="col" className="break-keep">
+      <div className="px-4 w-full">
+        <TopTitle type="back" title="개인정보 처리방침" />
+      </div>
+      <div className="h-[1px] w-full bg-Gray1" />
+      <div className="pt-8 pb-6 px-4">
         <div className="H5-bold mb-4">{termText.title}</div>
         <div className="text-Gray6 B4-regular !leading-5">
           {termText.description}
         </div>
-        {termText.parts.map(part => (
-          <FlexBox direction="col" className="items-start gap-2 mt-8">
+        {termText.parts.map((part, i) => (
+          <FlexBox key={i} direction="col" className="items-start gap-2 mt-8">
             <div className="text-Gray7 B3-medium mb-2 !leading-5">
               {part.title}
             </div>
             <div className="text-Gray6 B4-regular !leading-5">
               {part.description}
             </div>
-            {part.detail.map(detail => (
-              <li className="text-Gray6 B4-regular !leading-[22px]">
+            {part.detail.map((detail, index) => (
+              <li
+                className="text-Gray6 B4-regular !leading-[22px] indent-[-20px] pl-5"
+                key={index}
+              >
                 {detail}
               </li>
             ))}

diff --git a/src/screen/mypage/SettingFAB.tsx b/src/screen/mypage/SettingFAB.tsx
@@ -0,0 +1,24 @@
+import FlexBox from "@modules/layout/FlexBox";
+import Icon from "@modules/layout/Icon";
+import { useRouter } from "next/router";
+
+export default function SettingFAB() {
+  const router = useRouter();
+
+  const onClickFAB = () => {
+    router.push("/mypage/setting");
+  };
+
+  return (
+    <button
+      onClick={onClickFAB}
+      type="button"
+      className="fixed rounded-[20px] p-3 bg-Gray7 bottom-[128px] right-4"
+    >
+      <FlexBox className="gap-2">
+        <Icon src="/icon/control/setting.svg" sz={16} />
+        <div className="text-White B4-regular">설정</div>
+      </FlexBox>
+    </button>
+  );
+}