Merge pull request #31 from Hongmoon-gak/feature/community/write

[FEAT] 게시글 작성 태그 제외 구현 및 CSS (#24)

job1/package.json

@@ -12,7 +12,7 @@
         "react-kakao-login": "^2.1.1",
         "react-router-dom": "^6.14.1",
         "react-scripts": "5.0.1",
-        "styled-components": "^6.0.4",
+        "styled-components": "^6.0.7",
         "web-vitals": "^2.1.4"
     },
     "scripts": {

job1/src/Community/PostForm.js

@@ -0,0 +1,179 @@
+import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import axios from "axios";
+
+import styled from "styled-components";
+
+function PostForm() {
+  //const getAuthor = axios.get(`${}/url`,{id});
+  const [post, setPost] = useState({
+    id:'',
+    title: '',
+    contents: '',
+    author: '', //{getAuthor} 사용자 계정 토큰 받아오기
+    date:'',
+    likes: '0',
+  });
+
+  const { id, title, contents, author, date, likes } = post;
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+    setPost({
+      ...post,
+      [name]: value,
+    });
+  };
+
+  const navigate = useNavigate();
+  const submit = async (e) => {
+    e.preventDefault();
+    if (title === '') { // 제목, 내용 입력되지 않은 경우
+      alert('제목을 입력해주세요.');
+      return;
+    } else if(contents === '') {
+      alert('내용을 입력해주세요');
+      return;
+    }
+
+    const currentTime = new Date();
+    const newPost = setPost({
+      ...post,
+      date: currentTime,
+    })
+    /*
+    try{
+      const res = await axios.post(`${}/url`, {newPost})
+      alert('등록되었습니다');
+      navigate('/community'); // 커뮤니티, 이전페이지, 작성한 게시글 중 어디로 링크할지 논의 필요
+      console.log({ ...post, date: currentTime });
+    } catch(err){
+      alert('오류가 발생했습니다. 다시 시도해주세요.')
+    }
+    */
+  };
+
+  const cancel = (e) => {
+    e.preventDefault()
+    alert('취소되었습니다')
+    navigate(-1);
+  };
+
+  return (
+    <Wrapper>
+      <ColContainer>
+        <P>글쓰기</P>
+        <Hr/>
+        <Title 
+          type="text" 
+          name="title" 
+          placeholder="제목" 
+          value={title}
+          onChange={onChange}
+        />
+        <Contents 
+          name="contents" 
+          placeholder="내용을 입력하세요"
+          value={contents}
+          onChange={onChange}
+        ></Contents>
+      </ColContainer>
+
+      <ColContainer>
+        <P>태그 선택</P>
+        <Hr/>
+        <RowContainer>
+          {/* 태그 */}
+        </RowContainer>
+        <Hr/>
+        <RowContainer>
+          <SubmitBtn onClick={submit}>등록</SubmitBtn>
+          <CancelBtn onClick={cancel}>취소</CancelBtn>
+        </RowContainer>
+      </ColContainer>
+    </Wrapper>
+  );
+}
+
+export default PostForm;
+
+const Wrapper = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 6rem 0;
+`
+const ColContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const RowContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+const Title = styled.input`
+  width: 54.25rem;
+  height: 3.625rem;
+  border: 1px solid #A7A7A7;
+  box-sizing: border-box;
+  padding: 1rem 2rem;
+  font-family: DM Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 500;
+  &: focus {outline: none;} // focus일때 outline 제거
+`
+const Contents = styled.textarea`
+  width: 54.25rem;
+  height: 38.8125rem;
+  border: 1px solid #A7A7A7;
+  box-sizing: border-box;
+  margin: 1rem 0 3rem 0;
+  padding: 1.5rem 2rem;
+  font-family: DM Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 500;
+  &: focus {outline: none;} // focus일때 outline 제거
+`
+const SubmitBtn = styled.button`
+  width: 6.9375rem;
+  height: 3.25rem;
+  border-radius: 3.125rem;
+  border: none;
+  background: #31892F;
+  color: #FFF;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  margin: 0.5rem;
+`
+const CancelBtn = styled.button`
+  width: 6.9375rem;
+  height: 3.25rem;
+  border-radius: 3.125rem;
+  border: none;
+  background: #969696;
+  color: #FFF;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  margin: 0.5rem;
+`
+const P = styled.p`
+  margin: 0;
+  font-family: DM Sans;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 700;
+`
+const Hr = styled.hr`
+  width: 54.25rem;
+  margin: 1.5rem 0;
+`

job1/src/Component/Tag.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react';
 import { useNavigate } from 'react-router-dom/dist';
 import TagComponent from './TagComponent';
 import styled from 'styled-components';
+import tagsData from './TagsData';
 
 const TagsContainer = styled.div`
   display: flex;
@@ -11,16 +12,6 @@ const TagsContainer = styled.div`
 `;
 
 export default function Tag(props){
-  const tagsData = [
-    { id: 1, text: '취업', imageUrl: "/Images/tagImage/tomato.png", alt: "토마토" },
-    { id: 2, text: '실업 / 퇴직', imageUrl: "/Images/tagImage/eggplant.png", alt: "가지" },
-    { id: 3, text: '보험', imageUrl: "/Images/tagImage/potato.png", alt: "감자" },
-    { id: 4, text: '임금', imageUrl: "/Images/tagImage/corn.png", alt: "옥수수" },
-    { id: 5, text: '복리후생', imageUrl: "/Images/tagImage/radish.png", alt: "무" },
-    { id: 6, text: '직장 내 괴롭힘', imageUrl: "/Images/tagImage/cabbage.png", alt: "양배추" },
-    { id: 7, text: '취약계층', imageUrl: "/Images/tagImage/onion.png", alt: "양파" }
-  ];
-
   const [selectedImageIndex, setSelectedImageIndex] = useState(props.tag);
   const navigate = useNavigate();
   const getQuery = new URL(window.location.href).searchParams.get("query");

job1/src/Component/TagsData.js

@@ -0,0 +1,11 @@
+const tagsData = [
+  { id: 1, text: '취업', imageUrl: "/Images/tagImage/tomato.png", alt: "토마토" },
+  { id: 2, text: '실업 / 퇴직', imageUrl: "/Images/tagImage/eggplant.png", alt: "가지" },
+  { id: 3, text: '보험', imageUrl: "/Images/tagImage/potato.png", alt: "감자" },
+  { id: 4, text: '임금', imageUrl: "/Images/tagImage/corn.png", alt: "옥수수" },
+  { id: 5, text: '복리후생', imageUrl: "/Images/tagImage/radish.png", alt: "무" },
+  { id: 6, text: '직장 내 괴롭힘', imageUrl: "/Images/tagImage/cabbage.png", alt: "양배추" },
+  { id: 7, text: '취약계층', imageUrl: "/Images/tagImage/onion.png", alt: "양파" }
+];
+
+export default tagsData;

job1/src/Component/WriteHeader.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+function WriteHeader() {
+	return (
+		<Wrapper>
+			<H>동료 일꾼들에게 당신의 고민을 털어놓으세요</H>
+			<P>동료 일꾼들과 고민거리를 나누고, 좋은 해결책을 들어보세요 </P>
+		</Wrapper>
+	)
+}
+
+export default WriteHeader;
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 14.4375rem;
+	background: #F0F4F0;
+`
+const H = styled.h1`
+	color: #000;
+	text-align: center;
+	font-feature-settings: 'clig' off, 'liga' off;
+	font-family: DM Sans;
+	font-size: 1.75rem;
+	font-style: normal;
+	font-weight: 700;
+`
+const P = styled.p`
+	color: var(--my-dark-green, #174D16);
+	text-align: center;
+	font-feature-settings: 'clig' off, 'liga' off;
+	font-family: DM Sans;
+	font-size: 1rem;
+	font-style: normal;
+	font-weight: 400;
+`

job1/src/View/Login/KakaoLoginData.js

@@ -0,0 +1,4 @@
+export const REST_API_KEY = '17a2e0b2cef6b6e3cc52255551234b74';
+export const REDIRECT_URI = 'http://localhost:3000/kakaoLogin';
+
+export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

job1/src/View/Write.js

@@ -1,5 +1,13 @@
-function Write() {
-  return <div>Write</div>;
+import PostForm from "../Community/PostForm";
+import WriteHeader from "../Component/WriteHeader";
+
+function Write(){
+  return(
+    <div>
+      <WriteHeader/>
+      <PostForm/>
+    </div>
+  )
 }
 
-export default Write;
+export default Write;