[Feature/11 user update] 사용자 정보 수정

src/App.js

@@ -14,6 +14,7 @@ import Favorite from 'pages/Favorite';
 import PostUpdate from 'pages/PostUpdate';
 import SellList from 'pages/SellList';
 import Category from 'pages/Category';
+import UpdateUser from 'pages/UpdateUser';
 
 function App() {
   return (
@@ -32,6 +33,7 @@ function App() {
         <Route path="/postUpdate" element={<PostUpdate />} />
         <Route path="/sellList" element={<SellList />} />
         <Route path="/category" element={<Category />} />
+        <Route path="updateUser" element={<UpdateUser />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Logo.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import 'styles/Logo.css';
-import logo from '../logo.svg';
+import logo from 'assets/tomato_logo.png';
 
 export default function Logo() {
   return (

src/components/Navbar.js

@@ -12,8 +12,11 @@ import Session from 'utils/Session';
 import { useState } from 'react';
 import Grid from '@mui/material/Grid';
 import Logout from 'components/Logout';
+import { useNavigate } from 'react-router-dom';
+import logo from 'assets/tomato_logo.png';
 
 export default function Navbar(props) {
+  const navigate = useNavigate();
   const style = {
     position: 'absolute',
     top: '20%',
@@ -39,20 +42,21 @@ export default function Navbar(props) {
   }, [isSessionValid, props]);
 
   // const logoutSession = logout();
+  const home = () => {
+    navigate('/board');
+  };
 
   return (
     <>
       <AppBar position="static" color="error">
         <Toolbar>
           <Grid container>
             <Grid item xs={1}>
-              <div>가</div>
+              <div></div>
             </Grid>
-            <Grid item xs>
-              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }} textAlign={'center'}>
-                Text
-                {/* 로고 넣기 */}
-              </Typography>
+            <Grid item xs textAlign={'center'}>
+              {/* Logo */}
+              <img src={logo} style={{ height: '46px', marginTop: '6px', bottom: '0' }} onClick={home} />
             </Grid>
             <Grid item xs={1} display={'flex'} justifyContent={'end'}>
               <IconButton size="large" edge="end" color="inherit" aria-label="menu" onClick={openMenu} style={{ margin: 0, padding: 0 }}>

src/pages/Board.js

@@ -19,10 +19,7 @@ import createdAt from 'utils/Time';
 import SpeedDial from '@mui/material/SpeedDial';
 import SpeedDialIcon from '@mui/material/SpeedDialIcon';
 import SpeedDialAction from '@mui/material/SpeedDialAction';
-import SaveIcon from '@mui/icons-material/Save';
-import PrintIcon from '@mui/icons-material/Print';
-import ShareIcon from '@mui/icons-material/Share';
-import CreateIcon from '@mui/icons-material/Create';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
 import Grid from '@mui/material/Grid';
 
 export default function Board() {
@@ -102,6 +99,47 @@ export default function Board() {
     navigate('/postDetail', { state: postNumber });
   };
 
+  // const [location, setLocation] = useState('');
+  const searchByLocation = () => {
+    console.log('현재 위치로 검색');
+    axios({
+      url: '/api/user/location',
+      method: 'get',
+      params: {
+        userId: userId,
+      },
+    })
+      .then((response) => {
+        console.log(response.data);
+        if (response.status === 200) {
+          if (response.data.message === '위치 조회 성공') {
+            // setLocation(response.data.data);
+            // console.log(location);
+            // setLocation이 아니라
+            setType('L');
+            setKeyword(response.data.data);
+          } else {
+            alert(response.data.message);
+          }
+        } else {
+          throw new Error('정의되지 않은 에러');
+        }
+      })
+      .catch((error) => alert(error));
+  };
+
+  const actions = [
+    {
+      icon: (
+        <Link to={'/post'} style={{ textDecoration: 'none', color: '#5f5f5f', display: 'flex' }}>
+          <EditIcon />
+        </Link>
+      ),
+      name: '글쓰기',
+    },
+    { icon: <LocationOnIcon onClick={searchByLocation} />, name: '위치 검색' },
+  ];
+
   return (
     <Background>
       <Navbar getUserId={getUserId} userId={userId} />
@@ -168,7 +206,7 @@ export default function Board() {
                     <CardContent sx={{ flex: '1 0 auto', p: 1 }} style={{ paddingBottom: '8px' }}>
                       <Grid container item xs direction="row" p={0} m={0}>
                         <Grid item pr={1} xs>
-                          <Typography component="h4" variant="subtitle1" style={{ maxWidth: '160px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                          <Typography component="h4" variant="subtitle1" style={{ maxWidth: '110px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                             {post.title}
                           </Typography>
                         </Grid>
@@ -178,7 +216,7 @@ export default function Board() {
                           </Typography>
                         </Grid>
                       </Grid>
-                      <Typography variant="caption" color="text.secondary" component="div" style={{ height: '40px', maxWidth: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      <Typography variant="caption" color="text.secondary" component="div" style={{ height: '40px', width: '100%', maxWidth: '160px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                         {post.location}
                       </Typography>
 
@@ -235,19 +273,3 @@ export default function Board() {
     </Background>
   );
 }
-
-const actions = [
-  {
-    icon: (
-      <Link to={'/post'} style={{ textDecoration: 'none', color: '#5f5f5f', display: 'flex' }}>
-        <EditIcon />
-      </Link>
-    ),
-    name: '글쓰기',
-  },
-  // 추후 목록 수정
-  { icon: <CreateIcon />, name: 'ds' },
-  { icon: <SaveIcon />, name: 'Save' },
-  { icon: <PrintIcon />, name: 'Print' },
-  { icon: <ShareIcon />, name: 'Share' },
-];

src/pages/Category.js

@@ -44,7 +44,7 @@ export default function Category() {
         {/* keyword를 입력한 상태로 들어가야 함  state로 넘기기?*/}
         {/* Board는 title 검색만 keyword로 가능한 상태 */}
 
-        <Typography variant="subtitle1" fontWeight={'bold'} p={2} borderTop={'1px solid black'} mt={6} mb={2}>
+        <Typography variant="subtitle1" fontWeight={'bold'} p={2} borderTop={'1px solid lightgray'} mt={6} mb={2}>
           구매
         </Typography>
         <Grid container textAlign={'center'} rowSpacing={6}>
@@ -161,7 +161,7 @@ export default function Category() {
           </Grid>
         </Grid>
 
-        <Typography variant="subtitle1" fontWeight={'bold'} p={2} borderTop={'1px solid black'} mt={6} mb={2}>
+        <Typography variant="subtitle1" fontWeight={'bold'} p={2} borderTop={'1px solid lightgray'} mt={6} mb={2}>
           판매
         </Typography>
         <Grid container textAlign={'center'} rowSpacing={6}>

src/pages/ChatList.js

@@ -107,11 +107,14 @@ export default function ChatList() {
             const imageUrl = '/image/' + room.image.uuid;
             return (
               <Grid
+                display={'flex'}
+                alignItems={'center'}
                 key={index}
                 container
                 direction={'row'}
                 p={1}
-                mb={1}
+                pt={2}
+                mb={2}
                 style={{ height: '80px', borderTop: '1px solid lightgray' }}
                 onClick={() => {
                   console.log(room.postNum, room.sellerId, room.image);

src/pages/Chatting.js

@@ -50,7 +50,7 @@ export default function Chatting() {
         method: 'post',
         data: {
           sellerId: state.sellerId,
-          userId: state.userId,
+          userId: userId,
           postNum: state.postNum,
         },
       })
@@ -131,8 +131,8 @@ export default function Chatting() {
     console.log('Chatting Room: ' + state.postNum); // postNum은 roomId가 아님
     console.log('Chatting Room: ' + roomId); // postNum은 roomId가 아님
     // WebSocket
-    // const webSocketUrl = 'ws://' + window.location.host + ':8080/api/ws';
-    const webSocketUrl = 'ws://localhost:8080/api/ws';
+    const webSocketUrl = 'ws://' + window.location.host + ':8080/api/ws';
+    // const webSocketUrl = 'ws://localhost:8080/api/ws';
     stompClient.current = Stomp.over(() => new WebSocket(webSocketUrl)); // Stomp Client
 
     // SockJS, Apic에서 SockJS로 테스트 할수가 없음

src/pages/Favorite.js

@@ -126,7 +126,9 @@ export default function Favorite() {
             );
           })
         ) : (
-          <div>등록된 관심 목록이 없습니다.</div>
+          <Typography variant="h6" fontWeight={'bold'} color={'text.secondary'} display={'flex'} justifyContent={'center'} marginTop={'50%'}>
+            등록된 관심 목록이 없습니다.
+          </Typography>
         )}
       </div>
       <BottomNav />

src/pages/Home.js

@@ -3,17 +3,22 @@ import 'styles/Home.css';
 import Background from 'components/Background.js';
 import Logo from 'components/Logo';
 import { Link } from 'react-router-dom';
+// import bot from 'assets/bg_bot.png';
+import { Typography } from '@mui/material';
 
 function Home() {
   return (
     <Background>
-      <Logo />
-      <div className="homeWrap">
-        {/* 추가 문구 지정 필요 */}
-        <Link to={'/login'} className="homeButton">
-          시작하기
+      <div className="homeWrap" style={{ backgroundColor: '#FF523A' }}>
+        <Logo />
+        <Link to={'/login'} className="homeButton" style={{ textDecoration: 'none' }}>
+          {/* 추가 문구 지정 필요 */}
+          <Typography variant="h6" fontWeight={'bold'} mt={20}>
+            시작하기
+          </Typography>
         </Link>
-        <div className="homeTitle">버튼을 눌러 시작하기</div>
+        {/* 디자인 끝까지 고민 */}
+        {/* <img src={bot} style={{width:'100%', height:'200px'}}/> */}
       </div>
     </Background>
   );