feat : 화면 개선

kangjuhyup · Oct 9, 2024 · 306fd07 · 306fd07
1 parent d850346
commit 306fd07
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 80 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -104,62 +104,50 @@ function App() {
       }
     }, 500);
     const wheelHandler = (e: WheelEvent) => handleScroll(e);
-    window.addEventListener("wheel", wheelHandler);
+    // window.addEventListener("wheel", wheelHandler);
     return () => {
-      window.removeEventListener("wheel", wheelHandler);
+      // window.removeEventListener("wheel", wheelHandler);
     };
   }, [currentSectionIndex]);
 
   return (
-    <MantineProvider
-      defaultColorScheme="dark"
-      theme={{
-        components: {
-          Container: {
-            styles: {
-              root: {
-                width: "100vw",
-                maxWidth: "100vw",
-              },
-            },
-          },
-        },
-      }}
-    >
-      <Header links={links} /> {/* 동적으로 생성된 링크를 전달 */}
-      <div ref={profileRef}>
-        <Container>
-          <Profile />
-        </Container>
-      </div>
-      <div
-        style={{
-          height: "100vh",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-        ref={skillRef}
-      >
-        <Container>
-          <Skill />
-        </Container>
-      </div>
-      <div
-        style={{
-          height: "100vh",
-        }}
-        ref={careerRef}
-      >
-        <Container>
-          <Career />
-        </Container>
-      </div>
-      <div ref={boardRef}>
-        <Container>
-          <Board />
-        </Container>
-      </div>
+    <MantineProvider defaultColorScheme="dark">
+      <Container w="100vw">
+        <Header links={links} /> {/* 동적으로 생성된 링크를 전달 */}
+        <div ref={profileRef}>
+          <Container>
+            <Profile />
+          </Container>
+        </div>
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          ref={skillRef}
+        >
+          <Container>
+            <Skill />
+          </Container>
+        </div>
+        <div
+          style={{
+            height: "100vh",
+          }}
+          ref={careerRef}
+        >
+          <Container>
+            <Career />
+          </Container>
+        </div>
+        <div ref={boardRef}>
+          <Container>
+            <Board />
+          </Container>
+        </div>
+      </Container>
     </MantineProvider>
   );
 }

diff --git a/src/pages/board/component/input/index.tsx b/src/pages/board/component/input/index.tsx
@@ -98,21 +98,23 @@ const CommentInput = () => {
           value={email || ""}
           onChange={(e) => setEmail(e.currentTarget.value)}
         />
-        <PasswordInput
+        {/* <PasswordInput
           w="30vw"
           placeholder="댓글 비밀번호"
           value={pwd || ""}
           onChange={(e) => setPwd(e.currentTarget.value)}
-        />
+        /> */}
       </Group>
       <TextInput
         pb="md"
         placeholder="댓글을 입력하세요"
         value={comment || ""}
+        w="100vw"
         onChange={(e) => setComment(e.currentTarget.value)}
       />{" "}
       <Button
-        pb="md"
+        variant="white"
+        color="dark"
         onClick={() => {
           if (name && comment && avartar && email)
             addComment({

diff --git a/src/pages/profile/Profile.module.css b/src/pages/profile/Profile.module.css
@@ -0,0 +1,12 @@
+.gridItem {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+  }
+
+  @media (max-width: 768px) {
+    .gridItem {
+        width: 100%;
+    }
+  }
+
diff --git a/src/pages/profile/component/blog/index.tsx b/src/pages/profile/component/blog/index.tsx
@@ -1,15 +1,8 @@
-import {
-  Container,
-  Grid,
-  List,
-  Loader,
-  Pagination,
-  Title,
-} from "@mantine/core";
+import { Container, Grid, List, Loader, Pagination } from "@mantine/core";
 import useMedium from "../../hook/rest/medium";
 import { useEffect, useState } from "react";
 import { IconBrandBlogger } from "@tabler/icons-react";
-
+import classes from "../../Profile.module.css";
 function Blog() {
   const { posts, fetchPosts, loading } = useMedium();
   const [listIdx, setListIdx] = useState(1);
@@ -30,10 +23,9 @@ function Blog() {
   };
 
   return (
-    <Grid.Col span={4}>
+    <Grid.Col span={6} className={classes.gridItem}>
       <Container display="flex">
         <IconBrandBlogger />
-        <Title order={3}>Article</Title>
       </Container>
       {posts && posts.length > 0 ? (
         <>

diff --git a/src/pages/profile/component/github/index.tsx b/src/pages/profile/component/github/index.tsx
@@ -1,14 +1,8 @@
-import {
-  Container,
-  Grid,
-  List,
-  Loader,
-  Pagination,
-  Title,
-} from "@mantine/core";
+import { Container, Grid, List, Loader, Pagination } from "@mantine/core";
 import useGitHub from "../../hook/rest/github";
 import { useEffect, useState } from "react";
 import { IconBrandGithub } from "@tabler/icons-react";
+import classes from "../../Profile.module.css";
 
 function Github() {
   const { fetchRepos, repos, loading } = useGitHub();
@@ -18,9 +12,10 @@ function Github() {
   }, []);
 
   const getRepoPage = (idx: number) => {
+    console.log("idx => ", idx);
     return (
       <List>
-        {repos.slice((idx - 1) * 5, idx + 5).map((repo) => (
+        {repos.slice((idx - 1) * 5, (idx - 1) * 5 + 5).map((repo) => (
           <List.Item key={repo.id}>
             <a href={repo.html_url}>{repo.name}</a>
           </List.Item>
@@ -29,10 +24,9 @@ function Github() {
     );
   };
   return (
-    <Grid.Col span={4}>
+    <Grid.Col span={6} className={classes.gridItem}>
       <Container display="flex">
         <IconBrandGithub />
-        <Title order={3}>Repository</Title>
       </Container>
       {repos && repos.length > 0 ? (
         <>

diff --git a/src/pages/profile/component/info/index.tsx b/src/pages/profile/component/info/index.tsx
@@ -30,12 +30,12 @@ function Info() {
           </Group>
         </div>
       </Group>
-      <Paper shadow="md" radius="lg" p="xl" m={10}>
+      <Paper withBorder w="80vw" shadow="md" radius="lg" p={10}>
         <Text size="md">
           주도적으로 필요한 서비스 기능 개발 및 개선하려는 노력을 중요하게
           생각하고 있습니다. <br />
-          테스트코드작성에필요성을느껴코드변경에따른잠재적오류를사전에방지할수있는것을목표로합니다.{" "}
-          <br />
+          테스트코드 작성에 필요성을 느껴 코드변경에 따른 잠재적 오류를 사전에
+          방지할 수 있는것을 목표로합니다. <br />
           현재까지 다양한 환경 및 언어를 이용해 개발을 해왔으며 필요한 기술을
           습득하기 위해 최선을 다하고 있습니다.
         </Text>

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
@@ -5,7 +5,7 @@ import Info from "./component/info";
 
 function Profile() {
   return (
-    <Container w="100vw" h="100vh" id="profile">
+    <Container id="profile">
       <Info />
       <Grid pb={20} gutter="md">
         <Github />