Merge pull request #70 from team-pofo/feature/#66/newpostformlimit

Feature/#66/newpostformlimit
team-pofo · Jan 24, 2025 · 8c00fc4 · 8c00fc4
2 parents cc53fa3 + c545262
commit 8c00fc4
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 49 deletions.
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -133,7 +133,7 @@ const Navigation: React.FC = () => {
           <Logo href="/">POFO</Logo>
           <NavItems>
             <StyledNavLink href="/">Home</StyledNavLink>
-            {/* <StyledNavLink href="/mypage">MyPage</StyledNavLink> */}
+            <StyledNavLink href="/newpost">NewPost</StyledNavLink>
           </NavItems>
         </div>
       </div>

diff --git a/src/components/Newpost/Newpost.tsx b/src/components/Newpost/Newpost.tsx
@@ -143,41 +143,65 @@ function CreateProjectButton({ categories, stackNames }: NewpostProps) {
 
   const { title, bio, urls, imageUrls, content, setUrls } = useCreateProject();
 
+  const handleUploadProject = async () => {
+    setUrls(urls.filter((url) => url.trim() !== "" || url.trim() !== ""));
+
+    // console.log(1);
+    // console.log(title);
+    // console.log(bio);
+    // console.log(urls);
+    // console.log(imageUrls);
+    // console.log(content);
+    // console.log(categoryKeys);
+    // console.log(stackNames);
+    // console.log(3);
+    if (
+      title !== "" &&
+      bio !== "" &&
+      urls.length != 0 &&
+      imageUrls.length != 0 &&
+      content !== "" &&
+      categoryKeys.length != 0 &&
+      stackNames.length != 0
+    ) {
+      try {
+        const response = await createProject({
+          variables: {
+            title,
+            bio,
+            urls,
+            imageUrls,
+            content,
+            categories: categoryKeys,
+            stackNames,
+          },
+        });
+
+        if (response && response.data) {
+          const projectData = response.data.createProject;
+          alert("프로젝트 등록이 완료되었습니다!");
+          console.log(projectData);
+          router.push(`/project/${projectData.id}`);
+        }
+      } catch (err) {
+        alert(err);
+      }
+    } else {
+      alert("모든 항목을 채우세요");
+    }
+  };
+
   return (
     <Button
       style={{ fontSize: "20px", padding: "20px" }}
-      onClick={async () => {
-        setUrls(urls.filter((url) => url.trim() !== "" || url.trim() !== ""));
-        try {
-          const response = await createProject({
-            variables: {
-              title,
-              bio,
-              urls,
-              imageUrls,
-              content,
-              categories: categoryKeys,
-              stackNames,
-            },
-          });
-
-          if (response && response.data) {
-            const projectData = response.data.createProject;
-            alert("프로젝트 등록이 완료되었습니다!");
-            console.log(projectData);
-            router.push(`/project/${projectData.id}`);
-          }
-        } catch (err) {
-          alert(err);
-        }
-      }}
+      onClick={handleUploadProject}
     >
       프로젝트 등록
     </Button>
   );
 }
 
-export default function NewpostComponents() {
+const NewpostComponents = () => {
   const {
     title,
     bio,
@@ -228,4 +252,6 @@ export default function NewpostComponents() {
       />
     </Styles.NewpostContainer>
   );
-}
+};
+
+export default NewpostComponents;
diff --git a/src/components/ProjectCard/styles.ts b/src/components/ProjectCard/styles.ts
@@ -32,12 +32,42 @@ export const Title = styled.h2`
   font-size: 18px;
   margin: 0;
   margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+
+  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 80%,
+    rgba(0, 0, 0, 0)
+  );
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+  mask-position: left top;
 `;
 
 export const Description = styled.p`
   font-size: 14px;
   color: #555;
   margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+
+  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 80%,
+    rgba(0, 0, 0, 0)
+  );
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+  mask-position: left top;
 `;
 
 export const Author = styled.p`

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,3 @@
-import Layout from "@/components/Layout/Layout";
 import "@/styles/globals.css";
 import "@/styles/mdeditor.css";
 import type { AppProps } from "next/app";
@@ -41,12 +40,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     }
   }, [isLoggedIn, isAuthLoading, router]);
 
-  const getLayout = Component.getLayout ?? ((page) => <Layout>{page}</Layout>);
-  // return getLayout(
-  //   <ApolloProvider client={client}>
-  //     <Component {...pageProps} />
-  //   </ApolloProvider>,
-  // );
+  const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
     <ApolloProvider client={client}>
@@ -55,14 +49,4 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
       </div>
     </ApolloProvider>
   );
-
-  return (
-    <div className={myFont.className}>
-      <Layout>
-        <ApolloProvider client={client}>
-          <Component {...pageProps} />
-        </ApolloProvider>
-      </Layout>
-    </div>
-  );
 }
diff --git a/src/pages/newpost/index.tsx b/src/pages/newpost/index.tsx
@@ -1,9 +1,17 @@
+import Layout from "@/components/Layout/Layout";
 import NewpostComponents from "@/components/Newpost/Newpost";
+import { ReactElement } from "react";
 
-export default function Newpost() {
+const Newpost = () => {
   return (
     <div>
       <NewpostComponents />
     </div>
   );
-}
+};
+
+Newpost.getLayout = (page: ReactElement) => {
+  return <Layout>{page}</Layout>;
+};
+
+export default Newpost;
diff --git a/src/pages/project/[id]/index.tsx b/src/pages/project/[id]/index.tsx
@@ -1,5 +1,12 @@
+import Layout from "@/components/Layout/Layout";
 import ProjectComponents from "@/components/Project/Project";
+import { ReactElement } from "react";
 
-export default function Project() {
+const Project = () => {
   return <ProjectComponents />;
-}
+};
+
+Project.getLayout = (page: ReactElement) => {
+  return <Layout>{page}</Layout>;
+};
+export default Project;