Docker hostname 변경

.env

@@ -1,5 +1,7 @@
 //DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@jongyeob.com/learnsteam_quiz"
-NEXTAUTH_URL=https://learnsteam-quiz.jongyeob.com
+DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@db/learnsteam_quiz"
-NEXT_PUBLIC_HOST=https://learnsteam-quiz.jongyeob.com
+//DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@127.0.0.1/learnsteam_quiz"
-NEXT_PUBLIC_API_ENDPOINT=https://learnsteam-quiz-api.jongyeob.com
+NEXTAUTH_URL=http://localhost:3000
+NEXT_PUBLIC_HOST=http://localhost:3000
+NEXT_PUBLIC_API_ENDPOINT=http://localhost:3000
 NEXTAUTH_SECRET=dd87d8220ed9535d3152910f62ca40fb8ae292ac527e9528425118406aebbce0

.env.dev.sample

@@ -1,4 +1,4 @@
-DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@db/learnsteam_quiz"
+DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@learnsteam-db/learnsteam_quiz"
 //DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@127.0.0.1/learnsteam_quiz"
 NEXTAUTH_URL=https://learnsteam-quiz.jongyeob.com
 NEXT_PUBLIC_HOST=https://learnsteam-quiz.jongyeob.com

.env.local.sample

@@ -1,5 +1,5 @@
 //DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@jongyeob.com/learnsteam_quiz"
-DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@db/learnsteam_quiz"
+DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@learnsteam-db/learnsteam_quiz"
 //DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@127.0.0.1/learnsteam_quiz"
 NEXTAUTH_URL=http://localhost:3100
 NEXT_PUBLIC_HOST=http://localhost:3100

.env.prod.sample

@@ -1,4 +1,4 @@
-DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@db/learnsteam_quiz"
+DATABASE_URL="mysql://root:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@learnsteam-db/learnsteam_quiz"
 //DATABASE_URL="mysql://learnsteam:fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6@jongyeob.com/learnsteam_quiz"
 NEXTAUTH_URL=https://learnsteam-quiz.jongyeob.com
 NEXT_PUBLIC_HOST=https://learnsteam-quiz.jongyeob.com

docker/dev/docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3"
 
 services:
-  db:
+  learnsteam-db:
     image: mysql:latest
     environment:
       MYSQL_ROOT_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
@@ -10,7 +10,7 @@ services:
       - "33062:3306"
     volumes:
       - db-learnsteam-quiz:/var/lib/mysql
-  app:
+  learnsteam-quiz:
     build:
       context: ../../
       dockerfile: docker/dev/Dockerfile
@@ -18,13 +18,13 @@ services:
     ports:
       - "3100:3100"
     environment:
-      DB_HOST: db
+      DB_HOST: learnsteam-db
       DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
       DB_NAME: learnsteam_quiz
     depends_on:
-      - db
+      - learnsteam-db
     restart: always
 volumes:
   db-learnsteam-quiz:

docker/local/docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3"
 
 services:
-  db:
+  learnsteam-db:
     image: mysql:latest
     environment:
       MYSQL_ROOT_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
@@ -10,7 +10,7 @@ services:
       - "33062:3306"
     volumes:
       - db-learnsteam-quiz:/var/lib/mysql
-  app:
+  learnsteam-quiz:
     build:
       context: ../../
       dockerfile: docker/local/Dockerfile
@@ -18,13 +18,13 @@ services:
     ports:
       - "3100:3100"
     environment:
-      DB_HOST: db
+      DB_HOST: learnsteam-db
       DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
       DB_NAME: learnsteam_quiz
     depends_on:
-      - db
+      - learnsteam-db
     restart: always
 volumes:
   db-learnsteam-quiz:

docker/prod/docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3"
 
 services:
-  db:
+  learnsteam-db:
     image: mysql:latest
     environment:
       MYSQL_ROOT_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
@@ -10,7 +10,7 @@ services:
       - "33062:3306"
     volumes:
       - db-learnsteam-quiz:/var/lib/mysql
-  app:
+  learnsteam-quiz:
     build:
       context: ../../
       dockerfile: docker/prod/Dockerfile
@@ -18,13 +18,13 @@ services:
     ports:
       - "3100:3100"
     environment:
-      DB_HOST: db
+      DB_HOST: learnsteam-db
       DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: fbOgZ6Xxn5VXBYihjqygRXyaK6ZUgKL6
       DB_NAME: learnsteam_quiz
     depends_on:
-      - db
+      - learnsteam-db
     restart: always
 volumes:
   db-learnsteam-quiz:

package.json

@@ -21,6 +21,7 @@
     "lucide-react": "^0.291.0",
     "moment": "^2.29.4",
     "next": "14.0.1",
+    "next-auth": "^4.24.5",
     "numeral": "^2.0.6",
     "qs": "^6.11.2",
     "react": "^18",

src/components/login/LoginForm.tsx

@@ -0,0 +1,163 @@
+import DefaultModal from "@/components/shared/ui/default-modal"
+import { Alert, Button, Card, Checkbox, Divider, Flex, Form, Input } from "antd"
+import { useForm } from "antd/lib/form/Form"
+import { signIn } from "next-auth/react"
+import { useRouter } from "next/router"
+import React, { useCallback, useState } from "react"
+import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons"
+
+interface ILoginFormValue {
+  username: string
+  password: string
+}
+
+const LoginForm = () => {
+  const router = useRouter()
+  const [form] = useForm<ILoginFormValue>()
+  const [isLoading, setIsLoading] = useState(false)
+  const [showPasswordModal, setShowPasswordModal] = useState(false)
+
+  const handleFinish = useCallback(async (value: ILoginFormValue) => {
+    setIsLoading(true)
+
+    try {
+      console.log(value)
+      await signIn("login-credentials", { username: value.username, password: value.password })
+    } catch (error) {
+      setIsLoading(false)
+    }
+  }, [])
+
+  // 카카오톡 로그인 핸들러
+  const handleKakaoLogin = () => {
+    // 카카오톡 로그인 처리 로직 구현
+    console.log("카카오톡 로그인 진행")
+  }
+
+  const onFinish = () => {}
+
+  const onFinishFail = () => {}
+
+  return (
+    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
+      <Card style={{ width: "320px" }}>
+        <Form name="normal_login" initialValues={{ remember: true }} onFinish={onFinish} className="login-form">
+          <Form.Item>
+            <Button
+              type="link"
+              htmlType="button"
+              className="login-form-button"
+              style={{
+                height: "40px",
+                width: "100%",
+                backgroundColor: "#FEE500",
+                color: "#000000",
+                marginBottom: "20px",
+              }}
+              onClick={handleKakaoLogin}
+              block
+            >
+              카카오 로그인
+            </Button>
+          </Form.Item>
+
+          <Divider>OR LOGIN WITH EMAIL</Divider>
+
+          <Form.Item name="username" rules={[{ required: true, message: "Please input your username!" }]}>
+            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="아이디" />
+          </Form.Item>
+          <Form.Item name="password" rules={[{ required: true, message: "Please input your Password!" }]}>
+            <Input.Password
+              prefix={<LockOutlined className="site-form-item-icon" />}
+              placeholder="비밀번호"
+              iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Form.Item name="remember" valuePropName="checked" noStyle>
+              <Checkbox>로그인 기억</Checkbox>
+            </Form.Item>
+
+            <a className="login-form-forgot" href="" style={{ float: "right" }}>
+              비밀번호 찾기
+            </a>
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="login-form-button"
+              style={{ height: "40px", width: "100%" }}
+              block
+            >
+              로그인
+            </Button>
+          </Form.Item>
+          <Form.Item>
+            <Button type="link" htmlType="button">
+              계정이 없으신가요? 회원가입!
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}
+// <Flex justify={"center"} align={"center"} vertical>
+//   <h1>코딩스쿨 로그인</h1>
+//   <Card>
+//     {router?.query.error && router?.query.error !== "CredentialsSignin" ? (
+//       <div className="mb-3">
+//         <Alert message={`로그인 중 오류가 발생했습니다. ${router?.query.error}`} type="warning" />
+//       </div>
+//     ) : null}
+//     <Flex>
+//       <a className="flex items-center justify-center h-20 grow btn" onClick={() => signIn("github")}>
+//         <svg width="28" height="28" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+//           <path
+//             fillRule="evenodd"
+//             clipRule="evenodd"
+//             d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+//             fill="#24292f"
+//           />
+//         </svg>
+//         카카오톡
+//       </a>
+//     </Flex>
+//     <Divider> OR LOGIN with EMAIL</Divider>
+//     <Form<ILoginFormValue>
+//       form={form}
+//       layout="vertical"
+//       initialValues={{ username: "admin", password: "admin" }}
+//       onFinish={handleFinish}
+//     >
+//       <div className="mb-3">
+//         {router?.query.error === "CredentialsSignin" ? (
+//           <>
+//             <Alert message="로그인을 실패했습니다. 아이디 또는 비밀번호를 다시 확인해주세요." type="error" />
+//           </>
+//         ) : (
+//           <></>
+//         )}
+//       </div>
+//       <Form.Item name="username" rules={[{ required: true, message: "아이디를 입력해주세요" }]}>
+//         <Input size="large" placeholder="아이디" />
+//       </Form.Item>
+
+//       <Form.Item name="password" rules={[{ required: true, message: "비밀번호를 입력해주세요" }]}>
+//         <Input placeholder="비밀번호" type="password" size="large" />
+//       </Form.Item>
+
+//       <Button size="large" type="primary" htmlType="submit" className="w-full" loading={isLoading}>
+//         로그인
+//       </Button>
+
+//       <a className="inline-block mt-2 text-gray-400" onClick={() => setShowPasswordModal(true)}>
+//         비밀번호 찾기
+//       </a>
+//     </Form>
+//   </Card>
+// </Flex>
+
+export default React.memo(LoginForm)

src/components/login/TitleBGImage/index.tsx

@@ -1,18 +0,0 @@
-import styles from "./styles.module.css"
-
-export const TitleBGImage = () => {
-  return (
-    <div className={styles["title-bgimage-wraps"]}>
-      <div className={styles["title-top-wrap"]}>
-        <div></div>
-        <div className={styles["title-bgimage-2"]}></div>
-      </div>
-      <div className={styles["title-bottom-wrap"]}>
-        <div className={styles["title-bgimage-1"]}></div>
-        <div></div>
-      </div>
-    </div>
-  )
-}
-
-export default TitleBGImage

src/components/login/TitleBGImage/styles.module.css

@@ -1,39 +0,0 @@
-.title-bgimage-wraps {
-  width: 100%;
-  height: 100%;
-  background-color: #051224;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  position: absolute;
-}
-
-.title-top-wrap {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.title-bottom-wrap {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.title-bgimage-1 {
-  background-image: url("/title_bgimage_1.png");
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 747px;
-  height: 394px;
-}
-
-.title-bgimage-2 {
-  background-image: url("/title_bgimage_2.png");
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 709px;
-  height: 325px;
-}

src/components/login/TitleLogo/index.tsx

@@ -1,10 +0,0 @@
-import styles from "./styles.module.css"
-
-const TitleLogo = () => {
-  return (
-    <>
-      <div className={styles["title-image"]}></div>
-    </>
-  )
-}
-export default TitleLogo

src/components/login/TitleLogo/styles.module.css

@@ -1,25 +0,0 @@
-.title-image {
-  background-image: url("/title2.png");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  width: 83vw;
-  height: 30vh;
-  top: 16vh;
-  position: absolute;
-  animation-name: title-move;
-  animation-duration: 1s;
-  animation-iteration-count: 1;
-  transition: all ease-in-out;
-}
-
-@keyframes title-move {
-  from {
-    opacity: 0;
-    top: 20vh;
-  }
-  to {
-    opacity: 1;
-    top: 16vh;
-  }
-}

src/components/login/index.tsx

@@ -1,24 +0,0 @@
-import dynamic from "next/dynamic"
-import styles from "./styles.module.css"
-import TitleBGImage from "./TitleBGImage"
-import TitleLogo from "./TitleLogo"
-
-const Login = () => {
-  // const GoogleOneTapLogin = dynamic(() => import("./GoogleOneTapLogin"), {
-  //   ssr: false,
-  // })
-
-  return (
-    <div className={styles["container"]}>
-      <TitleBGImage />
-      <div className={styles["title"]}>
-        <div className={styles["title-wrapper"]}>
-          <TitleLogo />
-          {/* <GoogleOneTapLogin /> */}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Login

src/components/login/styles.module.css

@@ -1,26 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-}
-
-.title {
-  align-items: flex-start;
-  background-color: var(--white);
-  border: 1px none;
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-
-.title-wrapper {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}

src/pages/login/index.tsx

@@ -1,7 +1,7 @@
-import Login from "@/components/login"
+import LoginForm from "@/components/login/LoginForm"
 
-const Index = () => {
+const LoginPage = () => {
-  return <Login />
+  return <LoginForm />
 }
 
-export default Index
+export default LoginPage