Skip to content

Commit 8e1e89f

Browse files
lokbalokba
authored
[FE] refactor: dev, prod 웹팩 환경을 개편한다. (#502)
* [FE] refactor: 타입 시스템을 개편한다. (#496) * fix: modify wrong import statement * refactor: arrange type system based on domain * refactor: remove type when type inference is possible * refactor: modify styled-components.d.ts * feat: add validation test case * refactor: remove unused file * refactor: install esbuild-loader & remove unused scripts, package * refactor: reorganize webpack setting in dev, prod environment
1 parent 28215b2 commit 8e1e89f

File tree

47 files changed

+1017
-364
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1017
-364
lines changed

‎frontend/package-lock.json‎

Lines changed: 648 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77
"author": "",
88
"license": "ISC",
99
"scripts": {
10-
"dev": "webpack-dev-server --config config/webpack.dev.js",
11-
"prod": "webpack-dev-server --config config/webpack.prod.js",
12-
"build:dev": "webpack --config config/webpack.dev.js",
13-
"build:prod": "webpack --config config/webpack.prod.js",
10+
"dev": "webpack-dev-server --config webpack/webpack.dev.js",
11+
"build:dev": "webpack --config webpack/webpack.dev.js",
12+
"build:prod": "webpack --config webpack/webpack.prod.js",
1413
"test": "jest",
1514
"storybook": "start-storybook -p 6006",
1615
"build-storybook": "build-storybook",
@@ -51,6 +50,7 @@
5150
"css-loader": "^6.7.1",
5251
"css-minimizer-webpack-plugin": "^4.0.0",
5352
"dotenv": "^16.0.1",
53+
"esbuild-loader": "^2.20.0",
5454
"eslint": "^8.19.0",
5555
"eslint-config-prettier": "^8.5.0",
5656
"eslint-plugin-import": "^2.26.0",
@@ -64,7 +64,6 @@
6464
"prettier": "2.7.1",
6565
"react-router-dom": "^6.3.0",
6666
"style-loader": "^3.3.1",
67-
"terser-webpack-plugin": "^5.3.3",
6867
"ts-jest": "^28.0.7",
6968
"typescript": "^4.7.4",
7069
"webpack": "^5.73.0",

‎frontend/src/Coach/api.ts‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import axios from 'axios';
22

3-
import { CoachScheduleRequestBodyType, UserRequestBodyType } from '@/Types/domain';
3+
import { AvailableTimeType, CoachScheduleRequestCalendarTimeType, CoachType } from '@/Types/domain';
4+
5+
type GetCoachScheduleResponseType = {
6+
calendarTimes: AvailableTimeType[];
7+
};
8+
9+
type CoachScheduleRequestBodyType = {
10+
calendarTimes: CoachScheduleRequestCalendarTimeType[];
11+
};
12+
13+
type GetCoachInfoResponseType = CoachType;
14+
15+
type CoachInfoRequestBodyType = {
16+
nickname: string;
17+
imageUrl: string;
18+
introduce: string;
19+
};
420

521
export const getCoachScheduleAPI = (coachId: number, year: number, month: number) =>
6-
axios.get(
22+
axios.get<GetCoachScheduleResponseType>(
723
`${process.env.SERVER_URL}/api/calendar/times?coachId=${coachId}&year=${year}&month=${month}`,
824
);
925

@@ -13,7 +29,8 @@ export const postCoachScheduleAPI = (body: CoachScheduleRequestBodyType) =>
1329
export const deleteCoachInterviewAPI = (interviewId: number, flag: boolean) =>
1430
axios.patch(`${process.env.SERVER_URL}/api/interviews/${interviewId}?onlyInterview=${flag}`);
1531

16-
export const getCoachInfoAPI = () => axios.get(`${process.env.SERVER_URL}/api/coaches/me`);
32+
export const getCoachInfoAPI = () =>
33+
axios.get<GetCoachInfoResponseType>(`${process.env.SERVER_URL}/api/coaches/me`);
1734

18-
export const patchCoachInfoAPI = (body: UserRequestBodyType) =>
35+
export const patchCoachInfoAPI = (body: CoachInfoRequestBodyType) =>
1936
axios.patch(`${process.env.SERVER_URL}/api/coaches/me`, body);

‎frontend/src/Coach/components/ScheduleCalendar/index.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import BabyShowMoreModal, { BabyModalPositionType } from '../BabyShowMoreModal';
2-
31
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
42

53
import * as S from './styled';
64

5+
import BabyShowMoreModal, { BabyModalPositionType } from '@/Coach/components/BabyShowMoreModal';
6+
77
import Button from '@/Shared/components/Button/styled';
88
import Calendar from '@/Shared/components/Calendar';
99

@@ -19,7 +19,7 @@ import { getCoachInterviewAPI } from '@/Crew/api';
1919

2020
import { isOverToday, separateFullDate } from '@/Shared/utils';
2121

22-
import { DayNameOfWeekType, InterviewStatusType, InterviewType } from '@/Types/domain';
22+
import { InterviewStatusType } from '@/Types/domain';
2323

2424
type ScheduleType = {
2525
id: number;
@@ -86,10 +86,7 @@ const CoachScheduleCalendar = ({
8686
const response = await getCoachInterviewAPI(year, month);
8787

8888
const schedules = response.data.calendar.reduce(
89-
(
90-
acc: SchedulesType,
91-
{ id, crewNickname, interviewStartTime, interviewEndTime, status }: InterviewType,
92-
) => {
89+
(acc, { id, crewNickname, interviewStartTime, interviewEndTime, status }) => {
9390
const { day, time: startTime } = separateFullDate(interviewStartTime);
9491
const { time: endTime } = separateFullDate(interviewEndTime);
9592
const schedule = { id, crewNickname, times: [startTime, endTime], status };
@@ -98,7 +95,7 @@ const CoachScheduleCalendar = ({
9895

9996
return acc;
10097
},
101-
{},
98+
{} as SchedulesType,
10299
);
103100

104101
setSchedules(schedules);
@@ -132,7 +129,7 @@ const CoachScheduleCalendar = ({
132129
<S.Box>
133130
<Calendar>
134131
<S.WeekDay>
135-
{dayNamesOfWeek.map((dayNameOfWeek: DayNameOfWeekType) => (
132+
{dayNamesOfWeek.map((dayNameOfWeek) => (
136133
<div key={dayNameOfWeek}>{dayNameOfWeek}</div>
137134
))}
138135
</S.WeekDay>

‎frontend/src/Coach/pages/CoachHomePage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import useModal from '@/Shared/components/Modal/useModal';
1212

1313
import CalendarProvider from '@/Shared/context/CalendarProvider';
1414

15-
import { PAGE } from '@/Shared/constants';
15+
import { PATH } from '@/Shared/constants/path';
1616
import LocalStorage from '@/Shared/localStorage';
1717

1818
import { InterviewStatusType } from '@/Types/domain';
@@ -63,7 +63,7 @@ const CoachHomePage = () => {
6363
<>
6464
<S.TitleBox>
6565
<h2>면담 리스트</h2>
66-
<Link to={PAGE.COACH_INTERVIEW_CREATE}>
66+
<Link to={PATH.COACH_INTERVIEW_CREATE}>
6767
<Button home>스케쥴 생성</Button>
6868
</Link>
6969
</S.TitleBox>

‎frontend/src/Coach/pages/CoachInterviewCreatePage/index.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@ import { useUserState } from '@/Shared/context/UserProvider';
2525
import { getCoachScheduleAPI, postCoachScheduleAPI } from '@/Coach/api';
2626
import { getFullDateString } from '@/Coach/util';
2727

28-
import { ERROR_MESSAGE, INITIAL_NUMBER_STATE, PAGE, SUCCESS_MESSAGE } from '@/Shared/constants';
28+
import { INITIAL_NUMBER_STATE } from '@/Shared/constants';
29+
import { ERROR_MESSAGE, SUCCESS_MESSAGE } from '@/Shared/constants/message';
30+
import { PATH } from '@/Shared/constants/path';
2931
import { separateFullDate } from '@/Shared/utils';
3032

3133
import {
3234
CalendarTimeType,
3335
CoachScheduleRequestCalendarTimeType,
34-
CrewSelectTimeType,
3536
StringDictionaryType,
3637
} from '@/Types/domain';
3738

@@ -52,7 +53,7 @@ const defaultTimes = [
5253
'16:30',
5354
'17:00',
5455
'17:30',
55-
];
56+
] as const;
5657

5758
const compactCalendarTimes = (times: CalendarTimeType[]) => {
5859
const result = times.reduce((acc, { year, month, times }) => {
@@ -113,25 +114,24 @@ const CoachInterviewCreatePage = () => {
113114

114115
const getHandleClickDay = (day: number) => () => {
115116
const currentCalendarTime = calendarTimes.find(
116-
(calendarTime: CalendarTimeType) =>
117-
calendarTime.year === year && calendarTime.month === month,
117+
(calendarTime) => calendarTime.year === year && calendarTime.month === month,
118118
);
119119

120120
if (currentCalendarTime) {
121121
if (selectedDates.length === 2 && isSelectedDate(day)) {
122122
const finalDay = selectedDates.find((selectedDate) => selectedDate.day !== day)?.day;
123123

124124
const times = currentCalendarTime.times
125-
.filter((time: string) => Number(separateFullDate(time).day) === finalDay)
126-
.map((fullDate: string) => separateFullDate(fullDate).time);
125+
.filter((time) => Number(separateFullDate(time).day) === finalDay)
126+
.map((fullDate) => separateFullDate(fullDate).time);
127127

128128
setSelectedTimes(times);
129129
} else if (selectedDates.length >= 1) {
130130
resetTimes();
131131
} else {
132132
const times = currentCalendarTime.times
133-
.filter((time: string) => Number(separateFullDate(time).day) === day)
134-
.map((fullDate: string) => separateFullDate(fullDate).time);
133+
.filter((time) => Number(separateFullDate(time).day) === day)
134+
.map((fullDate) => separateFullDate(fullDate).time);
135135

136136
setSelectedTimes(times);
137137
}
@@ -148,13 +148,13 @@ const CoachInterviewCreatePage = () => {
148148
if (!selectedDates.length) return;
149149

150150
calendarTimes
151-
.filter((calendarTime: CalendarTimeType) =>
151+
.filter((calendarTime) =>
152152
selectedDates.some(
153153
({ year, month }) => calendarTime.year === year && calendarTime.month === month,
154154
),
155155
)
156-
.forEach((calendarTime: CalendarTimeType) => {
157-
calendarTime.times = calendarTime.times.filter((fullDate: string) => {
156+
.forEach((calendarTime) => {
157+
calendarTime.times = calendarTime.times.filter((fullDate) => {
158158
const { day } = separateFullDate(fullDate);
159159

160160
return selectedDates.every((selectedDate) => selectedDate.day !== Number(day));
@@ -173,7 +173,7 @@ const CoachInterviewCreatePage = () => {
173173

174174
const body = {
175175
calendarTimes: compactCalendarTimes([...legacyCalendarTimes, ...clickedCalendarTimes]).map(
176-
(calendarTime: CalendarTimeType): CoachScheduleRequestCalendarTimeType => ({
176+
(calendarTime): CoachScheduleRequestCalendarTimeType => ({
177177
...calendarTime,
178178
times: calendarTime.times.map((time: string) => ({
179179
time,
@@ -210,17 +210,16 @@ const CoachInterviewCreatePage = () => {
210210
const response = await getCoachScheduleAPI(id, year, month);
211211

212212
const recentCalendarTimes = compactCalendarTimes(
213-
response.data.calendarTimes.map(({ calendarTime }: CrewSelectTimeType) => {
213+
response.data.calendarTimes.map(({ calendarTime }) => {
214214
const { year, month } = separateFullDate(calendarTime);
215215

216-
return { year, month, times: [calendarTime] };
216+
return { year: Number(year), month: Number(month), times: [calendarTime] };
217217
}),
218218
);
219219

220220
const oldCalendarTimes = calendarTimes.filter(({ year, month }) =>
221221
recentCalendarTimes.every(
222-
(calendarTime: CalendarTimeType) =>
223-
calendarTime.year !== year || calendarTime.month !== month,
222+
(calendarTime) => calendarTime.year !== year || calendarTime.month !== month,
224223
),
225224
);
226225

@@ -231,7 +230,7 @@ const CoachInterviewCreatePage = () => {
231230
return (
232231
<S.Box>
233232
<S.HeaderBox>
234-
<TitleBox to={PAGE.COACH_HOME}>면담 스케쥴 만들기</TitleBox>
233+
<TitleBox to={PATH.COACH_HOME}>면담 스케쥴 만들기</TitleBox>
235234
<Button onClick={handleOpenModal}>{month}월 한눈에 보기</Button>
236235
</S.HeaderBox>
237236

@@ -259,7 +258,7 @@ const CoachInterviewCreatePage = () => {
259258
</S.ScrollContainer>
260259
</S.DateBox>
261260
<S.ButtonContainer>
262-
<Link to={PAGE.COACH_HOME}>
261+
<Link to={PATH.COACH_HOME}>
263262
<Button width="100%" height="35px" white={true}>
264263
홈으로
265264
</Button>

‎frontend/src/Coach/pages/CoachLoginRegisterPage/index.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,10 @@ import { COACH_INTRODUCE_MAX_LENGTH } from '@/Coach/constants';
1616
import { isValidIntroduceLength } from '@/Coach/validation';
1717

1818
import { getDuplicatedNicknameStatusAPI } from '@/Shared/api';
19-
import { ERROR_MESSAGE, PAGE, SUCCESS_MESSAGE } from '@/Shared/constants';
19+
import { ERROR_MESSAGE, SUCCESS_MESSAGE } from '@/Shared/constants/message';
20+
import { PATH } from '@/Shared/constants/path';
2021
import { isValidNicknameLength } from '@/Shared/validations';
2122

22-
import { CrewType as UserType } from '@/Types/domain';
23-
import { DuplicatedNicknameStatusType } from '@/Types/domain';
24-
2523
const CoachLoginRegisterPage = () => {
2624
const navigate = useNavigate();
2725

@@ -52,7 +50,7 @@ const CoachLoginRegisterPage = () => {
5250
onLoading();
5351

5452
const response = await getDuplicatedNicknameStatusAPI(nickname);
55-
const { exists }: DuplicatedNicknameStatusType = response.data;
53+
const { exists } = response.data;
5654

5755
if (exists) {
5856
offLoading();
@@ -64,7 +62,7 @@ const CoachLoginRegisterPage = () => {
6462
await patchCoachInfoAPI({ nickname, introduce, imageUrl });
6563
offLoading();
6664
showToast('SUCCESS', SUCCESS_MESSAGE.CREATE_COACH_INFO);
67-
initializeUser(() => navigate(PAGE.COACH_HOME));
65+
initializeUser(() => navigate(PATH.COACH_HOME));
6866
} catch (error) {
6967
offLoading();
7068
}
@@ -74,10 +72,9 @@ const CoachLoginRegisterPage = () => {
7472
useEffect(() => {
7573
(async () => {
7674
const response = await getCoachInfoAPI();
77-
const { name, imageUrl }: UserType = response.data;
7875

79-
setName(name);
80-
setImageUrl(imageUrl);
76+
setName(response.data.name);
77+
setImageUrl(response.data.imageUrl);
8178
})();
8279
}, []);
8380

‎frontend/src/Coach/pages/CoachMyPage/index.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,10 @@ import { getCoachInfoAPI, patchCoachInfoAPI } from '@/Coach/api';
1515
import { COACH_INTRODUCE_MAX_LENGTH } from '@/Coach/constants';
1616
import { isValidIntroduceLength } from '@/Coach/validation';
1717

18-
import { ERROR_MESSAGE, PAGE, SUCCESS_MESSAGE } from '@/Shared/constants';
18+
import { ERROR_MESSAGE, SUCCESS_MESSAGE } from '@/Shared/constants/message';
19+
import { PATH } from '@/Shared/constants/path';
1920
import { isValidNicknameLength } from '@/Shared/validations';
2021

21-
import { CoachType as UserType } from '@/Types/domain';
22-
2322
const CoachMyPage = () => {
2423
const { showToast } = useToastActions();
2524

@@ -74,14 +73,12 @@ const CoachMyPage = () => {
7473
useEffect(() => {
7574
(async () => {
7675
const response = await getCoachInfoAPI();
77-
const user: UserType = response.data;
78-
79-
setNickname(user.nickname);
80-
setImageUrl(user.imageUrl);
81-
setIntroduce(user.introduce);
8276

83-
defaultNicknameRef.current = user.nickname;
84-
defaultIntroduceRef.current = user.introduce;
77+
setNickname(response.data.nickname);
78+
setImageUrl(response.data.imageUrl);
79+
setIntroduce(response.data.introduce);
80+
defaultNicknameRef.current = response.data.nickname;
81+
defaultIntroduceRef.current = response.data.introduce;
8582
})();
8683
}, []);
8784

@@ -147,7 +144,7 @@ const CoachMyPage = () => {
147144
</S.ButtonContainer>
148145
) : (
149146
<S.ButtonContainer>
150-
<Link to={PAGE.COACH_HOME}>
147+
<Link to={PATH.COACH_HOME}>
151148
<Button width="100%" white={true}>
152149
홈으로
153150
</Button>

‎frontend/src/Coach/util.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ export const getFullDateString = (
1212
) => `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${time}`;
1313

1414
export const getDayNameOfWeek = (year: number, month: number, day: number): DayNameOfWeekType => {
15-
return dayNamesOfWeek[new Date(year, convertMonthToMonthIndex(month), day).getDay()] as any;
15+
return dayNamesOfWeek[new Date(year, convertMonthToMonthIndex(month), day).getDay()];
1616
};
1717

1818
export const generateDayOfWeekWithStartDay = (
1919
year: number,
2020
month: number,
2121
): DayOfWeekWithStartDayType[] => {
2222
const dayNamesOfWeekWithStartDay = dayNamesOfWeek.map(
23-
(dayNameOfWeek: DayNameOfWeekType) =>
23+
(dayNameOfWeek) =>
2424
({
2525
name: dayNameOfWeek,
2626
startDay: 1,

0 commit comments

Comments
 (0)