Showing
4 changed files
with
36 additions
and
18 deletions
... | @@ -40,11 +40,9 @@ const AccountProfile = props => { | ... | @@ -40,11 +40,9 @@ const AccountProfile = props => { |
40 | const classes = useStyles(); | 40 | const classes = useStyles(); |
41 | 41 | ||
42 | const user = { | 42 | const user = { |
43 | - name: 'Shen Zhi', | 43 | + name: '엄준식', |
44 | - city: 'Los Angeles', | 44 | + membership: 'Basic', |
45 | - country: 'USA', | 45 | + avatar: '/images/avatars/avatar_1.png' |
46 | - timezone: 'GTM-7', | ||
47 | - avatar: '/images/avatars/avatar_11.png' | ||
48 | }; | 46 | }; |
49 | 47 | ||
50 | return ( | 48 | return ( |
... | @@ -59,21 +57,13 @@ const AccountProfile = props => { | ... | @@ -59,21 +57,13 @@ const AccountProfile = props => { |
59 | gutterBottom | 57 | gutterBottom |
60 | variant="h2" | 58 | variant="h2" |
61 | > | 59 | > |
62 | - John Doe | 60 | + {user.name} |
63 | </Typography> | 61 | </Typography> |
64 | <Typography | 62 | <Typography |
65 | - className={classes.locationText} | ||
66 | color="textSecondary" | 63 | color="textSecondary" |
67 | variant="body1" | 64 | variant="body1" |
68 | > | 65 | > |
69 | - {user.city}, {user.country} | 66 | + {user.membership + " Plan"} |
70 | - </Typography> | ||
71 | - <Typography | ||
72 | - className={classes.dateText} | ||
73 | - color="textSecondary" | ||
74 | - variant="body1" | ||
75 | - > | ||
76 | - {moment().format('hh:mm A')} ({user.timezone}) | ||
77 | </Typography> | 67 | </Typography> |
78 | </div> | 68 | </div> |
79 | <Avatar | 69 | <Avatar |
... | @@ -82,7 +72,7 @@ const AccountProfile = props => { | ... | @@ -82,7 +72,7 @@ const AccountProfile = props => { |
82 | /> | 72 | /> |
83 | </div> | 73 | </div> |
84 | <div className={classes.progress}> | 74 | <div className={classes.progress}> |
85 | - <Typography variant="body1">Profile Completeness: 70%</Typography> | 75 | + <Typography variant="body1">저장용량: 70% (7GB/10GB)</Typography> |
86 | <LinearProgress | 76 | <LinearProgress |
87 | value={70} | 77 | value={70} |
88 | variant="determinate" | 78 | variant="determinate" | ... | ... |
... | @@ -17,6 +17,9 @@ const useStyles = makeStyles(theme => ({ | ... | @@ -17,6 +17,9 @@ const useStyles = makeStyles(theme => ({ |
17 | spacer: { | 17 | spacer: { |
18 | flexGrow: 1 | 18 | flexGrow: 1 |
19 | }, | 19 | }, |
20 | + Button: { | ||
21 | + marginRight: theme.spacing(1) | ||
22 | + }, | ||
20 | importButton: { | 23 | importButton: { |
21 | marginRight: theme.spacing(1) | 24 | marginRight: theme.spacing(1) |
22 | }, | 25 | }, |
... | @@ -40,8 +43,8 @@ const DriveToolbar = props => { | ... | @@ -40,8 +43,8 @@ const DriveToolbar = props => { |
40 | > | 43 | > |
41 | <div className={classes.row}> | 44 | <div className={classes.row}> |
42 | <span className={classes.spacer} /> | 45 | <span className={classes.spacer} /> |
43 | - <Button className={classes.importButton}>새 폴더</Button> | 46 | + <Button className={classes.Button}>새 폴더</Button> |
44 | - <Button className={classes.exportButton}>폴더 업로드</Button> | 47 | + <Button className={classes.Button}>폴더 업로드</Button> |
45 | <Button | 48 | <Button |
46 | color="primary" | 49 | color="primary" |
47 | variant="contained" | 50 | variant="contained" |
... | @@ -50,6 +53,16 @@ const DriveToolbar = props => { | ... | @@ -50,6 +53,16 @@ const DriveToolbar = props => { |
50 | </Button> | 53 | </Button> |
51 | </div> | 54 | </div> |
52 | <div className={classes.row}> | 55 | <div className={classes.row}> |
56 | + {/* 파일 클릭했을 때 표시 */} | ||
57 | + <span className={classes.spacer} /> | ||
58 | + <Button className={classes.Button}>공유</Button> | ||
59 | + <Button className={classes.Button}>미리보기</Button> | ||
60 | + <Button className={classes.Button}>삭제</Button> | ||
61 | + <Button className={classes.Button}>이름 바꾸기</Button> | ||
62 | + <Button className={classes.Button}>이동</Button> | ||
63 | + <Button className={classes.Button}>다운로드</Button> | ||
64 | + </div> | ||
65 | + <div className={classes.row}> | ||
53 | <SearchInput | 66 | <SearchInput |
54 | className={classes.searchInput} | 67 | className={classes.searchInput} |
55 | placeholder="파일, 폴더 검색" | 68 | placeholder="파일, 폴더 검색" | ... | ... |
... | @@ -39,6 +39,15 @@ const DriveToolbar = props => { | ... | @@ -39,6 +39,15 @@ const DriveToolbar = props => { |
39 | className={clsx(classes.root, className)} | 39 | className={clsx(classes.root, className)} |
40 | > | 40 | > |
41 | <div className={classes.row}> | 41 | <div className={classes.row}> |
42 | + {/* 파일 클릭했을 때 표시 */} | ||
43 | + <span className={classes.spacer} /> | ||
44 | + <Button className={classes.Button}>공유</Button> | ||
45 | + <Button className={classes.Button}>미리보기</Button> | ||
46 | + <Button className={classes.Button}>삭제</Button> | ||
47 | + <Button className={classes.Button}>이름 바꾸기</Button> | ||
48 | + <Button className={classes.Button}>다운로드</Button> | ||
49 | + </div> | ||
50 | + <div className={classes.row}> | ||
42 | <SearchInput | 51 | <SearchInput |
43 | className={classes.searchInput} | 52 | className={classes.searchInput} |
44 | placeholder="파일, 폴더 검색" | 53 | placeholder="파일, 폴더 검색" | ... | ... |
... | @@ -39,6 +39,12 @@ const DriveToolbar = props => { | ... | @@ -39,6 +39,12 @@ const DriveToolbar = props => { |
39 | className={clsx(classes.root, className)} | 39 | className={clsx(classes.root, className)} |
40 | > | 40 | > |
41 | <div className={classes.row}> | 41 | <div className={classes.row}> |
42 | + {/* 파일 클릭했을 때 표시 */} | ||
43 | + <span className={classes.spacer} /> | ||
44 | + <Button className={classes.Button}>복원</Button> | ||
45 | + <Button className={classes.Button}>영구 삭제</Button> | ||
46 | + </div> | ||
47 | + <div className={classes.row}> | ||
42 | <SearchInput | 48 | <SearchInput |
43 | className={classes.searchInput} | 49 | className={classes.searchInput} |
44 | placeholder="파일, 폴더 검색" | 50 | placeholder="파일, 폴더 검색" | ... | ... |
-
Please register or login to post a comment