codeit-boost-ds-1 · yyrin · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
diff --git a/로그인 페이지/package.json b/로그인 페이지/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "exercise-02-04",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "5.3.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/로그인 페이지/public/index.html b/로그인 페이지/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>로그인</title>
+</head>
+
+<body>
+	<div id="root"></div>
+</body>
+
+</html>
diff --git a/로그인 페이지/src/App.js b/로그인 페이지/src/App.js
@@ -0,0 +1,89 @@
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
+import Button from './Button';
+import Input from './Input';
+import Label from './Label';
+import Link from './Link';
+import KakaoButton from './KakaoButton';
+import codeitLogo from './codeit.png';
+
+const THEMES = {
+  light: {
+    backgroundColor: '#ffffff',
+    color: '#000000',
+  },
+  dark: {
+    backgroundColor: '#03040c',
+    color: '#ffffff',
+  },
+};
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Noto Sans KR', sans-serif;
+    background-color: ${({ theme }) => theme.backgroundColor};
+    color: ${({ theme }) => theme.color};
+  }
+`;
+
+const Logo = styled.img`
+  display: block;
+  margin: 16px auto;
+  width: 200px;
+`;
+
+const Description = styled.div`
+  color: #848187;
+  text-align: center;
+`;
+
+const Container = styled.div`
+  width: 400px;
+  margin: 40px auto;
+
+  ${Input} {
+    margin-bottom: 16px;
+  }
+
+  ${Button} {
+    width: 100%;
+    margin: 8px 0;
+  }
+`;
+
+function App() {
+  return (
+    <ThemeProvider theme={THEMES['dark']}>
+      <GlobalStyle />
+        <Container>
+          <Logo src={codeitLogo} alt="codeit" />
+          <Description>
+            회원이 아니신가요? <Link href="#">회원가입 하기</Link>
+          </Description>
+          <form>
+            <Label htmlFor="email">이메일</Label>
+            <Input
+              type="email"
+              id="email"
+              name="email"
+              placeholder="[email protected]"
+            />
+            <Label htmlFor="password">비밀번호</Label>
+            <Input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="비밀번호"
+            />
+            <Button type="submit">로그인 하기</Button>
+          </form>
+          <KakaoButton />
+        </Container>
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/로그인 페이지/src/Button.js b/로그인 페이지/src/Button.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import Spinner from './Spinner';
+
+function BaseButton({ loading, children, ...props }) {
+  return (
+    <button {...props}>{loading ? <Spinner /> : children}</button>
+  );
+}
+
+const Button = styled(BaseButton)`
+  background-color: #6500c3;
+  border: none;
+  border-radius: ${({ round }) => (round ? `9999px` : `8px`)};
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 16px;
+
+  &:hover,
+  &:active {
+    background-color: #7760b4;
+  }
+`;
+
+export default Button;
diff --git a/로그인 페이지/src/Input.js b/로그인 페이지/src/Input.js
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+const Input = styled.input`
+  background-color: ${({ theme }) => theme.backgroundColor};
+  border: none;
+  border-bottom: 2px solid ${({ error }) => (error ? `#f44336` : `#eeeeee`)};
+  color: ${({ theme }) => theme.color};
+  display: block;
+  font-size: 16px;
+  outline: none;
+  padding: 8px 0;
+  width: 100%;
+
+  ${({ error }) =>
+    !error &&
+    `
+    &:focus {
+      border-bottom: 2px solid #7760b4;
+    }
+`}
+
+  &::placeholder {
+    color: #c4c5cd;
+  }
+`;
+
+export default Input;
diff --git a/로그인 페이지/src/KakaoButton.js b/로그인 페이지/src/KakaoButton.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import Button from './Button';
+import kakaoIcon from './kakao.svg';
+
+const Icon = styled.img`
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fee500;
+  color: rgba(0, 0, 0, 0.8);
+
+  ${Icon} {
+    margin-right: 8px;
+  }
+
+  &:hover {
+    background-color: #fee500;
+  }
+`;
+
+function KakaoButton({ className }) {
+  return (
+    <StyledButton className={className}>
+      <Icon src={kakaoIcon} alt="kakao icon" />
+      카카오 로그인
+    </StyledButton>
+  );
+}
+
+export default KakaoButton;
diff --git a/로그인 페이지/src/Label.js b/로그인 페이지/src/Label.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Label = styled.label`
+  color: #e1c6f7;
+`;
+
+export default Label;
diff --git a/로그인 페이지/src/Link.js b/로그인 페이지/src/Link.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Link = styled.a`
+  color: #6500c3;
+  font-weight: bold;
+`;
+
+export default Link;
diff --git a/로그인 페이지/src/Spinner.js b/로그인 페이지/src/Spinner.js
@@ -0,0 +1,19 @@
+import styledComponents, { keyframes } from 'styled-components';
+import spinnerImg from './spinner.svg';
+
+const rotate = keyframes`
+    100% {
+      transform: rotate(360deg);
+    }
+`;
+
+function BaseSpinner({ className }) {
+  return <img className={className} src={spinnerImg} alt="spinner" />;
+}
+
+const Spinner = styledComponents(BaseSpinner)`
+  animation: ${rotate} 0.5s linear infinite;
+  width: 16px;
+`;
+
+export default Spinner;
diff --git a/로그인 페이지/src/codeit.png b/로그인 페이지/src/codeit.png
diff --git a/로그인 페이지/src/index.js b/로그인 페이지/src/index.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+import App from './App';
+
+const root = document.getElementById('root');
+ReactDOM.render(<App />, root);
diff --git a/로그인 페이지/src/kakao.svg b/로그인 페이지/src/kakao.svg
diff --git a/로그인 페이지/src/spinner.svg b/로그인 페이지/src/spinner.svg
diff --git a/커뮤니티/package.json b/커뮤니티/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "codethat",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "6",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/커뮤니티/public/imgs/default_1.jpg b/커뮤니티/public/imgs/default_1.jpg
diff --git a/커뮤니티/public/imgs/default_2.jpg b/커뮤니티/public/imgs/default_2.jpg
diff --git a/커뮤니티/public/imgs/default_3.jpg b/커뮤니티/public/imgs/default_3.jpg
diff --git a/커뮤니티/public/index.html b/커뮤니티/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Codethat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/커뮤니티/src/Main.js b/커뮤니티/src/Main.js
@@ -0,0 +1,33 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import App from './components/App';
+import HomePage from './pages/HomePage';
+import CoursePage from './pages/CoursePage';
+import CourseListPage from './pages/CourseListPage';
+import QuestionPage from './pages/QuestionPage';
+import QuestionListPage from './pages/QuestionListPage';
+import WishlistPage from './pages/WishlistPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+          <Route path="courses">
+            <Route index element={<CourseListPage />} />
+            <Route path=":courseSlug" element={<CoursePage />} />
+          </Route>
+          <Route path="questions">
+            <Route index element={<QuestionListPage />} />
+            <Route path=":questionId" element={<QuestionPage />} />
+          </Route>
+          <Route path="wishlist" element={<WishlistPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Main;