[Design]프로필 모달 디자인 변경

활성화 된 탭버튼 밑에 굵은 줄로 표시 모든 탭 요소 창들의 크기 통일 버튼 디자인 통일 현금 새로고침 버튼 생성 회원탈퇴 시 비밀번호가 아닌 문자열 입력요구 Issues #70
codestates-seb · Sep 16, 2023 · 648501e · 648501e
1 parent f109696
commit 648501e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 47 deletions.
diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -12,6 +12,7 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
     const createCashButtonText = "현금 생성";
     const cashInputPlaceholder = "현금 입력";
     const resetButtonText = "리셋";
+    const refreshButtonText ="새로고침"
 
     const dispatch = useDispatch();
     const moneyId = useSelector((state: RootState) => state.cash.moneyId);
@@ -24,6 +25,12 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
     const [cashInput, setCashInput] = useState<string>('0');
     const [initialAmount, setInitialAmount] = useState<string>('0'); // 현금 생성을 위한 상태 변수
 
+    // 현금 정보 재조회 함수
+    const refreshCashInfo = () => {
+        // 여기에 현금 정보를 다시 불러오는 로직을 추가합니다.
+        // 예: useGetCash() hook을 다시 호출한다던지, 특정 상태를 변경하여 리렌더링을 유발하는 등의 방법이 있습니다.
+    };
+
     // 현금 생성 및 cashId 전역 저장
     const handleCreateCash = () => {
         createCashMutation.mutate(initialAmount, {
@@ -70,8 +77,12 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
                     />
                     <CreateCashButton onClick={handleCreateCash}>{createCashButtonText}</CreateCashButton>
                 </div>
-
-                <p>현재 현금: {isLoading ? 'Loading...' : moneyAmount.toLocaleString()}</p>
+                <div>
+                    <p style={{ display: 'inline-block', margin: '20px' }}>
+                        현재 현금: {isLoading ? 'Loading...' : moneyAmount.toLocaleString()}
+                    </p>
+                    <RefreshButton onClick={refreshCashInfo}>{refreshButtonText}</RefreshButton>
+                </div>
                 <div>
                     <CashInput
                         type="string"
@@ -86,6 +97,8 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
     );
 };
 
+export default CashModal;
+
 interface CashModalProps {
     onClose: () => void;
     moneyId: number | null;
@@ -106,11 +119,12 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  z-index: 11;
+  z-index: 100;
   position: relative;
   background-color: white;
   padding: 20px;
   width: 400px;
+  height:230px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -133,35 +147,36 @@ const CloseButton = styled.button`
   cursor: pointer;
 `;
 
+const StyledButton = styled.button`
+    padding: 10px 15px;
+    background-color: white;
+    color: darkslategray;
+    border: 1px solid darkslategray;
+    border-radius: 5px;
+    cursor: pointer;
+`;
+
 const CashInput = styled.input`
     padding: 10px;
     border: 1px solid lightgray;
     border-radius: 5px;
     margin-right: 10px;
 `;
 
-const ReceiveButton = styled.button`
-    padding: 10px 15px;
-    background-color: darkgreen;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-`;
+const ReceiveButton = styled(StyledButton)``;
+
 const CashCreationInput = styled.input`
     padding: 10px;
     border: 1px solid lightgray;
     border-radius: 5px;
     margin-right: 10px;
 `;
 
-const CreateCashButton = styled.button`
-    padding: 10px 15px;
-    background-color: blue;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+const CreateCashButton = styled(StyledButton)``;
+
+const RefreshButton = styled(StyledButton)`
+    margin-left:50px;
 `;
 
-export default CashModal;
+
+
diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx
@@ -52,11 +52,12 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  z-index: 11;
+  z-index: 100;
   position: relative;
   background-color: white;
   padding: 20px;
   width: 400px;
+  height:230px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;

diff --git a/client/src/components/Profile/memberWithdrawalModal.tsx b/client/src/components/Profile/memberWithdrawalModal.tsx
@@ -1,42 +1,48 @@
 import React, { useState } from 'react';
 import styled from 'styled-components'; 
-import { useDeleteMember } from '../../hooks/useDeleteMembers'; // 적절한 경로로 수정
-
+import { useDeleteMember } from '../../hooks/useDeleteMembers';
 
 const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose }) => {
 
-    const [password, setPassword] = useState<string>('');
+    const [inputString, setInputString] = useState<string>('');
+    const [errorMsg, setErrorMsg] = useState<string | null>(null);
     const deleteMemberMutation = useDeleteMember();
 
     const withdrawalTitle = "StockHolm에서 탈퇴하시겠습니까?";
-    const passwordInputLabel = "비밀번호를 입력해주세요.";
-    const incorrectPasswordMsg = "Incorrect password!";
+    const inputStringLabel = "다음 문자열을 입력해주세요: Codestates";
+    const incorrectStringMsg = "문자열이 일치하지 않습니다!";
     const withdrawalButtonText = "회원탈퇴";
 
     const handleWithdrawal = () => {
-        deleteMemberMutation.mutate(password, { // 비밀번호를 서버에 전송
-            onSuccess: () => {
-                alert('회원탈퇴 되었습니다!');
-                onClose();
-            },
-            onError: () => {
-                alert(incorrectPasswordMsg);
-            }
-        });
+        if (inputString === "Codestates/seb-45_main_008") {
+            deleteMemberMutation.mutate(inputString, {
+                onSuccess: () => {
+                    alert('회원탈퇴 되었습니다!');
+                    onClose();
+                }
+            });
+        } else {
+            setErrorMsg(incorrectStringMsg);
+        }
     };
+
     return (
         <ModalBackground>
             <ModalContainer>
                 <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Title>{withdrawalTitle}</Title>
-                <Label>{passwordInputLabel}</Label>
-                <PasswordInput type="password" value={password} onChange={e => setPassword(e.target.value)} />
+                <Label>{inputStringLabel}</Label>
+                <PasswordInput type="text" value={inputString} onChange={e => setInputString(e.target.value)} />
+                {errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
                 <WithdrawalButton onClick={handleWithdrawal}>{withdrawalButtonText}</WithdrawalButton>
             </ModalContainer>
         </ModalBackground>
     );
 };
 
+export default MemberWithdrawalModal;
+
+
 interface MemberWithdrawalModalProps {
     onClose: () => void;
 
@@ -57,11 +63,12 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
-  z-index: 11;
+  z-index: 100;
   position: relative;
   background-color: white;
   padding: 20px;
   width: 400px;
+  height:230px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -99,11 +106,17 @@ const PasswordInput = styled.input`
 
 const WithdrawalButton = styled.button`
     padding: 10px 20px;
-    background-color: darkred;
-    color: white;
-    border: none;
+    background-color: white;
+    color: darkslategray;
+    border: 1px solid lightslategray;
     border-radius: 5px;
     cursor: pointer;
 `;
 
-export default MemberWithdrawalModal;
+
+const ErrorMessage = styled.p`
+  color: red;
+  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
@@ -18,11 +18,11 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
     return (
         <ModalBackground>
             <ModalContainer>
-                <Tabs>
-                    <TabButton onClick={() => setSelectedTab(1)}>{memberInfoText}</TabButton>
-                    <TabButton onClick={() => setSelectedTab(2)}>{cashText}</TabButton>
-                    <TabButton onClick={() => setSelectedTab(3)}>{memberWithdrawText}</TabButton>
-                </Tabs>
+            <Tabs>
+                <TabButton isActive={selectedTab === 1} onClick={() => setSelectedTab(1)}>{memberInfoText}</TabButton>
+                <TabButton isActive={selectedTab === 2} onClick={() => setSelectedTab(2)}>{cashText}</TabButton>
+                <TabButton isActive={selectedTab === 3} onClick={() => setSelectedTab(3)}>{memberWithdrawText}</TabButton>
+            </Tabs>
                 <TabContent>
                     {selectedTab === 1 && <MemberInfoModal onClose={onClose} />}
                     {selectedTab === 2 && <CashModal onClose={onClose} moneyId={moneyId} />}
@@ -70,6 +70,8 @@ const Tabs = styled.div`
     justify-content: space-between;
     width: 100%;
     margin-bottom: 20px;
+    position: relative; // 위치를 조절하기 위한 속성
+    top: -30px; // 위로 30px 올립니다
     z-index: 1002; // 이 값을 추가하여 Tabs를 최상위로 올립니다.
 `;
 
@@ -84,10 +86,12 @@ const Tabs = styled.div`
 //   cursor: pointer;
 // `;
 
-const TabButton = styled.button`
+// TabButton 컴포넌트 스타일링
+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-radius: 5px;
     cursor: pointer;
     background-color: #FFFFFF;