Merge pull request #83 from Kusitms-29th-ASAP/fix/#82

[Fix] 1차 QA
Kusitms-29th-ASAP · May 22, 2024 · 77f2261 · 77f2261
2 parents c354c3e + 09b2825
commit 77f2261
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 65 deletions.
diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
-// const token = localStorage.getItem("accessToken");
-const token = `eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhc2FwIiwidG9rZW5fdHlwZSI6IkFDQ0VTU19UT0tFTiIsImNsYWltc190eXBlIjoiVVNFUiIsInVzZXJfY2xhaW1zIjp7InVzZXJfaWQiOjI4fSwiaWF0IjoxNzE1OTUyNDUyLCJleHAiOjE3MjU5NTI0NTJ9.P2CcmW2nqXyGNGxbHAJkoSTOnaG_OvV08IFCJvieB4k`;
+const token = localStorage.getItem("access_token");
+// const token = `eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhc2FwIiwidG9rZW5fdHlwZSI6IkFDQ0VTU19UT0tFTiIsImNsYWltc190eXBlIjoiVVNFUiIsInVzZXJfY2xhaW1zIjp7InVzZXJfaWQiOjI4fSwiaWF0IjoxNzE1OTUyNDUyLCJleHAiOjE3MjU5NTI0NTJ9.P2CcmW2nqXyGNGxbHAJkoSTOnaG_OvV08IFCJvieB4k`;
 
 const Axios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,

diff --git a/src/apis/user/getUserInfo.tsx b/src/apis/user/getUserInfo.tsx
@@ -0,0 +1,14 @@
+import Axios from "../axios";
+
+interface UserInfoResponse {
+  userName: string;
+  phoneNumber: string;
+  email: string;
+}
+
+export async function getUserInfo(): Promise<UserInfoResponse> {
+  const response = await Axios.get(`/api/v1/users`);
+  return response.data;
+}
+
+export default getUserInfo;
diff --git a/src/apis/user/putUserInfo.tsx b/src/apis/user/putUserInfo.tsx
@@ -0,0 +1,25 @@
+import { TokenResponse } from "@/interface/Auth";
+import Axios from "../axios";
+
+interface PutUserInfoRequest {
+  userName: string;
+  phoneNumber: {
+    number: string;
+  };
+}
+
+export async function putUserInfo({
+  userName,
+  phoneNumber,
+}: PutUserInfoRequest): Promise<void> {
+  try {
+    await Axios.put<TokenResponse>("/api/v1/users", {
+      userName,
+      phoneNumber,
+    });
+  } catch (error) {
+    throw new Error("Failed to: " + error);
+  }
+}
+
+export default putUserInfo;
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -14,50 +14,62 @@ const Auth = () => {
   const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI;
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    const getToken = async () => {
       const AUTHORIZATION_CODE = new URL(window.location.href).searchParams.get(
         "code"
       );
+      if (!AUTHORIZATION_CODE) {
+        console.error("Authorization Code is missing");
+        return;
+      }
 
-      const getToken = async () => {
-        try {
-          const response = await axios.post(
-            "https://kauth.kakao.com/oauth/token",
-            {
-              grant_type: "authorization_code",
-              client_id: REST_API_KEY,
-              redirect_uri: REDIRECT_URI,
-              code: AUTHORIZATION_CODE,
+      try {
+        const response = await axios.post(
+          "https://kauth.kakao.com/oauth/token",
+          {
+            grant_type: "authorization_code",
+            client_id: REST_API_KEY,
+            redirect_uri: REDIRECT_URI,
+            code: AUTHORIZATION_CODE,
+          },
+          {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
             },
-            {
-              headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-              },
-            }
-          );
+          }
+        );
 
-          if (response) {
-            const accessToken = response.data.access_token;
-            localStorage.setItem("access_token", accessToken);
-            router.push("/signin/terms");
+        const kakao_accessToken = response.data.access_token;
+        localStorage.setItem("access_token", kakao_accessToken);
 
-            const data = await postKakaoToken(accessToken);
+        const data = await postKakaoToken(kakao_accessToken);
 
-            dispatch(
-              setToken({
-                accessToken: data.accessToken, // 회원가입되어 있을 때
-                refreshToken: data.refreshToken, // 회원가입되어 있을 때
-                registerToken: data.registerToken, // 회원가입되어 있지 않을 때
-              })
-            );
-          }
-        } catch (error) {
-          console.error("Error during token handling:", error);
+        if (data.accessToken) {
+          localStorage.setItem("access_token", data.accessToken);
+          router.push("/home");
+
+          dispatch(
+            setToken({
+              accessToken: data.accessToken,
+              refreshToken: data.refreshToken,
+            })
+          );
+        } else {
+          router.push("/signin/terms");
+
+          dispatch(
+            setToken({
+              registerToken: data.registerToken,
+            })
+          );
         }
-      };
-      getToken();
-    }
-  }, [REST_API_KEY, REDIRECT_URI, router]);
+      } catch (error) {
+        console.error(error);
+        return;
+      }
+    };
+    getToken();
+  }, []);
 
   return null;
 };

diff --git a/src/app/mypage/children/page.tsx b/src/app/mypage/children/page.tsx
@@ -25,7 +25,7 @@ interface Child {
 const MyPage = () => {
   const [child, setChild] = useState<Child>({
     name: "김동우",
-    school: "신용산초등학교",
+    school: "양원숲초등학교",
     grade: 3,
     class: 7,
     birth: "2014년 4월 5일",

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import deleteUser from "@/apis/auth/deleteUser";
+import getUserInfo from "@/apis/user/getUserInfo";
 import Tabbar from "@/components/common/Tabbar";
 import Topbar from "@/components/common/Topbar";
 import { RootState } from "@/redux/store";
 import { theme } from "@/styles/theme";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
@@ -15,6 +17,21 @@ const Mypage = () => {
   const tokens = useSelector((state: RootState) => state.auth);
   const { refreshToken } = tokens;
 
+  const [userName, setUserName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+
+  const userInfo = async () => {
+    const data = await getUserInfo();
+    setUserName(data.userName);
+    setPhoneNumber(data.phoneNumber);
+  };
+  userInfo();
+
+  function formatPhoneNumber(phoneNumber: string) {
+    return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 7)}-${phoneNumber.slice(7)}`;
+  }
+  const newPhoneNumber = formatPhoneNumber(phoneNumber);
+
   const handleLogout = () => {
     deleteUser(refreshToken);
     router.push("/");
@@ -30,10 +47,10 @@ const Mypage = () => {
         <RowContainCard>
           <Col>
             <RowBottom>
-              <Bold>임승현</Bold>
+              <Bold>{userName}</Bold>
               <DarkGray>학부모님</DarkGray>
             </RowBottom>
-            <Gray>010-1111-1111</Gray>
+            <Gray>{newPhoneNumber}</Gray>
           </Col>
           <Row
             onClick={() => {
@@ -67,7 +84,7 @@ const Mypage = () => {
             </Line>
             <ChildInfo>
               <span style={{ fontWeight: "700" }}>김동우&nbsp;</span>
-              신용산 초등학교 3학년 7반
+              양원숲초등학교 3학년 7반
             </ChildInfo>
           </div>
           <Line>

diff --git a/src/app/mypage/profile/page.tsx b/src/app/mypage/profile/page.tsx
@@ -2,12 +2,14 @@
 
 import styled from "styled-components";
 import Topbar from "@/components/common/Topbar";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import CustomInput from "@/components/common/CustomInput";
 import Subtitle from "@/components/signin/Subtitle";
 import { theme } from "@/styles/theme";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
+import getUserInfo from "@/apis/user/getUserInfo";
+import putUserInfo from "@/apis/user/putUserInfo";
 
 interface Profile {
   name: string;
@@ -18,27 +20,51 @@ interface Profile {
 const Profile = () => {
   const router = useRouter();
 
-  const [profile, setProfile] = useState<Profile>({
-    name: "임승현",
-    phone: "010-1111-1111",
-    email: "abcd@naver.com",
+  const [modify, setModify] = useState(false);
+  const [profile, setProfile] = useState({
+    name: "",
+    phone: "",
+    email: "",
   });
 
-  const [modify, setModify] = useState(false);
+  useEffect(() => {
+    const userInfoFunction = async () => {
+      const data = await getUserInfo();
+      const formattedPhone = formatPhoneNumber(data.phoneNumber);
+      setProfile({
+        name: data.userName,
+        phone: formattedPhone,
+        email: data.email,
+      });
+    };
+    userInfoFunction();
+  }, []);
+
+  function formatPhoneNumber(phoneNumber: string) {
+    return phoneNumber.length === 11
+      ? `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 7)}-${phoneNumber.slice(7)}`
+      : phoneNumber;
+  }
 
-  const handleNameChange = (value: string) => {
-    setProfile({ ...profile, name: value });
+  const handleNameChange = (value: any) => {
+    setProfile((prev) => ({ ...prev, name: value }));
     setModify(true);
   };
 
-  const handlePhoneChange = (value: string) => {
-    setProfile({ ...profile, phone: value });
+  const handlePhoneChange = (value: any) => {
+    setProfile((prev) => ({ ...prev, phone: value }));
     setModify(true);
   };
 
   const handleModify = () => {
     setModify(false);
-    /* 프로필 변경사항 저장하기 */
+    putUserInfo({
+      userName: profile.name,
+      phoneNumber: {
+        number: profile.phone.replace(/-/g, ""),
+      },
+    });
+    router.push("/mypage");
   };
 
   return (

diff --git a/src/app/mypage/profile/signature/page.tsx b/src/app/mypage/profile/signature/page.tsx
@@ -109,9 +109,9 @@ const Signature = () => {
       </Div>
       <Content>
         <div>
-          <Subtitle>
+          <Title>
             <Primary>스쿨포인트에 전자서명</Primary>에 대한 동의
-          </Subtitle>
+          </Title>
           <Box>
             {signData.map((data, index) => (
               <ListNumber
@@ -186,7 +186,7 @@ const Box = styled.div`
   flex-direction: column;
   align-items: flex-start;
   padding: 16px;
-  gap: 10px;
+  gap: 16px;
   border-radius: 12px;
   background: ${theme.colors.b80};
   color: ${theme.colors.b500};
@@ -216,3 +216,17 @@ const SignBox = styled.div`
   color: ${theme.colors.b400};
   ${(props) => props.theme.fonts.body3_m};
 `;
+
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${({ theme }) => theme.fonts.body2_b};
+  color: ${({ theme }) => theme.colors.b700};
+  margin-bottom: 8px;
+
+  span {
+    ${({ theme }) => theme.fonts.caption1_m};
+    color: ${({ theme }) => theme.colors.b400};
+  }
+`;
diff --git a/src/app/news/school/page.tsx b/src/app/news/school/page.tsx
@@ -65,7 +65,7 @@ const School = () => {
         <Background>
           <SchoolInfo>
             설정학교
-            <Br>서울미동초등학교</Br>
+            <Br>양원숲초등학교</Br>
           </SchoolInfo>
           <BellImage
             src="/assets/news/bell.svg"

diff --git a/src/app/school/parentReference/workStudy/page.tsx b/src/app/school/parentReference/workStudy/page.tsx
@@ -9,7 +9,7 @@ import styled from "styled-components";
 const WorkStudyOptions = ["교외 체험학습 신청서", "신청서 제출 내역"];
 
 const WorkStudy = () => {
-  const [schoolName, setSchoolName] = useState("계현");
+  const [schoolName, setSchoolName] = useState("양원숲");
 
   return (
     <>

diff --git a/src/app/signin/process4/page.tsx b/src/app/signin/process4/page.tsx
@@ -54,7 +54,9 @@ const SigninProcess4 = () => {
       children: updateChildren,
     };
 
-    postUser(User);
+    const data = postUser(User);
+    console.log(data);
+
     router.push("/signin/completion");
   };
 

diff --git a/src/components/common/ListNumber.tsx b/src/components/common/ListNumber.tsx
@@ -23,9 +23,8 @@ export default ListNumber;
 
 const StyledListNumber = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   cursor: ${(props) => (props.onClick ? "pointer" : "default")};
 `;
@@ -40,6 +39,7 @@ const Number = styled.div`
   background: rgba(255, 135, 0, 0.15);
   color: ${theme.colors.primary700};
   ${(props) => props.theme.fonts.caption1_b}
+  margin-top: 2px;
 `;
 
 const Text = styled.div<{ color?: string }>`

diff --git a/src/components/common/Tabbar.tsx b/src/components/common/Tabbar.tsx
@@ -54,6 +54,7 @@ const Container = styled.div`
   position: sticky;
   bottom: 0;
   left: 0;
+  z-index: 500;
 `;
 
 const Tab = styled.div<TabProps>`