Merge branch 'master' of https://github.com/pound-er/Founder-client

.gitignore

@@ -5,6 +5,7 @@
 /yarn.lock
 /.pnp
 .pnp.js
+/.env
 src/config.js
 
 # testing

README.md

@@ -1,70 +1,81 @@
-# Getting Started with Create React App
+# Found:er
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+현물 정기 구독 큐레이션 서비스 [**Found:er**](https://found-er.co.kr/)
 
-## Available Scripts
+**1440px 에 맞춰져 있습니다. PC로 확인해주세요!**
 
-In the project directory, you can run:
+![image](https://user-images.githubusercontent.com/101736358/184887939-22e50891-3cf2-41e4-b697-d2630bf2f6c3.png)
 
-### `npm start`
+#
 
-Runs the app in the development mode.\
-Open [http:https://localhost:3000](http:https://localhost:3000) to view it in your browser.
+정기적으로 구매하는 물건들을 매번 신경쓰기 번거롭지 않으셨나요?<br/>
+**설문조사를 통해 다양한 현물 정기 구독 서비스들을 추천 받을 수 있어요!**<br/>
+5분의 설문으로 쉽게 시작해서 필요한 제품들을 추천받고 현물 구독 서비스에 입문해보세요! 
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
 
-### `npm test`
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## 😄 기능 소개
 
-### `npm run build`
+**메인 페이지**
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- 메인 페이지에서 파운더가 추천하는 현물 구독 서비스들을 확인할 수 있습니다. 각 브랜드 버튼을 클릭하게 되면 브랜드 링크로 이동하게 됩니다.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+![image](https://user-images.githubusercontent.com/101736358/184896417-5224a061-b84d-4ef5-bd40-4551de7d0acb.png)
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+**카테고리 페이지**
 
-### `npm run eject`
+- 카테고리 페이지에서 카테고리별로 세분화된 서비스들을 확인할 수 있습니다. 카테고리를 호버하게 되면 식품, 음료, 생필품, 건강 메뉴바가 나오면서 각 카테고리 별로 서비스들을 모아볼 수 있습니다.
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+![image](https://user-images.githubusercontent.com/101736358/184896726-78751aca-96a0-47f1-9f0d-01bcf396c6eb.png)
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+**매거진 페이지**
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+- 매거진 페이지에서 파운더의 이야기를 담은 브랜드 스토리와 추천글들을 읽을 수 있습니다. 추천글들과 관련된 브랜드들을 추천받을 수 있습니다.
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+![image](https://user-images.githubusercontent.com/101736358/184897660-2a9c3bc2-0cdf-440c-ad40-fdb10473fa6e.png)
 
-## Learn More
+![image](https://user-images.githubusercontent.com/101736358/184897905-5f8c620a-b9bf-4869-8754-76cf9764a769.png)
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+**후기 모아보기 페이지**
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- 다른 유저가 남긴 후기를 확인할 수 있습니다. 후기 뿐만 아니라 상품에 대한 별점, 후기 사진들을 모아볼 수 있습니다.
 
-### Code Splitting
+![image](https://user-images.githubusercontent.com/101736358/184898098-7ef43d2b-bbac-422f-85c5-6a02bb09cc91.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+### 💙 로그인 한 유저
 
-### Analyzing the Bundle Size
+**설문조사 페이지**
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+- 설문조사를 통해 자신에게 맞는 구독 서비스들을 홈화면에 추천받을 수 있습니다.
 
-### Making a Progressive Web App
+![image](https://user-images.githubusercontent.com/101736358/184898472-7daab7bf-20e7-4c44-9ddd-c102615bdce1.png)
+![image](https://user-images.githubusercontent.com/101736358/184898582-07462701-ad98-40a5-873a-3c1fb53dc7f6.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+**후기 작성**
 
-### Advanced Configuration
+- 상품페이지에서 후기 작성하기 를 클릭하면
+![image](https://user-images.githubusercontent.com/101736358/184899006-9c733772-f6dd-41b5-9b63-02ce6d10757d.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+후기를 작성할 수 있는 모달이 나오면서 후기를 작성할 수 있습니다.
+![image](https://user-images.githubusercontent.com/101736358/184898948-5a3af95d-fc94-4778-8bef-9ede065f9ca4.png)
 
-### Deployment
+## 👩‍💻 기술 스택
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+<img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white"/> <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/> <img src="https://img.shields.io/badge/styled components-DB7093?style=flat-square&logo=styledcomponents&logoColor=white"/> <img src="https://img.shields.io/badge/KaKao-FFCD00?style=flat-square&logo=kakao&logoColor=white"/>
+<img src ="https://img.shields.io/badge/Recoil-f26b00?style=flat-square&logo=Recoil&logoColor=white)"/>
+ <img src="https://img.shields.io/badge/Axios-E01B22?style=flat-square"/>
+<br/>
+<br/>
 
-### `npm run build` fails to minify
+## 😎 사용한 라이브러리
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- react-router-dom
+- styled-components
+- recoil-persist
+- swiper
+
+## 🔧 커뮤니케이션 툴 / 배포
+
+<img src="https://img.shields.io/badge/Postman-FF6C37?style=flat-square&logo=Postman&logoColor=white"/> <img src="https://img.shields.io/badge/Slack-4A154B?style=flat-square&logo=Slack&logoColor=white"/> <img src="https://img.shields.io/badge/Notion-000000?style=flat-square&logo=Notion&logoColor=white"/> <img src="https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=Vercel&logoColor=white"/>
+
+## 🙍 팀원

public/index.html

@@ -14,7 +14,7 @@
  content="현물 정기 구독 큐레이션 서비스 Founder"
  />
  <meta property="og:image" content="%PUBLIC_URL%/banner.png" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/founder.png" />
+ <link rel="shortcut icon" href="%PUBLIC_URL%/founder.png" />
  <link
  rel="stylesheet"
  as="style"

src/App.js

@@ -10,29 +10,24 @@ import SurveyPage from './pages/SurveyPage';
 import SurveyIntroPage from './pages/SurveyIntroPage';
 import BrandDetailPage from './pages/BrandDetailPage';
 import NotFoundPage from './pages/NotFoundPage';
-import axios from 'axios';
 import { axiosBasic } from './API';
 
 function App() {
-
  const KakaoRefresh = async () => {
  try {
- const response = await axiosBasic.post(
- 'api/token/refresh',
- { refresh: `${localStorage.getItem('refreshtoken')}` }
- );
+ const response = await axiosBasic.post('api/token/refresh', {
+ refresh: `${localStorage.getItem('refreshtoken')}`,
+ });
  console.log(response.data);
  console.log('리프레쉬 성공');
- 
+
  localStorage.setItem('accesstoken', response.data.access);
  localStorage.setItem('refreshtoken', response.data.refresh);
  setTimeout(KakaoRefresh, 1000 * 60 * 4);
  } catch (e) {
  console.log(e);
  console.log('리프레쉬 불가');
  }
-
-
  };
  // checkAccessToken(localStorage.refreshtoken);
 
@@ -48,10 +43,9 @@ function App() {
  }
  );*/
 
- if (performance.navigation.type===1){
+ if (performance.navigation.type === 1) {
  //새로고침하면 바로 로그인 연장(토큰 갱신)
- if(localStorage.accesstoken)
- KakaoRefresh();
+ if (localStorage.accesstoken) KakaoRefresh();
  }
 
  return (

src/components/ItemDetailComponents/ItemDetailPresenter.js

@@ -154,7 +154,7 @@ export const PurchaseText = styled.div`
  color: white;
 `;
 
-export const BoughtText = styled.text`
+export const BoughtText = styled.span`
  width: 116px;
  height: 19px;
  display: flex;
@@ -184,7 +184,7 @@ export const ReviewButton = styled.button`
  border-radius: 4px;
 `;
 
-export const ReviewText = styled.text`
+export const ReviewText = styled.span`
  font-style: normal;
  font-weight: 500;
  font-size: 15.3167px;

src/components/MagazineComponents/TagShow.js

@@ -2,7 +2,7 @@ function TagShow({ tag_arr }) {
  const arraytag = tag_arr.split(',');
 
  const tagArray = () => {
- var array = [];
+ let array = [];
  for (var i = 0; i < arraytag.length - 1; i++) {
  array.push(<span>{arraytag[i]} | </span>);
  }

src/components/MainPageComponents/Banner.js

@@ -5,7 +5,7 @@ import Banner3 from '../../assets/MainPageAssets/Banner3.png';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import BannerButton from './BannerButton';
-import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
 import 'swiper/css/pagination';
 import './Pagination.css';
 import { Link } from 'react-router-dom';

src/components/SharedComponents/BrandCard.js

@@ -1,17 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 import BrandCircle from '../../assets/BrandCircle.png';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { color } from '../../styles/theme';
+
 const BrandCard = ({ brandName, brandLogo, id, comingsoon }) => {
+ const navigate = useNavigate();
+
+ function clickBrand() {
+ if (id != undefined) {
+ navigate(`/branddetail/${id}`);
+ }
+ }
+
  return (
- <Link to={`/branddetail/${id}`}>
- <BrandCardContainer>
- <BrandLogoBackground src={BrandCircle}></BrandLogoBackground>
- <BrandLogo src={brandLogo} loading="lazy" />
- <BrandName comingsoon={comingsoon}>{brandName}</BrandName>
- </BrandCardContainer>
- </Link>
+ <BrandCardContainer onClick={clickBrand}>
+ <BrandLogoBackground src={BrandCircle} />
+ <BrandLogo src={brandLogo} loading="lazy" />
+ <BrandName comingsoon={comingsoon}>{brandName}</BrandName>
+ </BrandCardContainer>
  );
 };
 
@@ -22,6 +29,7 @@ const BrandCardContainer = styled.div`
  flex-direction: column;
  align-items: center;
  position: relative;
+ cursor: pointer;
 `;
 
 const BrandLogoBackground = styled.img`

src/components/SharedComponents/NullBrand.js

@@ -0,0 +1,29 @@
+import BrandCard from './BrandCard';
+import comingsoon from '../../assets/MainPageAssets/comingsoon.png';
+
+const NullBrand = ({ num }) => {
+ const comingSoon = (num) => {
+ let array = [];
+ let lineNum = 1;
+
+ if (num > 5) {
+ lineNum = 2;
+ }
+
+ for (let i = 0; i < 5 * lineNum - num; i++) {
+ array.push(
+ <BrandCard
+ brandName="커밍쑨"
+ brandLogo={comingsoon}
+ comingsoon={true}
+ />
+ );
+ }
+
+ return array;
+ };
+
+ return num < 10 && num > 0 && num != 5 && <>{comingSoon(num)}</>;
+};
+
+export default NullBrand;

src/components/SharedComponents/RefreshToken.js

@@ -1,9 +1,6 @@
 import { useRecoilState } from 'recoil';
 import { loginState } from '../../recoil';
 import axios from 'axios';
-import kakaologin from '../../pages/KakaoLoginHandlerPage';
-
-//console.log(localStorage.getItem('accesstoken'));
 
 export const KakaoRefresh = async () => {
  const [loggedin, setLoggedIn] = useRecoilState(loginState);
@@ -27,27 +24,4 @@ export const KakaoRefresh = async () => {
 };
 
 export default KakaoRefresh;
-/*
-export const requestAccessToken = async (refresh_token) => {
- return await axios
- .post(`https://found-er.co.kr/api/token/refresh`, {
- refresh: refresh_token,
- })
- .then((response) => {
- localStorage.setItem("accestoken", response.data.access)
- console.log(response.data.access);
- })
- .catch((e) => {
- console.log(e.response.data);
- });
-};
 
-export const checkAccessToken = async (refresh) => {
- if (axios.defaults.headers.common['Authorization'] === undefined) {
- return await requestAccessToken(refresh).then((response) => {
- return response;
- });
- } else {
- return axios.defaults.headers.common['Authorization'].split(' ')[1];
- }
-};*/

src/components/SurveyComponents/Survey.js

@@ -4,7 +4,6 @@ import answerValue from '../../assets/json/answerValue.json';
 import SurveyPart from './SurveyPart';
 import styled from 'styled-components';
 import { color } from '../../styles/theme';
-import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { GenderState } from '../../recoil';
@@ -49,10 +48,8 @@ const Survey = () => {
  setId(id + 1);
  };
 
- console.log(localStorage.accesstoken);
-
  function SubmitSurvey() {
- if (answerSet[0].answer_num === 1) {
+ if (answerSet[0].answer_num == 1) {
  setGender(true);
  } else {
  setGender(false);

src/components/SurveyComponents/SurveyPart.js

@@ -1,10 +1,9 @@
 import styled from 'styled-components';
 import Surveydata from '../../assets/json/Survey.json';
 import answerValue from '../../assets/json/answerValue.json';
-import { color, fontWeight, fontsize } from '../../styles/theme';
-import { useRef, useCallback } from 'react';
+import { color } from '../../styles/theme';
 
-const SurveyPart = ({ selected, selectAnswer, Question, beforeQuestion }) => {
+const SurveyPart = ({ selected, selectAnswer, Question }) => {
  /*
  <button onClick={selectAnswer} id = "1" value ={Surveydata[Question].answer1}>{Surveydata[Question].answer1}</button>
  <button onClick={selectAnswer} id ="2" value ={Surveydata[Question].answer2}>{Surveydata[Question].answer2}</button>
@@ -81,7 +80,7 @@ const QuestionItem = styled.div`
 const SelectionWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
- width: ${(props) => (props.length == 2 ? '723px' : '423px')};
+ width: ${(props) => (props.length == 2 ? '723px' : '430px')};
  column-gap: ${(props) => (props.length == 2 ? '27px' : '23px')};
  row-gap: 27px;
  padding-left: ${(props) => (props.length == 2 ? '98px' : '200px')};
@@ -107,8 +106,8 @@ const AnswerItem = styled.div`
 `;
 
 const Button = styled.button`
- width: ${(props) => (props.length == 2 ? '349px' : '210px')};
- height: ${(props) => (props.length == 2 ? '349px' : '265px')};
+ width: ${(props) => (props.length == 2 ? '349px' : '239px')};
+ height: ${(props) => (props.length == 2 ? '349px' : '270px')};
  object-fit: contain;
  background-image: url(${(props) => props.image});
  background-size: cover;

src/components/TopBarComponents/TopBar.js

@@ -1,11 +1,10 @@
-import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import coolicon from '../../assets/TopBarAssets/coolicon.png';
 import whiteCoolicon from '../../assets/TopBarAssets/whiteCoolicon.png';
 import TopBarButton from './TopBarButton';
 import { useRecoilState } from 'recoil';
 import { menuOpenState } from '../../recoil';
-import { color, fontsize, fontWeight } from '../../styles/theme';
+import { color, fontWeight } from '../../styles/theme';
 import { Link } from 'react-router-dom';
 import { loginState } from '../../recoil';