diff --git a/client/src/App.js b/client/src/App.js index 7b772ee..b2302b8 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -15,7 +15,6 @@ import { useCookies } from 'react-cookie'; import './App.css'; const App = () => { - // 서버에서 account 데이터를 불러와서 contextAPI로 저장. const [userId, setUserId] = useState(''); const [email, setEmail] = useState(''); diff --git a/client/src/Dummy.js b/client/src/Dummy.js deleted file mode 100644 index 304068c..0000000 --- a/client/src/Dummy.js +++ /dev/null @@ -1,5 +0,0 @@ -export const Dummy = { - contents: ['오직 두바이에서만 이런 스턴트를 볼 수 있어요! Dubai Esports Festival 에서 한계를 뛰어 넘으세요! 11월 9일부터 20일까지 엑스포 시티의 두바이 전시 센터에서 진행되니 놓치지 마세요!' -, 'Experience enjoyable JavaScript development with WebStorm. With smart code completion, safe refactoring, and first-class support for Node.js, Angular, and React. Download free trial!' -, 'Prepare for your project management career with a Project Management Professional Certificate from Google. You’ll learn the skills and tools needed for entry-level jobs, including Agile project management methods like Scrum. Enroll today.'] -} \ No newline at end of file diff --git a/client/src/Pages/AccountPage.js b/client/src/Pages/AccountPage.js index c55e646..9e7d49f 100644 --- a/client/src/Pages/AccountPage.js +++ b/client/src/Pages/AccountPage.js @@ -11,6 +11,7 @@ import Button from '@mui/material/Button'; import Avatar from '@mui/material/Avatar'; import { Chip, Grid } from '@mui/material'; import alert from 'alert'; +import { profileStyle, chipStyle } from '../StyledSx'; const AccountPage = () => { const context = useContext(AppContext); @@ -60,12 +61,6 @@ const AccountPage = () => { }; // account Page 에 들어오면, DB에 user 요청. - const profileStyle = { - width: '100%', - maxWidth: '250px', - height: '250px' - }; - return ( { } }} > - + @@ -145,21 +130,10 @@ const AccountPage = () => { } }} > - + - diff --git a/client/src/Pages/MainPage.js b/client/src/Pages/MainPage.js index a78efed..4e7ba44 100644 --- a/client/src/Pages/MainPage.js +++ b/client/src/Pages/MainPage.js @@ -6,11 +6,11 @@ import ListContainer from '../components/ListContainer'; import Grid from '@mui/material/Grid'; import axios from 'axios'; import { Paper } from '@mui/material'; +import { ListContainerStyle } from '../StyledSx'; import '../utils/MainPage.css'; const MainPage = () => { const context = useContext(AppContext); - // mainPageArticles const { mainArticles } = context.state; const { setMainArticles, setRegionList } = context.action; @@ -37,25 +37,7 @@ const MainPage = () => { diff --git a/client/src/Pages/WritePage.js b/client/src/Pages/WritePage.js index 1de5016..925ed0d 100644 --- a/client/src/Pages/WritePage.js +++ b/client/src/Pages/WritePage.js @@ -19,6 +19,7 @@ import CircularProgress from '@mui/material/CircularProgress'; import '../utils/WritePage.css'; import '../utils/Font.css'; import alert from 'alert'; +import { writeButtons } from '../StyledSx'; export default function WritePage () { const context = useContext(AppContext); @@ -103,13 +104,9 @@ export default function WritePage () { diff --git a/client/src/components/AccountComponents/AccountNft.js b/client/src/components/AccountComponents/AccountNft.js index 29126d5..d4f5ae9 100644 --- a/client/src/components/AccountComponents/AccountNft.js +++ b/client/src/components/AccountComponents/AccountNft.js @@ -1,26 +1,28 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { AppContext } from '../../AppContext'; +import React, {useContext, useEffect, useState} from 'react' +import { AppContext } from '../../AppContext' import { NavLink } from 'react-router-dom'; -import { Box, Chip, Stack, Typography, Grow } from '@mui/material'; +import { Box, Chip, Stack, Typography,Grow } from '@mui/material'; import Media from '../Skeleton'; +import AccountNftsCard from './AccountNftsCard'; +import { chipStyle } from '../../StyledSx'; const AccountNft = () => { const context = useContext(AppContext); - const { address } = context.state; - const options = { method: 'GET' }; + const {address, userId} = context.state; + const options = {method: 'GET'}; const [nftlist, setNftlist] = useState([]); useEffect(() => { fetch(`https://testnets-api.opensea.io/api/v1/assets?owner=${address}&order_direction=desc&offset=0&limit=20&include_orders=false`, options) .then(response => response.json()) .then((response) => { - console.log(response.assets); - if (response.assets) { - setNftlist(response.assets); + console.log(response.assets) + if(response.assets){ + setNftlist(response.assets) } }) .catch(err => console.error(err)); - }, []); + }, [userId]); return ( <> @@ -40,33 +42,35 @@ const AccountNft = () => { - - - { - - nftlist.map((el, idx) => { - return ; - }) + + + {nftlist ? + nftlist.map((el, idx) => { + return ( + + ); + }) + : + <> + + + + } - ); -}; + ) +} -export default AccountNft -; +export default AccountNft \ No newline at end of file diff --git a/client/src/components/AccountComponents/AccountNftsCard.js b/client/src/components/AccountComponents/AccountNftsCard.js index cc09ee9..516f855 100644 --- a/client/src/components/AccountComponents/AccountNftsCard.js +++ b/client/src/components/AccountComponents/AccountNftsCard.js @@ -2,20 +2,11 @@ import React from 'react'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardMedia from '@mui/material/CardMedia'; -import Avatar from '@mui/material/Avatar'; const AccountNftsCard = (props) => { return ( - ) - } title={props.userId} sx={{ color: 'black' }} subheader='nfts' diff --git a/client/src/components/AccountComponents/AccountSend.js b/client/src/components/AccountComponents/AccountSend.js index a27655f..a00de46 100644 --- a/client/src/components/AccountComponents/AccountSend.js +++ b/client/src/components/AccountComponents/AccountSend.js @@ -3,9 +3,10 @@ import { AppContext } from '../../AppContext'; import Backdrop from '@mui/material/Backdrop'; import CircularProgress from '@mui/material/CircularProgress'; import axios from 'axios'; -import { Box, Stack, Chip, Button, TextField } from '@mui/material'; +import { Stack, Chip, Button, TextField } from '@mui/material'; import alert from 'alert'; import Typography from '@mui/material/Typography'; +import { chipStyle, accountLetters } from '../../StyledSx'; const AccountSend = () => { const context = useContext(AppContext); @@ -55,22 +56,17 @@ const AccountSend = () => { - Your Account: - {context.state.address ? context.state.address : '로그인을 해주세요'} + Your Account: + + {context.state.address ? context.state.address : '로그인을 해주세요'} + - + - {ismatched ? null : 아이디 비밀번호를 확인해주세요Check ID or Password} + {ismatched + ? null + : + 아이디 비밀번호를 확인해주세요 + Check ID or Password + } diff --git a/client/src/components/Review.js b/client/src/components/Review.js index a019f0c..0ca7066 100644 --- a/client/src/components/Review.js +++ b/client/src/components/Review.js @@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import { Chip } from '@mui/material'; +import { writeButtons } from '../StyledSx'; export default function Review (props) { const date = new Date(); @@ -57,31 +58,15 @@ export default function Review (props) { diff --git a/client/src/components/SignupModal.js b/client/src/components/SignupModal.js index 0ba7f92..a2ebcb2 100644 --- a/client/src/components/SignupModal.js +++ b/client/src/components/SignupModal.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import '../utils/modal.css'; import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; @@ -9,6 +9,8 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import Typography from '@mui/material/Typography'; import Container from '@mui/material/Container'; import { ThemeProvider } from '@mui/material/styles'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; import axios from 'axios'; import { AppContext } from '../AppContext'; import alert from 'alert'; @@ -16,6 +18,7 @@ import alert from 'alert'; const SignupModal = () => { // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴 const context = useContext(AppContext); + const [ismatched, setIsmatched] = useState(true); const open = context.state.signupmodalOpen; const close = () => { context.action.setSignupModalOpen(false); @@ -27,9 +30,11 @@ const SignupModal = () => { const p = data.get('password'); const pConfirm = data.get('confirm_password'); if (p !== pConfirm) { - alert('비밀번호가 일치하지 않습니다'); + // signup modal popup + setIsmatched(false); } else { // DB로 보내기 + setIsmatched(true); axios.post('http://localhost:3001/users/signup', { userId: data.get('id'), password: data.get('password') @@ -139,6 +144,12 @@ const SignupModal = () => { Sign Up + {ismatched === true + ? <> + : + 아이디 비밀번호를 확인해주세요 + Check ID or Password + } diff --git a/client/src/components/WriteForm.js b/client/src/components/WriteForm.js index 6f68d66..4a1d205 100644 --- a/client/src/components/WriteForm.js +++ b/client/src/components/WriteForm.js @@ -10,6 +10,7 @@ import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import { Chip } from '@mui/material'; import alert from 'alert'; +import { writeButtons } from '../StyledSx'; export default function WriteForm (props) { const { region, setRegion, city, setCity, regionList, cityList, setCityList } = props; @@ -137,14 +138,7 @@ export default function WriteForm (props) {