[webclient] 구글로그인 clientId 및 디자인 반영

wafflestudio · Jul 7, 2024 · 0763b28 · 0763b28
1 parent 25d2478
commit 0763b28
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 19 deletions.
diff --git a/apps/snutt-webclient/.env.dev b/apps/snutt-webclient/.env.dev
@@ -1,3 +1,3 @@
 VITE_BASE_URL=https://snutt-api-dev.wafflestudio.com
 VITE_FACEBOOK_APP_ID=1635364463444351
-VITE_GOOGLE_APP_ID=
+VITE_GOOGLE_APP_ID=472833977397-62l8mgakgi7ql8m654s7ptrlbn5f1pf6.apps.googleusercontent.com
diff --git a/apps/snutt-webclient/src/App.tsx b/apps/snutt-webclient/src/App.tsx
@@ -181,7 +181,7 @@ export const App = () => {
               />
             </BrowserRouter>
           ) : (
-            <GoogleOAuthProvider clientId="test">
+            <GoogleOAuthProvider clientId={ENV.GOOGLE_APP_ID}>
               <Landing />
             </GoogleOAuthProvider>
           )}

diff --git a/apps/snutt-webclient/src/infrastructures/implAuthSnuttApiRepository.ts b/apps/snutt-webclient/src/infrastructures/implAuthSnuttApiRepository.ts
@@ -23,6 +23,15 @@ export const implAuthSnuttApiRepository = ({
       if (status === 200) return { type: 'success', data };
       else return { type: 'error', errcode: data.errcode };
     },
+    signInWithGoogle: async (body) => {
+      const { status, data } = await snuttApi['POST /auth/login_google']({
+        body: {
+          token: body.token,
+        },
+      });
+      if (status === 200) return { type: 'success', data };
+      else return { type: 'error', errcode: data.errcode };
+    },
     signUpWithIdPassword: async (body) => {
       const { status, data } = await snuttApi['POST /v1/auth/register_local']({ body });
       if (status === 200) return { type: 'success', data };

diff --git a/apps/snutt-webclient/src/pages/landing/landing-login/index.tsx b/apps/snutt-webclient/src/pages/landing/landing-login/index.tsx
@@ -113,7 +113,7 @@ export const LandingLogin = ({ className, onSignUp }: Props) => {
         onFailure={({ status }: ReactFacebookFailureResponse) => setErrorMessage(status || '')}
         render={({ onClick }) => <FBSignInButton onClick={onClick}>facebook으로 로그인</FBSignInButton>}
       />
-      <FBSignInButton onClick={() => googleLogin()}>구글로 로그인</FBSignInButton>
+      <GoogleSignInButton onClick={() => googleLogin()}>google로 로그인</GoogleSignInButton>
       <EtcWrapper>
         <FindWrapper>
           <OtherButton data-testid="login-find-id" onClick={() => setFindIdDialogOpen(true)}>
@@ -263,3 +263,19 @@ const FBSignInButton = styled(Button)`
     background-color: rgba(60, 93, 212, 0.1);
   }
 `;
+
+const GoogleSignInButton = styled(Button)`
+  border-radius: 21px;
+  border: none;
+  width: 100%;
+  margin-top: 10px;
+  height: 34px;
+  font-size: 13px;
+  background-color: transparent;
+  color: #6e6e6e;
+  border: 1px solid #6e6e6e;
+
+  &:hover {
+    background-color: rgba(60, 93, 212, 0.1);
+  }
+`;
diff --git a/packages/snutt-api/src/apis/snutt-timetable/schemas.ts b/packages/snutt-api/src/apis/snutt-timetable/schemas.ts
@@ -1,17 +1,19 @@
 import { Int32, Double, Int64, DateTime } from './types';
 
-export type LocalLoginRequest = { id: string; password: string };
+export type FacebookLoginRequest = { fb_id?: string; fb_token: string };
 
 export type LoginResponse = { user_id: string; token: string; message: string };
 
+export type GoogleLoginRequest = { token: string };
+
+export type LocalLoginRequest = { id: string; password: string };
+
 export type LogoutRequest = { registration_id: string };
 
 export type OkResponse = { message: string };
 
 export type LocalRegisterRequest = { id: string; password: string; email?: string };
 
-export type FriendRequestLinkResponse = { requestToken: string };
-
 export type UserLegacyDto = {
   isAdmin: boolean;
   regDate: DateTime;
@@ -60,7 +62,7 @@ export type ClassPlaceAndTimeLegacyDto = {
   lectureBuildings?: LectureBuilding[];
 };
 
-export type ColorSet = { bg: string; fg: string } | Record<string, never>;
+export type ColorSet = { bg?: string; fg?: string };
 
 export type GeoCoordinate = { latitude: Double; longitude: Double };
 
@@ -74,10 +76,10 @@ export type LectureBuilding = {
   campus: 'GWANAK' | 'YEONGEON' | 'PYEONGCHANG';
 };
 
-export type SnuttEvLectureSummaryDto = { snuttId?: string; evLectureId: Int64; avgRating?: Double };
+export type SnuttEvLectureIdDto = { snuttId?: string; evLectureId: Int64 };
 
 export type TimetableLectureLegacyDto = {
-  _id: string;
+  _id?: string;
   academic_year?: string;
   category?: string;
   class_time_json: ClassPlaceAndTimeLegacyDto[];
@@ -91,15 +93,15 @@ export type TimetableLectureLegacyDto = {
   remark?: string;
   course_number?: string;
   course_title: string;
-  color: ColorSet;
+  color?: ColorSet;
   colorIndex: Int32;
   lecture_id?: string;
-  snuttEvLecture?: SnuttEvLectureSummaryDto;
+  snuttEvLecture?: SnuttEvLectureIdDto;
   class_time_mask: Int32[];
 };
 
 export type TimetableLegacyDto = {
-  _id: string;
+  _id?: string;
   user_id: string;
   year: Int32;
   semester: 1 | 2 | 3 | 4;
@@ -175,7 +177,7 @@ export type SearchQueryLegacy = {
 export type SearchTimeDto = { day: 0 | 1 | 2 | 3 | 4 | 5 | 6; startMinute: Int32; endMinute: Int32 };
 
 export type LectureDto = {
-  _id: string;
+  _id?: string;
   academic_year?: string;
   category?: string;
   class_time_json: ClassPlaceAndTimeLegacyDto[];
@@ -197,10 +199,17 @@ export type LectureDto = {
   class_time_mask: Int32[];
 };
 
-export type BuildingsResponse = { content: LectureBuilding[]; totalCount: Int32; nextPageToken?: string };
+export type SnuttEvLectureSummaryDto = {
+  snuttId?: string;
+  evLectureId: Int64;
+  avgRating?: Double;
+  evaluationCount: Int64;
+};
+
+export type BuildingsResponse = { content: LectureBuilding[]; totalCount: Int32 };
 
 export type BookmarkLectureDto = {
-  _id: string;
+  _id?: string;
   academic_year?: string;
   category?: string;
   class_time_json: ClassPlaceAndTimeLegacyDto[];
@@ -224,7 +233,7 @@ export type BookmarkLectureModifyRequest = { lecture_id: string };
 export type ExistenceResponse = { exists: boolean };
 
 export type NotificationResponse = {
-  _id: string;
+  _id?: string;
   user_id?: string;
   title: string;
   message: string;
@@ -274,7 +283,7 @@ export type PopupResponse = {
 
 export type VacancyNotificationLecturesResponse = { lectures: LectureDto[] };
 
-export type PopupsResponse = { content: PopupResponse[]; totalCount: Int32; nextPageToken?: string };
+export type PopupsResponse = { content: PopupResponse[]; totalCount: Int32 };
 
 export type FriendResponse = {
   id: string;
@@ -284,10 +293,12 @@ export type FriendResponse = {
   createdAt: DateTime;
 };
 
-export type FriendsResponse = { content: FriendResponse[]; totalCount: Int32; nextPageToken?: string };
+export type FriendsResponse = { content: FriendResponse[]; totalCount: Int32 };
 
 export type FriendRequest = { nickname: string };
 
+export type FriendRequestLinkResponse = { requestToken: string };
+
 export type CoursebookDto = { year: Int32; semester: 1 | 2 | 3 | 4 };
 
 export type ClassPlaceAndTimeDto = {
@@ -328,7 +339,7 @@ export type TimetableLectureDto = {
   color?: ColorSet;
   colorIndex: Int32;
   lectureId?: string;
-  snuttEvLecture?: SnuttEvLectureSummaryDto;
+  snuttEvLecture?: SnuttEvLectureIdDto;
 };
 
 export type UpdateFriendDisplayNameRequest = { displayName: string };

diff --git a/packages/snutt-api/src/apis/snutt/index.ts b/packages/snutt-api/src/apis/snutt/index.ts
@@ -9,6 +9,12 @@ export const getSnuttApis = ({ callWithToken, callWithoutToken }: GetApiSpecsPar
         path: `/auth/login_fb`,
         body,
       }),
+    'POST /auth/login_google': ({ body }: { body: { token: string } }) =>
+      callWithoutToken<SuccessResponse<{ token: string; user_id: string }> | ErrorResponse<403, 4097>>({
+        method: 'post',
+        path: `/auth/login_google`,
+        body,
+      }),
     'POST /v1/auth/id/find': ({ body }: { body: { email: string } }) =>
       callWithoutToken<SuccessResponse<{ message: 'ok' }> | ErrorResponse<400, 12303>>({
         method: 'post',