Skip to content

Feature/ 2024-12-02 Dev to Main #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wonsik3686 merged 3 commits into from
Dec 2, 2024
Merged

Feature/ 2024-12-02 Dev to Main #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f6a859
feat: 파비콘 수정
SeungHyunOK Nov 8, 2024
6f45b39
feat:페이지에 메타태그추가
SeungHyunOK Nov 8, 2024
41ba844
Merge pull request #157 from team-collabor/feat/119-신규-기능-메타데이터-추가작업
SeungHyunOK Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added public/images/Homepage_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 60 additions & 41 deletions src/components/auth/signin/SignInForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useSignIn } from '@/queries/auth.queries';
import { useAuthStore } from '@/store/useAuthStore';
import { SignInRequest } from '@/types/dto/requests/auth.request.types';
import { zodResolver } from '@hookform/resolvers/zod';
import Head from 'next/head';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
Expand Down Expand Up @@ -67,48 +68,66 @@ function SignInForm() {
}, [isSuccess, router, reset, user]);

return (
<form
className="flex w-full flex-col gap-7 font-pretendard"
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onSubmit={handleSubmit(onSubmit)}
noValidate
>
<Input
type="email"
id="email-input"
label="이메일"
placeholder="이메일을 입력해주세요."
{...register('email')}
errorMessage={validErrors.email?.message}
/>
<Input
type="password"
id="password-input"
label="비밀번호"
placeholder="비밀번호를 입력해주세요."
hasVisibilityButton
{...register('password')}
errorMessage={validErrors.password?.message}
/>
{signInError && (
<p className="ml-2 text-md-semibold text-status-danger">
{(signInError as SignInError).response?.data?.message}
</p>
)}
<Button
type="submit"
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
textSize={TextSize.Large}
buttonWidth={ButtonWidth.Full}
buttonBackgroundColor={ButtonBackgroundColor.Green}
buttonBorderColor={ButtonBorderColor.None}
buttonPadding={ButtonPadding.Large}
disabled={isPending}
<>
<Head>
<title>로그인 - Coworkers</title>
<meta
name="description"
content="로그인하여 팀원들과 함께 협업하고 할 일을 관리하세요."
/>
<meta property="og:title" content="로그인 - Coworkers" />
<meta
property="og:description"
content="Coworkers에 로그인하고 팀과 함께 프로젝트를 진행하세요."
/>
<meta
property="og:url"
content="https://coworkers-colla.netlify.app/signin"
/>
</Head>
<form
className="flex w-full flex-col gap-7 font-pretendard"
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onSubmit={handleSubmit(onSubmit)}
noValidate
>
로그인
</Button>
</form>
<Input
type="email"
id="email-input"
label="이메일"
placeholder="이메일을 입력해주세요."
{...register('email')}
errorMessage={validErrors.email?.message}
/>
<Input
type="password"
id="password-input"
label="비밀번호"
placeholder="비밀번호를 입력해주세요."
hasVisibilityButton
{...register('password')}
errorMessage={validErrors.password?.message}
/>
{signInError && (
<p className="ml-2 text-md-semibold text-status-danger">
{(signInError as SignInError).response?.data?.message}
</p>
)}
<Button
type="submit"
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
textSize={TextSize.Large}
buttonWidth={ButtonWidth.Full}
buttonBackgroundColor={ButtonBackgroundColor.Green}
buttonBorderColor={ButtonBorderColor.None}
buttonPadding={ButtonPadding.Large}
disabled={isPending}
>
로그인
</Button>
</form>{' '}
</>
);
}

Copy link

@github-actions github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치는 기능적으로 중요한 변경 사항을 추가하고 있습니다.

개선 제안:

  1. 첫 번째 개선 제안은 Head 컴포넌트를 추가 한 것입니다. 이것은 페이지의 제목과 메타 데이터를 설정하는 데 유용합니다.
  2. 로그인 폼의 버튼 아래에 여백(" ")이 포함되어 있는데, 이 부분은 자연스럽지 않게 보일 수 있으므로 굳이 필요하지 않다면 삭제하는 게 좋습니다. 페이지의 외관을 좀 더 일관성 있게 만들어줄 수 있습니다.

버그 리스크:

  1. 현재 코드에서는 특별히 버그 리스크가 없어 보입니다.

이 코드 변경사항은 사이트의 SEO 향상과 사용자 경험 향상에 도움이 될 수 있습니다. 페이지 제목과 설명을 제공하여 사이트가 검색 엔진에서 높은 순위로 표시되고 사용자에게 명확한 페이지 내용을 제공할 수 있습니다. 따라서 이 코드 변경은 효과적일 것으로 보입니다.

Expand Down
133 changes: 76 additions & 57 deletions src/components/auth/signup/SignUpForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { signUpSchema } from '@/constants/formSchemas/authSchema';
import { useSignIn, useSignUp } from '@/queries/auth.queries';
import { SignUpRequest } from '@/types/dto/requests/auth.request.types';
import { zodResolver } from '@hookform/resolvers/zod';
import Head from 'next/head';
Copy link

@coderabbitai coderabbitai bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Metadata implementation needs standardization across pages

  • All pages consistently import and use the Next.js Head component
  • Several pages contain hardcoded URLs (coworkers-colla.netlify.app) in meta tags, which should be environment-dependent
  • No pages are missing og:image tags despite the search (indicating consistent implementation)

Recommendations:

  • Replace hardcoded URLs with environment variables or dynamic URL generation
  • Found in:
    • src/pages/404.tsx
    • src/pages/500.tsx
    • src/pages/withoutteam/index.tsx
    • src/pages/mypage/index.tsx
    • src/pages/history/index.tsx
    • src/pages/attendteam/index.tsx
    • src/pages/addteam/index.tsx
    • src/pages/addboard/index.tsx
    • src/pages/boards/index.tsx
🔗 Analysis chain

Verify metadata consistency across the application

Let's check if these metadata changes are consistently implemented across all pages.

Also applies to: 16-17, 87-102

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check metadata implementation across pages
# Expected: Find all pages with/without Head component and og meta tags

# Find all page components
echo "=== Pages with metadata ==="
rg -l "import.*Head.*from.*next/head" "src/pages"

echo -e "\n=== Pages missing og:image tag ==="
rg -L "og:image" $(rg -l "og:title" "src/pages")

echo -e "\n=== Hardcoded URLs in meta tags ==="
rg -i "content=\"https?://" "src/pages"

Length of output: 1948

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
Expand Down Expand Up @@ -82,64 +83,82 @@ function SignUpForm() {
]);

return (
<form
className="flex w-full flex-col gap-7 font-pretendard"
onSubmit={handleSubmit(onSubmit)}
noValidate
>
<Input
type="text"
id="name-input"
label="닉네임"
placeholder="닉네임을 입력해주세요."
{...register('nickname')}
errorMessage={errors.nickname?.message}
/>
<Input
type="email"
id="email-input"
label="이메일"
placeholder="이메일을 입력해주세요."
{...register('email')}
errorMessage={errors.email?.message}
/>
<Input
type="password"
id="password-input"
label="비밀번호"
placeholder="비밀번호를 입력해주세요."
hasVisibilityButton
{...register('password')}
errorMessage={errors.password?.message}
/>
<Input
type="password"
id="password-check-input"
label="비밀번호 확인"
placeholder="비밀번호를 다시 한 번 입력해주세요."
hasVisibilityButton
{...register('passwordConfirmation')}
errorMessage={errors.passwordConfirmation?.message}
/>
{signUpError && (
<p className="ml-2 text-md-semibold text-status-danger">
{(signUpError as SignUpError).response?.data?.message}
</p>
)}
<Button
type="submit"
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
textSize={TextSize.Large}
buttonWidth={ButtonWidth.Full}
buttonBackgroundColor={ButtonBackgroundColor.Green}
buttonBorderColor={ButtonBorderColor.None}
buttonPadding={ButtonPadding.Large}
disabled={isPending}
<>
<Head>
<title>회원가입 - Coworkers</title>
<meta
name="description"
content="Coworkers에 가입하여 팀 협업을 시작하세요! 쉽고 빠른 회원가입 기능을 제공합니다."
/>
<meta property="og:title" content="회원가입 - Coworkers" />
<meta
property="og:description"
content="회원가입 후 팀과 함께 효율적인 협업을 시작하세요."
/>
<meta
property="og:url"
content="https://coworkers-colla.netlify.app/signup"
/>
</Head>
<form
className="flex w-full flex-col gap-7 font-pretendard"
onSubmit={handleSubmit(onSubmit)}
noValidate
>
회원가입
</Button>
</form>
<Input
type="text"
id="name-input"
label="닉네임"
placeholder="닉네임을 입력해주세요."
{...register('nickname')}
errorMessage={errors.nickname?.message}
/>
<Input
type="email"
id="email-input"
label="이메일"
placeholder="이메일을 입력해주세요."
{...register('email')}
errorMessage={errors.email?.message}
/>
<Input
type="password"
id="password-input"
label="비밀번호"
placeholder="비밀번호를 입력해주세요."
hasVisibilityButton
{...register('password')}
errorMessage={errors.password?.message}
/>
<Input
type="password"
id="password-check-input"
label="비밀번호 확인"
placeholder="비밀번호를 다시 한 번 입력해주세요."
hasVisibilityButton
{...register('passwordConfirmation')}
errorMessage={errors.passwordConfirmation?.message}
/>
{signUpError && (
<p className="ml-2 text-md-semibold text-status-danger">
{(signUpError as SignUpError).response?.data?.message}
</p>
)}
<Button
type="submit"
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
textSize={TextSize.Large}
buttonWidth={ButtonWidth.Full}
buttonBackgroundColor={ButtonBackgroundColor.Green}
buttonBorderColor={ButtonBorderColor.None}
buttonPadding={ButtonPadding.Large}
disabled={isPending}
>
회원가입
</Button>
</form>
</>
);
}

Copy link

@github-actions github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 패치는 Next.js에서 회원가입 폼을 구현하는 코드입니다. 코드를 살펴보면 다음과 같은 점에 대한 개선 제안 및 버그 리스크가 있습니다:

  1. Head 컴포넌트는 문서의 헤더 정보를 관리하기 위해 사용됩니다. 이 경우, Head 컴포넌트를 사용하여 문서의 타이틀과 메타 데이터를 설정하고 있습니다. 이는 SEO에 도움이 될 수 있습니다.

  2. 코드의 중복을 줄이기 위해 Input 및 Button 컴포넌트를 생성하여 재사용할 수 있습니다.

  3. 폼 요소에 대한 유효성 검사 또는 서버로의 데이터 전송 부분이 빠져 있습니다. 입력값의 유효성을 검사하고 필요한 경우 사용자에게 알림을 표시하는 등의 추가적인 처리가 필요합니다.

  4. 입력값의 보안에 대한 처리가 부족할 수 있습니다. 비밀번호와 같이 민감한 정보를 다룰 때는 보안 관련 사항에 대해 신경써야 합니다.

  5. 페이지 네비게이션 부분에서 useRouter를 사용하고 있는데, 이 부분에서의 라우팅 처리 등에 대한 검토가 필요할 수 있습니다.

  6. 코드 스타일을 일관성 있게 유지하기 위해 들여쓰기와 코드 포맷팅을 확인하고 개선할 수 있습니다.

총평하면, 기본적으로 폼 구현에 필요한 기능이 구현되어 있지만, 보안 및 유지보수 측면에서 개선이 필요한 부분이 있습니다. 추가적인 테스트를 통해 정확성을 보장할 수 있도록 개선하는 것이 좋을 것으로 판단됩니다.

Expand Down
9 changes: 9 additions & 0 deletions src/components/layouts/RootLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { cn } from '@/utils/tailwind/cn';
import Head from 'next/head';
import { ReactNode } from 'react';
import { Toaster } from '../common/Toast/Toaster';
import { useCloseAllDrop } from './lib/use-close-all-drop';
Expand All @@ -9,6 +10,14 @@ export default function RootLayout({ children }: { children: ReactNode }) {
return (
<>
<Header />
<Head>
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://coworkers-colla.netlify.app/"
/>
<meta property="og:image" content="/images/Homepage_img.png" />
</Head>
Comment on lines +13 to +20
Copy link

@coderabbitai coderabbitai bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Open Graph image exists, but essential meta tags are still missing

The image path /images/Homepage_img.png is valid as verified in the public directory. However, the essential Open Graph meta tags (og:title and og:description) are still missing, which are crucial for better social media sharing.

  • Add og:title meta tag for the page title
  • Add og:description meta tag for the page description
🔗 Analysis chain

Add missing essential Open Graph meta tags and verify image path

The Open Graph implementation needs enhancement:

  1. Missing essential tags:
    • og:title
    • og:description
  2. The image path needs verification

Add the missing meta tags:

 <Head>
   <meta property="og:type" content="website" />
   <meta
     property="og:url"
     content="https://coworkers-colla.netlify.app/"
   />
+  <meta property="og:title" content="Coworkers - Collaborate Better" />
+  <meta property="og:description" content="팀원들과 자유롭게 협업하세요" />
   <meta property="og:image" content="/images/Homepage_img.png" />
 </Head>

Let's verify the image path exists:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the Open Graph image exists in the public directory
fd "Homepage_img.png" public/images/

Length of output: 67

<Aside />
<div className="h-16" />
<main
Copy link

@github-actions github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 코드 조각은 RootLayout 컴포넌트 내부에 Head 컴포넌트를 추가하여 다양한 메타 태그를 설정하고 있습니다. 이는 페이지의 SEO(검색 엔진 최적화) 및 소셜 미디어 공유에 도움을 줄 수 있습니다.

개선 제안:

  1. 이미지 경로를 절대 경로로 설정하는 것이 좋습니다. 상대 경로의 경우 페이지 URL에 따라 다른 이미지를 가리킬 수 있습니다.
  2. 메타 태그 중 일부는 공통 요소일 수 있으므로 공통으로 사용될 수 있는 메타 태그들은 별도의 파일로 관리하는 것이 좋습니다.
  3. 소셜 미디어 공유를 위한 메타 태그 외에도 기본적인 SEO에 관련된 메타 태그들을 추가하는 것도 기능적으로 유용할 수 있습니다.

버그 리스크:
현재 코드 조각에서 큰 버그 리스크는 보이지 않습니다. 그러나 이미지 경로와 같은 상대 경로를 사용하는 것은 사용자 경험에 영향을 줄 수 있습니다.

이 코드 조각은 SEO 및 소셜 미디어 공유를 위한 메타 태그를 설정하는 데 유용하지만, 개선을 위해 이미지 경로를 절대 경로로 수정하고 공통 메타 태그를 별도 파일로 관리하는 것이 좋습니다.

Expand Down
67 changes: 40 additions & 27 deletions src/pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,51 @@ import Button, {
TextColor,
TextSize,
} from '@/components/common/Button/Button';
import Head from 'next/head';
import Link from 'next/link';

export default function NotFound404() {
return (
<div className="flex h-screen flex-col items-center justify-center">
<div className="flex flex-col items-center">
<h1
className="relative mt-[50px] text-[10rem] text-brand-primary
<>
<Head>
<title>404 Not Found</title>
<meta name="description" content="페이지를 찾을 수 없습니다." />
<meta property="og:title" content="404 Not Found" />
<meta property="og:description" content="페이지를 찾을 수 없습니다." />
<meta
property="og:url"
content="https://coworkers-colla.netlify.app/404"
/>
</Head>
<div className="flex h-screen flex-col items-center justify-center">
<div className="flex flex-col items-center">
<h1
className="relative mt-[50px] text-[10rem] text-brand-primary
mob:text-[6rem]"
>
<span className="relative inline-block animate-bounce404-1">4</span>
<span className="relative inline-block animate-bounce404-2">0</span>
<span className="relative inline-block animate-bounce404-3">4</span>
</h1>
<h2 className="text-[5rem] mob:text-[3rem] ">Not Found</h2>
>
<span className="relative inline-block animate-bounce404-1">4</span>
<span className="relative inline-block animate-bounce404-2">0</span>
<span className="relative inline-block animate-bounce404-3">4</span>
</h1>
<h2 className="text-[5rem] mob:text-[3rem] ">Not Found</h2>
</div>
<p className="mb-10 text-2xl mob:text-xl-semibold">
페이지를 찾을 수 없습니다.
</p>
<Link href="/">
<Button
textSize={TextSize.Large}
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
buttonBackgroundColor={ButtonBackgroundColor.None}
buttonBorderColor={ButtonBorderColor.LightGray}
buttonPadding={ButtonPadding.Large}
className="border-2"
>
메인 페이지로 돌아가기
</Button>
</Link>
</div>
<p className="mb-10 text-2xl mob:text-xl-semibold">
페이지를 찾을 수 없습니다.
</p>
<Link href="/">
<Button
textSize={TextSize.Large}
buttonStyle={ButtonStyle.Box}
textColor={TextColor.White}
buttonBackgroundColor={ButtonBackgroundColor.None}
buttonBorderColor={ButtonBorderColor.LightGray}
buttonPadding={ButtonPadding.Large}
className="border-2"
>
메인 페이지로 돌아가기
</Button>
</Link>
</div>
</>
);
}
Copy link

@github-actions github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰를 하겠습니다. 이 코드에서 가장 큰 변경 사항은 <Head> 요소가 추가된 것입니다. <Head> 요소 내에는 페이지의 title 및 meta 정보가 포함되어 있습니다. 이러한 변경으로 인해 페이지의 SEO 및 메타데이터가 개선될 수 있습니다. 추가적으로, <><>를 사용하여 불필요한 <div> 태그를 제거하고 단순화할 수 있습니다. 이는 코드를 더 깔끔하고 가독성 높게 만들어줍니다. 코드에 버그와 같은 심각한 문제는 보이지 않으며, 개선을 위한 제안은 주로 코드의 구조적인 면에 있습니다. 현재 코드의 실행에 큰 문제는 없는 것으로 보입니다.

Loading