Merge branch 'develop' of https://github.com/Kernel360/f1-Yigil into …

…74-내-정보-조회

.github/ISSUE_TEMPLATE/yigil-issue-template.md

@@ -0,0 +1,16 @@
+---
+name: Yigil issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+### 📝Description
+
+### ✅Task
+- [ ] task1
+- [ ] task2
+
+### ✍️Additional

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+## Motivation 🧐
+
+-
+
+<br>
+
+## Key Changes 🔑
+
+<br>
+
+## To Reviewers 🙏

frontend/src/app/_components/header/Header.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import HeaderIcons from './ui/HeaderIcons';
+import HeaderLogo from './ui/HeaderLogo';
+
+export default function Header() {
+  return (
+    <div className="w-full h-[80px] flex justify-center items-center">
+      <HeaderLogo />
+      <HeaderIcons />
+    </div>
+  );
+}

frontend/src/app/_components/header/ui/HeaderIcons.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import React from 'react';
+import SearchIcon from '/public/icons/search.svg';
+import BellIcon from '/public/icons/bell.svg';
+import Link from 'next/link';
+
+export default function HeaderIcons() {
+  return (
+    <div className="absolute right-4 flex items-center gap-x-2 ">
+      <Link href="/search">
+        <Image src={SearchIcon} alt="search-icon" />
+      </Link>
+      <Link href="/notification">
+        <Image src={BellIcon} alt="bell-icon" />
+      </Link>
+    </div>
+  );
+}

frontend/src/app/_components/header/ui/HeaderLogo.tsx

@@ -0,0 +1,7 @@
+import Image from 'next/image';
+import React from 'react';
+import headerLogo from '/public/logo/header-logo.svg';
+
+export default function HeaderLogo() {
+  return <Image src={headerLogo} alt="yigil-header-logo" />;
+}

frontend/src/app/_components/ui/button/GoogleLoginButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import Image from 'next/image';
+import { signIn } from 'next-auth/react';
+
+import googleLogo from '@/../public/loginBtns/google_login.svg';
+
+export default function GoogleLoginButton() {
+  return (
+    <button
+      className="w-[300px] border-none hover:cursor-pointer flex rounded-full px-[24px] py-[8px] items-center"
+      onClick={() => signIn('google', { callbackUrl: '/' })}
+    >
+      <Image src={googleLogo} alt="Google Logo" width={24} height={24} />
+      <span className="ml-[32px] text-lg">Google 계정으로 로그인</span>
+    </button>
+  );
+}

frontend/src/app/_components/ui/button/Kakao.tsx

@@ -1,15 +1,17 @@
-import { signIn } from 'next-auth/react'
-import Image from 'next/image'
-import React from 'react'
-import kakaoLogo from '../../../../../public/loginBtns/kakao_logo.png'
+'use client';
+
+import { signIn } from 'next-auth/react';
+import Image from 'next/image';
+import React from 'react';
+import kakaoLogo from '../../../../../public/loginBtns/kakao_logo.png';
 
 export default function KakaoBtn() {
   return (
     <button
       className="bg-[#fee500] w-[300px] h-[45px] flex justify-start text-center items-center rounded-md p-[15px] cursor-pointer border-none"
       onClick={() =>
         signIn('kakao', {
-          callbackUrl: '/home',
+          callbackUrl: '/',
         })
       }
     >
@@ -18,5 +20,5 @@ export default function KakaoBtn() {
       </span>
       <span className="ml-[40px] text-lg text-center">Kakao 로그인하기</span>
     </button>
-  )
+  );
 }

frontend/src/app/api/auth/[...nextauth]/route.ts

@@ -1,29 +1,30 @@
-import NextAuth from 'next-auth'
-import GoogleProvider from 'next-auth/providers/google'
-import KaKaoProvider from 'next-auth/providers/kakao'
+import NextAuth from 'next-auth';
+import GoogleProvider from 'next-auth/providers/google';
+import KaKaoProvider from 'next-auth/providers/kakao';
 
 const handler = NextAuth({
   providers: [
     GoogleProvider({
-      clientId: process.env.GOOGLE_CLIENT_ID || '',
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
     }),
     KaKaoProvider({
-      clientId: process.env.KAKAO_ID || '',
-      clientSecret: process.env.KAKAO_SECRET || '',
+      clientId: process.env.KAKAO_ID,
+      clientSecret: process.env.KAKAO_SECRET,
     }),
   ],
-  secret: process.env.NEXTAUTH_SECRET || '',
+  secret: process.env.NEXTAUTH_SECRET,
   callbacks: {
     async signIn({ user }) {
-      console.log(user)
+      console.log(user);
+
       /**
        * 백엔드와 api 통신
        * 회원가입 해야 하는
        * if(user.email)
        */
       // 로그인 된 다면 true 안되면 redirect end
-      return true
+      return true;
     },
     // async jwt({ token, user }) {
     //   return { ...token, ...user }
@@ -39,6 +40,6 @@ const handler = NextAuth({
     signIn: '/login',
     error: '/login_error',
   },
-})
+});
 
-export { handler as GET, handler as POST }
+export { handler as GET, handler as POST };

frontend/src/app/follow/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function FollowPage() {
+  return <div>FollowPage</div>;
+}

frontend/src/app/login/_components/ui/LoginLogo.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function LoginLogo() {
+  return (
+    <div>LoginLogo</div>
+  )
+}

frontend/src/app/login/page.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import KakaoBtn from '@/app/_components/ui/button/Kakao';
+import GoogleLoginButton from '@/app/_components/ui/button/GoogleLoginButton';
+
+import LoginLogo from './_components/ui/LoginLogo';
+
+export default function LoginPage() {
+  return (
+    <div className="w-full h-screen bg-main flex flex-col justify-center items-center">
+      <LoginLogo />
+      <div className="text-xl text-[white]">
+        서비스를 사용하시려면 로그인 해주세요
+      </div>
+      <div className="mt-8 flex flex-col items-center justify-center gap-4">
+        <KakaoBtn />
+        <GoogleLoginButton />
+      </div>
+    </div>
+  );
+}

frontend/src/app/mygil/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function MyGilPage() {
+  return <div>MyGilPage</div>;
+}

frontend/src/app/mypage/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function MyPage() {
+  return <div>MyPage</div>;
+}

frontend/src/app/notification/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NotificationPage() {
+  return <div>NotificationPage</div>;
+}
+
+export default NotificationPage;