Merge branch 'develop' into fix/deploy

package.json

@@ -9,6 +9,7 @@
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
+ "react-responsive": "^10.0.0",
  "react-router-dom": "^6.23.0",
  "react-scripts": "5.0.1",
  "styled-components": "^6.1.9",

src/App.js

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Main from "./pages/main/main";
+import Login from "./pages/login/login"
 import './App.css';
 import styled from "styled-components";
 
@@ -9,6 +10,7 @@ function App() {
  <Router>
  <Routes>
  <Route path="/" element={<Main />} />
+ <Route path="/login" element={<Login />} />
  </Routes>
  </Router>
  </Body>
@@ -18,5 +20,4 @@ function App() {
 export default App;
 
 const Body = styled.div`
- margin: 0 auto;
 `;

src/font.styles.js

@@ -0,0 +1,13 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+ @import url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+
+ body {
+ font-family: 'Pretendard-Regular';
+ font-weight: 400;
+ font-style: normal;
+ }
+`;
+
+export default GlobalStyle;

src/index.css

@@ -2,7 +2,7 @@ body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ sans-serif, 'Pretendard-Regular';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +11,10 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
 }
+
+@font-face {
+ font-family: 'Pretendard-Regular';
+ src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+}

src/pages/login/login.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Login = () => {
+ return (
+ <div>
+ <h1>로그인 페이지</h1>
+ <p>여기에 로그인 폼을 추가하세요.</p>
+ </div>
+ );
+};
+
+export default Login;

src/pages/main/main.js

@@ -1,15 +1,76 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import * as styles from "./main.styles";
 
-function Main(){
+function Main() {
+ const [issue, setIssue] = useState('');
+ const [inference, setInference] = useState('');
+ const [solution, setSolution] = useState('');
+ const [result, setResult] = useState('');
 
- return(
- <styles.Container>
- <styles.HeaderContainer>
- <styles.HeaderTitle>AutoDevLog</styles.HeaderTitle>
- </styles.HeaderContainer>
- </styles.Container>
- )
+ const handleGenerate = () => {
+ // 결과를 생성하는 로직 처리
+ setResult('결과 값이 나옵니다.');
+ };
+
+ const handleReset = () => {
+ setIssue('');
+ setInference('');
+ setSolution('');
+ setResult('');
+ };
+
+ return (
+ <styles.Container>
+ <styles.HeaderContainer>
+ <Link to="/login" style={{ textDecoration: 'none', color: 'inherit' }}>
+ <styles.HeaderTitle>로그인</styles.HeaderTitle>
+ </Link>
+ </styles.HeaderContainer>
+ <styles.BodyContainer>
+ <styles.BodyContentContainer>
+ <styles.BodyTitle>
+ AudoDevLog
+ </styles.BodyTitle>
+ <styles.BodyText>
+ 오늘 하루 공부 한걸 작성해보세요
+ </styles.BodyText>
+ </styles.BodyContentContainer>
+ </styles.BodyContainer>
+ <styles.FormContainer>
+ <styles.FormTitle>키워드</styles.FormTitle>
+ <styles.FormText>키워드를 입력하세요</styles.FormText>
+ <styles.FormTitle>ISSUE</styles.FormTitle>
+ <styles.Input
+ type="text"
+ value={issue}
+ onChange={(e) => setIssue(e.target.value)}
+ />
+ <styles.FormTitle>INFERENCE</styles.FormTitle>
+ <styles.Input
+ type="text"
+ value={inference}
+ onChange={(e) => setInference(e.target.value)}
+ />
+ <styles.FormTitle>SOLUTION</styles.FormTitle>
+ <styles.Input
+ type="text"
+ value={solution}
+ onChange={(e) => setSolution(e.target.value)}
+ />
+ <styles.ButtonContainer>
+ <styles.Button onClick={handleGenerate}>생성하기</styles.Button>
+ </styles.ButtonContainer>
+ <styles.ResultBox>
+ <styles.BodyText>{result}</styles.BodyText>
+ </styles.ResultBox>
+ <styles.ButtonContainer>
+ <styles.Button onClick={handleReset}>다시 생성하기</styles.Button>
+ <styles.Button style={{ marginLeft: "10px" }}>전송하기</styles.Button>
+ </styles.ButtonContainer>
+ </styles.FormContainer>
+ </styles.Container>
+ );
 }
 
-export default Main;
+export default Main;

src/pages/main/main.styles.js

@@ -1,7 +1,90 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
-export const Container = styled.div``
+export const Container = styled.div`
+ font-family: Arial, sans-serif;
+ margin: 0 auto;
+`;
 
-export const HeaderContainer = styled.div``
+export const HeaderContainer = styled.div`
+ background-color: #fffff;
+ margin: 0 auto;
+ max-width: 50%;
+`;
 
-export const HeaderTitle = styled.div``
+export const HeaderTitle = styled.p`
+ text-align: right;
+`;
+
+export const BodyContainer = styled.div`
+ padding: 20px;
+ background-color: #EDF1F5;
+`;
+
+export const BodyContentContainer = styled.div`
+ margin: 0 auto;
+ max-width: 50%;
+`;
+
+export const BodyTitle = styled.h2`
+ text-align: left;
+`;
+
+export const BodyText = styled.p`
+`;
+
+export const FormContainer = styled.div`
+ padding: 20px;
+ max-width: 50%;
+ margin: 0 auto;
+ margin-top: 20px;
+`;
+
+export const FormTitle = styled.h3`
+ text-align: left;
+`;
+
+export const FormText = styled.p`
+ text-align: left;
+`;
+
+export const Input = styled.input`
+ width: 100%;
+ background-color: #EDF1F5;
+ padding: 10px;
+ margin: 2px 0;
+ border-radius: 4px;
+ border: 0.3px solid #ccc;
+ box-sizing: border-box; /* 입력 필드의 최대 너비 (선택 사항) */
+`;
+
+export const ButtonContainer = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+`;
+
+export const Button = styled.button`
+ padding: 10px 20px;
+ border-radius: 4px;
+ border: none;
+ background-color: white;
+ color: black;
+ cursor: pointer;
+ font-weight: bold;
+ border: 0.3px solid #ccc;
+ margin-left: 10px;
+
+ &:hover {
+ background-color: #EDF1F5;
+ }
+`;
+
+export const ResultBox = styled.div`
+ background-color: #EDF1F5; /* 배경색 */
+ padding: 20px; /* 패딩 */
+ border-radius: 10px; /* 둥근 모서리 */
+ margin-top: 10px; /* 상단 여백 */
+ text-align: left; /* 텍스트 중앙 정렬 */
+ max-width: 100%; /* 최대 너비 */
+ box-sizing: border-box; /* 수평 중앙 정렬 */
+`;