병합 (#46)

* SignUp

* Post list (#20)

* test #17

* nav 완성

* address 버튼

* post 페이지  완성

* UI 완성 (#22)

* postList 수정

* Feat/19 login (#24)

* formstate err

* #19 feat: 로그인 유효성검증

* feat:login-style-prototype

* feat:login-style-prototype

* test(#19)

* feat:19-login-style2(#19)

* feat:19-login-style3(#19)

* feat/19-login-style(3)

* 에러 수정

* 날짜 포맷 커스텀훅

* 메인 시간 포맷 적용

* css 수정

* 시간 포맷 수정

* api 수정 (#27)

* Sign up API 수정 (#28)

* api 수정

* 수정

* api 수정

* Post list API 연결 (#29)

* api 수정

* 수정

* 게시글 목록  API연결

* Create post (#31)

* formstate err

* #19 feat: 로그인 유효성검증

* feat:login-style-prototype

* feat:login-style-prototype

* test(#19)

* feat:19-login-style2(#19)

* feat:19-login-style3(#19)

* feat/19-login-style(3)

* feat:19-post

* feat:25-createPost(#25)

* feat:25-createPost-style(#25)

* feat:25-createPost-style(#25)

* feat:25-createPost(#25)

* feat:25-styled-components(#25)

* feat:25-Error-fixed(#25)

* feat:25-loginData(#25)

* feat:25-api연동(#25)

* feat:25-gitpull(#25)

* Post (#33)

* api 수정

* 수정

* 게시글 목록  API연결

* 저장

* 에러 수정

* 수정

* login

* 게시글 목록 조회 수정

* 게시글 목록 조회 수정 (#34)

* 게시글 수정,삭제

* Upload login (#35)

* nav

* feat:style-change

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* 게시글 수정,삭제 (#36)

* 게시글 목록 조회 수정

* 게시글 수정,삭제

* 업로드 수정

* 게시글 목록 페이지 오류 수정

* boardId:category

* 게시글 삭제시 재랜더링

* infinite scroll 수정

* 메인 페이지 수정

* 게시글 주소 검색 수정

* 게시물 주소 검색 수정

* Upload login (#37)

* nav

* feat:style-change

* test

* 500

* fix

* chore:레이아웃수정

* chore:카테고리목록추가

* chore:selectBox-style-change

* chore:categoryBox-style-chage

* chore:token-저장위치-변경

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* 댓글 작성

* Upload login (#38)

* nav

* feat:style-change

* test

* 500

* fix

* chore:레이아웃수정

* chore:카테고리목록추가

* chore:selectBox-style-change

* chore:categoryBox-style-chage

* chore:token-저장위치-변경

* key

* edit-post

* category

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* 임시 저장

* 댓글 입력

* 댓글 입력 (#39)

* 댓글 작성

* 임시 저장

* 댓글 입력

* 임시 저장

* Upload login (#40)

* nav

* feat:style-change

* test

* 500

* fix

* chore:레이아웃수정

* chore:카테고리목록추가

* chore:selectBox-style-change

* chore:categoryBox-style-chage

* chore:token-저장위치-변경

* key

* edit-post

* category

* token

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* 댓글 삭제 (#41)

* 댓글 작성

* 임시 저장

* 댓글 입력

* 임시 저장

* Upload login (#42)

* nav

* feat:style-change

* test

* 500

* fix

* chore:레이아웃수정

* chore:카테고리목록추가

* chore:selectBox-style-change

* chore:categoryBox-style-chage

* chore:token-저장위치-변경

* key

* edit-post

* category

* token

* history pushState

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* 댓글 수정,삭제,좋아요

* 댓글 수정,삭제,좋아요 (#43)

* 댓글 작성

* 임시 저장

* 댓글 입력

* 임시 저장

* 댓글 수정,삭제,좋아요

* 댓글 수정 취소 버튼 추가

* nav user정보

* nav user정보 (#44)

* Upload login (#45)

* nav

* feat:style-change

* test

* 500

* fix

* chore:레이아웃수정

* chore:카테고리목록추가

* chore:selectBox-style-change

* chore:categoryBox-style-chage

* chore:token-저장위치-변경

* key

* edit-post

* category

* token

* history pushState

* chage

* gologin

---------

Co-authored-by: mac <mac@macui-MacBookAir.local>

* redirect file

* 임시 저장

* 배포 설정

* browserRouter

* package.json/homepage

* predeploy delete

* netlify.toml

* netlify.toml

---------

Co-authored-by: limyira <102654496+limyira@users.noreply.github.com>
Co-authored-by: yira <dladlfk1@gmail.com>
Co-authored-by: mac <mac@macui-MacBookAir.local>

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

README.md

@@ -1,2 +1,4 @@
 front-end
-# front-mock-up
+
+//test1234@naver.com
+//test1234!

app/package.json

@@ -13,13 +13,17 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.3",
+    "framer-motion": "^8.5.0",
+    "gh-pages": "^5.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.41.5",
+    "react-intersection-observer": "^9.4.1",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -53,5 +57,6 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "2.7.1"
-  }
+  },
+  "homepage": "https://develop--grand-peony-2901e8.netlify.app/"
 }

app/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

app/public/index.html

@@ -1,32 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
-    <title>React App</title>
+    <title>마실</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

app/public/netlify.toml

@@ -0,0 +1,9 @@
+[build]
+    command = "npm run build"
+    public = "/build"
+    base ="/"
+
+[[redirects]]
+  from="/*"
+  to="/index.html"
+  status=200

app/src/App.css

@@ -1,2 +1,35 @@
-body{font-family: 'Noto Sans KR', sans-serif;}
-/* font-family: 'Roboto', sans-serif; */
+body{font-family: 'Noto Sans KR', sans-serif; color: #555;}
+/* font-family: 'Raleway', sans-serif; */
+.en{ font-family: 'Raleway', sans-serif;}
+
+/* 
+Noto Sans KR
+Thin 100
+Light 300
+Regular 400
+Medium 500
+Bold 700
+Black 900
+*/
+
+/*
+Raleway
+Thin 100
+Thin 100 Italic
+ExtraLight 200
+ExtraLight 200 Italic
+Light 300
+Light 300 Italic
+Regular 400
+Regular 400 Italic
+Medium 500
+Medium 500 Italic
+SemiBold 600
+SemiBold 600 Italic
+Bold 700
+Bold 700 Italic
+ExtraBold 800
+ExtraBold 800 Italic
+Black 900
+Black 900 Italic
+*/

app/src/App.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import './reset.css';
 import './App.css';
-import { Main } from './pages/index';
+import { Main, SignUp, Post } from './pages/index';
+import { PATH } from './constants/path';
+import Login from './pages/Login';
+import CreatePost from './pages/Upload';
+import { BrowserRouter } from 'react-router-dom';
 
 /* prop 타입체크 */
 // import PropTypes from 'prop-types';
@@ -17,9 +21,16 @@ import { Main } from './pages/index';
 function App() {
   return (
     <div className="App">
-      <Routes>
-        <Route path="/" element={<Main></Main>}></Route>
-      </Routes>
+      <BrowserRouter basename={process.env.PUBLIC_URL}>
+        <Routes>
+          <Route path={PATH.MAIN} element={<Main></Main>}></Route>
+          <Route path={PATH.SIGNUP} element={<SignUp></SignUp>}></Route>
+          <Route path={PATH.LOGIN} element={<Login />}></Route>
+          <Route path={PATH.POST} element={<Post></Post>}></Route>
+          <Route path={PATH.CREATE_POST} element={<CreatePost />}></Route>
+          <Route path={PATH.EDIT_POST} element={<CreatePost />}></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }
@@ -29,5 +40,4 @@ Index.propTypes = {
   prop이름: PropTypes.array,
 };
 */
-
 export default App;

app/src/components/Nav/Search/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const Index = () => {
+  return (
+    <form className={styles.form}>
+      <div className={styles.search}>
+        <button className={styles.btn}>
+          <FontAwesomeIcon icon={faSearch} />
+        </button>
+        <input type="text" placeholder="검색어를 입력하세요" />
+      </div>
+    </form>
+  );
+};
+
+export default Index;

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

@@ -0,0 +1,35 @@
+/* 검색 */
+.form{}
+.form .search{width: 350px;height: 40px; position: relative;}
+.form .search input{width: 100%;height: 100%; border-radius: 20px; border: none; background: #fff; padding: 0 20px 0 60px; font-size: 16px;font-weight: 400;}
+.form .search .btn{position: absolute; top: 50%;left: 20px; transform: translateY(-50%); background: transparent; cursor: pointer; font-size: 20px; color: #555;}
+
+@media (max-width : 767px){
+    .form{margin-left: -150px;}
+    .form .search{width: 300px;}
+}
+
+@media (max-width : 700px){
+    .form .search{width: 200px;}
+}
+
+@media (max-width : 600px){
+    .form .search{width: 150px;}
+}
+
+@media (max-width : 550px){
+    .form{margin-left: -100px;}
+    .form .search input{ font-size: 14px;font-weight: 400;}
+}
+
+@media (max-width : 450px){
+    .form{margin-left: -80px;}
+    .form .search{width: 130px;}
+}
+
+@media (max-width : 400px){
+    .form{margin-left: -50px;}
+    .form .search{width: 110px; height: 35px;}
+    .form .search input{font-size: 12px; padding-left: 30px;}
+    .form .search .btn{font-size: 14px; left: 10px;}
+}

app/src/components/Nav/UserInfo/index.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useState } from 'react';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHeart, faBell, faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
+import usePopupClose from '../../../hooks/usePopupClose';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '../../../constants/path';
+
+const Index = () => {
+  const navigate = useNavigate();
+  const [login] = useState(false); //로그인 여부 확인
+  const [userActive, setUserActive] = useState(false); //로그인 완료시 1024미만으로 줄어들었을 경우 햄버거 아이콘 클릭시 유저 정보 active
+  const target = useRef(null); //유저정보 팝업창
+  const close = usePopupClose(target); //유저정보 팝업창 외 클릭시 팝업창 닫기
+
+  useEffect(() => {
+    setUserActive(close);
+  }, [close]);
+  return (
+    <div ref={target}>
+      {login === true && (
+        <div
+          className={styles.mobile}
+          onClick={() => {
+            setUserActive(!userActive);
+          }}
+        >
+          {userActive === false && <FontAwesomeIcon icon={faBars} />}
+          {userActive === true && <FontAwesomeIcon icon={faTimes} />}
+        </div>
+      )}
+      <div
+        className={`${styles.user_info} ${login === true && styles.visible} ${userActive === true && styles.active}`}
+      >
+        {login === false ? (
+          <div className={styles.non_login}>
+            <ul>
+              <li>
+                <em
+                  onClick={() => {
+                    navigate(PATH.LOGIN);
+                  }}
+                >
+                  로그인
+                </em>
+              </li>
+              <li>
+                <em
+                  onClick={() => {
+                    navigate(PATH.SIGNUP);
+                  }}
+                >
+                  회원가입
+                </em>
+              </li>
+            </ul>
+          </div>
+        ) : (
+          <div className={styles.on_login}>
+            <ul>
+              <li>
+                <div className={styles.icon_box}>
+                  <ul>
+                    <li>
+                      <FontAwesomeIcon icon={faHeart} className={styles.icon} />
+                    </li>
+                    <li>
+                      <FontAwesomeIcon icon={faBell} className={styles.icon} />
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <em>마이페이지</em>
+              </li>
+              <li>
+                <div className={styles.user}>
+                  <div className={styles.userImg}></div>
+                  <em>사용자 이름</em>
+                </div>
+              </li>
+              <li>
+                <em>로그아웃</em>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Index;