From 2063c9e9b64ae0f5113f64974f4aa9d26444b194 Mon Sep 17 00:00:00 2001 From: alreadyme24 Date: Tue, 28 May 2024 13:31:07 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=84=EC=8B=9C=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=ED=99=94=EB=A9=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/community/[category]/[id]/page.tsx | 2 +- app/join/auth/page.tsx | 103 ++++++++++++++++++++ app/join/component/Checkbox.tsx | 27 ++++++ app/join/input/page.tsx | 56 +++++++++++ app/join/page.tsx | 0 app/join/terms/page.tsx | 92 ++++++++++++++++++ app/login/page.tsx | 127 +++++++++++++++++++++++++ app/page.tsx | 5 +- components/Header.tsx | 7 +- public/icon/agree_checkbox.svg | 5 + public/icon/agree_checked_checkbox.svg | 15 +++ public/icon/autologin_checkbox.svg | 6 ++ tailwind.config.ts | 3 +- 13 files changed, 442 insertions(+), 6 deletions(-) create mode 100644 app/join/auth/page.tsx create mode 100644 app/join/component/Checkbox.tsx create mode 100644 app/join/input/page.tsx create mode 100644 app/join/page.tsx create mode 100644 app/join/terms/page.tsx create mode 100644 app/login/page.tsx create mode 100644 public/icon/agree_checkbox.svg create mode 100644 public/icon/agree_checked_checkbox.svg create mode 100644 public/icon/autologin_checkbox.svg diff --git a/app/community/[category]/[id]/page.tsx b/app/community/[category]/[id]/page.tsx index eaa9a93..c92fb25 100644 --- a/app/community/[category]/[id]/page.tsx +++ b/app/community/[category]/[id]/page.tsx @@ -10,7 +10,7 @@ export default async function Page({ const { category, id } = params const res = await fetch( - `${process.env.NEXT_PUBLIC_CLIENT_URL}/api/community/${category}/${id}` + `https://aptner.ha-ving.store/api/community/api/community/${category}/${id}` ) const responseData = await res.json() let componentProps = { responseData } diff --git a/app/join/auth/page.tsx b/app/join/auth/page.tsx new file mode 100644 index 0000000..051906a --- /dev/null +++ b/app/join/auth/page.tsx @@ -0,0 +1,103 @@ +"use client" +import { useRouter } from "next/navigation"; +import Checkbox from "../component/Checkbox"; + +export default function AuthPage() { + const router = useRouter(); + + const onClickNextButton = () => { + router.push("/join/input") + } + + return ( +
+
+
+
+
+
+
본인인증
+
+
+
본인인증없이 회원가입
+
+
+ +
+
+
이름
+ +
+
+
주민번호
+
+ +
-
+ +
******
+
+ {/* */} +
+
+
성별
+
+ + + {/* + + + + + + + */} +
+
+
+
통신사 선택
+
+
+
+
SKT
+
+
+
KT
+
+
+
LG U+
+
+
+
+
+
SKT 알뜰폰
+
+
+
KT 알뜰폰
+
+
+
LG U+ 알뜰폰
+
+
+
+
+
+
휴대폰 번호
+ + + +
+
+
+ +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/app/join/component/Checkbox.tsx b/app/join/component/Checkbox.tsx new file mode 100644 index 0000000..946c809 --- /dev/null +++ b/app/join/component/Checkbox.tsx @@ -0,0 +1,27 @@ +"use client" + +import { useState } from "react" + +import agree_checkbox_icon from "@/public/icon/agree_checkbox.svg" +import checked_icon from "@/public/icon/agree_checked_checkbox.svg" +import checkbox_icon from "@/public/icon/autologin_checkbox.svg" + + +type CheckboxProps = { + use: string, + label: string, +} + +export default function Checkbox({use, label} : CheckboxProps) { + const [checked, isChecked] = useState(false); + const agree = "text-zinc-900 text-base font-medium font-['Pretendard']"; + const check = "text-zinc-600 text-base font-normal font-['Pretendard']"; + + return ( +
isChecked(!checked)}> + + +
+ ) +} \ No newline at end of file diff --git a/app/join/input/page.tsx b/app/join/input/page.tsx new file mode 100644 index 0000000..6ae51fc --- /dev/null +++ b/app/join/input/page.tsx @@ -0,0 +1,56 @@ +"use client" + +import { useRouter } from "next/navigation"; + +export default function AuthPage() { + const router = useRouter(); + + const onClickNextButton = () => { + } + + return ( +
+
+
+
+
+
+
이름
+
김패캠
+
+
+
휴대폰 번호
+
010-1234-1234
+
+
+
아이디
+
+ + +
+ +
+
+
비밀번호
+ +
+
+
비밀번호 확인
+
+ + +
+
+
+
+ +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/app/join/page.tsx b/app/join/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/join/terms/page.tsx b/app/join/terms/page.tsx new file mode 100644 index 0000000..f1502fb --- /dev/null +++ b/app/join/terms/page.tsx @@ -0,0 +1,92 @@ +"use client" + +import agree_checkbox_icon from "@/public/icon/agree_checkbox.svg" +import agree_checked_icon from "@/public/icon/agree_checked_checkbox.svg" +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +export default function TermsPage() { + const [service, setServiceChecked] = useState(false); + const [personal, setPersonalChecked] = useState(false); + const [marketing, setMarketingChecked] = useState(false); + const [all, setAllChecked] = useState(false); + + const checkBoxClassName = "w-full justify-start items-center gap-2 inline-flex hover:cursor-pointer"; + const checkBoxLabelClassName = "hover:cursor-pointer text-zinc-900 text-base font-medium font-['Pretendard']"; + + const router = useRouter(); + + const onClickNextButton = () => { + router.push("/join/auth") + } + + return ( +
+
+
+
+
+
+ 서비스 이용약관 동의 1 +
+
+
+
setServiceChecked(!service)}> + + +
+
+
+
+ 서비스 이용약관 동의 2 +
+
+
+
setPersonalChecked(!personal)}> + + +
+
+
+
+ 서비스 이용약관 동의 3 +
+
+
+
setMarketingChecked(!marketing)}> + + +
+ +
+
+
+ +
{ + setAllChecked(!all); + setServiceChecked(!all); + setPersonalChecked(!all); + setMarketingChecked(!all); + }}> + + +
+
+ +
+ +
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..46993bf --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,127 @@ + +"use client" + +import Link from "next/link"; +import { useState } from "react"; +import { useRouter } from "next/navigation" + +import autologin_checkbox_Icon from "@/public/icon/autologin_checkbox.svg" +import agree_checked_icon from "@/public/icon/agree_checked_checkbox.svg" + +export default function Login() { + const [id, setId] = useState(""); + const [pwd, setPwd] = useState(""); + const [autoLogin, setAutoLogin] = useState(false); + + const [loginInfo, setLoginInfo] = useState(false); + const [popupOpen, setPopupOpen] = useState(false); + + const LoginCheck = () => { + + setPopupOpen(true); + console.log("id: ",id," pwd: ",pwd); + } + + const handleIdChange = ( + event: React.ChangeEvent + ): void => { + setId(event.currentTarget.value); + }; + + const handlePwdChange = ( + event: React.ChangeEvent + ): void => { + setPwd(event.currentTarget.value); + }; + + const handleSignin = async (): Promise => { + try { + // const response = await { + + // }; + // const accessToken = response.data.data.acc + + console.log("로그인 성공"); + } + catch(error) { + console.log("로그인 실패", error); + } + return; + }; + + const router = useRouter(); + + const onClickJoinButton = () => { + router.push("/join/terms") + } + + const width = 486; + const height= 455; + + return ( +
+
+
로그인
+
+ +
+
+
+ + +
+
+ +
+
+ +
+
+ setAutoLogin(!autoLogin)}> + + + + + 아이디찾기 + + 비밀번호찾기 + +
+
+
+
회원이 아니시라면?
+ +
+
+ {/* {popupOpen && setPopupOpen(false) } + content1="글 작성을 취소하시겠어요?" content2="임시저장 혹은 저장하지 않고 페이지를 벗어날 경우, 지금까지 작성한 내용이 사라집니다." + button1="머무르기" button2="페이지에서 나가기"/>} */} +
+ ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index c6dd544..bd82aea 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -25,7 +25,8 @@ export default function Home() { />
-
+ 관리비조회아이콘 관리비조회 -
+
-
+

관리사무소(09:00~18:00) : Tel 1600-3123 @@ -70,7 +70,10 @@ export default async function Header() {

앱 다운로드

마이페이지

-

로그아웃

+ {/* 임시 */} + +

로그인

+
diff --git a/public/icon/agree_checkbox.svg b/public/icon/agree_checkbox.svg new file mode 100644 index 0000000..836f394 --- /dev/null +++ b/public/icon/agree_checkbox.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/agree_checked_checkbox.svg b/public/icon/agree_checked_checkbox.svg new file mode 100644 index 0000000..a4a847b --- /dev/null +++ b/public/icon/agree_checked_checkbox.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/icon/autologin_checkbox.svg b/public/icon/autologin_checkbox.svg new file mode 100644 index 0000000..83994b2 --- /dev/null +++ b/public/icon/autologin_checkbox.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 155803d..20e6f9d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -32,7 +32,8 @@ const config: Config = { primary_dark: "#00669B", prugio: "#084F51", font_main: "#00A8FF", - dark_blue: "#00669B" + dark_blue: "#00669B", + dark_color: "#053A3C" }, screens: { small: "375px",