[BAZ] 같이 바다보러갈래? 구현

package.json

@@ -3,23 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "4.12.3",
     "axios": "0.21.0",
     "classnames": "2.2.6",
     "cross-env": "7.0.2",
+    "crypto-js": "4.0.0",
     "fontfaceobserver": "2.1.0",
     "husky": "4.3.0",
     "lodash": "4.17.20",
     "node-plop": "0.26.2",
     "node-sass": "4.14.1",
     "plop": "2.7.4",
-    "qs": "6.9.4",
+    "qs": "6.9.6",
     "react": "17.0.1",
     "react-app-polyfill": "2.0.0",
     "react-dom": "17.0.1",
     "react-helmet-async": "1.0.7",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
-    "react-scripts": "4.0.0",
+    "react-scripts": "4.0.2",
     "react-test-renderer": "17.0.1",
     "redux": "4.0.5",
     "redux-saga": "1.1.3",
@@ -31,12 +33,14 @@
     "stylelint-order": "4.1.0",
     "stylelint-scss": "3.18.0",
     "ts-node": "9.0.0",
-    "typescript": "4.0.5"
+    "typescript": "4.0.5",
+    "xml-js": "1.6.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.0",
     "@types/classnames": "2.2.10",
+    "@types/crypto-js": "4.0.1",
     "@types/fontfaceobserver": "0.0.6",
     "@types/jest": "26.0.15",
     "@types/lodash": "4.14.162",
@@ -124,5 +128,5 @@
       }
     }
   },
-  "proxy":"https://openapi.naver.com"
+  "proxy": "https://openapi.naver.com"
 }

src/App.tsx

@@ -1,8 +1,26 @@
 /* External dependencies */
+import { IndexContextProvider } from 'components/index/IndexContext';
+import IndexPage from 'pages';
+import GamePage from 'pages/game';
+import ResultPage from 'pages/result';
 import React from 'react';
+import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 
 function App() {
-  return <div>Hello World!</div>;
+  return (
+    <>
+    <IndexContextProvider>
+      <Router>
+        <Switch>
+          <Route exact path="/game" component={GamePage} />
+          <Route exact path="/result" component={ResultPage} />
+            <Route path="/" component={IndexPage} />
+        </Switch>
+      </Router>
+      </IndexContextProvider>
+
+    </>
+  );
 }
 
 export default App;

src/components/OceanSelection.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import OceanInfo from 'types/OceanInfo';
+
+interface OceanSelectionProps extends React.HTMLProps<HTMLDivElement> {
+  ocean: OceanInfo;
+  isResult?: boolean;
+}
+
+// TODO: 선택시 인터렉션 필요
+const OceanSelection = ({ ocean, isResult, onClick }: OceanSelectionProps) => (
+  <Selection isResult={isResult} onClick={onClick}>
+    <img src={ocean.imageSrc} alt="ocean" />
+    <Title>{ocean.name}</Title>
+    <Description>{ocean.description}</Description>
+  </Selection>
+);
+
+export default OceanSelection;
+
+const Selection = styled.div<{ isResult?: boolean }>`
+  position: relative;
+  width: 50%;
+  height: 100%;
+  background-color: blue;
+  border: 1px solid black;
+  cursor: ${props => (props.isResult ? '' : 'pointer')};
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const Title = styled.div`
+  position: absolute;
+  width: 100%;
+  top: 30px;
+  color: white;
+  text-align: center;
+  font-size: 30px;
+  font-weight: bold;
+`;
+
+const Description = styled.div`
+  position: absolute;
+  width: 100%;
+  bottom: 30px;
+  color: white;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+`;

src/components/index/IndexContext.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, Dispatch, useContext, useReducer } from 'react';
+
+export type State = {
+  name: string;
+};
+
+type Action = { type: 'SET_NAME'; name: string };
+
+type IndexDispatch = Dispatch<Action>;
+
+const IndexStateContext = createContext<State | undefined>(undefined);
+const IndexDispatchContext = createContext<IndexDispatch | undefined>(
+  undefined,
+);
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_NAME':
+      return {
+        name: action.name,
+      };
+    default:
+      throw new Error('Unhandled action');
+  }
+}
+
+export function IndexContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const initialState: State = { name: '' };
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <IndexStateContext.Provider value={state}>
+      <IndexDispatchContext.Provider value={dispatch}>
+        {children}
+      </IndexDispatchContext.Provider>
+    </IndexStateContext.Provider>
+  );
+}
+
+export function useIndexState() {
+  const state = useContext(IndexStateContext);
+  if (!state) throw new Error('IndexProvider not found');
+  return state;
+}
+
+export function useIndexDispatch() {
+  const dispatch = useContext(IndexDispatchContext);
+  if (!dispatch) throw new Error('IndexProvider not found');
+  return dispatch;
+}

src/components/index/OceanBackground.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import ocean from '../../assets/ocean.jpg';
+
+const OceanBackground = () => (
+  <>
+    <svg
+      width="0"
+      height="0"
+      xmlns="http://www.w3.org/2000/svg"
+      xlinkHref="http://www.w3.org/1999/xlink"
+    >
+      <filter id="water">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency=".05 .05"
+          numOctaves="1"
+          result="noise1"
+        />
+        <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
+          <animate
+            attributeName="values"
+            from="0"
+            to="360"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </feColorMatrix>
+        <feDisplacementMap
+          xChannelSelector="R"
+          yChannelSelector="G"
+          scale="7"
+          in="SourceGraphic"
+          in2="noise2"
+        />
+      </filter>
+    </svg>
+    <BackgroundImg src={ocean} alt="ocean Image" />
+  </>
+);
+
+export default OceanBackground;
+
+const BackgroundImg = styled.img`
+  width: 105vw;
+  height: 105vh;
+  position: absolute;
+  top: -5vh;
+  left: -5vw;
+  object-fit: cover;
+  filter: url(#water);
+  position: absolute;
+  z-index: -1;
+`;

src/components/index/index.tsx

@@ -0,0 +1,88 @@
+import { Button, Input } from 'antd';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { useIndexDispatch } from './IndexContext';
+
+interface IndexProps {
+  isValid: boolean;
+  name: string;
+}
+
+function NameExistComp(props) {
+  const name = props.name;
+  return (
+    <>
+      <Title>{name} 님의 초대</Title>;
+      <Link to="/game">
+        <StartButton>🎮start🎮</StartButton>
+      </Link>
+    </>
+  );
+}
+
+function NameNotExistComp() {
+  const [value, setValue] = useState('');
+  const dispatch = useIndexDispatch();
+
+  const handleSubmit = () => {
+    dispatch({ type: 'SET_NAME', name: value });
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <StyledInput
+          value={value}
+          placeholder="이름을 입력해 주세요."
+          onChange={e => setValue(e.target.value)}
+        />
+        <br />
+        <Link to="/game">
+          <StartButton onClick={handleSubmit}>🎮start🎮</StartButton>
+        </Link>
+      </form>
+    </>
+  );
+}
+
+function Contents({ isValid, name }: IndexProps) {
+  if (isValid) {
+    return <NameExistComp name={name} />;
+  } else {
+    return <NameNotExistComp />;
+  }
+}
+
+function IndexContents(props: IndexProps) {
+  const isValid = props.isValid;
+  const name = props.name;
+  return (
+    <>
+      <Contents isValid={isValid} name={name} />
+    </>
+  );
+}
+
+export default IndexContents;
+
+const Title = styled.div`
+  margin-top: 400px;
+  font-weight: bolder;
+  font-size: 30pt;
+`;
+
+const StyledInput = styled(Input)`
+  margin-top: 400px;
+  width: 200px;
+  height: 50px;
+`;
+
+const StartButton = styled(Button)`
+  margin-top: 20px;
+  width: 200px;
+  height: 50px;
+  font-weight: bolder;
+  font-size: 20pt;
+  text-align: center;
+`;

src/index.tsx

@@ -10,6 +10,7 @@ import { HelmetProvider } from 'react-helmet-async';
 import App from 'App';
 import * as serviceWorker from 'serviceWorker';
 import 'sanitize.css/sanitize.css';
+import 'antd/dist/antd.css';
 
 ReactDOM.render(
   <HelmetProvider>