Add: 스레드 생성 기능 완성

src/Router.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import PostList from './pages/PostList/PostList';
+import Post from './pages/Post/Post';
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/post-list" element={<PostList />} />
+        <Route path="/create-post" element={<Post />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Avatar.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Avatar.scss';
+
+export default function Avatar({ image, size = 'medium' }) {
+  return (
+    <div className={getContainerStyle(size)}>
+      <img
+        className={`imgContainer ${getImageSizeStyle(size).image}`}
+        alt="user profile"
+        src={image}
+      />
+    </div>
+  );
+}
+
+function getContainerStyle(size) {
+  const baseStyle = 'baseStyle';
+  const { container } = getImageSizeStyle(size);
+  return `${baseStyle} ${container}`;
+}
+
+function getImageSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return {
+        container: 'smallContainer',
+        image: 'smallImg',
+      };
+    case 'medium':
+      return {
+        container: 'mediumContainer',
+        image: 'mediumImg',
+      };
+    case 'large':
+      return {
+        container: 'largeContainer',
+        image: 'largeImg',
+      };
+    default:
+      throw new Error(`Unsupported type size: ${size}`);
+  }
+}

src/components/Avatar.scss

@@ -0,0 +1,45 @@
+.baseStyle {
+  display: flex;
+  border-radius: 9999px;
+  justify-content: center;
+  align-items: center;
+}
+
+.imgContainer {
+  background-color: white;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.smallContainer {
+  width: 36px;
+  height: 36px;
+}
+
+.smallImg {
+  width: 34px;
+  height: 34px;
+  padding: 1.6px;
+}
+
+.mediumContainer {
+  width: 44px;
+  height: 44px;
+}
+
+.mediumImg {
+  width: 42px;
+  height: 42px;
+  padding: 1.6px;
+}
+
+.largeContainer {
+  width: 64px;
+  height: 64px;
+}
+
+.largeImg {
+  width: 62px;
+  height: 62px;
+  padding: 3.2px;
+}

src/pages/Post/Post.jsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Avatar from '../../components/Avatar';
+import './Post.scss';
+import { useNavigate } from 'react-router-dom';
+
+export default function Post() {
+  const [isClicked, setIsClicked] = useState(false);
+  const [content, setContent] = useState('');
+
+  const handleSubmit = () => {
+    if (content.length > 0) {
+      handleCreatePost();
+    }
+    return;
+  };
+
+  const navigate = useNavigate();
+  const goToPostList = () => {
+    navigate('/post-list');
+  };
+  const handleCreatePost = e => {
+    fetch('', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8',
+      },
+      body: JSON.stringify({
+        email: '',
+        password: '',
+      }),
+    })
+      .then(res => {
+        console.log(res);
+        if (res.ok === true) {
+          return res;
+        }
+        throw new Error('통신 실패 😭');
+      })
+      .catch(error => console.log(error))
+      .then(data => {
+        console.log('???', data);
+        if (typeof data !== 'undefined') {
+          alert('성공');
+          goToPostList();
+        } else if (typeof data === 'undefined') {
+          alert('안 됨');
+        }
+      });
+  };
+
+  const handleCancel = () => {
+    if (window.confirm('작성을 취소 하시겠습니까?')) {
+      goToPostList();
+    }
+  };
+
+  return (
+    <div className="container">
+      <div className="wrap">
+        <Avatar image="https://images.unsplash.com/photo-1682685797332-e678a04f8a64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" />
+        <div className="mainContentContainer">
+          <p className="userName">정다인</p>
+          <textarea
+            className="threadInputArea"
+            onChange={e => {
+              setContent(e.target.value);
+            }}
+            placeholder={content ? { content } : '스레드를 시작하세요 🙌'}
+            value={content}
+          />
+        </div>
+      </div>
+      <hr className="horizonLine" />
+      <div className="clickBtn">
+        <button className="delBtn" onClick={handleCancel}>
+          취소
+        </button>
+        <button
+          disabled={content.length > 0 ? false : true}
+          className="postBtn"
+          onClick={() => {
+            handleSubmit();
+            setIsClicked(true);
+          }}
+        >
+          게시
+        </button>
+      </div>
+    </div>
+  );
+}

src/pages/Post/Post.scss

@@ -0,0 +1,84 @@
+.container {
+  height: 80vh;
+  padding: 30px 25px 30px 20px;
+  overflow-y: scroll;
+}
+
+.wrap {
+  display: flex;
+}
+
+.mainContentContainer {
+  display: flex;
+  flex-direction: column;
+  padding-left: 15px;
+}
+
+.userName {
+  padding: 2px 0 10px 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.threadInputArea {
+  width: 460px;
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 15px;
+  resize: none;
+  padding: 15px;
+
+  &:focus {
+    outline: none;
+    border: 2px solid skyblue;
+    border-radius: 15px;
+  }
+  &:disabled {
+    background-color: white;
+  }
+}
+
+.horizonLine {
+  border: 0.5px solid #e0e0e0;
+  margin-bottom: 25px;
+}
+
+.postBtn {
+  width: 120px;
+  height: 55px;
+  border: 1px solid #2d71f7;
+  border-radius: 6px;
+  background-color: #2d71f7;
+  color: white;
+  &:hover {
+    background-color: #083e7f;
+    border: 1px solid #083e7f;
+  }
+  &:disabled {
+    background-color: #cccccc;
+    border: 1px solid #cccccc;
+  }
+}
+
+.delBtn {
+  width: 120px;
+  height: 55px;
+  border: 1px solid #2d71f7;
+  background-color: white;
+  border-radius: 6px;
+  color: #2d71f7;
+  &:hover {
+    background-color: #083e7f;
+    border: 1px solid #083e7f;
+    color: white;
+  }
+  &:disabled {
+    background-color: #cccccc;
+    border: 1px solid #cccccc;
+  }
+}
+
+.clickBtn {
+  display: flex;
+  justify-content: space-between;
+}

src/style/common.scss

@@ -16,7 +16,9 @@ html {
 body {
   width: 100%;
   height: 80vh;
-  border: 1px solid #000;
+  border: 1px solid #e6e6e6;
+  border-radius: 16px;
+  background-color: white;
 }
 
 a {