Merge pull request #133 from Kusitms-29th-ASAP/design/#132

[Design] 마이페이지 설정 UI 및 폰트 변경 기능
Kusitms-29th-ASAP · Aug 24, 2024 · d3d7ff4 · d3d7ff4
2 parents 26f45d2 + d5d0d6d
commit d3d7ff4
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 51 deletions.
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -3,8 +3,12 @@
 import deleteUser from "@/apis/auth/deleteUser";
 import Axios from "@/apis/axios";
 import getUserInfo from "@/apis/user/getUserInfo";
+import Checkbox from "@/components/common/Checkbox";
+import CustomInput from "@/components/common/CustomInput";
 import Tabbar from "@/components/common/Tabbar";
 import Topbar from "@/components/common/Topbar";
+import { FONT_SIZE } from "@/constants/font";
+import { LANGUAGE } from "@/constants/language";
 import { RootState } from "@/redux/store";
 import { theme } from "@/styles/theme";
 import Image from "next/image";
@@ -43,6 +47,10 @@ const Mypage = () => {
   const [userName, setUserName] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
 
+  const [language, setLanguage] = useState<string>("");
+  const [fontSize, setFontSize] = useState<number>(1);
+  const [openDropdown, setOpenDropdown] = useState(false);
+
   const userInfo = async () => {
     const data = await getUserInfo();
     setUserName(data.userName);
@@ -55,6 +63,30 @@ const Mypage = () => {
   }
   const newPhoneNumber = formatPhoneNumber(phoneNumber);
 
+  const handleTypeSelectClick = () => {
+    setOpenDropdown(!openDropdown);
+  };
+
+  const handleSelectDrop = (selectedDrop: string) => {
+    setLanguage(selectedDrop);
+    setOpenDropdown(false);
+
+    const selectedLanguage = LANGUAGE.find(
+      (lang) => lang.text === selectedDrop
+    );
+
+    if (selectedLanguage) {
+      localStorage.setItem("language", selectedLanguage.eng);
+    }
+  };
+
+  const handleCheckboxChange = (item: { size: number }) => {
+    setFontSize(item.size);
+    localStorage.setItem("fontSize", item.size.toString());
+
+    window.location.reload();
+  };
+
   const handleLogout = () => {
     deleteUser(refreshToken);
     router.push("/");
@@ -65,23 +97,43 @@ const Mypage = () => {
   useEffect(() => {
     if (childList.length > 0) {
       const primaryChild = childList.find((child) => child.isPrimary);
-      Axios.get(`/api/v1/children/${primaryChild?.childId}`)
-        .then((response) => {
+      Axios.get(`/api/v1/children/${primaryChild?.childId}`).then(
+        (response) => {
           const data = response.data;
           setChild(data);
-        })
-        .catch((error) => {});
+        }
+      );
     }
   }, [childList]);
 
   /* 자녀 전체 불러오기 */
   useEffect(() => {
-    Axios.get(`/api/v1/children`)
-      .then((response) => {
-        const data = response.data.childList;
-        setChildList(data);
-      })
-      .catch((error) => {});
+    Axios.get(`/api/v1/children`).then((response) => {
+      const data = response.data.childList;
+      setChildList(data);
+    });
+  }, []);
+
+  /* 언어 및 폰트 정보 불러오기 */
+  useEffect(() => {
+    const storedLanguageEng = localStorage.getItem("language");
+    if (storedLanguageEng) {
+      const matchingLanguage = LANGUAGE.find(
+        (lang) => lang.eng === storedLanguageEng
+      );
+      if (matchingLanguage) {
+        setLanguage(matchingLanguage.text);
+      }
+    } else {
+      localStorage.setItem("language", "한국어");
+    }
+
+    const storedFontSize = localStorage.getItem("fontSize");
+    if (storedFontSize) {
+      setFontSize(parseFloat(storedFontSize));
+    } else {
+      localStorage.setItem("fontSize", 0 + "");
+    }
   }, []);
 
   return (
@@ -147,6 +199,49 @@ const Mypage = () => {
             />
           </Line>
         </ColContainCard>
+        <ColContainCard>
+          <Title>환경설정</Title>
+          <div>
+            <Label>언어</Label>
+            <Box>
+              <StyledInput
+                value={language}
+                onClick={handleTypeSelectClick}
+                onChange={() => {}}
+                placeholder="언어"
+                inputType="select"
+                clicked={openDropdown}
+              />
+              {openDropdown && (
+                <DropDown>
+                  {LANGUAGE.map((data) => (
+                    <Cusor
+                      key={data.id}
+                      onClick={() => handleSelectDrop(data.text)}
+                    >
+                      {data.text}
+                    </Cusor>
+                  ))}
+                </DropDown>
+              )}
+            </Box>
+          </div>
+          <div>
+            <Label>글자 크기</Label>
+            <CheckboxBox>
+              {FONT_SIZE.map((item) => (
+                <Checkbox
+                  key={item.id}
+                  label={item.label}
+                  checkboxType="checkBtn"
+                  checked={fontSize === item.size}
+                  onChange={() => handleCheckboxChange(item)}
+                  justifyContent="space-between"
+                />
+              ))}
+            </CheckboxBox>
+          </div>
+        </ColContainCard>
         <ColContainCard>
           <LogOut onClick={handleLogout}>로그아웃</LogOut>
           <DeleteUser onClick={handleDeleteUser}>회원탈퇴</DeleteUser>
@@ -174,10 +269,11 @@ const Padding = styled.div`
 
 const Background = styled.div`
   height: 100%;
+  min-height: 820px;
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 20px 20px;
+  padding: 20px;
   background: ${theme.colors.b80};
 `;
 
@@ -254,6 +350,62 @@ const DarkGrayCap = styled(DarkGray)`
   ${(props) => props.theme.fonts.caption1_r};
 `;
 
+const Title = styled.div`
+  color: ${theme.colors.b700};
+  ${(props) => props.theme.fonts.body1_b};
+`;
+
+const Label = styled.div`
+  color: ${theme.colors.b700};
+  ${(props) => props.theme.fonts.body3_b};
+  margin-bottom: 5px;
+`;
+
+const Box = styled.div`
+  position: relative;
+`;
+
+const StyledInput = styled(CustomInput)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const DropDown = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 44px;
+  left: 0;
+  padding: 16px 218px 16px 16px;
+  border-radius: 10px;
+  border: 1px solid ${theme.colors.b200};
+  background: ${theme.colors.white};
+  box-shadow: 0px 2px 64px 0px rgba(30, 41, 59, 0.06);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  color: ${theme.colors.b500};
+  ${(props) => props.theme.fonts.body3_b};
+`;
+
+const CheckboxBox = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(120px, 1fr));
+  gap: 8px;
+
+  @media screen and (max-width: 330px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, 1fr);
+  }
+`;
+
+const Cusor = styled.div`
+  white-space: nowrap;
+  cursor: pointer;
+`;
+
 const LogOut = styled.div`
   cursor: pointer;
 `;

diff --git a/src/components/common/Checkbox.tsx b/src/components/common/Checkbox.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 
 type checkboxType = "checkbox" | "grayCheckbox" | "checkBtn" | "checkArrow";
 type checkboxColor = "primary" | "gray" | "black";
+type justifyContentType = "" | "space-between";
 
 export interface CheckBoxProps {
   checkboxType?: checkboxType;
@@ -14,6 +15,7 @@ export interface CheckBoxProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   essential?: boolean;
   color?: checkboxColor;
+  justifyContent?: justifyContentType;
 }
 
 const Checkbox = (props: CheckBoxProps) => {
@@ -26,6 +28,7 @@ const Checkbox = (props: CheckBoxProps) => {
     onChange,
     essential,
     color = "gray",
+    justifyContent = "",
   } = props;
 
   let checkboxClassName = checkboxType;
@@ -38,6 +41,7 @@ const Checkbox = (props: CheckBoxProps) => {
       <CheckboxContainer
         essential={essential ? true : false}
         checked={checked || false}
+        justifyContent={justifyContent}
       >
         <CheckboxInput
           className={checkboxClassName}
@@ -47,7 +51,7 @@ const Checkbox = (props: CheckBoxProps) => {
           onChange={onChange}
         />
         {label}
-        <span className={checkboxClassName}>{text}</span>
+        {text && <span className={checkboxClassName}>{text}</span>}
       </CheckboxContainer>
       {checkboxType === "checkArrow" && (
         <Image
@@ -108,9 +112,11 @@ const CheckBoxLayout = styled.div<{ $check: boolean }>`
 const CheckboxContainer = styled.label<{
   essential: boolean;
   checked: boolean;
+  justifyContent: string;
 }>`
   display: flex;
   align-items: center;
+  justify-content: ${({ justifyContent }) => justifyContent && justifyContent};
   flex-grow: 1;
   cursor: pointer;
 

diff --git a/src/components/common/CustomInput.tsx b/src/components/common/CustomInput.tsx
@@ -101,7 +101,6 @@ const StyledInput = styled.input<CustomInputProps>`
     props.hidden ? "rgba(255, 135, 0, 0.01)" : theme.colors.b700};
   ${(props) => props.theme.fonts.body3_m};
   outline: none;
-  ${(props) => props.theme.fonts.caption1_m};
 
   &::placeholder {
     color: ${theme.colors.b400};

diff --git a/src/constants/.gitkeep b/src/constants/.gitkeep
diff --git a/src/constants/font.ts b/src/constants/font.ts
@@ -0,0 +1,12 @@
+export const FONT_SIZE = [
+    {
+        id: 0,
+        label: "기본",
+        size: 1,
+    },
+    {
+        id: 1,
+        label: "1.2배",
+        size: 1.2,
+    },
+];
diff --git a/src/constants/language.ts b/src/constants/language.ts
@@ -0,0 +1,31 @@
+export const LANGUAGE = [{
+    id: 0,
+    kor:"한국어",
+    eng: "ko",
+    text: "한국어"
+},{
+    id: 1,
+    kor:"영어",
+    eng: "en",
+    text: "English"
+},{
+    id: 2,
+    kor:"중국어",
+    eng: "zh",
+    text: "中文"
+},{
+    id: 3,
+    kor:"일본어",
+    eng: "ja",
+    text: "日本語"
+},{
+    id: 4,
+    kor:"베트남어",
+    eng: "vi",
+    text: "tiếng Việt"
+},{
+    id: 5,
+    kor:"타갈로그어",
+    eng: "pi",
+    text: "Tagalog"
+}]
diff --git a/src/data/mypageData.ts b/src/data/mypageData.ts
@@ -43,40 +43,4 @@ export const docsData: Docs[] = [
     date: "4월 22일 (금)",
     guardian: "유진주",
   },
-];
-
-export interface ChildrenList {
-  name: string;
-  school: string;
-  grade: number;
-  class: number;
-  birth: string;
-  allergy: string[];
-}
-
-export const childrenListData: ChildrenList[] = [
-  {
-    name: "김동우",
-    school: "양원숲초등학교",
-    grade: 3,
-    class: 7,
-    birth: "2014년 4월 5일",
-    allergy: ["난류"],
-  },
-  {
-    name: "김규리",
-    school: "양원숲초등학교",
-    grade: 1,
-    class: 7,
-    birth: "2014년 4월 1일",
-    allergy: ["우유"],
-  },
-  {
-    name: "오민지",
-    school: "강남초등학교",
-    grade: 6,
-    class: 5,
-    birth: "2014년 3월 1일",
-    allergy: ["닭고기", "우유"],
-  },
-];
+];