[FE- TEAM12] [Junami, Eamon] PR2 (#71)

* Chore. Category 컴포넌트 생성

* Feat. Category UI #4

* Style. Add  Header Styled Component #18

* Style. Head style and react icon 추가 #18

* Feat. delivery 작업 중 #9

* Style: Category style #4

* Feat. hover & badge 완료

* Style: Category UI #4

* Feat. 초기데이터 fetch 요청
-Fetch custom Hook 작성
-초기데이터: 메인메뉴, 카테고리1번

* Feat. tabClick 효과 구현 #33, MainMenu Fetch #3

* Style. categorySlide 1줄 나열. #4

* Chore. 더보기 버튼 구현시작 #5

* Feat. 상세페이지 폼 구현
- 배경색설정/상세페이지 위치 가운데로 설정/x버튼구현
- x버튼 클릭  시 기존 페이지로 보여줌 #36

* Chore. 불필요한 코드, 파일 제외하여 pr하기

* Feat: toggle button #5

* Feat. 상세데이터 fetch  받아옴 #38

* Feat: loading 중에 loading 이미지 삽입 #5

* Fix: 호버 이미지에 margin 적용 제거 #4

* Style: cursor and category title

* Feat. 배포API주소로 변경 (CATEGORY제외)

* Fix. REACT WARNING 수정: HEADER styled-components 선언 위치 수정

* Feat: env 파일에 url 넣기

* Chore: fetch 대신 axios 이용

* Fix: fetch error 임시로 고침

- detail 컴포넌트에서 처음에 fetch 받는 데이터를 유효한 url로 주어서 에러가 나오지 않게 했다.

* Fix: fetch error fix

- fetch hook 에 null 이 들어오면 fetch 를 하지 않게 해서 처음랜더링 될때 fetch 하지 않게 했음
- 더보기 클릭 연속으로하면 나타나는 warning Warning: Can't perform a React state update on an unmounted component.
-> useEffect에 클린함수로 상태값 초기화 시켜줘서 해결

* Fix: loading 화면 띄우게 하기

* Feat: Error handling

- useFetch 안에서 error 처리

* Fix: FeedBack 반영

- component 명칭 통일

* Fix: Feedback 반영

- ModalMode  => modalMode

* Feat: add Modal component

* Feat: loading gif MainMenu

* Feat: error component

* Chore. 복구

* Chore.  error 수정

* Feat. portal사용-> modalError 수정

* Fix: header hover 에러 고침

* Feat: stock 0 일시 버튼 disable

* Refactor: OrderBtn

* Feat. 수량 onChange 작업 중

* Chore. PRICEE + STOCK  관리 추가 MERGING

* Feat. 상세페이지 이미지클릭시 대표이미지 변경

* Feat. error 컴포넌트생성

* Feat. errorPage에서 메인홈으로 이동

* Chore. rebase FE

* Chore. rebase 2/13

* Chore : .gitignore 파일 생성

* Chore : 프로젝트 폴더인 BE 폴더 안에 .gitignore 파일 생성

* Chore : side dish 스프링 부트를 이용한 gradle 프로젝트 생성

* Feat : jdbc를 이용한 mysql 연결을 위해 application.properties 설정

* Feat : side dish 프로젝트의 schema.sql 파일 생성

* Chore: .gitignore 추가

* Feat: dish 관련 클래스와 레포지토리 생성

기본 프로젝트 골격을 잡기 위해 Dish, DishController, DishRepository, DishService, BestDishResponseDTO의 틀 생성

* Feat: badge 관련 클래스와 레포지토리 생성

기본 프로젝트 골격을 잡기 위해 Badge, BadgeRepository 생성

* Delete BE directory

* Delete .gitignore

* Chore. merging(error+oath)

* Feat. useFetch method전달방식 변경
- Ooath 인증코드 8080 포트로 post요청
-cors blocked

* Feat. 캐러셀 상세페이지 적용

* Feat. DetailPage 미니캐러셀 구현 중

* Feat. 재고주문api요청보냄, but실패

* Style : detailpage

* -

* Feat. LOGIN 요청중

* Chore. 로그인 작업구현중

* Feat. 재고수량 DB 업뎃가능, (새로고침시만)

* Fix: error

* Feat. Login구현
-atomic component화

* Feat. 받은 토큰으로 다시 get요청 ->  로그인정보 가져오기 구현

* Refactor . 파라미터 분해할당

* Chore. 불필요한 constant파일 삭제

* Feat.로그아웃 api 요청

* Update README.md

* Chore. igonore설정

* Chore.

* Chore. 끝나지않는 merge

* Feat. 범용성있는  Carousel은 전역 폴더링.
-기타 중복 파일 삭제

Co-authored-by: eamon3481 <68339352+eamon3481@users.noreply.github.com>
Co-authored-by: jeong-inho <derosatam76@gmail.com>
Co-authored-by: Jeong InHo <63284310+eNoLJ@users.noreply.github.com>

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

README.md

@@ -1,2 +1,5 @@
 # sidedish
 그룹프로젝트 #2
+
+- 로그인/로그아웃 기능 구현
+<img width="80%" src="https://user-images.githubusercontent.com/65053955/116785846-a9988380-aad6-11eb-8c61-f9227902e5d7.gif"/>

frontend/.env

@@ -1 +1,4 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+
+REACT_APP_API_URL=http://15.164.68.136:8080/
+//process.env.

frontend/.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.css
+.svg
+.json
+.lock
 # dependencies
 /node_modules
 /.pnp
@@ -21,7 +24,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/public
+
 
 
 logo.svg

frontend/package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.2.3",
     "web-vitals": "^1.0.1"

frontend/public/index.html

@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+	<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"
+		/>
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+		<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+		<title>React App</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+
+		<div id="root"></div>
+		<div id="modal"></div>
+
+		<!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +42,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+	</body>
 </html>

frontend/src/App.js

@@ -1,39 +1,18 @@
-import "./App.css";
-import MainMenu from "./components/mainmenu/MainMenu";
-import Category from "./components/category/Category";
-import Header from "./components/header/Header";
-import { createGlobalStyle } from "styled-components";
-const GlobalStyle = createGlobalStyle`
-body{
-  width: 1440px;
-  font-family: Noto Sans KR;
-  margin: 0 auto;
-}
-button{
-  border: none;
-  background-color: transparent;
-  &:focus {
-    outline: none;
-  }
-  cursor: pointer;
-}
-ul{
-  padding: 0;
-}
-li{
-  list-style: none;
-  }
-`;
+import Home from './components/Home';
+import { Route, BrowserRouter } from 'react-router-dom';
+import Oauth from './components/Oauth';
+import Error from './components/state/Error';
 
 function App() {
-  return (
-    <>
-      <GlobalStyle />
-      <Header />
-      <MainMenu />
-      <Category />
-    </>
-  );
+	return (
+		<BrowserRouter>
+			<div>
+				<Route path="/" component={Home} exact={true} />
+				<Route path="/logIn" component={Oauth} />
+				<Route path="/error" component={Error} />
+			</div>
+		</BrowserRouter>
+	);
 }
 
 export default App;

frontend/src/ModalPortal.js

@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom';
+
+const ModalPortal = ({ children }) => {
+	const el = document.getElementById('modal');
+	return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;

frontend/src/components/Carousel.jsx

@@ -0,0 +1,135 @@
+import styled from 'styled-components';
+import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+
+function Carousel({ width, height, count, duration, children, effect }, ref) {
+	const transitionDefault = `all ${effect} ${duration}`;
+	const panelWidth = width / count; //320
+
+	let block = [];
+	for (let i = 0; i < children.length; i += count) {
+		block.push(children.slice(i, i + count));
+	}
+	const lastBlockCount = block[block.length - 1].length;
+	const startX = -width - lastBlockCount * panelWidth;
+
+	const [x, setX] = useState(startX);
+	const [moving, setMoving] = useState(false);
+	const [blockNumber, setBlockNumber] = useState(1);
+	const [trasitionValue, setTransitionValue] = useState(transitionDefault);
+
+	const onMove = (direction) => {
+		if (moving) return;
+		if (direction === 1) {
+			setX((prevX) =>
+				blockNumber === block.length
+					? prevX + direction * lastBlockCount * panelWidth
+					: prevX + direction * width,
+			);
+			setBlockNumber((prevCnt) =>
+				blockNumber === 1 ? block.length : --prevCnt,
+			);
+		} else {
+			setX((prevX) =>
+				blockNumber === block.length - 1
+					? prevX + direction * lastBlockCount * panelWidth
+					: prevX + direction * width,
+			);
+			setBlockNumber((prevCnt) =>
+				blockNumber === block.length ? 1 : ++prevCnt,
+			);
+		}
+		setMoving(true);
+	};
+	const page = () => (blockNumber ? blockNumber : 1);
+
+	useImperativeHandle(ref, () => ({
+		slideToLeft: onMove.bind(undefined, +1),
+		slideToRight: onMove.bind(undefined, -1),
+		pageNumber: page(),
+		totalPage: block.length,
+	}));
+
+	const onTransitionEnd = () => {
+		setMoving(false);
+		if (blockNumber === 1 && x < startX - width * (block.length - 1)) {
+			setTransitionValue('none');
+			setX(startX);
+		} else if (blockNumber === block.length && x > startX) {
+			setTransitionValue('none'); //b a b a
+			setX(startX - width * (block.length - 2) - lastBlockCount * panelWidth);
+		}
+	};
+
+	useEffect(() => {
+		if (trasitionValue === 'none') setTransitionValue(transitionDefault); // eslint-disable-next-line
+	}, [x]);
+
+	const ulStyles = {
+		transform: `translate3d(${x}px, 0, 0)`,
+		transition: trasitionValue,
+	};
+
+	const makeBlock = (el) => {
+		return (
+			<Block className="Block">
+				{el.map((e, idx) => (
+					<CardWrapper
+						className="CardWrapper"
+						width={panelWidth}
+						// height={height}
+						key={idx + 'a'}
+					>
+						{e}
+					</CardWrapper>
+				))}
+			</Block>
+		);
+	};
+
+	return (
+		<>
+			<CategorySlideBlock>
+				<CatgoryWrapper width={width}>
+					<CategoryColumn style={ulStyles} onTransitionEnd={onTransitionEnd}>
+						{[
+							block.length === 1
+								? makeBlock(block[block.length - 1])
+								: makeBlock(block[block.length - 2]),
+							makeBlock(block[block.length - 1]),
+							...block.map(makeBlock),
+							makeBlock(block[0]),
+						]}
+					</CategoryColumn>
+				</CatgoryWrapper>
+			</CategorySlideBlock>
+		</>
+	);
+}
+export default forwardRef(Carousel);
+
+const CatgoryWrapper = styled.div`
+	width: ${(props) => `${props.width}px`};
+	height: ${(props) => `${props.height}px`};
+	padding: 0px;
+	overflow: hidden;
+`;
+const CategoryColumn = styled.div`
+	display: flex;
+`;
+const CategorySlideBlock = styled.div`
+	margin: 0 auto;
+	margin-bottom: 80px;
+`;
+const CardWrapper = styled.div`
+	display: flex;
+	justify-content: center;
+	width: ${(props) => {
+		return props.width;
+	}}px;
+	height: ${(props) => {
+		return props.height;
+	}}px;
+`;
+const Block = styled.div`
+	display: flex;
+`;

frontend/src/components/Home.jsx

@@ -0,0 +1,37 @@
+import MainMenu from './mainmenu/MainMenu';
+import CategoryEntry from './category/CategoryEntry';
+import Header from './header/Header';
+import GlobalStyle from './style/GlobalStyle';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+const Home = () => {
+	const [loginState, setLoginState] = useState(null);
+	const [userName, setUserName] = useState(null);
+	const [userIMG, setUserIMG] = useState(null);
+	useEffect(() => {
+		const token = localStorage.getItem('token');
+		token !== null && setLoginState(true);
+
+		const getUserInfo = async () => {
+			const { data } = await axios.get('https://api.github.com/user', {
+				headers: {
+					Authorization: `token ${token}`,
+				},
+			});
+			setUserName(data.name);
+			setUserIMG(data.avatar_url);
+		};
+		getUserInfo();
+	}, []);
+
+	return (
+		<>
+			<GlobalStyle />
+			<Header {...{ loginState, setLoginState, userName, userIMG }} />
+			<MainMenu />
+			<CategoryEntry />
+		</>
+	);
+};
+
+export default Home;