Skip to content

Commit

Permalink
Merge pull request #121 from EthanKIMHG/main
Browse files Browse the repository at this point in the history
[client] / #20 / Refactoring : 코드 리팩토링.
  • Loading branch information
Ellie-kang authored Nov 9, 2022
2 parents a9ae52b + 795817e commit 5167096
Show file tree
Hide file tree
Showing 18 changed files with 139 additions and 173 deletions.
1 change: 0 additions & 1 deletion client/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { useCookies } from 'react-cookie';
import './App.css';

const App = () => {
// 서버에서 account 데이터를 불러와서 contextAPI로 저장.

const [userId, setUserId] = useState('');
const [email, setEmail] = useState('');
Expand Down
5 changes: 0 additions & 5 deletions client/src/Dummy.js

This file was deleted.

32 changes: 3 additions & 29 deletions client/src/Pages/AccountPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -60,12 +61,6 @@ const AccountPage = () => {
};
// account Page 에 들어오면, DB에 user 요청.

const profileStyle = {
width: '100%',
maxWidth: '250px',
height: '250px'
};

return (
<Grid
p={4}
Expand Down Expand Up @@ -119,17 +114,7 @@ const AccountPage = () => {
}
}}
>
<Chip
label='사진 변경 하기'
sx={{
width: 1,
fontWeight: 600,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)'
}}
/>
<Chip label='사진 변경 하기' sx={chipStyle} />
</Button>
</label>
</Grid>
Expand All @@ -145,21 +130,10 @@ const AccountPage = () => {
}
}}
>
<Chip
label='프로필 변경하기'
sx={{
width: 1,
fontWeight: 600,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)'
}}
/>
<Chip label='프로필 변경하기' sx={chipStyle} />
</Button>
</Grid>
</Grid>

</Grid>
</Grid>
<Grid item xs={12} sm={4}>
Expand Down
22 changes: 2 additions & 20 deletions client/src/Pages/MainPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -37,25 +37,7 @@ const MainPage = () => {
<Grid container spacing={4} justifyContent='center'>
<Grid item sm={0} md={2} />
<Grid
item xs={12} sm={2} justifyContent='center' sx={{
width: '100%',
ml: {
xs: 3
},
pr: {
xs: 3
},
mr: {
sm: 10,
md: 5,
lg: 0
},
mt: {
xs: 0,
sm: 10
},
height: 'auto'
}}
item xs={12} sm={2} justifyContent='center' sx={ListContainerStyle}
>
<ListContainer id='main-list' />
</Grid>
Expand Down
9 changes: 3 additions & 6 deletions client/src/Pages/WritePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -103,13 +104,9 @@ export default function WritePage () {
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
variant='contained'
style={writeButtons}
sx={{
mt: 3,
ml: 1,
bgcolor: '#a9def9',
'&.MuiButtonBase-root:hover': {
bgcolor: '#a9def9'
}
textDecoration:"none"
}}
>
HOME
Expand Down
52 changes: 52 additions & 0 deletions client/src/StyledSx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
export const profileStyle = {
width: '100%',
maxWidth: '250px',
height: '250px',
borderRadius: "70%"
};

export const chipStyle = {
width: 1,
fontWeight: 600,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)',

}

export const ListContainerStyle = {
width: '100%',
ml: {
xs: 3
},
pr: {
xs: 3
},
mr: {
sm: 10,
md: 5,
lg: 0
},
mt: {
xs: 0,
sm: 10
},
height: 'auto'
}

export const accountLetters = {
fontSize: '20px',
fontFamily: 'Poppins',
fontWeight: 600,
}

export const writeButtons = {
mt: 3,
ml: 1,
color: 'white',
bgcolor: '#a9def9',
'&.MuiButtonBase-root:hover': {
bgcolor: '#a9def9'
}
}
11 changes: 2 additions & 9 deletions client/src/components/AccountComponents/AccountContents.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { NavLink } from 'react-router-dom';
import Article from '../Article';
import { Box, Chip, Stack, Typography } from '@mui/material';
import { chipStyle } from '../../StyledSx';

const AccountArticles = (props) => {
const { userArticles } = props;
Expand All @@ -23,15 +24,7 @@ const AccountArticles = (props) => {
<NavLink className='write-link' to='/write'>
<Chip
label='Write'
sx={{
textDecorationLine: 'none',
fontWeight: 500,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)',
cursor: 'pointer'
}}
sx={chipStyle}
/>
</NavLink>
</Box>
Expand Down
12 changes: 3 additions & 9 deletions client/src/components/AccountComponents/AccountInfo.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import React, { useContext } from 'react';
import { AppContext } from '../../AppContext';
import PersonIcon from '@mui/icons-material/Person';
import TokenIcon from '@mui/icons-material/Token';
import { Box, Stack } from '@mui/system';
import { Stack } from '@mui/system';
import { Typography, Button, Chip } from '@mui/material';
import alert from 'alert';
import { chipStyle } from '../../StyledSx';

const AccountInfo = () => {
const context = useContext(AppContext);
Expand Down Expand Up @@ -47,14 +48,7 @@ const AccountInfo = () => {
>
<Chip
label='로그아웃'
sx={{
width: 1,
fontWeight: 600,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)'
}}
sx={chipStyle}
/>
</Button>
</Stack>
Expand Down
62 changes: 33 additions & 29 deletions client/src/components/AccountComponents/AccountNft.js
Original file line number Diff line number Diff line change
@@ -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 (
<>
Expand All @@ -40,33 +42,35 @@ const AccountNft = () => {
<NavLink className='write-link' to='/mint'>
<Chip
label='Mint'
sx={{
textDecorationLine: 'none',
fontWeight: 500,
color: 'white',
fontSize: '16px',
fontFamily: 'Poppins',
bgcolor: 'rgba(231,127,112)',
cursor: 'pointer'
}}
sx={chipStyle}
/>
</NavLink>
</Box>
</Stack>
<Grow in style={{ transformOrigin: '0 2 0' }} {...({ timeout: 1200 })}>
<Stack direction='column' spacing={3} width='80%' ml={7}>
{

nftlist.map((el, idx) => {
return <Media key='idx' />;
})
<Grow in={true} style={{ transformOrigin: '0 2 0' }} {...(true ? { timeout: 1200 } : {})}>
<Stack direction="column" spacing={3} width="80%" ml={7}>
{nftlist ?
nftlist.map((el, idx) => {
return (
<AccountNftsCard
key={idx}
userId={userId}
image_preview_url={el.image_preview_url}
/>
);
})
:
<>
<Media />
<Media />
<Media />
</>
}
</Stack>
</Grow>
</Box>
</>
);
};
)
}

export default AccountNft
;
export default AccountNft
9 changes: 0 additions & 9 deletions client/src/components/AccountComponents/AccountNftsCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Card width='80%'>
<CardHeader
avatar={
(
<Avatar
alt='Ted talk'
src={props.userProfileImg}
/>
)
}
title={props.userId}
sx={{ color: 'black' }}
subheader='nfts'
Expand Down
Loading

0 comments on commit 5167096

Please sign in to comment.