From aa41cbfdfd70e959463a09a29ed6c9ff26342708 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 02:36:09 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat(#26):=20=EC=86=8C=EC=85=9C=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=8B=9C=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=90=98=EC=96=B4=20=EC=9E=88=EC=9D=84=20=EB=95=8C?= =?UTF-8?q?,=20=EC=95=8A=EC=9D=84=20=EB=95=8C=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth/postKakaoToken.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/apis/auth/postKakaoToken.tsx b/src/apis/auth/postKakaoToken.tsx index d041658..3ed8103 100644 --- a/src/apis/auth/postKakaoToken.tsx +++ b/src/apis/auth/postKakaoToken.tsx @@ -1,9 +1,23 @@ import Axios from "../axios"; -export async function postKakaoToken(accessToken: string): Promise { - await Axios.post("/api/v1/auth/login/KAKAO", { - accessToken: accessToken, - }); +interface PostKakaoTokenResponse { + registerToken: string; +} + +export async function postKakaoToken( + accessToken: string +): Promise { + try { + const response = await Axios.post( + "/api/v1/auth/login/KAKAO", + { + accessToken: accessToken, + } + ); + return response.data; + } catch (error) { + throw new Error("Failed to login with Kakao: " + error); + } } export default postKakaoToken; From d5f34d8bea6f819e0091feed4172d90a1415d035 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 02:36:24 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat(#26):=20=ED=86=A0=ED=81=B0=20?= =?UTF-8?q?=EC=9E=AC=EB=B0=9C=EA=B8=89=20API=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth/putTokenReissue.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/apis/auth/putTokenReissue.tsx b/src/apis/auth/putTokenReissue.tsx index 099b3e4..4a42cd1 100644 --- a/src/apis/auth/putTokenReissue.tsx +++ b/src/apis/auth/putTokenReissue.tsx @@ -1,9 +1,17 @@ +import { TokenResponse } from "@/interface/Auth"; import Axios from "../axios"; -export async function putTokenReissue(refreshToken: string): Promise { - await Axios.put("/api/v1/auth/reissue", { - refreshToken: refreshToken, - }); +export async function putTokenReissue( + refreshToken: string +): Promise { + try { + const response = await Axios.put("/api/v1/auth/reissue", { + refreshToken: refreshToken, + }); + return response.data; + } catch (error) { + throw new Error("Failed to reissue token: " + error); + } } export default putTokenReissue; From cc597ed2ed001ba6525ee555f046c7a21657584f Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 02:36:38 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat(#26):=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/user/postUser.tsx | 13 +++++++++++++ src/app/auth/page.tsx | 12 +++++------- src/interface/.gitkeep | 0 src/interface/Auth.ts | 26 ++++++++++++++++++++++++++ 4 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 src/apis/user/postUser.tsx delete mode 100644 src/interface/.gitkeep create mode 100644 src/interface/Auth.ts diff --git a/src/apis/user/postUser.tsx b/src/apis/user/postUser.tsx new file mode 100644 index 0000000..a9debbb --- /dev/null +++ b/src/apis/user/postUser.tsx @@ -0,0 +1,13 @@ +import { PostUserRequest, TokenResponse } from "@/interface/Auth"; +import Axios from "../axios"; + +export async function postUser(user: PostUserRequest): Promise { + try { + const response = await Axios.post("/api/v1/users", user); + return response.data; + } catch (error) { + throw new Error("Failed to register user: " + error); + } +} + +export default postUser; diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 9cf5b83..81949bd 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -9,15 +9,12 @@ const Auth = () => { const router = useRouter(); const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY; const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI; - ("code"); useEffect(() => { if (typeof window !== "undefined") { const AUTHORIZATION_CODE = new URL(window.location.href).searchParams.get( "code" ); - const ACCESS_TOKEN = localStorage.getItem("access_token"); - postKakaoToken(ACCESS_TOKEN!!); const getToken = async () => { const res = axios.post( @@ -40,11 +37,12 @@ const Auth = () => { getToken() .then((res) => { if (res) { - localStorage.setItem( - "access_token", - JSON.stringify(res.data.access_token) - ); + localStorage.setItem("access_token", res.data.access_token); router.push("/signin/terms"); + + const ACCESS_TOKEN = localStorage.getItem("access_token"); + const registerToken = postKakaoToken(ACCESS_TOKEN!!); + console.log(registerToken); } }) .catch((err) => console.log(err)); diff --git a/src/interface/.gitkeep b/src/interface/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/interface/Auth.ts b/src/interface/Auth.ts new file mode 100644 index 0000000..e1e163e --- /dev/null +++ b/src/interface/Auth.ts @@ -0,0 +1,26 @@ +export interface TokenResponse { + accessToken: string; + refreshToken: string; +} + +export interface PostUserRequest { + registraitonToken: string; + agreement: { + termsOfService: boolean; + privacyPolicy: boolean; + marketing: boolean; + }; + phoneNumber: { + number: string; + }; + children: { + name: string; + gender: string; + birth: string; + elementSchoolId: number; + elementSchoolGrade: string; + elementSchoolClassNumber: string; + elementSchoolClassCode: string; + allergies: string[]; + }; +} From 2d9227e32fc26d6dbdc24b62b03a5fc636ddecb9 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 02:44:22 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix(#26):=20async=20await=20registerToken?= =?UTF-8?q?=20=EB=B0=9B=EC=95=84=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/auth/page.tsx | 49 ++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 81949bd..d14fd86 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -17,35 +17,36 @@ const Auth = () => { ); const getToken = async () => { - const res = 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", + 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, }, - } - ); - return res; - }; - - getToken() - .then((res) => { - if (res) { - localStorage.setItem("access_token", res.data.access_token); + { + 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 ACCESS_TOKEN = localStorage.getItem("access_token"); - const registerToken = postKakaoToken(ACCESS_TOKEN!!); + const registerToken = await postKakaoToken(accessToken); console.log(registerToken); } - }) - .catch((err) => console.log(err)); + } catch (error) { + console.error("Error during token handling:", error); + } + }; + + getToken(); } }, [REST_API_KEY, REDIRECT_URI, router]); From 76eaa2c7ad8d651102d8e7afb0e462f34e52d5d9 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 02:50:27 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat(#26):=20accessToken,=20refreshToken,?= =?UTF-8?q?=20registerToken=20redux=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth/postKakaoToken.tsx | 4 +++- src/app/auth/page.tsx | 15 ++++++++++++--- src/redux/slices/authSlice.ts | 27 +++++++++++++++++++++++++++ src/redux/store.ts | 2 ++ 4 files changed, 44 insertions(+), 4 deletions(-) create mode 100644 src/redux/slices/authSlice.ts diff --git a/src/apis/auth/postKakaoToken.tsx b/src/apis/auth/postKakaoToken.tsx index 3ed8103..5951c6c 100644 --- a/src/apis/auth/postKakaoToken.tsx +++ b/src/apis/auth/postKakaoToken.tsx @@ -1,7 +1,9 @@ import Axios from "../axios"; interface PostKakaoTokenResponse { - registerToken: string; + accessToken?: string; + refreshToken?: string; + registerToken?: string; } export async function postKakaoToken( diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index d14fd86..0581f09 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -1,12 +1,15 @@ "use client"; import postKakaoToken from "@/apis/auth/postKakaoToken"; +import { setToken } from "@/redux/slices/authSlice"; import axios from "axios"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; +import { useDispatch } from "react-redux"; const Auth = () => { const router = useRouter(); + const dispatch = useDispatch(); const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY; const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI; @@ -38,14 +41,20 @@ const Auth = () => { localStorage.setItem("access_token", accessToken); router.push("/signin/terms"); - const registerToken = await postKakaoToken(accessToken); - console.log(registerToken); + const data = await postKakaoToken(accessToken); + + dispatch( + setToken({ + accessToken: data.accessToken, // 회원가입되어 있을 때 + refreshToken: data.refreshToken, // 회원가입되어 있을 때 + registerToken: data.registerToken, // 회원가입되어 있지 않을 때 + }) + ); } } catch (error) { console.error("Error during token handling:", error); } }; - getToken(); } }, [REST_API_KEY, REDIRECT_URI, router]); diff --git a/src/redux/slices/authSlice.ts b/src/redux/slices/authSlice.ts new file mode 100644 index 0000000..84e8675 --- /dev/null +++ b/src/redux/slices/authSlice.ts @@ -0,0 +1,27 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { register } from "module"; + +export const authSlice = createSlice({ + name: "auth", + initialState: { + accessToken: null, + refreshToken: null, + registerToken: null, + }, + reducers: { + setToken: (state, action) => { + state.accessToken = action.payload; + state.refreshToken = action.payload; + state.registerToken = action.payload; + }, + clearToken: (state) => { + state.accessToken = null; + state.refreshToken = null; + state.registerToken = null; + }, + }, +}); + +export const { setToken, clearToken } = authSlice.actions; + +export default authSlice.reducer; diff --git a/src/redux/store.ts b/src/redux/store.ts index f4b9dcc..0fc15de 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,9 +1,11 @@ import { configureStore } from "@reduxjs/toolkit"; import categoryReducer from "./slices/categorySlice"; +import authReducer from "./slices/authSlice"; export const store = configureStore({ reducer: { category: categoryReducer, + auth: authReducer, }, }); From a09602cb846465c545c147902bb2b62d41bf66b0 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 03:00:26 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat(#26):=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20API?= =?UTF-8?q?=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mypage/page.tsx | 26 +++++++++++++++++++++++--- src/redux/slices/authSlice.ts | 12 ++++++------ 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 653250d..f68e02f 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,19 +1,30 @@ "use client"; +import deleteUser from "@/apis/auth/deleteUser"; 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 { useSelector } from "react-redux"; import styled from "styled-components"; const Mypage = () => { const router = useRouter(); + const tokens = useSelector((state: RootState) => state.auth); + const { refreshToken } = tokens; + + const handleLogout = () => { + deleteUser(refreshToken); + router.push("/"); + }; + const handleDeleteUser = () => {}; return ( - + @@ -74,8 +85,8 @@ const Mypage = () => { -
로그아웃
- 회원탈퇴 + 로그아웃 + 회원탈퇴 @@ -91,6 +102,7 @@ const Container = styled.div` overflow-x: hidden; overflow-y: scroll; position: relative; + padding-top: 20px; `; const Padding = styled.div` @@ -178,3 +190,11 @@ const DarkGray = styled.div` const DarkGrayCap = styled(DarkGray)` ${(props) => props.theme.fonts.caption1_r}; `; + +const LogOut = styled.div` + cursor: pointer; +`; + +const DeleteUser = styled(Gray)` + cursor: pointer; +`; diff --git a/src/redux/slices/authSlice.ts b/src/redux/slices/authSlice.ts index 84e8675..23a235b 100644 --- a/src/redux/slices/authSlice.ts +++ b/src/redux/slices/authSlice.ts @@ -4,9 +4,9 @@ import { register } from "module"; export const authSlice = createSlice({ name: "auth", initialState: { - accessToken: null, - refreshToken: null, - registerToken: null, + accessToken: "", + refreshToken: "", + registerToken: "", }, reducers: { setToken: (state, action) => { @@ -15,9 +15,9 @@ export const authSlice = createSlice({ state.registerToken = action.payload; }, clearToken: (state) => { - state.accessToken = null; - state.refreshToken = null; - state.registerToken = null; + accessToken: ""; + refreshToken: ""; + registerToken: ""; }, }, }); From 5346fad63b4a84e0ace2d662df06fd47a4ece436 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 04:12:08 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat(#26):=20userSlices,=20userReducer,?= =?UTF-8?q?=20slices=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interface/Auth.ts | 4 ++-- src/redux/slices/authSlice.ts | 1 - src/redux/slices/userSlice.ts | 36 +++++++++++++++++++++++++++++++++++ src/redux/store.ts | 2 ++ 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 src/redux/slices/userSlice.ts diff --git a/src/interface/Auth.ts b/src/interface/Auth.ts index e1e163e..e678957 100644 --- a/src/interface/Auth.ts +++ b/src/interface/Auth.ts @@ -4,7 +4,7 @@ export interface TokenResponse { } export interface PostUserRequest { - registraitonToken: string; + registrationToken: string; agreement: { termsOfService: boolean; privacyPolicy: boolean; @@ -22,5 +22,5 @@ export interface PostUserRequest { elementSchoolClassNumber: string; elementSchoolClassCode: string; allergies: string[]; - }; + }[]; } diff --git a/src/redux/slices/authSlice.ts b/src/redux/slices/authSlice.ts index 23a235b..5313738 100644 --- a/src/redux/slices/authSlice.ts +++ b/src/redux/slices/authSlice.ts @@ -1,5 +1,4 @@ import { createSlice } from "@reduxjs/toolkit"; -import { register } from "module"; export const authSlice = createSlice({ name: "auth", diff --git a/src/redux/slices/userSlice.ts b/src/redux/slices/userSlice.ts new file mode 100644 index 0000000..17a7e97 --- /dev/null +++ b/src/redux/slices/userSlice.ts @@ -0,0 +1,36 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const userSlice = createSlice({ + name: "user", + initialState: { + registrationToken: "", + agreement: { + termsOfService: false, + privacyPolicy: false, + marketing: false, + }, + phoneNumber: { + number: "", + }, + children: [ + { + name: "", + gender: "", + birth: "", + elementSchoolId: 0, + elementSchoolGrade: "", + elementSchoolClassNumber: "", + elementSchoolClassCode: "", + allergies: [], + }, + ], + }, + reducers: { + setUser: (state, action) => { + Object.assign(state, action.payload); + }, + }, +}); + +export const { setUser } = userSlice.actions; +export default userSlice.reducer; diff --git a/src/redux/store.ts b/src/redux/store.ts index 0fc15de..de59d3e 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,11 +1,13 @@ import { configureStore } from "@reduxjs/toolkit"; import categoryReducer from "./slices/categorySlice"; import authReducer from "./slices/authSlice"; +import userReducer from "./slices/userSlice"; export const store = configureStore({ reducer: { category: categoryReducer, auth: authReducer, + user: userReducer, }, }); From 2a6f9b163ad99a0350804f2fdb31d9a7a2ea3d27 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 21 May 2024 04:12:26 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat(#26):=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=A0=95=EB=B3=B4=EB=93=A4=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/signin/process1/page.tsx | 15 ++++++++ src/app/signin/process2/page.tsx | 44 +++++++++++++++--------- src/app/signin/process3-1/page.tsx | 38 +++++++++++++++----- src/app/signin/process3/page.tsx | 22 +++++++++++- src/app/signin/process4/page.tsx | 24 +++++++++++++ src/app/signin/terms/page.tsx | 23 ++++++++----- src/components/signin/SelectionPopup.tsx | 9 +++-- src/data/studentData.ts | 17 ++------- 8 files changed, 139 insertions(+), 53 deletions(-) diff --git a/src/app/signin/process1/page.tsx b/src/app/signin/process1/page.tsx index 5881488..b13c994 100644 --- a/src/app/signin/process1/page.tsx +++ b/src/app/signin/process1/page.tsx @@ -8,6 +8,9 @@ import { useState } from "react"; import styled from "styled-components"; import { useRouter } from "next/navigation"; import Subtitle from "@/components/signin/Subtitle"; +import { useDispatch, useSelector } from "react-redux"; +import { setUser } from "@/redux/slices/userSlice"; +import { RootState } from "@/redux/store"; const TITLE = "안녕하세요!\n스쿨포인트에 오신 걸 환영해요."; const CONTEXT = @@ -18,11 +21,23 @@ const WARNING = const SigninProcess1 = () => { const [phoneNumber, setPhoneNumber] = useState(""); const router = useRouter(); + const dispatch = useDispatch(); + const user = useSelector((state: RootState) => state.user); const handlePhoneNumberChange = (value: string) => { setPhoneNumber(value); }; const handleNextButtonClick = () => { + const cleanPhoneNumber = phoneNumber.replace(/-/g, ""); + dispatch( + setUser({ + ...user, + phoneNumber: { + number: cleanPhoneNumber, + }, + }) + ); + router.push("/signin/process2"); }; diff --git a/src/app/signin/process2/page.tsx b/src/app/signin/process2/page.tsx index 1c5a605..95e4f7d 100644 --- a/src/app/signin/process2/page.tsx +++ b/src/app/signin/process2/page.tsx @@ -7,8 +7,11 @@ import Input from "@/components/common/CustomInput"; import Topbar from "@/components/common/Topbar"; import ProgressBar from "@/components/signin/ProgressBar"; import Subtitle from "@/components/signin/Subtitle"; +import { setUser } from "@/redux/slices/userSlice"; +import { RootState } from "@/redux/store"; import { useRouter } from "next/navigation"; import { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components"; const CONTEXT = "자녀에 대한 정보를\n알려주세요!"; @@ -16,8 +19,10 @@ const CONTEXT = "자녀에 대한 정보를\n알려주세요!"; const SigninProcess2 = () => { const [name, setName] = useState(""); const [date, setDate] = useState(""); - const [sexType, setSexType] = useState(""); + const [gender, setgender] = useState(""); const router = useRouter(); + const dispatch = useDispatch(); + const user = useSelector((state: RootState) => state.user); const handleNameChange = (value: string) => { setName(value); @@ -25,10 +30,22 @@ const SigninProcess2 = () => { const handleDateChange = (value: string) => { setDate(value); }; - const handleSexTypeChange = (type: string) => { - setSexType(type); + const handlegenderChange = (type: string) => { + setgender(type); }; const handleNextButtonClick = () => { + dispatch( + setUser({ + ...user, + children: [ + { + name: name, + gender: gender, + birth: date, + }, + ], + }) + ); router.push("/signin/process3"); }; @@ -53,21 +70,21 @@ const SigninProcess2 = () => { handleSexTypeChange("male")} + checked={gender === "MALE"} + onChange={() => handlegenderChange("MALE")} /> handleSexTypeChange("female")} + checked={gender === "FEMALE"} + onChange={() => handlegenderChange("FEMALE")} /> handleSexTypeChange("sex")} + checked={gender === "NONE"} + onChange={() => handlegenderChange("NONE")} /> @@ -78,7 +95,7 @@ const SigninProcess2 = () => { */} - void; - onSelect: (value: string) => void; - selectionList: string[]; + onSelect: (value: number) => void; + selectionList: number[]; } const SelectionPopup = (props: SelectionPopupProps) => { const { onClose, onSelect, selectionList } = props; let title = ""; + let description = ""; if (selectionList == GradeData) { title = "학년 선택"; + description = "학년"; } else { title = "학급 선택"; + description = "반"; } return ( @@ -26,7 +29,7 @@ const SelectionPopup = (props: SelectionPopupProps) => { {selectionList.map((value, index) => (