회원가입 로그인 구현

client/src/components/Headers/LogoutHeader.tsx

@@ -32,6 +32,11 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
 };
 
 export default LogoutHeader;
+// 프롭스 타입 정의
+interface LogoutHeaderProps {
+  onLoginClick: () => void;
+}
+
 
 
 // 스타일드 컴포넌트 정의
@@ -84,8 +89,4 @@ const LoginButton = styled.button`
   }
 `;
 
-// 프롭스 타입 정의
-interface LogoutHeaderProps {
-  onLoginClick: () => void;
-}
 

client/src/components/Signups/EmailSignup.tsx

@@ -2,6 +2,8 @@
 import axios from 'axios';
 import styled from 'styled-components';
 import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setEmailForVerification } from '../../reducer/member/memberInfoSlice';
 
 // 문자열 상수 정의
 const strings = {
@@ -12,9 +14,11 @@ const strings = {
 };
 
 const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestVerification }) => {
+  const dispatch = useDispatch();
   // 사용자가 입력한 이메일 상태
   const [email, setEmail] = useState('');
   const [isInvalidEmail, setIsInvalidEmail] = useState(false);  // 이메일 유효성 상태
+
 
   // 이메일 입력 핸들러
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,6 +41,8 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
     try {
       const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/email/send', { email });
       if (response.status === 200) {
+        // 여기서 Redux store의 emailForVerification에 데이터 저장
+        dispatch(setEmailForVerification(email));
         onRequestVerification(email);
       } else {
         console.error('Error sending verification email');

client/src/components/Signups/Password.tsx

@@ -3,6 +3,9 @@ import axios from 'axios';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
+import { useDispatch } from 'react-redux';
+import { setMemberInfo } from '../../reducer/member/memberInfoSlice';
+
 const strings = {
     titleText: "비밀번호 설정",
     passwordLabelText: "비밀번호",
@@ -14,6 +17,7 @@ const strings = {
 };
 
 const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, onNext, email }) => {
+    const dispatch = useDispatch();
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [name, setName] = useState('');
@@ -62,6 +66,9 @@ const PasswordSettingModal: React.FC<PasswordSettingModalProps> = ({ onClose, on
 
             if (response.status === 201) {
                 console.log('Data sent successfully');
+
+                // 여기서 Redux store의 memberInfo에 데이터 저장
+                dispatch(setMemberInfo(response.data));
                 onClose();
                 onNext();
             } else {

client/src/reducer/member/memberInfoSlice.ts

@@ -0,0 +1,37 @@
+// memberInfoSlice.ts
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface MemberInfo {
+  email: string;
+  name: string;
+  password: string;
+  confirmPassword: string;
+}
+
+interface MemberInfoState {
+  memberInfo: MemberInfo | null;
+  emailForVerification: string | null;  // 이메일 상태 추가
+}
+
+const initialState: MemberInfoState = {
+  memberInfo: null,
+  emailForVerification: null,  // 초기값 설정
+};
+
+const memberInfoSlice = createSlice({
+  name: 'memberInfo',
+  initialState,
+  reducers: {
+    setMemberInfo: (state, action: PayloadAction<MemberInfo>) => {
+      state.memberInfo = action.payload;
+    },
+    setEmailForVerification: (state, action: PayloadAction<string>) => {
+        state.emailForVerification = action.payload;  // 액션 추가
+      },
+  },
+});
+
+export const { setMemberInfo, setEmailForVerification } = memberInfoSlice.actions;
+
+export default memberInfoSlice.reducer;

client/src/store/config.ts

@@ -5,6 +5,7 @@ import { stockOrderPriceReducer } from "../reducer/StockOrderPrice-Reducer";
 import { expandScreenReducer } from "../reducer/ExpandScreen-Reducer";
 import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
 import { companyIdReducer } from "../reducer/CompanyId-Reducer";
+import  memberInfoReducer from '../reducer/member/memberInfoSlice';
 
 const store = configureStore({
   reducer: {
@@ -14,6 +15,7 @@ const store = configureStore({
     expandScreen: expandScreenReducer,
     stockOrderSet: stockOrderSetReducer,
     companyId: companyIdReducer,
+    memberInfo: memberInfoReducer,
   },
 });