From 04842c073f8eb22d1ea00e80337797034b9e6300 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Tue, 12 Sep 2023 11:04:40 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[Feat]=20=EA=B5=AC=EA=B8=80=20oauth?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84=20=EA=B5=AC?= =?UTF-8?q?=EA=B8=80=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B5=9C=EC=8B=A0=ED=99=94=20?= =?UTF-8?q?=EA=B5=AC=EA=B8=80=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20logins=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EC=97=90=20=EC=83=9D=EC=84=B1=20Issues=20#15?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package-lock.json | 10 ++++++ client/package.json | 1 + client/src/components/Logins/GoogleSignin.tsx | 33 +++++++++++++++++++ client/src/components/Logins/OAuthLogin.tsx | 4 +-- 4 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 client/src/components/Logins/GoogleSignin.tsx diff --git a/client/package-lock.json b/client/package-lock.json index c6257f85..b0d4ad03 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,6 +8,7 @@ "name": "vite-project", "version": "0.0.0", "dependencies": { + "@react-oauth/google": "^0.11.1", "@reduxjs/toolkit": "^1.9.5", "axios": "^1.5.0", "boxicons": "^2.1.4", @@ -2481,6 +2482,15 @@ "node": ">= 8" } }, + "node_modules/@react-oauth/google": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.11.1.tgz", + "integrity": "sha512-tywZisXbsdaRBVbEu0VX6dRbOSL2I6DgY97woq5NMOOOz+xtDsm418vqq+Vx10KMtra3kdHMRMf0hXLWrk2RMg==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "1.9.5", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", diff --git a/client/package.json b/client/package.json index 61fedbf5..ef05a562 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@react-oauth/google": "^0.11.1", "@reduxjs/toolkit": "^1.9.5", "axios": "^1.5.0", "boxicons": "^2.1.4", diff --git a/client/src/components/Logins/GoogleSignin.tsx b/client/src/components/Logins/GoogleSignin.tsx new file mode 100644 index 00000000..e49f5a46 --- /dev/null +++ b/client/src/components/Logins/GoogleSignin.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { GoogleOAuthProvider, GoogleLogin, useGoogleOneTapLogin } from '@react-oauth/google'; + +const GoogleSignInComponent: React.FC = () => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const handleSuccess = (credentialResponse: any) => { + console.log(credentialResponse); + }; + + const handleError = () => { + console.log('Login Failed'); + }; + + // One-tap 로그인 (선택적) + useGoogleOneTapLogin({ + onSuccess: handleSuccess, + onError: handleError, + }); + + return ( + + + + ); +}; + +export default GoogleSignInComponent; + diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx index 7d3fc473..1ebbd4a9 100644 --- a/client/src/components/Logins/OAuthLogin.tsx +++ b/client/src/components/Logins/OAuthLogin.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; - +import GoogleLogin from './GoogleSignin.tsx' import kakaoLogo from '../../asset/images/KakaoLogo.svg'; import axios from 'axios'; @@ -34,7 +34,7 @@ const OAuthLoginModal: React.FC = ({ onClose, onEmailLoginClick × {titleText} - + {kakaoLoginText} From 981e767f02831234f99eb985f78643aa51e314a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Tue, 12 Sep 2023 11:36:06 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[Fix]=20=ED=94=84=EB=A1=A0=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=B0=ED=8F=AC=20=EC=A0=84=20=EC=98=A4=ED=9C=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/MarketComponents/index.tsx | 1 + client/src/components/communityComponents/Comments.tsx | 1 + client/src/components/communityComponents/index.tsx | 1 + client/src/page/MainPage.tsx | 2 +- 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/components/MarketComponents/index.tsx b/client/src/components/MarketComponents/index.tsx index ec96dfef..5422abba 100644 --- a/client/src/components/MarketComponents/index.tsx +++ b/client/src/components/MarketComponents/index.tsx @@ -69,6 +69,7 @@ const NewsListLink = { const Market = styled.div` text-align: center; + height: 600px; `; const News = styled.div` display: flex; diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index 5f781017..eb2276db 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -48,6 +48,7 @@ const Comments = ({ postId }: { postId: number }) => { setVisibleComments(close ? 1 : commentData.length); }; + //코드 중복 // const CommentText = { // write: "작성", // replyCount: `댓글${commentData.length}개 모두보기`, diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index b4c53db8..d5c2f02d 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -312,6 +312,7 @@ const TimeLine = styled.div` flex-direction: column; align-content: space-around; flex-wrap: wrap; + max-height:600px; `; //게시글 삭제 const Delete = styled.div` diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index 68746222..c1e70e78 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -200,7 +200,7 @@ const MainPage = () => { }} /> )} - {isProfileModalOpen && setProfileModalOpen(false)} />} //프로필 모달 컴포넌트 렌더링 + {isProfileModalOpen && setProfileModalOpen(false)} />} ); From 1ce4d98148e708ec96cc3ae28dabdff04cde0f0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Tue, 12 Sep 2023 12:29:34 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[Fix]=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=98=84=EA=B8=88=20=EA=B8=B0=EB=8A=A5=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=B1=EC=97=94=EB=93=9C=20=ED=86=B5=EC=8B=A0=20=EA=B3=BC?= =?UTF-8?q?=EC=A0=95=EC=97=90=EC=84=9C=20post=EB=A5=BC=20create=20?= =?UTF-8?q?=EB=B0=8F=20patch=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=82=AC=EC=9D=B4=EC=97=90=20=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=9E=90=EC=97=B4=EC=9D=84=20=EB=B3=80=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EC=A7=80=EC=A0=95=20Issues=20#70?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Profile/cashModal.tsx | 33 +++++++++++++-------- client/src/hooks/useCash.ts | 4 +-- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx index 866ff083..02195472 100644 --- a/client/src/components/Profile/cashModal.tsx +++ b/client/src/components/Profile/cashModal.tsx @@ -1,18 +1,25 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useSelector, useDispatch } from 'react-redux'; -import { useCreateCash, useGetCash, useUpdateCash } from '../../hooks/useCash'; +import { useCreateCash, useGetCash, useResetCash } from '../../hooks/useCash'; import { RootState } from '../../store/config'; import { setCashId, setCashAmount } from '../../reducer/cash/cashSlice'; const CashModal: React.FC = ({ onClose }) => { + + const titleText = "현금"; + const cashCreationPlaceholder = "생성할 현금 입력"; + const createCashButtonText = "현금 생성"; + const cashInputPlaceholder = "현금 입력"; + const resetButtonText = "리셋"; + const dispatch = useDispatch(); const cashId = useSelector((state: RootState) => state.cash.cashId); const cashAmount = useSelector((state: RootState) => state.cash.cashAmount) || 0; const createCashMutation = useCreateCash(); const { data: cashData, isLoading } = useGetCash(cashId); - const updateCashMutation = useUpdateCash(); + const updateCashMutation = useResetCash(); const [cashInput, setCashInput] = useState(''); const [initialAmount, setInitialAmount] = useState(0); // 현금 생성을 위한 상태 변수 @@ -31,26 +38,27 @@ const CashModal: React.FC = ({ onClose }) => { dispatch(setCashAmount(cashData.data.cash)); } - // 현금 충전 및 충전된 현금량 전역 저장 - const handleCashReceive = () => { - if (cashId && cashAmount !== null) { +// 현금을 입력한 금액으로 리셋하는 함수 + const handleCashReset = () => { + if (cashId) { const numericCashId = parseInt(cashId, 10); // cashId를 숫자로 변환 const numericCashAmount = Number(cashInput); // cashInput을 숫자로 변환 updateCashMutation.mutate({ cashId: numericCashId, cashAmount: numericCashAmount }, { onSuccess: () => { - dispatch(setCashAmount((prevCash: number) => prevCash ? prevCash + numericCashAmount : numericCashAmount)); + dispatch(setCashAmount(numericCashAmount)); // 현금 금액을 입력한 금액으로 리셋 } }); } else { - console.error("cashId or cashAmount is null or not a valid number."); + console.error("cashId is null or not a valid number."); } }; + return ( × - 현금 + {titleText} {/* 현금 생성 입력창 및 버튼 추가 */}
@@ -58,9 +66,9 @@ const CashModal: React.FC = ({ onClose }) => { type="number" value={initialAmount} onChange={e => setInitialAmount(Number(e.target.value))} - placeholder="생성할 현금 입력" + placeholder={cashCreationPlaceholder} /> - 현금 생성 + {createCashButtonText}

현재 현금: {isLoading ? 'Loading...' : cashAmount.toLocaleString()}

@@ -69,16 +77,15 @@ const CashModal: React.FC = ({ onClose }) => { type="number" value={cashInput} onChange={e => setCashInput(e.target.value)} - placeholder="현금 입력" + placeholder={cashInputPlaceholder} /> - 받기 + {resetButtonText} ); }; - interface CashModalProps { onClose: () => void; cashId: string | null; diff --git a/client/src/hooks/useCash.ts b/client/src/hooks/useCash.ts index ade93b0b..7df13135 100644 --- a/client/src/hooks/useCash.ts +++ b/client/src/hooks/useCash.ts @@ -29,6 +29,6 @@ export const useGetCash = (cashId: string | null) => { } -export const useUpdateCash = () => { - return useMutation((data: { cashId: number, cashAmount: number }) => axios.post(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.cashId}`, { cash: data.cashAmount })); +export const useResetCash = () => { + return useMutation((data: { cashId: number, cashAmount: number }) => axios.patch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.cashId}`, { cash: data.cashAmount })); } \ No newline at end of file From cacec84c69178a22360112e4d59ba7da3b3a09d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Tue, 12 Sep 2023 12:49:11 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[Feat]=EA=B5=AC=EA=B8=80=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20=EC=A0=84=EC=97=AD=EB=B3=80=EC=88=98?= =?UTF-8?q?=EC=97=90=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EB=B0=8F=20=ED=97=A4=EB=8D=94=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=ED=86=A0=ED=81=B0=EC=9D=84=20=EB=A1=9C=EC=BB=AC=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=EC=97=90=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20=20Isseus=20#15?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Logins/GoogleSignin.tsx | 14 ++++++++++++++ client/src/page/MainPage.tsx | 3 --- client/src/reducer/member/loginSlice.ts | 6 +++--- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/client/src/components/Logins/GoogleSignin.tsx b/client/src/components/Logins/GoogleSignin.tsx index e49f5a46..88c9e51a 100644 --- a/client/src/components/Logins/GoogleSignin.tsx +++ b/client/src/components/Logins/GoogleSignin.tsx @@ -1,10 +1,24 @@ import React from 'react'; import { GoogleOAuthProvider, GoogleLogin, useGoogleOneTapLogin } from '@react-oauth/google'; +import { useDispatch } from 'react-redux'; +import { setLoginState } from '../../reducer/member/loginSlice'; const GoogleSignInComponent: React.FC = () => { + + const dispatch = useDispatch(); // Redux의 dispatch 함수를 사용하기 위해 가져옵니다. + // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleSuccess = (credentialResponse: any) => { console.log(credentialResponse); + + const token = credentialResponse.token; // 실제 응답에서 토큰의 경로가 어떤지 확인하고 수정해야 합니다. + localStorage.setItem('authToken', token); // 토큰을 localStorage에 저장 + + // 로그인 성공 시 전역 상태를 업데이트합니다. + dispatch(setLoginState({ + memberId: credentialResponse.memberId, // memberId는 예시입니다. 실제 값에 맞게 수정해야 합니다. + isLoggedIn: 1, + })); }; const handleError = () => { diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index c1e70e78..5d6b34c8 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -16,11 +16,8 @@ import Holdings from "../components/watchlist/Holdings"; // Assuming you have a import CompareChartSection from "../components/CompareChartSection/Index"; import StockOrderSection from "../components/StockOrderSection/Index"; import Welcome from "../components/Signups/Welcome"; - import ProfileModal from "../components/Profile/profileModal"; - import { StateProps } from "../models/stateProps"; - import { TabContainerPage } from "./TabPages/TabContainerPage"; const MainPage = () => { diff --git a/client/src/reducer/member/loginSlice.ts b/client/src/reducer/member/loginSlice.ts index fd1fdf2f..558b0408 100644 --- a/client/src/reducer/member/loginSlice.ts +++ b/client/src/reducer/member/loginSlice.ts @@ -4,16 +4,16 @@ const loginSlice = createSlice({ name: 'login', initialState: { memberId: null, - isLoggedOut: 1 + isLoggedIn: 1 }, reducers: { setLoginState: (state, action) => { state.memberId = action.payload; - state.isLoggedOut = 0; + state.isLoggedIn = 1; }, setLogoutState: (state) => { state.memberId = null; - state.isLoggedOut = 1; + state.isLoggedIn = 0; }, updateMemberId: (state, action) => { state.memberId = action.payload; From 31e5447b6375a71bcc73348e303da20334950e4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?= Date: Tue, 12 Sep 2023 13:24:32 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[Fix]=ED=9A=8C=EC=83=89=20=EA=B0=80?= =?UTF-8?q?=EB=A1=9C=EC=84=A0=20=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=95=20?= =?UTF-8?q?Issues=20#=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/watchlist/Holdings.tsx | 36 +++++++++++++------ client/src/components/watchlist/WatchList.tsx | 29 ++++++++++----- 2 files changed, 47 insertions(+), 18 deletions(-) diff --git a/client/src/components/watchlist/Holdings.tsx b/client/src/components/watchlist/Holdings.tsx index 6c51b0cd..5f6f3857 100644 --- a/client/src/components/watchlist/Holdings.tsx +++ b/client/src/components/watchlist/Holdings.tsx @@ -33,9 +33,9 @@ const Holdings: React.FC = ({ currentListType, onChangeListType } )} - + 평가 수익금: +5,000,000원 {/* 임의의 평가 수익금 */} - + {holdingsData.map(stock => ( <> @@ -88,10 +88,11 @@ const getColorByChange = (change: string) => { }; const HoldingsContainer = styled.div` - padding: 16px; + padding: 8px 0px; `; const Header = styled.div` + padding:0px 16px; display: flex; align-items: center; position: relative; @@ -186,17 +187,32 @@ const getColorByChange = (change: string) => { cursor: pointer; // 마우스 포인터 변경 추가 `; - const Divider = styled.div` - height: 1px; - background-color: #aaa; // 회색으로 설정 - margin: 8px 0; // 상하 여백 추가 + const Divider1 = styled.div` + margin:0px; + padding:0px; + width: 100%; + height: 11px; + display: flex; + flex-direction: row; + border-bottom: 1px solid #2f4f4f; `; - + + const Divider2 = styled.div` + margin:0px; + padding:0px; + width: 100%; + height: 4.5px; + display: flex; + flex-direction: row; + border-bottom: 1px solid #2f4f4f; +`; + + const EvaluationProfit = styled.div` font-size: 16px; font-weight: bold; - margin: 10px 0; + margin: 8px 0; text-align: center; color: red; // 수익금이 플러스일 경우 초록색으로 표시 `; @@ -238,7 +254,7 @@ const ColoredDetailData = styled.span.attrs<{ value: string }>(({ value }) => ({ `; const ThickDivider = styled.div` - height: 2px; + height: 3px; background-color: #aaa; margin: 8px 0; `; diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx index 5fcee4b4..18ccca84 100644 --- a/client/src/components/watchlist/WatchList.tsx +++ b/client/src/components/watchlist/WatchList.tsx @@ -39,9 +39,9 @@ const WatchList: React.FC = ({ currentListType, onChangeListType )} - + { /* 종목 추가 로직 */ }}>종목 추가 - + {favoriteStocks.map(stock => ( @@ -77,7 +77,7 @@ const getColorByChange = (change: string) => { }; const WatchListContainer = styled.div` - padding: 16px; + padding: 8px 0px; `; const Header = styled.div` @@ -175,14 +175,27 @@ const StockChange = styled.span.attrs<{ change: string }>(({ change }) => ({ cursor: pointer; `; -const Divider = styled.div` - height: 1px; - background-color: #aaa; - margin: 8px 0; +const Divider1 = styled.div` + margin:0px; + padding:0px; + width: 100%; + height: 11px; + display: flex; + flex-direction: row; + border-bottom: 1px solid #2f4f4f; +`; +const Divider2 = styled.div` + margin:0px; + padding:0px; + width: 100%; + height: 4px; + display: flex; + flex-direction: row; + border-bottom: 1px solid #2f4f4f; `; const AddStockButton = styled.button` - padding: 10px 20px; + padding: 10px; border: none; background-color: transparent; cursor: pointer;