Merge pull request #138 from Donggrina/refactor/modalAndLogin

Refactor: 모달, 버튼 수정 및 구글 로그인 추가
Donggrina · Jun 19, 2024 · bf6a407 · bf6a407
2 parents 88d7ae5 + e692aa4
commit bf6a407
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 16 deletions.
diff --git a/components/calendar-monthly/calendar-todo-post-success.tsx b/components/calendar-monthly/calendar-todo-post-success.tsx
@@ -23,7 +23,7 @@ export default function CalendarTodoPostSuccess() {
           <p>일정기록 등록이 완료되었습니다.</p>
         </div>
         <div className={styles.button}>
-          <Button className="primary" onClick={handleClick}>
+          <Button className="primary" onClick={handleClick} leftRound rightRound>
             확인
           </Button>
         </div>

diff --git a/components/common/button/button.tsx b/components/common/button/button.tsx
@@ -4,15 +4,21 @@ import { ButtonClassType } from './types/button-type';
 
 interface ButtonPropsType extends ButtonClassType {
   round?: boolean;
+  rightRound?: boolean;
+  leftRound?: boolean;
 }
 
 export default function Button({
   round = false,
+  rightRound = false,
+  leftRound = false,
   className,
   children,
   ...props
 }: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement> & ButtonPropsType>) {
   const roundStyle: React.CSSProperties = {
+    borderBottomLeftRadius: leftRound ? '10px' : 'none',
+    borderBottomRightRadius: rightRound ? '10px' : 'none',
     borderRadius: round ? '32px' : 'none',
   };
   return (

diff --git a/components/common/modal/modal.module.scss b/components/common/modal/modal.module.scss
@@ -2,25 +2,26 @@
   position: absolute;
   inset: 0;
   z-index: 100;
-  background-color: rgba(0, 0, 0, 0.2);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  background-color: rgba(45, 45, 40, 0.6);
   font-weight: 600;
   overflow: hidden;
   padding: 24px;
 }
 
 .inner {
-  overflow: hidden;
-  width: 100%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 312px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   font-size: 16px;
   background-color: var(--white);
   border-radius: 10px;
+  box-shadow: 0px 4px 6px 0 rgba(0, 0, 0, 0.25);
 }
 
 .message {

diff --git a/components/mypage/family/family-list-item/delete-member-modal/delete-member-modal.tsx b/components/mypage/family/family-list-item/delete-member-modal/delete-member-modal.tsx
@@ -30,10 +30,10 @@ export default function DeleteMemberModal({ Modal, handleModal, deleteModalValue
         </p>
       </div>
       <div className={styles.buttonBox}>
-        <Button type="button" className="default" onClick={handleDelete}>
+        <Button type="button" className="default" onClick={handleDelete} leftRound>
           예
         </Button>
-        <Button type="button" className="primary" onClick={handleClose}>
+        <Button type="button" className="primary" onClick={handleClose} rightRound>
           아니요
         </Button>
       </div>

diff --git a/...ents/mypage/family/family-util-buttons/family-delete-button/delete-modal/delete-modal.tsx b/...ents/mypage/family/family-util-buttons/family-delete-button/delete-modal/delete-modal.tsx
@@ -36,10 +36,10 @@ export default function DeleteModal({ Modal, handleModal }: DeleteModalType) {
         </p>
       </div>
       <div className={styles.buttonBox}>
-        <Button type="button" className="default" onClick={handleDelete}>
+        <Button type="button" className="default" onClick={handleDelete} leftRound>
           예
         </Button>
-        <Button type="button" className="primary" onClick={handleClose}>
+        <Button type="button" className="primary" onClick={handleClose} rightRound>
           아니오
         </Button>
       </div>

diff --git a/components/mypage/family/family-util-buttons/family-delete-button/family-delete-button.tsx b/components/mypage/family/family-util-buttons/family-delete-button/family-delete-button.tsx
@@ -10,7 +10,7 @@ export default function FamilyDeleteButton() {
   return (
     <>
       <Button type="button" className="tertiary" round onClick={handleOpen}>
-        가족 페쇄
+        가족 폐쇄
       </Button>
       <DeleteModal Modal={Modal} handleModal={handleModal} />
     </>

diff --git a/...ents/mypage/family/family-util-buttons/family-rename-button/rename-modal/rename-modal.tsx b/...ents/mypage/family/family-util-buttons/family-rename-button/rename-modal/rename-modal.tsx
@@ -34,7 +34,7 @@ export default function RenameModal({ Modal, handleModal, name }: RenameModalTyp
             <Form.MainInput name="name" placeholder="gg" />
           </div>
           <div className={styles.buttonBox}>
-            <Button type="submit" className={buttonClassCondition}>
+            <Button type="submit" className={buttonClassCondition} leftRound rightRound>
               변경하기
             </Button>
           </div>

diff --git a/components/start-pet/finish/share-modal/share-modal.tsx b/components/start-pet/finish/share-modal/share-modal.tsx
@@ -30,7 +30,7 @@ export default function ShareModal({ closeModal, code }: ShareModalType) {
           </li>
         </ul>
         <div className={styles.buttonBox}>
-          <Button className="primary" type="button" onClick={closeModal}>
+          <Button className="primary" type="button" onClick={closeModal} leftRound rightRound>
             닫기
           </Button>
         </div>

diff --git a/config/index.ts b/config/index.ts
@@ -1,5 +1,5 @@
 export const config = {
   kakaoAuth: `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/kakao`,
-  googleAuth: `백엔드에서 받기`,
+  googleAuth: `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/google`,
   kakaoShareUrl: 'http://localhost:3000/login',
 };
diff --git a/pages/growth/create/complete-modal/index.tsx b/pages/growth/create/complete-modal/index.tsx
@@ -10,7 +10,7 @@ export default function CompleteModal({ closeModal }: CompleteModalProps) {
     <div className={styles.box}>
       <p className={styles.text}>성장기록 등록이 완료되었습니다.</p>
       <div className={styles.buttonBox}>
-        <Button className="primary" type="button" onClick={closeModal}>
+        <Button className="primary" type="button" onClick={closeModal} rightRound leftRound>
           닫기
         </Button>
       </div>