[Release/0.4.0] 마이페이지 및 마무리

src/App.js

@@ -9,6 +9,12 @@ import Post from 'pages/Post';
 import PostDetail from 'pages/PostDetail';
 import Chatting from 'pages/Chatting';
 import ChatList from 'pages/ChatList';
+import MyPage from 'pages/MyPage';
+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 (
@@ -22,6 +28,12 @@ function App() {
         <Route path="/postDetail" element={<PostDetail />} />
         <Route path="/chatting" element={<Chatting />} />
         <Route path="/chatList" element={<ChatList />} />
+        <Route path="/myPage" element={<MyPage />} />
+        <Route path="/favorite" element={<Favorite />} />
+        <Route path="/postUpdate" element={<PostUpdate />} />
+        <Route path="/sellList" element={<SellList />} />
+        <Route path="/category" element={<Category />} />
+        <Route path="updateUser" element={<UpdateUser />} />
       </Routes>
     </BrowserRouter>
   );

src/components/BottomNav.js

@@ -14,18 +14,26 @@ export default function SimpleBottomNavigation() {
     navigate('/board');
   };
 
+  const category = () => {
+    navigate('/category');
+  };
+
   const chatList = () => {
     navigate('/chatList');
   };
 
+  const myPage = () => {
+    navigate('/myPage');
+  };
+
   return (
     <Box>
       <BottomNavigation showLabels>
         {/* 내용 수정 필요 */}
         <BottomNavigationAction label="홈" value="board" icon={<DashboardIcon />} onClick={board} />
-        <BottomNavigationAction label="카테고리" value="category" icon={<CategoryIcon />} />
+        <BottomNavigationAction label="카테고리" value="category" icon={<CategoryIcon />} onClick={category} />
         <BottomNavigationAction label="채팅" value="chatList" icon={<ChatIcon />} onClick={chatList} />
-        <BottomNavigationAction label="마이페이지" value="mypage" icon={<ContactPageIcon />} />
+        <BottomNavigationAction label="마이페이지" value="mypage" icon={<ContactPageIcon />} onClick={myPage} />
       </BottomNavigation>
     </Box>
   );

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

@@ -10,9 +10,13 @@ import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 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%',
@@ -38,18 +42,28 @@ export default function Navbar(props) {
   }, [isSessionValid, props]);
 
   // const logoutSession = logout();
+  const home = () => {
+    navigate('/board');
+  };
 
   return (
     <>
       <AppBar position="static" color="error">
         <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Text
-            {/* 로고 넣기 */}
-          </Typography>
-          <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={openMenu}>
-            <MenuIcon />
-          </IconButton>
+          <Grid container>
+            <Grid item xs={1}>
+              <div></div>
+            </Grid>
+            <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 }}>
+                <MenuIcon />
+              </IconButton>
+            </Grid>
+          </Grid>
         </Toolbar>
       </AppBar>
       <Modal open={open} onClose={closeMenu} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">

src/pages/Board.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import Background from 'components/Background';
 import Navbar from 'components/Navbar';
 import BottomNav from 'components/BottomNav';
@@ -19,14 +19,12 @@ 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() {
   const navigate = useNavigate();
+  const { state } = useLocation();
   const [userId, setUserId] = useState('');
   const getUserId = (id) => {
     setUserId(id);
@@ -37,7 +35,10 @@ export default function Board() {
     setSearchInput(e.target.value);
     console.log(searchInput);
   };
-  const [keyword, setKeyword] = useState();
+
+  // 일단 기본값, 카테고리 검색 시 state를 받음 // useLocation? or null
+  const [type, setType] = useState(state ? state.type : null);
+  const [keyword, setKeyword] = useState(state ? state.keyword : null);
 
   const [postList, setPostList] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -52,11 +53,13 @@ export default function Board() {
   useEffect(() => {
     if (userId !== '') {
       console.log('axios 호출');
+      console.log(type + ': ' + keyword);
       axios({
         url: '/api/board/getPostList',
         method: 'get',
         params: {
           page: pageNumber,
+          type: type,
           keyword: keyword,
         },
       })
@@ -96,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} />
@@ -109,6 +153,13 @@ export default function Board() {
           placeholder="검색어를 입력하세요."
           style={{ margin: '10px 0 10px 0' }}
           onChange={handleSearchInput}
+          onKeyDown={(ev) => {
+            if (ev.key === 'Enter') {
+              setPageNumber(0);
+              setKeyword(searchInput);
+              setType('T');
+            }
+          }}
           InputProps={{
             endAdornment: (
               <InputAdornment
@@ -117,6 +168,7 @@ export default function Board() {
                 onClick={() => {
                   setPageNumber(0);
                   setKeyword(searchInput);
+                  setType('T');
                 }}
               >
                 <SearchIcon />
@@ -125,13 +177,14 @@ export default function Board() {
           }}
         ></TextField>
 
-        {/* 이미지 접근 예시 */}
-        {/* nginx proxy로 접근 */}
-        {/* <img src='/image/default.png' style={{width: '120px', marginBottom: '10px'}}/> */}
-
+        {/* Image nginx proxy로 접근 */}
         {/* 반복 Card 구조*/}
         {isLoading ? (
-          <p>Loading...</p>
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'center' }}>
+            <Typography variant="body1" textAlign={'center'}>
+              Loading...
+            </Typography>
+          </div>
         ) : postList.length > 0 ? (
           <div style={{ flex: '1' }}>
             {postList.map((post, index) => {
@@ -150,7 +203,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>
@@ -160,7 +213,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>
 
@@ -184,7 +237,11 @@ export default function Board() {
             })}
           </div>
         ) : (
-          <p>No Data</p>
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'center' }}>
+            <Typography variant="body1" textAlign={'center'}>
+              등록된 아이템이 없습니다.
+            </Typography>
+          </div>
         )}
 
         <div style={{ width: '100%', textAlign: 'center', padding: '10px 0 20px 0' }}>
@@ -213,19 +270,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' },
-];