feat:19/login-merge(#19)

app/package.json

@@ -17,7 +17,10 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+<<<<<<< HEAD
     "react-hook-form": "^7.41.5",
+=======
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
     "react-intersection-observer": "^9.4.1",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",

app/src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import './reset.css';
 import './App.css';
-import { Main, SignUp } from './pages/index';
+import { Main, SignUp, Post } from './pages/index';
 import { PATH } from './constants/path';
 import Login from './pages/Login';
 
@@ -22,7 +22,11 @@ function App() {
       <Routes>
         <Route path={PATH.MAIN} element={<Main></Main>}></Route>
         <Route path={PATH.SIGNUP} element={<SignUp></SignUp>}></Route>
+<<<<<<< HEAD
         <Route path={PATH.LOGIN} element={<Login />}></Route>
+=======
+        <Route path={PATH.POST} element={<Post></Post>}></Route>
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
       </Routes>
     </div>
   );

app/src/components/Nav/index.jsx

@@ -2,12 +2,29 @@ import React from 'react';
 import styles from './style.module.css';
 import Search from './Search';
 import UserInfo from './UserInfo';
+<<<<<<< HEAD
 
 const Index = () => {
   return (
     <nav className={styles.nav}>
       <div className={styles.container}>
         <div className={styles.logo}>
+=======
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '../../constants/path';
+
+const Index = () => {
+  const navigate = useNavigate();
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.container}>
+        <div
+          className={styles.logo}
+          onClick={() => {
+            navigate(PATH.MAIN);
+          }}
+        >
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
           <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="" />
         </div>
         <Search></Search>

app/src/components/Nav/style.module.css

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 .nav {
   width: 100%;
   height: 60px;
@@ -34,4 +35,15 @@
   .container {
     padding: 0 10px;
   }
+=======
+.nav{width: 100%;height: 60px;background: #eff2f4; position: fixed; top: 0;left: 0;z-index: 9000;}
+.container{max-width: 1440px; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
+
+/* 로고 */
+.logo{width: 49px;height: 54px; cursor: pointer;}
+.logo img{width: 100%;height: 100%;object-fit: cover;}
+
+@media (max-width : 767px){
+    .container{padding: 0 10px; }
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
 }

app/src/pages/Main/Location/Address/style.module.css

@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 .address_wrap{width: 640px;min-height: 300px; max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; position: fixed; top: 90px; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
+=======
+.address_wrap{width: 640px;min-height: 300px; max-height: 500px; border-radius: 10px; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; position: fixed; top: 90px; left: 50%; z-index: 9999; transform: translateX(-50%); background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
 
 .form{}
 .form .address_search{display: flex;align-items: center;}

app/src/pages/Main/Location/index.jsx

@@ -9,7 +9,11 @@ import usePopupClose from '../../../hooks/usePopupClose';
 import { useEffect } from 'react';
 
 const Index = () => {
+<<<<<<< HEAD
   const [location] = useState(false); //위치 설정 true,false 체크
+=======
+  const [location] = useState(true); //위치 설정 true,false 체크
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
   const [popUp, setPopUp] = useState(false); //팝업 true,false
   const target = useRef(); //팝업 타겟
   const close = usePopupClose(target); //팝업 커스텀 훅
@@ -18,7 +22,11 @@ const Index = () => {
     setPopUp(close);
   }, [close]);
   return (
+<<<<<<< HEAD
     <div ref={target}>
+=======
+    <div ref={target} className={styles.wrap}>
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
       {location === true ? (
         <div
           className={styles.location}

app/src/pages/Main/Location/style.module.css

@@ -1,10 +1,22 @@
+<<<<<<< HEAD
 .location{width: 140px;height: 40px;border-radius: 20px; background: #eff2f4; cursor: pointer;}
 .location ul{height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box;}
 .location ul li{font-size: 16px; }
 .location ul li em{}
 .location ul li .icon{}
 
 .add_location{width: 120px;height: 40px;border-radius: 20px; background: #eff2f4; cursor: pointer;}
+=======
+.wrap{display: inline-block;}
+
+.location{width: 140px;height: 40px;border-radius: 20px; background: #eff2f4; cursor: pointer;  }
+.location ul{height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box;}
+.location ul li{font-size: 16px;}
+.location ul li em{}
+.location ul li .icon{}
+
+.add_location{width: 120px;height: 40px;border-radius: 20px; background: #eff2f4; cursor: pointer; }
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
 .add_location ul{height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
 .add_location ul li{font-size: 16px; }
 .add_location ul li em{}

app/src/pages/Main/Post/Modify/index.jsx

@@ -0,0 +1,47 @@
+import React, { useRef, useState } from 'react';
+import usePopupClose from '../../../../hooks/usePopupClose';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+
+const Index = ({ item }) => {
+  const [modifyPopUp, setModifyPopUp] = useState(); //아이템의 id값이 들어옴
+  const modify = useRef();
+  const close = usePopupClose(modify);
+
+  /* 영역외 클릭시 팝업창 닫기 */
+  useEffect(() => {
+    setModifyPopUp(close);
+  }, [close]);
+  return (
+    <div
+      ref={modify}
+      className={styles.modify}
+      onClick={() => {
+        setModifyPopUp(item.id);
+      }}
+    >
+      <FontAwesomeIcon icon={faEllipsisV} />
+      {modifyPopUp == item.id && (
+        <div className={styles.modify_box}>
+          <ul>
+            <li>
+              <em>수정</em>
+            </li>
+            <li>
+              <em>삭제</em>
+            </li>
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Index.propTypes = {
+  item: PropTypes.object,
+};
+
+export default Index;

app/src/pages/Main/Post/Modify/style.module.css

@@ -0,0 +1,5 @@
+.modify{width: 30px;height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; }
+.modify_box{width: 50px;height: 100%;background: #fff; position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
+.modify_box ul{display: flex; flex-direction: column; justify-content: center; align-items: center;}
+.modify_box ul li{}
+.modify_box ul li em{font-size: 14px;}

app/src/pages/Main/Post/index.jsx

@@ -1,10 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styles from './style.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+<<<<<<< HEAD
 import { faStreetView, faEllipsisV, faHeart, faComment, faBookmark } from '@fortawesome/free-solid-svg-icons';
 import axios from 'axios';
 
 const Index = () => {
+=======
+import { faStreetView, faHeart, faComment, faBookmark } from '@fortawesome/free-solid-svg-icons';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '../../../constants/path';
+import Modify from './Modify';
+
+const Index = () => {
+  const navigate = useNavigate();
+
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
   const [data, setData] = useState([]); //데이터 저장
   const [pageNum, setPageNum] = useState(1); //페이지 번호
   const [, /*loading */ setLoading] = useState(false); //로딩
@@ -73,11 +85,22 @@ const Index = () => {
                           </div>
                         </div>
                       </div>
+<<<<<<< HEAD
                       <div className={styles.modify}>
                         <FontAwesomeIcon icon={faEllipsisV} />
                       </div>
                     </div>
                     <div className={styles.text_wrap}>
+=======
+                      <Modify item={item}></Modify>
+                    </div>
+                    <div
+                      className={styles.text_wrap}
+                      onClick={() => {
+                        navigate(PATH.POST);
+                      }}
+                    >
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
                       <div className={styles.img}>
                         <img src={item.urls.small} />
                       </div>

app/src/pages/Main/Post/style.module.css

@@ -2,6 +2,7 @@
 .post_wrap > ul{display: grid; grid-template-columns: repeat(4,minmax(335px,auto));  grid-gap:20px ;}
 .post_wrap > ul > li{width: 100%;}
 
+<<<<<<< HEAD
 .post{width: 100%;height: 440px; background: #fff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
 
 /* 게시글 상단 정보 */
@@ -10,6 +11,16 @@
 .info .user_img img{width: 100%;height: 100%;object-fit: cover;}
 
 .info .user_info{display: flex;}
+=======
+.post{width: 100%;height: 100%; background: #fff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
+
+/* 게시글 상단 정보 */
+.info{height: 60px; padding: 10px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; position: relative;}
+.info .user_img{width: 40px;height: 40px;border-radius: 50%; background: #555;}
+.info .user_img img{width: 100%;height: 100%;object-fit: cover;}
+
+.info .user_info{display: flex; }
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
 .info .user_info .user{margin-left: 10px;}
 .info .user_info .user .user_name{}
 .info .user_info .user .user_name h4{font-size: 16px; color: #222;}
@@ -21,7 +32,11 @@
 .info .user_info .user .user_address ul li:last-child:before{display: none;}
 .info .user_info .user .user_address ul li:first-child em{margin-left: 5px;}
 
+<<<<<<< HEAD
 .info .modify{width: 30px;height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer;}
+=======
+
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79
 
 /* 게시글 이미지 , 텍스트 전체 영역 */
 .text_wrap{cursor: pointer;}

app/src/pages/Main/style.module.css

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 .section {
   padding-top: 60px;
   min-height: 100vh;
@@ -61,3 +62,38 @@
   margin-right: 5px;
   font-size: 16px;
 }
+=======
+.section{padding-top: 60px; min-height: 100vh; box-sizing: border-box; background: #f8f9fa;}
+.container{max-width: 1440px; margin: 0 auto; padding: 30px 20px; box-sizing: border-box; }
+
+/* 상단 네비,글쓰기 */
+.top_nav{margin-top: 30px; display: flex; justify-content: space-between;}
+
+/* 카테고리 */
+.category{}
+.category ul{display: grid; flex-wrap: wrap;grid-template-columns: repeat(5,minmax(auto,auto)); grid-gap: 0 10px; }
+.category ul li{width: 100%; height: 40px; padding: 0 20px;  text-align: center;  line-height: 40px; box-sizing: border-box; background: #e5edfe; cursor: pointer; border-radius: 30px;}
+.category ul li:last-child{margin-right: 0;}
+.category ul li em{color: #2d8efe;}
+
+/* 글쓰기 */
+.writing{}
+.writing .btn{width: 100px;height: 40px; border-radius: 20px;background: linear-gradient(90deg,#6e8efb,#6253e1); color: #fff; cursor: pointer;}
+.writing .btn em{ font-weight: 600; font-size: 16px;}
+.writing .btn .icon{margin-right: 5px; font-size: 16px; }
+
+@media (max-width:767px){
+    .container{padding: 30px 10px; }
+    .top_nav{flex-direction: column;}
+    .writing{margin-top: 10px; align-self: flex-end;}
+}
+
+@media (max-width:500px){
+    .category ul{ grid-gap: 0 5px;}
+    .category ul li{padding: 0 10px; border-radius: 5px;}
+}
+
+@media (max-width:380px){
+    .category ul li{padding: 0 5px;}
+}
+>>>>>>> 478e21e1a72341f1477fd1c9bcbf0e7b24cd9a79