refactor:#345 상세관리 모달 미디어쿼리

Leets-Official · Feb 9, 2025 · 0c86dd8 · 0c86dd8
1 parent 9182b73
commit 0c86dd8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/src/components/Admin/ButtonGroup.tsx b/src/components/Admin/ButtonGroup.tsx
@@ -18,13 +18,26 @@ const ButtonGroupContainer = styled.div<{ hasEndGap?: boolean }>`
   align-items: center;
   gap: 12px;
   padding-right: 20px;
-
+  overflow-x: auto;
+  white-space: nowrap;
+  padding-left: 10px;
+  max-width: 100%;
+  &::-webkit-scrollbar {
+    height: 3px;
+  }
   // 상세관리모달에서 완료 버튼 앞에만 추가 간격
   ${({ hasEndGap }) =>
     hasEndGap &&
     `
     & > :last-child {
     margin-left:150px
+    }
+
+      @media (max-width: 900px) {
+      & > :last-child {
+        display:none;
+      }
+      
     }
   `}
 `;
@@ -34,6 +47,17 @@ const ButtonContent = styled.div<{ hasIcon?: boolean }>`
   align-items: center;
   padding: ${({ hasIcon }) => (hasIcon ? '5px 10px' : '5px')};
   gap: ${({ hasIcon }) => (hasIcon ? '25px' : '0')};
+  white-space: nowrap;
+
+  @media (max-width: 900px) {
+    font-size: 12px;
+    padding: 2px;
+    gap: 2px;
+    img {
+      width: 18px;
+      height: 18px;
+    }
+  }
 `;
 
 const ButtonGroup: React.FC<ButtonGroupProps & { hasEndGap?: boolean }> = ({
@@ -48,7 +72,7 @@ const ButtonGroup: React.FC<ButtonGroupProps & { hasEndGap?: boolean }> = ({
           color="#fff"
           textcolor="#000"
           width="auto"
-          height="43px"
+          height="40px"
           borderRadius="4px"
           onClick={onClick}
           disabled={disabled}

diff --git a/src/components/Admin/Modal/MemberDetailModal.tsx b/src/components/Admin/Modal/MemberDetailModal.tsx
@@ -25,30 +25,32 @@ const FontStyle = styled.div<FontStyleProps>`
 
 const ModalContentWrapper = styled.div`
   display: flex;
-  flex: 0;
+  flex-wrap: wrap;
   height: calc(100% - 96px - 96px);
   justify-content: center;
   align-items: center;
   gap: 20px;
-  padding: 20px;
+  padding: 5px;
 `;
 
 const ModalContent = styled.div`
   background-color: white;
   border-radius: 4px;
   width: 100%;
+  /* max-width: 600px; */
   box-shadow: 0px 3px 8px 0px rgba(133, 141, 138, 0.2);
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 15px;
+  padding: 10px;
   flex: 1.5;
-  margin-top: 20%;
+  /* margin-top: 20%; */
 `;
 
 const ActivityContent = styled(ModalContent)`
   flex: 1;
   margin-bottom: 6%;
+  /* max-width: 400px; */
 `;
 
 const FlexWrapper = styled.div`
@@ -88,10 +90,12 @@ const MemberDetailModal: React.FC<MemberDetailModalProps> = ({
 
     try {
       console.log(`${action} API 요청 시작...`);
-      if (action === '비밀번호 초기화') await resetPwdApi(data.id);
-      console.log(` 비밀번호 초기화 요청 대상 ID: ${data.id}`);
-
-      alert('비밀번호 초기화가 완료되었습니다.');
+      if (action === '비밀번호 초기화') {
+        console.log(` 비밀번호 초기화 요청 대상 ID: ${data.id}`);
+        const response = await resetPwdApi(data.id);
+        console.log('비밀번호 초기화 API 응답:', response);
+        alert('비밀번호 초기화가 완료되었습니다.');
+      }
     } catch (error: any) {
       console.error('오류 발생 : ', error.message);
     }