DO-SOPT-WEB · nayujin-dev · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 8, 2023
diff --git a/assignment/thinking.md → assignment/week01/thinking.md b/assignment/thinking.md → assignment/week01/thinking.md
diff --git a/assignment/week03/thinking.md b/assignment/week03/thinking.md
@@ -0,0 +1,42 @@
+## 🖤 리액트에 대하여
+
+#### 컴포넌트는 어떤 기준과 방법으로 분리하는 것이 좋을까?
+- `재사용성`과 `복잡성`
+    - 코드가 재사용될 가능성이 있다면 컴포넌트 분리를 고민해보자
+    - 코드가 복잡하다면, 가독성을 개선하고 유지보수 할 수 있도록 컴포넌트 분리를 고민해보자
+- `Presentational Components` vs `Container Components`
+    - 과거 가장 유명한 기준 중 하나. 현재는 이 패턴 사용 지양
+    - 로직과 view를 분리하기 위해 등장한 개념
+        - 그를 분리하여 좀 더 재사용이 가능한 형태로 강제함
+    - 표현(마크업)과 로직을 분리해 복잡도를 낮춤. 
+
+
+#### 좋은 상태 관리란 무엇일까?
+- 상태관리의 중요성: 불필요한 리렌더링 및 유지보수 개선
+- 좋은 상태관리란?
+    - 무분별한 전역상태관리는 지양
+    - 상태 코드는 연관 컴포넌트들과 최대한 가까이 배치 지향
+    - 서버의 데이터를 전역 상태에 저장할때는, 명확한 전략을 갖도록 하자
+
+#### 렌더링을 효과적으로 관리하는 방법은 무엇이 있을까?
+- 적절한 위치에 state를 선언한다
+- 객체 타입의 state 변형하지 않기
+- 컴포넌트 맴핑시 key 값 명시
+- shouldComponentUpdate() 메소드 활용
+- React.memo()를 통한 메모이제이션
+- useMemo(), useCallback() 활용
+
+
+#### Props Drilling이란 무엇이고 이를 어떻게 해결할 수 있는가?
+- `Props Drilling`: 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해, 중간 컴포넌트를 통해 프로퍼티를 내려주는 것
+    - 이때, 중간 컴포넌트는 해당 값을 `직접 사용하지 않는 경우에도`, 하위에 전달하기 위해 프로퍼티를 받아서 전달해야한다는 불편함이 존재.
+    - 그 이외의 단점
+        1. 프로퍼티 데이터 형식 변경의 불편함
+        2. 누락된 프로퍼티 인지의 어려움
+        3. 프로퍼티 이름 변경 추적의 어려움
+- 해결책
+    1. Context API 활용
+    2. Redux 또는 다른 상태 관리 라이브러리 사용
+    3. Custom Hooks
+    4. Render Props 패턴과 Children props 활용
+
diff --git a/assignment/week03/travel-recommendation/.eslintrc.cjs b/assignment/week03/travel-recommendation/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/assignment/week03/travel-recommendation/.gitignore b/assignment/week03/travel-recommendation/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/assignment/week03/travel-recommendation/README.md b/assignment/week03/travel-recommendation/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/assignment/week03/travel-recommendation/index.html b/assignment/week03/travel-recommendation/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="src/index.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/assignment/week03/travel-recommendation/package.json b/assignment/week03/travel-recommendation/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "travel-recommendation",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/assignment/week03/travel-recommendation/public/images/미국.jpg b/assignment/week03/travel-recommendation/public/images/미국.jpg
diff --git a/assignment/week03/travel-recommendation/public/images/스위스.jpg b/assignment/week03/travel-recommendation/public/images/스위스.jpg
diff --git a/assignment/week03/travel-recommendation/public/images/일본.jpg b/assignment/week03/travel-recommendation/public/images/일본.jpg
diff --git a/assignment/week03/travel-recommendation/public/images/캐나다.jpg b/assignment/week03/travel-recommendation/public/images/캐나다.jpg
diff --git a/assignment/week03/travel-recommendation/public/images/태국.jpg b/assignment/week03/travel-recommendation/public/images/태국.jpg
diff --git a/assignment/week03/travel-recommendation/public/images/프랑스.jpg b/assignment/week03/travel-recommendation/public/images/프랑스.jpg
diff --git a/assignment/week03/travel-recommendation/public/vite.svg b/assignment/week03/travel-recommendation/public/vite.svg
diff --git a/assignment/week03/travel-recommendation/src/App.jsx b/assignment/week03/travel-recommendation/src/App.jsx
@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import Header from './components/Header'
+import styled, {ThemeProvider} from 'styled-components'
+import GlobalStyle from './styles/GlobalStyle';
+import theme from './styles/theme';
+import BeforeStart from './components/BeforeStart';
+import AfterStart from './components/AfterStart';
+function App() {
+  const [category,setCategory]=useState(-1);
+  const [isStarted,setIsStarted]=useState(false);
+  const [isHome,setIsHome]=useState(true);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle/>
+      <Header isHome={isHome} setIsStarted={setIsStarted} setIsHome={setIsHome} setCategory={setCategory}/>
+      <Container>
+        {isStarted?(
+          <AfterStart
+            setIsStarted={setIsStarted}
+            category={category}
+          />
+        ):(
+          <BeforeStart 
+            isStarted={isStarted}
+            setIsStarted={setIsStarted}
+            category={category}
+            setCategory={setCategory}
+            setIsHome={setIsHome}
+          />
+        )}
+      </Container>
+    </ThemeProvider>
+
+  )
+}
+
+export default App
+
+const Container=styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 50rem;
+  justify-content: center;
+  align-items: center;
+  background-color: pink;
+  margin: 5rem 7rem;
+`
diff --git a/assignment/week03/travel-recommendation/src/assets/react.svg b/assignment/week03/travel-recommendation/src/assets/react.svg
diff --git a/assignment/week03/travel-recommendation/src/components/AfterStart.jsx b/assignment/week03/travel-recommendation/src/components/AfterStart.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import Random from './Random/Random';
+import NonRandom from './NonRandom/NonRandom';
+import Result from './Result/Result';
+
+const AfterStart = ({category, setIsStarted}) => {
+    const [id,setId]=useState(0);
+    const [calculator,setCalculator]=useState([0,0,0]);
+    return (
+        <>
+            {category==='랜덤 추천'?(
+                <Random setIsStarted={setIsStarted}/>
+            ):(
+                id < 3
+                ? <NonRandom 
+                    id={id} setId={setId} 
+                    setIsStarted={setIsStarted} 
+                    calculator={calculator} setCalculator={setCalculator}/>
+                : <Result calculator={calculator}  setIsStarted={setIsStarted}/>
+            )}
+        </>
+    );
+};
+
+export default AfterStart;
diff --git a/assignment/week03/travel-recommendation/src/components/BeforeStart.jsx b/assignment/week03/travel-recommendation/src/components/BeforeStart.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Btn, BtnBox, MainBox, TypeofRecommand,Description } from '../styles/Design';
+
+const BeforeStart = ({isStarted,setIsStarted, category, setCategory, setIsHome}) => {
+    const categoryList=['취향대로 추천', '랜덤 추천'];
+    const onTypeClick=(category)=>{
+        category==='취향대로 추천'?setCategory('취향대로 추천'):setCategory('랜덤 추천');
+        setIsHome(false);
+    }
+    const onBtnClick=()=>{
+        setIsStarted(true);
+    }
+
+    return (
+        <>
+            <Description>원하는 추천 방식을 골라줘!</Description>
+            <MainBox>
+                {category==-1 ? (
+                    categoryList.map((type,index)=>
+                    <TypeofRecommand key={index} onClick={(e)=>onTypeClick(type,e)}>
+                        {type}
+                    </TypeofRecommand>)
+                ):(
+                    <TypeofRecommand selected={true}>
+                        {category}
+                    </TypeofRecommand>
+                )}
+            </MainBox>     
+            <BtnBox>
+                {category!==-1 &&<Btn onClick={onBtnClick}>Start!</Btn>}
+            </BtnBox>
+        </>
+    );
+};
+
+export default BeforeStart;
+
+
diff --git a/assignment/week03/travel-recommendation/src/components/Header.jsx b/assignment/week03/travel-recommendation/src/components/Header.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { GotoHomeBtn } from '../styles/Design';
+import { temporaryAnswer } from './NonRandom/QuestionList';
+
+const Header = ({isHome, setIsHome, setIsStarted, setCategory}) => {
+  const onClickHomeBtn=()=>{
+    setIsStarted(false);
+    setIsHome(true);
+    setCategory(-1);
+
+    temporaryAnswer.map((eachQ,qIdx) => temporaryAnswer[qIdx]=eachQ.map(() => false));
+  }
+  return (
+    <Container>
+      여행지 추천
+      {isHome||<GotoHomeBtn onClick={onClickHomeBtn}>처음으로</GotoHomeBtn>}
+    </Container>
+  );
+};
+
+export default Header;
+
+const Container=styled.div`
+  padding: 1rem;
+  background-color: pink;
+  font-size:5rem;
+
+`
diff --git a/assignment/week03/travel-recommendation/src/components/NonRandom/NonRandom.jsx b/assignment/week03/travel-recommendation/src/components/NonRandom/NonRandom.jsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { BtnBox, MainBox,Description,AnswerBox, Btn, LevelBox } from '../../styles/Design';
+import { questionList, temporaryAnswer } from './QuestionList';
+
+const NonRandom = ({id, setId, setIsStarted, calculator, setCalculator}) => {
+    const [nextBtnContent, setNextBtnContent]=useState('다음으로');
+    const [loaded,isLoaded]=useState(false);
+
+    useEffect(()=>{
+        id>=2 ? setNextBtnContent("결과보기") : setNextBtnContent("다음으로");
+        isLoaded(true);
+    },[id]);
+
+    const onAnswerClick=(idx)=>{
+        const newTemporary = temporaryAnswer[id].map((each,i)=>idx===i ? true : false);
-        const newTemporary = temporaryAnswer[id].map((each,i)=>idx===i ? true : false);
+        const newTemporary = temporaryAnswer[id].map((each,i)=>return idx === i);
-        const newTemporary = temporaryAnswer[id].map((each,i)=>idx===i ? true : false);
+        const newTemporary = temporaryAnswer[id].map((each,i)=>return idx === i);
+        temporaryAnswer[id]=newTemporary;
+        calculator[id]=idx;
+        setCalculator([...calculator]);
+    }
+
+    const onNextClick=()=>{
+        setId(id+1);
+    }
+    const onBackClick=()=>{
+        id-1>=0
+            ? setId(id-1) 
+            : (setIsStarted(false), setId(0))       
+    }
+    return (
+        <>
+            <Description>{questionList[id].question}</Description>
+            <LevelBox>
+                {id+1} / 3
-                {id+1} / 3
+                {id+1} / {TOTAL_STAGE}
-                {id+1} / 3
+                {id+1} / {TOTAL_STAGE}
+            </LevelBox>
+            <MainBox>
+                {loaded && questionList[id].answer.map((each, idx)=>
+                    <AnswerBox 
+                        key={idx} 
+                        onClick={(e)=>onAnswerClick(idx,e)}
+                        btncolor={temporaryAnswer[id][idx]}
+                        >
+                        {each}
+                    </AnswerBox>    
+                )}
+            </MainBox>     
+            <BtnBox>
+                <Btn onClick={onBackClick}>이전으로</Btn>
+                {temporaryAnswer[id].some((element)=> element==true)
+                    ? <Btn onClick={onNextClick}>{nextBtnContent}</Btn> 
+                    : <Btn disabled>{nextBtnContent}</Btn>}
+            </BtnBox>
+    </>
+
+    );
+};
+
+export default NonRandom;
+
diff --git a/assignment/week03/travel-recommendation/src/components/NonRandom/QuestionList.jsx b/assignment/week03/travel-recommendation/src/components/NonRandom/QuestionList.jsx
@@ -0,0 +1,19 @@
+export const questionList=[{
+    id:1,
+    question:'어느 지역을 가고 싶어?',
+    answer:['유럽','북미','아시아']
+},{
+    id:2,
+    question:'어떤 컨셉의 여행을 좋아해?',
+    answer:['힐링/휴양','관광/활동']
+},{
+    id:3,
+    question:'누구랑 함께 가?',
+    answer:['혼자','친구/연인','가족']
+}];
+
+export const temporaryAnswer = [
+    [false,false,false],
+    [false,false],
+    [false,false,false],
+]