Merge pull request #86 from Ellie-kang/main

[client] 11월4일 오후1시

client/.env

@@ -0,0 +1,5 @@
+MONGODB='mongodb+srv://takoyaki-cluster.aovdheg.mongodb.net/Takoyaki-DB?authSource=%24external&authMechanism=MONGODB-X509&retryWrites=true&w=majority'
+SECRET=aae08e313ca6ee1dcdbe191db59c4af17b242b21c2b23e4bcba8239ae4de9206
+WEB3KEY=5c093988cddb4e77a7d78369e7b2e384
+CONTRACT=0x04a49E94d26B1D51E0bDe72B193882eCa7EB4722
+PRIVATEKEY=61e4dbfbf9fc8ac2dec5b43d1d04dbc0e33ca17d296d2c144b3096e5d142fbe1

client/src/App.js

@@ -38,8 +38,9 @@ const App = () => {
     palette: {
       background: {
         paper: '#ffffff',
-        footer: '#a9def9',
-        header: '#a9def9',
+        footer: 'rgba(32,78,128)',
+        // header: 'rgb(106,145,192)',
+        header: '#54d8dc',
         lock: 'rgba(47, 83, 239)',
         yellow: "#F0B918"
       },

client/src/components/Article.js

@@ -10,7 +10,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import '../utils/Article.css';
 import '../utils/Font.css';
-import { Box } from '@mui/material';
+import { Box, Link } from '@mui/material';
 
 const Article = (props) => {
   const context = useContext(AppContext);
@@ -23,7 +23,8 @@ const Article = (props) => {
       sx={{ borderRadius: '10px' }}
     >
       <CardHeader
-        sx={{bgcolor: "background.header"}}
+        // sx={{bgcolor: "#ffd2c9"}}
+        sx={{bgcolor: "#fde1e1"}}
         avatar={
           <Avatar src={imgFile} aria-label='recipe' />
         }

client/src/components/Comments.js

@@ -1,11 +1,13 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext,useEffect } from 'react'
 import { AppContext } from "../AppContext";
 import { ThemeProvider } from '@mui/material/styles';
-import { Stack,Button, fabClasses } from '@mui/material';
+import { Stack,Button, fabClasses, Chip } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Avatar from '@mui/material/Avatar';
 import "../utils/Comments.css"
 import { Box } from '@mui/system';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import axios from 'axios';
 
 export const Comments = () => {
   const context = useContext(AppContext);
@@ -30,6 +32,11 @@ export const Comments = () => {
     }
   }
 
+  const deleteComment = (targetId) => {
+    const deleteList = commentLists.filter((comment) => comment.id !== targetId);
+    setCommentLists(deleteList);
+  }
+
   return (
     <ThemeProvider theme={context.state.theme}>
       <Stack>
@@ -62,7 +69,11 @@ export const Comments = () => {
             <Stack spacing={1} className="users-comments" direction="row" sx={{marginY:"5px", color:"text.secondary" }} >
               <Avatar sx={{width: "30px", height: "30px"}} src={context.state.imgSrc} />
               <Typography component="span" sx={{textAlign:"center"}}>{userId}</Typography>
-              <Typography component="p">{comment.content}</Typography>
+              <Typography component="p">{comment.content}
+                <Button onClick={(id) => deleteComment(comment.id)}>
+                  <HighlightOffIcon />
+                </Button>
+              </Typography>
             </Stack>
           )
         })}

client/src/components/Like.js

@@ -9,6 +9,7 @@ export const Like = () => {
   const [isLike, setIsLike] = useState(false);
   const [count, setCount] = useState(1);
 
+
   return (
     <div>
     {isLike

client/src/index.css

@@ -2,7 +2,7 @@ body {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
-  background-color: rgb(252, 250, 234);
+  background-color: rgb(252,250,250);
 
   font-family: 'Poppins';
 }

client/src/utils/Article.css

@@ -1,21 +1,22 @@
 .contents-container {
   max-width: 600px;
-  background-color: rgba(47, 83, 239);
+  background-color:white;
   margin-bottom: 30px;
   border-radius: 10px;
 }
 
 .css-1qbkelo-MuiCardHeader-content > span {
-  color: #ffffff;
-  font-weight: 600;
+  color: black;
+  font-weight: 550;
   font-size: 19px;
 
 }
 
 .contents-container > footer {
-  background-color: #a9def9;
+  background-color: rgb(239,204,202);
   padding-bottom: 20px;
   color: white;
   font-size: 15px;
   font-weight: 600;
 }
+

client/src/utils/MainPage.css

@@ -8,7 +8,7 @@
 }
 
 .nav-list {
-  background-color: white;
+  background-color:white;
   border: none;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -46,11 +46,11 @@
 }
 
 #flight {
-  color: #a9def9;
+  color: rgba(231,127,112);
 }
 
 #flag {
-  color: #a9def9;
+  color: rgba(113,122,133);
 }