[Design]프로필 모달 창 디자인

버튼 호버 시 색상 변경 닫기 버튼 5px만큼 둥글게 활성화된 탭 버튼 밑에 다크슬레이트그레이 색으로 밑줄 문자열 크기를 키우고 회색으로 변동 Issues #70
codestates-seb · Sep 17, 2023 · 6119d7b · 6119d7b
1 parent 3935359
commit 6119d7b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -83,9 +83,9 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
                     <ReceiveButton onClick={handleCashReset}>{resetButtonText}</ReceiveButton>
                 </div>
                 <div>
-                    <p style={{ display: 'inline-block', margin: '20px' }}>
+                    <Content style={{ display: 'inline-block', margin: '20px' }}>
                         현금 보유량: {holdingsAmount}원
-                    </p>
+                    </Content>
                 </div>
             </ModalContainer>
         </ModalBackground>
@@ -132,6 +132,7 @@ const CloseButton = styled.button`
   top: 10px;
   right: 10px;
   background: #FFFFFF;
+  border-radius:5px;
   border: 1px solid lightgray;
   font-size: 1.5rem;
   cursor: pointer;
@@ -143,7 +144,13 @@ const StyledButton = styled.button`
     color: darkslategray;
     border: 1px solid darkslategray;
     border-radius: 5px;
+    margin-bottom:5px;
     cursor: pointer;
+
+    //호버 시 회색
+    &:hover {
+        background-color: #f2f2f2; 
+    }
 `;
 
 const CashInput = styled.input`
@@ -164,4 +171,10 @@ const CashCreationInput = styled.input`
 
 const CreateCashButton = styled(StyledButton)``;
 
-
+const Content = styled.p`
+    margin: 15px 0;  // 간격 조정
+    font-size: 1.1rem;  // 폰트 크기 증가
+    line-height: 1.5;
+    color: #555;  // 색상 변경
+    text-align: center;  // 텍스트 중앙 정렬
+`;
diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx
@@ -75,6 +75,7 @@ const CloseButton = styled.button`
   top: 10px;
   right: 10px;
   background: #FFFFFF;
+  border-radius:5px;
   border: 1px solid lightgray;
   font-size: 1.5rem;
   cursor: pointer;

diff --git a/client/src/components/Profile/memberWithdrawalModal.tsx b/client/src/components/Profile/memberWithdrawalModal.tsx
@@ -10,7 +10,7 @@ const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose }
     const deleteMemberMutation = useDeleteMember();
 
 
-    const withdrawalTitle = "StockHolm에서 탈퇴하시겠습니까?";
+    const withdrawalTitle = "탈퇴하시겠습니까?";
     const inputStringLabel = "다음 문자열을 입력해주세요: Codestates";
     const incorrectStringMsg = "문자열이 일치하지 않습니다!";
     const withdrawalButtonText = "회원탈퇴";
@@ -78,19 +78,24 @@ const CloseButton = styled.button`
   top: 10px;
   right: 10px;
   background: #FFFFFF;
+  border-radius:5px;
   border: 1px solid lightgray;
   font-size: 1.5rem;
   cursor: pointer;
 `;
 
-const Title = styled.h3`
-    font-size: 1.2rem;
+const Title = styled.h2`
+    font-size: 1.6rem;
     margin-bottom: 20px;
+    font-weight: 400;
 `;
 
 const Label = styled.label`
-    display: block;
-    margin-bottom: 10px;
+    margin: 15px 0;  // 간격 조정
+    font-size: 1.1rem;  // 폰트 크기 증가
+    line-height: 1.5;
+    color: #555;  // 색상 변경
+    text-align: center;  // 텍스트 중앙 정렬
 `;
 
 const PasswordInput = styled.input`
@@ -103,11 +108,15 @@ const PasswordInput = styled.input`
 
 const WithdrawalButton = styled.button`
     padding: 10px 20px;
-    background-color: white;
-    color: darkslategray;
+    background-color: darkslategray;
+    color: white;
     border: 1px solid lightslategray;
     border-radius: 5px;
     cursor: pointer;
+    //호버 시 밝게
+    &:hover {
+        background-color: rgba(47, 79, 79, 0.8); 
+    }
 `;
 
 
@@ -116,4 +125,4 @@ const ErrorMessage = styled.p`
   margin-top: 5px;
   margin-bottom: 10px;
   font-size: 0.8rem;
-`;
+`;
diff --git a/client/src/components/Profile/profileModal.tsx b/client/src/components/Profile/profileModal.tsx
@@ -64,9 +64,9 @@ const Tabs = styled.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: 20px;
+    margin-bottom: 0px;
     position: relative; // 위치를 조절하기 위한 속성
-    top: -30px; // 위로 30px 올립니다
+    top: -33px; // 위로 30px 올립니다
     z-index: 1002; // 이 값을 추가하여 Tabs를 최상위로 올립니다.
 `;
 
@@ -75,7 +75,7 @@ const TabButton = styled.button<{ isActive?: boolean }>`
     flex: 1;
     padding: 10px;
     border: 1px solid lightgray;
-    border-bottom: ${({ isActive }) => (isActive ? '3px solid darkred' : '1px solid lightgray')};
+    border-bottom: ${({ isActive }) => (isActive ? '3px solid darkslategray' : '1px solid lightgray')};
     border-radius: 5px;
     cursor: pointer;
     background-color: #FFFFFF;