Merge pull request #308 from nayeon-hub/feature/c2/migration

[FEAT] Add atom componts about post create form

client/src/components/postCreate/atoms/TagInput.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+// import { UseFormRegister } from 'react-hook-form';
+import styled from 'styled-components';
+import { theme } from '../../../styles/theme';
+import DelBtn from '../../../asset/icons/icon-del.svg';
+
+// interface TagInputProps {
+//   setValue: UseFormRegister<any>;
+//   clearErrors: UseFormRegister<any>;
+// }
+
+function TagInput() {
+  const [text, setText] = useState('');
+  const tagArray: Array<string> = []; // watch('tagArray');
+
+  //   const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+  //     const reg = /[^\wㄱ-힣]/g;
+
+  //     if (reg.exec(e.target?.value)) {
+  //       setText(e.target?.value.replace(reg, ''));
+  //     }
+
+  //     if (e.keyCode === 188 || (e.keyCode === 32 && e.target.value !== '')) {
+  //       const tagText = e.target.value.replace(reg, '');
+  //       if (tagText.length === 0) {
+  //         setText('');
+  //       } else if (!tagArray.includes(tagText)) {
+  //         setValue('tagArray', [...tagArray, tagText]);
+  //         setText('');
+  //         clearErrors('tagArray');
+  //       } else {
+  //         setText('');
+  //       }
+  //     }
+  //   };
+
+  return (
+    <HashContainer error={false}>
+      <HashWrapBox>
+        {tagArray &&
+          tagArray.map((el) => (
+            <HashItem key={el}>
+              <span>{el}</span>
+              <HashDelBtn
+                type="button"
+                //   onClick={onDeleteBtnClick}
+              ></HashDelBtn>
+            </HashItem>
+          ))}
+      </HashWrapBox>
+      <HashInput
+        type="text"
+        placeholder="해시태그를 입력해주시고 콤마로 구분해주세요"
+        // onKeyUp={handleKeyUp}
+        // onChange={onTagWrite}
+        // onBlur={onInputReset}
+        value={text}
+        maxLength={10}
+      />
+    </HashContainer>
+  );
+}
+
+export default TagInput;
+
+const HashContainer = styled.div<{ error: boolean }>`
+  height: auto;
+  margin-top: 30px;
+  padding: 5px;
+  color: rgb(52, 58, 64);
+  font-size: 1.125rem;
+  display: flex;
+  flex-wrap: wrap;
+  letter-spacing: -0.6px;
+  color: #444241;
+  border: 2px solid ${({ theme, error }) => (error ? theme.color.lightGray : theme.color.yellow)};
+  @media screen and (max-width: 1200px) {
+    display: block;
+  }
+`;
+
+const HashWrapBox = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const HashItem = styled.div`
+  margin-right: 5px;
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  background: ${theme.color.yellow};
+  color: ${theme.color.navy};
+  font-weight: bold;
+  font-size: 15px;
+  cursor: pointer;
+`;
+
+const HashInput = styled.input`
+  display: block;
+  outline: none;
+  cursor: text;
+  margin: 5px;
+  border: none;
+  min-width: 300px;
+  width: 90%;
+`;
+
+const HashDelBtn = styled.button`
+  width: 8px;
+  height: 8px;
+  background: url(${DelBtn});
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+`;

client/src/components/postCreate/atoms/TargetAge.tsx

@@ -0,0 +1,39 @@
+import { UseFormRegister } from 'react-hook-form';
+import styled from 'styled-components';
+
+type TargetAgeProps = {
+  register: UseFormRegister<any>;
+};
+
+function TargetAge({ register }: TargetAgeProps) {
+  return (
+    <TargetWrap>
+      <TargetAgeSelect error={false} {...register('age', { required: 'This is required' })}>
+        <option value="">질문하고 싶은 연령층을 선택해주세요.</option>
+        <option value="10">10대에게</option>
+        <option value="20">20대에게</option>
+        <option value="30">30대에게</option>
+        <option value="40">40대에게</option>
+        <option value="50">50대이상에게</option>
+      </TargetAgeSelect>
+    </TargetWrap>
+  );
+}
+export default TargetAge;
+
+const TargetWrap = styled.div`
+  margin-top: 30px;
+`;
+
+const TargetAgeSelect = styled.select<{ error: boolean }>`
+  width: 250px;
+  height: 40px;
+  border: 2px solid ${({ error, theme }) => (error ? theme.color.lightGray : theme.color.yellow)};
+  border-radius: 3px;
+  @media screen and (max-width: 550px) {
+    width: 100%;
+    & > option {
+      width: 100%;
+    }
+  }
+`;

client/src/components/postCreate/atoms/Title.tsx

@@ -0,0 +1,36 @@
+import { UseFormRegister } from 'react-hook-form';
+import styled from 'styled-components';
+
+type TitleProps = {
+  register: UseFormRegister<any>;
+};
+
+function Title({ register }: TitleProps) {
+  return (
+    <TitleWrap>
+      <TitleInput
+        placeholder="제목"
+        error={false}
+        maxLength={25}
+        {...register('title', { required: 'This is required' })}
+      />
+    </TitleWrap>
+  );
+}
+export default Title;
+
+const TitleWrap = styled.div`
+  margin-top: 30px;
+`;
+
+const TitleInput = styled.input<{ error: boolean }>`
+  height: 40px;
+  border: 2px solid ${({ theme, error }) => (error ? theme.color.lightGray : theme.color.yellow)};
+  border-radius: 3px;
+  @media screen and (max-width: 612px) {
+    width: 100%;
+  }
+  @media (min-width: 612px) {
+    width: 413px;
+  }
+`;

client/src/components/postCreate/molecules/CreateForm.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Title from '../atoms/Title';
+import TargetAge from '../atoms/TargetAge';
+import TagInput from '../atoms/TagInput';
+
+function CreateForm() {
+  const { register, setValue } = useForm({
+    mode: 'onBlur',
+    defaultValues: {
+      tagArray: [],
+      title: '',
+      para: { para: '', img: [] },
+      age: '',
+    },
+  });
+
+  useEffect(() => {
+    setValue('title', '');
+    setValue('para', { para: '', img: [] });
+    setValue('age', '');
+    setValue('tagArray', []);
+  }, [setValue]);
+
+  return (
+    <form id="upload" method="POST">
+      <Title register={register} />
+      <TargetAge register={register} />
+      <TagInput />
+    </form>
+  );
+}
+export default CreateForm;

client/src/components/postInventory/molecules/InventoryList.tsx

@@ -6,23 +6,6 @@ import useObserve from '../../../hooks/useObserve';
 import { getPostListRead } from '../../../networks/post/http';
 import { useAppSelector } from '../../../redux/hooks';
 import InventoryItem from '../atoms/InventoryItem';
-import DropdownBox from '../../common/molecules/DropdownBox';
-
-// interface SearchData {
-//   option: string;
-//   inputs: string;
-// }
-
-// interface InventoryProps {
-//   postFilter: string;
-//   searchData: SearchData;
-// }
-
-// interface QueryKey {
-//   age: string | undefined;
-//   postFilter: string;
-//   searchData: SearchData;
-// }
 
 interface LoadedPostProps {
   queryKey: any;
@@ -59,7 +42,6 @@ function InventoryList() {
 
   return (
     <PostListBodyContainer>
-      <DropdownBox />
       <PostListBodyLayout>
         {postData && (
           <>

client/src/pages/PostCreatePage.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+import CreateForm from '../components/postCreate/molecules/CreateForm';
+
+function PostCreatePage() {
+  const { pathname } = useLocation();
+  const pathArr = pathname.split('/');
+  const pathValue = pathArr[2];
+  return (
+    <PostCreateMain>
+      <PostCreateContainer>
+        <PostHeader>{pathValue === 'create' ? '질문하기' : ' 질문 수정 하기'}</PostHeader>
+        <CreateForm />
+      </PostCreateContainer>
+    </PostCreateMain>
+  );
+}
+
+export default PostCreatePage;
+
+const PostCreateMain = styled.main``;
+
+const PostCreateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 100px auto 0;
+  padding: 70px 0;
+  @media screen and (max-width: 550px) {
+    width: 333px;
+    padding: 50px 0;
+  }
+  @media (min-width: 550px) and (max-width: 612px) {
+    width: 500px;
+  }
+  @media (min-width: 612px) and (max-width: 768px) {
+    width: 500px;
+  }
+  @media (min-width: 768px) and (max-width: 992px) {
+    width: 500px;
+  }
+  @media (min-width: 992px) and (max-width: 1200px) {
+    width: 697px;
+  }
+  @media (min-width: 1200px) {
+    width: 865px;
+  }
+`;
+
+const PostHeader = styled.h2`
+  position: relative;
+  font-size: 30px;
+  width: 100%;
+  margin: 0 auto 10px;
+  @media screen and (max-width: 612px) {
+    font-size: 25px;
+    text-align: center;
+  }
+`;

client/src/routes/AppRoute.tsx

@@ -1,12 +1,14 @@
 import { Routes, Route } from 'react-router-dom';
 import PostInventoryPage from '../pages/PostInventoryPage';
+import PostCreatePage from '../pages/PostCreatePage';
 
 function AppRoute() {
   return (
     <Routes>
       <Route path="/intro" element={<div>test</div>} />
       <Route path="/generation/:age" element={<PostInventoryPage />} />
-      <Route path='/my' element={<div>my</div>} />
+      <Route path="/post/create" element={<PostCreatePage />} />
+      <Route path="/my" element={<div>my</div>} />
     </Routes>
   );
 }