Merge pull request #58 from team-pofo/feature/#57/userArtcle

Feature/#57/user artcle

src/components/Mypage/MyProjects/MyProjects.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import MypageProjectCard from "@/components/ProjectCard/Mypage/MypageProjectCard";
 import { useAuthStore } from "@/stores/authStore";
 import * as Styles from "./styles";
+import { useRouter } from "next/router";
 
 export default function MyProjectComponents() {
   const { page, hasNext, projects, setPage, setHasNext, setProjects, reset } =
@@ -15,14 +16,17 @@ export default function MyProjectComponents() {
   const [isLoading, setIsLoading] = useState(true);
   const observerRef = useRef<HTMLDivElement>(null);
 
+  const router = useRouter();
+  const { username } = router.query;
+
   const { data, loading, fetchMore } = useQuery(SEARCH_PROJECT, {
     variables: {
       page: page,
       size: SIZE,
       title: "",
       stackNames: [],
       categories: [],
-      authorName: user?.username,
+      authorName: username,
     },
   });
 

src/components/Mypage/MypageLayout.tsx

@@ -4,9 +4,13 @@ import Link from "next/link";
 import { useSidebarStore } from "@/stores/mypageSidebarStore";
 import { LuFileText, LuHeart, LuSettings } from "react-icons/lu";
 import { useAuthStore } from "@/stores/authStore";
+import { useRouter } from "next/router";
 
 function MypageMyInfo() {
   const { user } = useAuthStore();
+  const router = useRouter();
+  const { username } = router.query;
+
   return (
     <Styles.MypageMyinfo>
       <Image
@@ -16,18 +20,19 @@ function MypageMyInfo() {
         height={200}
         style={{ borderRadius: "50%" }}
       />
-      <Styles.MypageNickname>{user?.username}</Styles.MypageNickname>
+      <Styles.MypageNickname>{username}</Styles.MypageNickname>
       <Styles.MypageEmail>{user?.email}</Styles.MypageEmail>
     </Styles.MypageMyinfo>
   );
 }
 
 function MypageSidebar() {
+  const { user } = useAuthStore();
   const items = [
     {
       icon: <LuFileText />,
       label: "나의 프로젝트",
-      link: "myprojects",
+      link: "projects",
     },
     {
       icon: <LuHeart />,
@@ -48,7 +53,7 @@ function MypageSidebar() {
       {items.map((item, index) => (
         <Link
           key={index}
-          href={`/mypage/${item.link}`}
+          href={`/${user?.username}/${item.link}`}
           passHref
           style={{ width: "100%" }}
         >
@@ -72,6 +77,9 @@ type MypageLayoutProps = {
 };
 
 export default function MypageLayout({ children }: MypageLayoutProps) {
+  const { user } = useAuthStore();
+  const router = useRouter();
+  const { username } = router.query;
   const { isLoggedIn } = useAuthStore();
 
   if (!isLoggedIn) {
@@ -82,7 +90,7 @@ export default function MypageLayout({ children }: MypageLayoutProps) {
     <Styles.MypageContainer>
       <Styles.MypageSidebarContainer>
         <MypageMyInfo />
-        <MypageSidebar />
+        {user?.username === username && <MypageSidebar />}
       </Styles.MypageSidebarContainer>
       <Styles.MypageContentContainer>{children}</Styles.MypageContentContainer>
     </Styles.MypageContainer>

src/components/Navigation/Navigation.tsx

@@ -20,10 +20,12 @@ import userIcon from "../../../public/icons/user.svg";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 
 import { Button } from "../ui/button";
-import Link from "next/link";
 import { PopoverClose } from "@radix-ui/react-popover";
+import { useRouter } from "next/router";
 
 const Navigation: React.FC = () => {
+  const router = useRouter();
+
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [initialStep, setInitialStep] = useState<
@@ -37,6 +39,7 @@ const Navigation: React.FC = () => {
     login,
     logout: clearAuthState,
     setIsAuthLoading,
+    user,
   } = useAuthStore();
 
   // 자동 로그인 처리
@@ -65,6 +68,14 @@ const Navigation: React.FC = () => {
     autoLogin();
   }, [clearAuthState, login, setAccessToken]);
 
+  const navigateToProjects = () => {
+    if (user?.username) {
+      router.push(`/${user.username}/projects`);
+    } else {
+      alert("사용자 정보가 없습니다.");
+    }
+  };
+
   const handleLogout = async () => {
     try {
       const response = await logout();
@@ -146,24 +157,22 @@ const Navigation: React.FC = () => {
                 />
               </PopoverTrigger>
               <PopoverContent>
-                <Link href="/mypage">
-                  <PopoverClose>
-                    <Button
-                      variant="ghost"
-                      className="w-full justify-start"
-                      onClick={() => {}}
-                    >
-                      <Image
-                        style={{ cursor: "pointer", marginRight: "8px" }}
-                        src={"/icons/user_2.svg"}
-                        width={18}
-                        height={18}
-                        alt="mypage"
-                      />
-                      내 정보
-                    </Button>
-                  </PopoverClose>
-                </Link>
+                <PopoverClose>
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start"
+                    onClick={navigateToProjects}
+                  >
+                    <Image
+                      style={{ cursor: "pointer", marginRight: "8px" }}
+                      src={"/icons/user_2.svg"}
+                      width={18}
+                      height={18}
+                      alt="mypage"
+                    />
+                    내 정보
+                  </Button>
+                </PopoverClose>
                 <Button variant="ghost" className="w-full justify-start">
                   <Image
                     style={{ cursor: "pointer", marginRight: "8px" }}

src/components/ProjectCard/Mypage/MypageProjectCard.tsx

@@ -27,8 +27,8 @@ export default function MypageProjectCard(projectCard: IProjectCardProps) {
                 : "https://velog.velcdn.com/images/yena1025/post/295eb434-5b73-421f-bbe4-6bc13acd4c33/image.png"
             }
             alt={title}
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: "cover" }}
           />
         </Styles.ImageWrapper>
         <Styles.Content>

src/components/ProjectCard/ProjectCard.tsx

@@ -5,9 +5,11 @@ import empty_heart from "../../../public/icons/empty_heart.svg";
 import fill_heart from "../../../public/icons/fill_heart.svg";
 import Link from "next/link";
 import { IProjectCardProps } from "@/lib/interface/iProjectCard";
+import { useRouter } from "next/router";
 
 const ProjectCard = forwardRef<HTMLDivElement, IProjectCardProps>(
   (projectCard, ref) => {
+    const router = useRouter();
     // const [likeCount, setLikeCount] = useState(likes);
     // const [liked, setLiked] = useState(false);
 
@@ -16,7 +18,13 @@ const ProjectCard = forwardRef<HTMLDivElement, IProjectCardProps>(
       // setLiked(!liked);
     };
 
-    const { id, title, imageUrls, bio } = projectCard.projectCard;
+    const clickAuthorName = (e: React.MouseEvent<HTMLSpanElement>) => {
+      e.stopPropagation(); // 이벤트 전파 중단
+      e.preventDefault(); // Link 기본 동작 방지
+      router.push(`/${e.currentTarget.textContent}/projects`);
+    };
+
+    const { id, title, imageUrls, bio, authorName } = projectCard.projectCard;
 
     return (
       <Link style={{ width: "100%" }} href={`/project/${id}`}>
@@ -29,14 +37,14 @@ const ProjectCard = forwardRef<HTMLDivElement, IProjectCardProps>(
                   : "https://velog.velcdn.com/images/yena1025/post/295eb434-5b73-421f-bbe4-6bc13acd4c33/image.png"
               }
               alt={title}
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: "cover" }}
             />
           </S.ImageWrapper>
           <S.Content>
             <S.Title>{title}</S.Title>
             <S.Description>{bio}</S.Description>
-            <S.Author>{id}</S.Author>
+            <S.Author onClick={clickAuthorName}>{authorName}</S.Author>
             <S.LikeSection>
               <S.LikeButton onClick={handleLike}>
                 <Image

src/components/ProjectCard/styles.ts

@@ -29,13 +29,13 @@ export const Title = styled.h2`
 export const Description = styled.p`
   font-size: 14px;
   color: #555;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 `;
 
 export const Author = styled.p`
-  font-size: 12px;
+  font-size: 14px;
   color: #888;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 `;
 
 export const LikeSection = styled.div`

src/lib/interface/iProjectCard.ts

@@ -7,6 +7,7 @@ export interface IProjectCard {
   title: string;
   imageUrls: string[];
   bio: string;
+  authorName: string;
 }
 
 export interface IProjectCardProps {

src/pages/mypage/index.tsx → src/pages/[username]/index.tsx

@@ -4,11 +4,12 @@ import { useEffect } from "react";
 
 export default function Mypage() {
   const router = useRouter();
+  const { username } = router.query;
   const { isLoggedIn } = useAuthStore();
 
   useEffect(() => {
     if (isLoggedIn) {
-      router.replace("/mypage/myprojects");
+      router.replace(`/${username}/projects`);
     }
   }, [isLoggedIn, router]);
 

src/services/gql/searchProject.ts

@@ -27,6 +27,7 @@ export const SEARCH_PROJECT = gql`
         imageUrls
         likes
         bio
+        authorName
       }
     }
   }