🚑 handle type error and .env empty in build time

Author: youngminss

core/storeRegistrationService.ts

@@ -37,7 +37,7 @@ export const makeBusinessHourData = (
 	refArr: MutableRefObject<Array<RefObject<HTMLButtonElement>> | null[] | HTMLButtonElement[]>,
 	selectedBusinessHourBtn: string,
 ) => {
-	const businessHourArr = [];
+	const businessHourArr: Array<{ day: string; time: string }> = [];
 	if (selectedBusinessHourBtn === 'weekDaysWeekEnd') {
 		for (let i = 0; i < 5; i++) {
 			businessHourArr.push({ day: businessHourDays[i].day, time: (refArr.current[0] as HTMLButtonElement).value });

next.config.js

@@ -28,6 +28,22 @@ const nextConfig = {
     })
     return config
   },
+	env: {
+		NTS_API_BASE_URL: process.env.NTS_API_BASE_URL,
+		NTS_API_KEY: process.env.NTS_API_KEY,
+		S3_UPLOAD_KEY: process.env.S3_UPLOAD_KEY,
+		S3_UPLOAD_URL: process.env.S3_UPLOAD_URL,
+		S3_UPLOAD_SECRET: process.env.S3_UPLOAD_SECRET,
+		S3_UPLOAD_BUCKET: process.env.S3_UPLOAD_BUCKET,
+    S3_UPLOAD_REGION: process.env.S3_UPLOAD_REGION,
+		API_BASE_URL: process.env.API_BASE_URL,
+		KAKAO_CLIENT_ID: process.env.KAKAO_CLIENT_ID,
+		KAKAO_CLIENT_SECRET: process.env.KAKAO_CLIENT_SECRET,
+		KAKAO_MAP_REST_KEY: process.env.KAKAO_MAP_REST_KEY,
+		NAVER_CLIENT_ID: process.env.NAVER_CLIENT_ID,
+		NAVER_CLIENT_SECRET: process.env.NAVER_CLIENT_SECRET,
+		BASE_URL: process.env.BASE_URL,
+	}
 };
 
 module.exports = nextConfig;

store/actions/modalStore.ts

@@ -24,7 +24,7 @@ export const MODAL_KEY = {
 } as const;
 
 export const modalStore = (set) => ({
-	modalKey: MODAL_KEY.OFF,
+	modalKey: 'OFF',
 	changeModalKey: (changedModalKey: string) => set(() => ({ modalKey: changedModalKey })),
 });
 

tsconfig.json

@@ -15,6 +15,7 @@
 		"isolatedModules": true,
 		"jsx": "preserve",
 		"incremental": true,
+		"noImplicitAny": false,
 		"plugins": [
 			{
 				"name": "next"

utils/storage.ts

@@ -26,25 +26,35 @@ export const setUserSession = (accessToken: string, refreshToken: string) => {
 };
 
 export const clearUserSession = () => {
-	sessionStorage.removeItem(STORAGE_KEY.TOKEN);
-	sessionStorage.removeItem(STORAGE_KEY.REFRESH_TOKEN);
+	if (typeof window !== 'undefined') {
+		sessionStorage.removeItem(STORAGE_KEY.TOKEN);
+		sessionStorage.removeItem(STORAGE_KEY.REFRESH_TOKEN);
+	}
 };
 
 export const setUserTokenInLocalStorage = (token?: string, refreshToken?: string) => {
-	if (token) {
-		localStorage.setItem(STORAGE_KEY.TOKEN, token);
-	}
+	if (typeof window !== 'undefined') {
+		if (token) {
+			localStorage.setItem(STORAGE_KEY.TOKEN, token);
+		}
 
-	if (refreshToken) {
-		localStorage.setItem(STORAGE_KEY.REFRESH_TOKEN, refreshToken);
+		if (refreshToken) {
+			localStorage.setItem(STORAGE_KEY.REFRESH_TOKEN, refreshToken);
+		}
 	}
 };
 
 export const removeUserTokenInLocalStorage = () => {
-	localStorage.removeItem(STORAGE_KEY.TOKEN);
-	localStorage.removeItem(STORAGE_KEY.REFRESH_TOKEN);
+	if (typeof window !== 'undefined') {
+		localStorage.removeItem(STORAGE_KEY.TOKEN);
+		localStorage.removeItem(STORAGE_KEY.REFRESH_TOKEN);
+	}
 };
 
 export const getUserTokenFromLocalStorage = () => {
-	return localStorage.getItem(STORAGE_KEY.TOKEN) ?? '';
+	if (typeof window !== 'undefined') {
+		return localStorage.getItem(STORAGE_KEY.TOKEN);
+	}
+
+	return '';
 };