feat: 소셜 로그인 버튼 UI 구현 #3

eslint.config.mjs

@@ -18,7 +18,13 @@ const eslintConfig = [
   ),
   {
     rules: {
-      "@typescript-eslint/no-explicit-any": "off"
+      "@typescript-eslint/no-explicit-any": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto"
+        }
+      ]
     }
   }
 ]

next.config.ts

@@ -2,6 +2,14 @@ import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
   /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "placehold.co"
+      }
+    ]
+  }
 }
 
 export default nextConfig

src/app/(routes)/(root)/page.tsx

@@ -1,4 +1,6 @@
 import HeaderFooterWrapper from "@/components/layout/HeaderFooterWrapper"
+import { GoogleSymbol } from "@/icons/GoogleSymbol"
+import { KakaoSymbol } from "@/icons/KakaoSymbol"
 
 import Image from "next/image"
 
@@ -14,6 +16,16 @@ export default function Home() {
             </div>
             <Image src="https://placehold.co/229x229.png" width={229} height={229} alt="일러스트 이미지" />
           </div>
+          <div className="flex w-full flex-col gap-3">
+            <button className="flex items-center justify-center gap-3 rounded-xl border border-[#9CAAB9] py-4 hover:opacity-70 active:opacity-80">
+              <GoogleSymbol />
+              Google로 시작하기
+            </button>
+            <button className="flex items-center justify-center gap-3 rounded-xl bg-[#FEE500] py-4 hover:opacity-70 active:opacity-80">
+              <KakaoSymbol />
+              <span>카카오로 시작하기</span>
+            </button>
+          </div>
         </section>
       </div>
     </HeaderFooterWrapper>

src/icons/GoogleSymbol.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+interface GoogleSymbolProps {
+  size?: number | string
+}
+
+export const GoogleSymbol: React.FC<GoogleSymbolProps> = ({ size = "24px" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 48 48">
+    <path
+      fill="#4285F4"
+      d="M46.06 24.62c0-1.6-.14-3.13-.41-4.62H24v9.15h12.67c-.57 2.9-2.19 5.36-4.67 7.02v5.86h7.5c4.39-4.05 6.91-10.02 6.91-17.41z"
+    />
+    <path
+      fill="#34A853"
+      d="M24 48c6.3 0 11.55-2.1 15.4-5.69l-7.5-5.86c-2.1 1.42-4.8 2.26-7.9 2.26-6.08 0-11.24-4.11-13.1-9.64H3.2v6.03C7.09 42.12 14.94 48 24 48z"
+    />
+    <path
+      fill="#FBBC05"
+      d="M10.9 28.07c-.48-1.42-.74-2.92-.74-4.47s.26-3.05.74-4.47V13.1H3.2C1.17 17.1 0 20.9 0 24c0 3.11 1.17 6.9 3.2 10.9l7.7-6.03z"
+    />
+    <path
+      fill="#EA4335"
+      d="M24 9.54c3.43 0 6.51 1.18 8.93 3.49l6.64-6.64C34.98 2.05 30.3 0 24 0 14.94 0 7.09 5.88 3.2 13.1l7.7 6.03c1.86-5.53 7.02-9.64 13.1-9.64z"
+    />
+  </svg>
+)

src/icons/KakaoSymbol.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+interface KakaoSymbolProps {
+  size?: number | string
+  color?: string
+}
+
+export const KakaoSymbol: React.FC<KakaoSymbolProps> = ({ size = "24px", color = "currentColor" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 40 512 512" fill={color}>
+    <path d="M255.5 48C299.345 48 339.897 56.5332 377.156 73.5996C414.415 90.666 443.871 113.873 465.522 143.22C487.174 172.566 498 204.577 498 239.252C498 273.926 487.174 305.982 465.522 335.42C443.871 364.857 414.46 388.109 377.291 405.175C340.122 422.241 299.525 430.775 255.5 430.775C241.607 430.775 227.262 429.781 212.467 427.795C148.233 472.402 114.042 494.977 109.892 495.518C107.907 496.241 106.012 496.15 104.208 495.248C103.486 494.706 102.945 493.983 102.584 493.08C102.223 492.177 102.043 491.365 102.043 490.642V489.559C103.126 482.515 111.335 453.169 126.672 401.518C91.8486 384.181 64.1974 361.2 43.7185 332.575C23.2395 303.951 13 272.843 13 239.252C13 204.577 23.8259 172.566 45.4777 143.22C67.1295 113.873 96.5849 90.666 133.844 73.5996C171.103 56.5332 211.655 48 255.5 48Z" />
+  </svg>
+)