feat: 설정 팝업 디자인 QA 반영 (#138)

* feat: 디자인 QA 반영 * fix: 회원 탈퇴 후 설정 팝업이 닫히지 않는 문제 수정 * chore: 불필요한 주석 삭제 * fix: 티켓 구매 시 안내사항 미입력 시 undefined로 저장되는 문제 수정
Nexters · Jul 31, 2024 · d461748 · d461748
1 parent d17aec1
commit d461748
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 9 deletions.
diff --git a/apps/admin/src/components/AccountDeleteForm/AccountDeleteForm.styles.ts b/apps/admin/src/components/AccountDeleteForm/AccountDeleteForm.styles.ts
@@ -14,6 +14,11 @@ const AccountDeleteFormDescription = styled.p`
   color: ${({ theme }) => theme.palette.grey.g90};
   margin-bottom: 12px;
   line-height: 24px;
+  text-align: center;
+
+  ${mq_lg} {
+    text-align: left;
+  }
 `;
 
 const AccountDeleteFormTextArea = styled.textarea`
@@ -50,6 +55,16 @@ const AccountDeleteFormButtonWrapper = styled.div`
   justify-content: flex-end;
   gap: 8px;
   margin-top: 32px;
+
+  button {
+    flex: 1;
+  }
+
+  ${mq_lg} {
+    button {
+      flex: initial;
+    }
+  }
 `;
 
 export default {

diff --git a/apps/admin/src/components/AccountDeleteForm/index.tsx b/apps/admin/src/components/AccountDeleteForm/index.tsx
@@ -35,7 +35,6 @@ const AccountDeleteForm = ({ oauthType, onClose }: AccountDeleteFormProps) => {
   const submitHandler = async (data: AccountDeleteFormInputs) => {
     let appleIdAuthorizationCode: string | undefined = undefined;
 
-    // TODO: 애플 로그인 시 탈퇴 로직 작성
     if (oauthType === 'APPLE') {
       const appleAuthData = await window.AppleID?.auth.signIn();
 
@@ -67,15 +66,15 @@ const AccountDeleteForm = ({ oauthType, onClose }: AccountDeleteFormProps) => {
         <Button
           type="button"
           colorTheme="line"
-          size="medium"
+          size="bold"
           onClick={() => {
             onClose();
             reset();
           }}
         >
           취소하기
         </Button>
-        <Button type="submit" colorTheme="primary" size="medium" disabled={!isValid}>
+        <Button type="submit" colorTheme="primary" size="bold" disabled={!isValid}>
           삭제하기
         </Button>
       </Styled.AccountDeleteFormButtonWrapper>

diff --git a/apps/admin/src/components/ProfileDropdown/index.tsx b/apps/admin/src/components/ProfileDropdown/index.tsx
@@ -71,7 +71,7 @@ const ProfileDropdown = ({ image, open, disabledDropdown, onClick }: ProfileDrop
             onClick={() => {
               settingDialog.open({
                 title: '설정',
-                content: <SettingDialogContent />,
+                content: <SettingDialogContent onDeleteAccount={settingDialog.close} />,
                 isAuto: true,
                 contentPadding: '0',
                 mobileType: 'fullPage',

diff --git a/apps/admin/src/components/SettingDialogContent/index.tsx b/apps/admin/src/components/SettingDialogContent/index.tsx
@@ -3,6 +3,7 @@ import Styled from './SettingDialogContent.styles';
 import { Button, TextField, useDialog } from '@boolti/ui';
 import AccountDeleteForm from '../AccountDeleteForm';
 import { useUserSummary } from '@boolti/api';
+import { useTheme } from '@emotion/react';
 
 const KakaoIcon = () => {
   return (
@@ -28,7 +29,13 @@ const AppleIcon = () => {
   );
 };
 
-const SettingDialogContent = () => {
+interface SettingDialogContentProps {
+  onDeleteAccount?: () => void;
+}
+
+const SettingDialogContent = ({ onDeleteAccount }: SettingDialogContentProps) => {
+  const theme = useTheme();
+
   const accountDeleteDialog = useDialog();
 
   const { data: userSummary } = useUserSummary();
@@ -54,18 +61,19 @@ const SettingDialogContent = () => {
             size="big"
             id="code"
             width="100%"
-            value={userSummary?.userCode}
+            value={`#${userSummary?.userCode}`}
             onChange={(event) => {
               event.preventDefault();
             }}
+            style={{ caretColor: 'transparent' }}
           />
         </Styled.SettingContentFormControl>
         <Styled.SettingContentFormControl>
           <Styled.Label htmlFor="code">연결 서비스</Styled.Label>
           <Styled.ConnectedServiceList>
             {userSummary?.oauthType === 'KAKAO' && (
               <Styled.ConnectedServiceChip>
-                <KakaoIcon /> 카카오톡
+                <KakaoIcon /> 카카오
               </Styled.ConnectedServiceChip>
             )}
             {userSummary?.oauthType === 'APPLE' && (
@@ -89,14 +97,18 @@ const SettingDialogContent = () => {
           </Styled.SettingDescriptionItem>
         </Styled.SettingDescriptionList>
         <Button
+          style={{ background: theme.palette.status.error }}
           colorTheme="primary"
           size="x-small"
           onClick={() => {
             accountDeleteDialog.open({
               content: (
                 <AccountDeleteForm
                   oauthType={userSummary?.oauthType}
-                  onClose={accountDeleteDialog.close}
+                  onClose={() => {
+                    onDeleteAccount?.();
+                    accountDeleteDialog.close();
+                  }}
                 />
               ),
               mobileType: 'centerPopup',

diff --git a/apps/admin/src/pages/HomePage/HomePage.styles.ts b/apps/admin/src/pages/HomePage/HomePage.styles.ts
@@ -83,6 +83,7 @@ const HeaderMenu = styled.div`
   background-color: ${({ theme }) => theme.palette.grey.w};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
   box-shadow: 0 4px 4px 0 ${({ theme }) => theme.palette.shadow};
+  padding-bottom: 8px;
   z-index: 1;
 
   ${mq_lg} {

diff --git a/apps/admin/src/pages/ShowAddPage/ShowAddPage.tsx b/apps/admin/src/pages/ShowAddPage/ShowAddPage.tsx
@@ -67,7 +67,7 @@ const ShowAddPage = ({ step }: ShowAddPageProps) => {
       },
       salesStartTime: `${showTicketForm.getValues('startDate')}T00:00:00.000Z`,
       salesEndTime: `${showTicketForm.getValues('endDate')}T23:59:59.000Z`,
-      ticketNotice: `${showTicketForm.getValues('ticketNotice')}`,
+      ticketNotice: `${showTicketForm.getValues('ticketNotice') ?? ''}`,
       salesTickets: salesTicketList.map((ticket) => ({
         ticketName: ticket.name,
         price: ticket.price,

diff --git a/packages/ui/src/components/Dialog/Dialog.styles.ts b/packages/ui/src/components/Dialog/Dialog.styles.ts
@@ -93,6 +93,8 @@ const DialogHeader = styled.div<{ mobileType: 'bottomSheet' | 'fullPage' | 'cent
   ${mq_lg} {
     padding: 16px 32px;
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g30};
+    justify-content: initial;
+    height: auto;
   }
 `;
 
@@ -137,6 +139,7 @@ const DialogCloseButton = styled.button<{ mobileType: 'bottomSheet' | 'fullPage'
   ${mq_lg} {
     top: 17px;
     right: 32px;
+    left: initial;
   }
 `;