Merge pull request #53 from fastcampus-711/develop

PR_240603
fastcampus-711 · Jun 3, 2024 · dfce4d6 · dfce4d6
2 parents e44174d + 9eb0537
commit dfce4d6
Show file tree

Hide file tree

Showing 25 changed files with 1,270 additions and 85 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,6 @@ yarn-error.log*
 next-env.d.ts
 
 # testdata
-db.json
+db.json
+
+custom.d.ts
diff --git a/app/api/comment/[id]/route.ts b/app/api/comment/[id]/route.ts
@@ -0,0 +1,30 @@
+import type { NextRequest } from "next/server"
+
+export const GET = async (
+  request: NextRequest,
+  context: { params: { id: number } }
+) => {
+  const { id } = context.params
+
+  try {
+    const response = await fetch(
+      // `http://localhost:3001/${category}/${id}`,
+      `https://711.ha-ving.store/boards/${id}/comments?limit=10&page=1&sort=RECENT`,
+      {
+        headers: {
+          Authorization:
+            "Bearer eyJhbGciOiJIUzUxMiJ9.eyJpbWFnZSI6Imh0dHBzOi8vYXZhdGFycy5naXRodWJ1c2VyY29udGVudC5jb20vdS83OTI3MDIyOD92PTQiLCJwYXNzd29yZCI6IiQyYSQxMCRleHhmWXAveXZzNHpiY3cyRFNDalZlREFDaTVlcWZma01HaDlsVWwwTXFBRWRUM2h5WDVEeSIsInBob25lIjoiMDEwMTExMTIyMjIiLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwibmlja25hbWUiOiJuaWNrbmFtZTEiLCJpZCI6MjEsInVzZXJuYW1lIjoidXNlciIsImF1dGgiOlt7ImF1dGhvcml0eSI6IlJPTEVfVVNFUiJ9XSwiaWF0IjoxNzE3MDU5MjA5LCJleHAiOjE3MTk2NTEyMDl9.4bpxNGqYITfq2174mngAguJK3gQZ5gl7KzWB8N5eMQ4TV-e8_Ka7xlzCdGH8u6XEoiMywHZwJLM1_7tlAqtt0A"
+        },
+        cache: "no-store"
+      }
+    )
+    if (response.ok) {
+      const responseData = await response.json()
+      return Response.json(responseData.data)
+    } else {
+      console.error("게시물 불러오기를 실패했습니다.")
+    }
+  } catch (error) {
+    console.error("에러 발생:", error)
+  }
+}
diff --git a/app/community/[category]/[id]/page.tsx b/app/community/[category]/[id]/page.tsx
@@ -13,7 +13,7 @@ export default async function Page({
     `${process.env.NEXT_PUBLIC_CLIENT_URL}/api/community/${category}/${id}`
   )
   const responseData = await res.json()
-  let componentProps = { responseData }
+  let componentProps = { responseData, category }
   let contentComponent
 
   if (category === "qnas") {

diff --git a/app/community/[category]/page.tsx b/app/community/[category]/page.tsx
@@ -20,7 +20,7 @@ export default async function Page({
     `${process.env.NEXT_PUBLIC_CLIENT_URL}/api/community/${category}?catid=${catid}&keyword=${keyword}&page=${page}`
   )
   const responseData = await res.json()
-  let componentProps = { responseData, category, catid, page }
+  let componentProps = { responseData, category, keyword, catid, page }
   let contentComponent
 
   if (category === "qnas") {

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -0,0 +1,14 @@
+import LoginContent from "@/components/LoginContent";
+
+export default async function Page() {
+  return (
+    <div className="max-w-[1200px] m-auto">
+      <div className="w-full border-b border-grey_600">
+        <p className="px-5 py-[22px] text-grey_900 text-[22px] font-normal">로그인</p>
+      </div>
+      <div className="flex flex-col py-20 justify-center items-center">
+        <LoginContent />
+      </div>
+    </div>
+  )
+}
diff --git a/app/user/[category]/[item]/page.tsx b/app/user/[category]/[item]/page.tsx
@@ -0,0 +1,49 @@
+import AuthContent from "@/components/AuthContent"
+import FindIdContent from "@/components/FindIdContent"
+import FindPwdContent from "@/components/FindPwdContent"
+import InputUserInfoContent from "@/components/InputUserInfoContent"
+import TermsContent from "@/components/TermsContent"
+
+export default function Page({
+  params
+}: {
+  params: { category: string, item: string }
+}) {
+  const { category, item } = params
+
+  let contentComponent
+  let pageName
+
+  if(category === "find") {
+    pageName="아이디/비밀번호 찾기"
+  } else if(category === "join") {
+    pageName="회원가입"
+  } else {
+    pageName = "사용자"
+  }
+
+  if (item === "by-name-and-phone") {
+    contentComponent = <FindIdContent page={category}/>
+  } else if (item === "by-id-and-phone") {
+    contentComponent = <FindPwdContent page={category}/>
+  } else if(item === "terms") {
+    contentComponent = <TermsContent/>
+  } else if(item === "auth") {
+    contentComponent = <AuthContent/>
+  } else if(item === "signUp") {
+    contentComponent = <InputUserInfoContent/>
+  } else {
+    contentComponent = null
+  }
+
+  return (
+    <div className="max-w-[1200px] m-auto">
+      <div className="w-full border-b border-grey_600">
+        <p className="px-5 py-[22px] text-grey_900 text-[22px] font-normal">{pageName}</p>
+      </div>
+      <div className="flex flex-col py-20 justify-center items-center">
+        {contentComponent}
+      </div>
+    </div>
+  )
+}
diff --git a/components/AuthContent.tsx b/components/AuthContent.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import agree_checkbox_icon from "@/public/icon/agree_false.svg"
+import agree_checked_icon from "@/public/icon/agree_true.svg"
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function AuthContent() {
+    const regularPhone = [["SKT", "KT", "LG U+"], ["SKT 알뜰폰", "KT 알뜰폰", "LG U+ 알뜰폰"]]
+
+    const [male, isMale] = useState(false)
+    const [female, isFemale] = useState(false)
+    const [btnClicked, setBtnClicked] = useState(0)
+
+    const router = useRouter();
+
+    const handleNextButton = () => {
+        router.push(`/user/join/signUp`)
+    }
+
+    return (
+        <>
+        <div className="max-w-[486px] flex flex-col gap-8">
+            <div className="inline-flex justify-between items-center">
+                <p className="w-[120px] h-10 text-grey_800 text-[22px]">본인인증</p>
+                <p className="h-5 text-right text-grey_250 text-sm border-b border-grey_250">본인인증없이 회원가입</p>
+            </div>
+            <div className="inline-flex items-center">
+                <p className="w-[120px] h-8 text-grey_500">이름</p>
+                <input className="grow shrink h-10 px-4 bg-grey_25 rounded-[7px] border border-grey_100"/>
+            </div>
+            <div className="inline-flex items-center">
+                <p className="w-[120px] h-8 text-grey_500">주민번호</p>
+                <span className="inline-flex gap-4">
+                    <input required maxLength={6} minLength={6} className="w-[120px] h-10 px-4 bg-grey_25 rounded-[7px] border border-grey_100"/>
+                    <p className="text-grey_250 text-base font-normal py-2">-</p>
+                    <input required maxLength={1} minLength={1} className="w-[29px] h-10 px-4 bg-grey_25 rounded-[7px] border border-grey_100"/>
+                    <p className="text-grey_250 text-base font-normal py-2">* * * * * *</p>
+                </span>
+
+            </div>
+            <div className="inline-flex items-center ">
+                <p className="w-[120px] h-8 text-grey_500">성별</p>
+                <div className="inline-flex h-5 items-center gap-6">
+                    <input id="male" type="checkbox" className={`hidden`}
+                            checked={male} onChange={() => {isMale(!male); isFemale(male)}}/>
+                    <label htmlFor="male" className={`w-full justify-center items-center gap-2 inline-flex hover:cursor-pointer`}>
+                        <img src={male == false ? agree_checkbox_icon.src : agree_checked_icon.src} />               
+                        <p>남자</p>
+                    </label>   
+                    <input id="female" type="checkbox" className={`hidden`}
+                            checked={female} onChange={() => {isFemale(!female); isMale(female)}}/>
+                    <label htmlFor="female" className={`w-full justify-center items-center gap-2 inline-flex hover:cursor-pointer`}>
+                        <img src={female == false ? agree_checkbox_icon.src : agree_checked_icon.src} />               
+                        <p>여자</p>
+                    </label>  
+                </div>
+            </div>
+            <div className="inline-flex items-center">
+                <p className="w-[120px] h-8 text-grey_500">통신사 선택</p>
+                <div className="flex flex-col gap-2 text-sm">
+                    <span className="inline-flex gap-2">
+                        {regularPhone[0].map((item, index) => (
+                            <button className={`px-4 py-2.5 rounded-lg border border-grey_100 ${btnClicked === index ? "bg-main_color text-grey_50" : "bg-grey_25"}`}
+                                    onClick={() => setBtnClicked(index)}>{item}</button>
+                        ))}
+                    </span>
+                    <span className="inline-flex gap-2">
+                        {regularPhone[1].map((item, index) => (
+                            <button className={`px-4 py-2.5 rounded-lg border border-grey_100 ${btnClicked === index + 3? "bg-main_color text-grey_50" : "bg-grey_25"}`}
+                                    onClick={() => setBtnClicked(index + 3)}>{item}</button>
+                        ))}
+                    </span>
+                </div>
+
+            </div>
+            <div className="inline-flex items-center">
+                <p className="w-[120px] h-8 text-grey_500">휴대폰 번호</p>
+                <div className="inline-flex gap-2">
+                    <input className="grow shrink h-10 px-4 bg-grey_25 rounded-[7px] border border-grey_100"
+                           placeholder="-없이 입력"/>
+                    <button className="h-10 px-4 bg-grey_500 rounded-lg
+                                       text-grey_50 text-sm whitespace-nowrap">인증번호 요청</button>
+                </div>
+
+            </div>
+            <button className="w-full px-[200px] py-6 bg-main_color rounded 
+                            text-center text-white text-lg font-semibold"
+                    onClick={handleNextButton}>다음</button>
+        </div>
+        </>
+
+    )
+}
diff --git a/components/FindIdContent.tsx b/components/FindIdContent.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+
+type User = {
+    name: string
+    phone: string
+    id: string
+}
+
+export default function FindIdContent({page} : {page: string}) {
+    const [name, setName] = useState("")
+    const [phoneNumbers, setphoneNumbers] = useState<string[]>(["", "", ""])
+    const [foundId, setFoundId] = useState<string | null>(null)
+
+    const [message, setMessage] = useState("")
+
+    const handlePhoneNumberChange = (index: number, value: string) => {
+        const newPhoneNumberParts = [...phoneNumbers]
+        newPhoneNumberParts[index] = value
+        setphoneNumbers(newPhoneNumberParts)
+    }
+    const isValidPhoneNumber = (): boolean => {
+        const phoneNumber = phoneNumbers.join("-");
+        const phonePattern =  /^\d{3}-\d{4}-\d{4}$/
+        // return phoneNumbers.every(part => /^\d{3}$/.test(part))
+        return phonePattern.test(phoneNumber)
+    }
+
+    const handleSearch = async () => {
+        const phoneNumber = phoneNumbers.join("-");
+
+        if(!isValidPhoneNumber()) {
+            alert("오류")
+            return;
+        }
+
+        // const response = await fetch(`http://localhost:3001/findId?name=${name}&phone=${phoneNumber}`)
+        // const userData: User[] = await response.json()
+
+        // if(userData){
+        //     setFoundId(userData[0].id)      
+        //     setMessage(`'${name}' 님의 아이디는 '${foundId}'입니다.`)
+        // }
+    }
+
+    const buttonClassName = `px-4 py-6 grow shrink basis-0 
+                            bg-grey_25 rounded border border-grey_100
+                            text-center text-grey_300 text-base font-medium`
+
+    const selectedButtonClassName = `px-4 py-6 grow shrink basis-0 
+                                    bg-grey_25 rounded border border-main_color
+                                    text-center text-main_color text-base font-medium`
+
+    const router = useRouter()
+
+    const handleFindIdClicked = () => {
+        router.push(`/user/find/by-name-and-phone`)
+    }
+    const handleFindPwdClicked = () => {
+        router.push(`/user/find/by-id-and-phone`)
+    }
+
+    return (
+        <>
+            <div className="w-[486px] flex flex-col gap-8">
+                <div className="inline-flex justify-between gap-2">
+                    <button className={selectedButtonClassName}
+                            onClick={handleFindIdClicked}>아이디 찾기</button>
+                    <button className={buttonClassName}
+                            onClick={handleFindPwdClicked}>비밀번호 찾기</button>
+                </div>
+                <div className="flex flex-col gap-8">
+                    <div className="inline-flex items-center">
+                        <p className="w-[120px] text-grey_500 text-base font-normal">이름</p>
+                        <input required={true} className="grow shrink basis-0 px-4 h-10 bg-grey_25 rounded-lg border border-grey_100"
+                               value={name} onChange={e => setName(e.target.value)}></input>
+                    </div>
+                    <div className="inline-flex items-center">
+                        <p className="w-[120px] text-grey_500 text-base font-normal">휴대폰 번호</p>
+                        <div className="inline-flex grow shrink basis-0 h-10 justify-between gap-4">
+                            {phoneNumbers.map((part, index) => [
+                                <input required key={index} maxLength={4} value={part} className="w-[87px] px-4 bg-grey_25 rounded-lg border border-grey_100"
+                                       onChange={e => handlePhoneNumberChange(index, e.target.value)} />,
+                                index < 2 && <p key={`hyphen_${index}`} className="text-grey_250 text-base font-normal py-2">-</p >
+                            ])}
+                        </div>
+                    </div>
+                </div>
+                <button className="py-6 bg-main_color rounded
+                                text-center text-white text-lg font-semibold"
+                        onClick={handleSearch}>
+                    아이디 조회
+                </button>
+                <p>{message}</p>
+            </div>
+        </>
+    )
+}