Skip to content

Commit

Permalink
Merge pull request #134 from fastcampus-711/develop
Browse files Browse the repository at this point in the history 
feat: 드롭다운 색 변경, 관리비 드롭다운 적용, 자동 로그인 호버 제거
  • Loading branch information
@alreadyme24
alreadyme24 authored Jun 11, 2024
2 parents eb62cb9 + c170146 commit cf780e6
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 215 deletions.
86 changes: 58 additions & 28 deletions components/DetailFeeContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Image from "next/image"

import feeIncrease from "@/public/icon/fee_increase.svg"
import feeDecrease from "@/public/icon/fee_decrease.svg"
import FeeDropDown from "./dropdown/FeeDropDown"
import DetailFeeItems from "./DetailFeeItems"

type id = {
house_id: number
Expand Down Expand Up @@ -110,6 +112,11 @@ type props = {
lastYearDetails: any
}

type DetailItems = {
label: string
value1?: number
value2?: number
}
export default function DetailFeeContent({
year,
month,
Expand Down Expand Up @@ -138,10 +145,11 @@ export default function DetailFeeContent({
const subFee : sub_maintenance_fee = detail && detail.sub_maintenance_fee
const lastSubFee : sub_maintenance_fee = lastDetail && lastDetail.sub_maintenance_fee


const [category, setCategory] = useState("전기")
const unit : string[] = ["Kwh", "m³", "Mcal/h", "MJ"]

const detailItems = [
const detailItems : DetailItems[] = [
{label: "일반 관리비", value1: subFee && subFee.general_maintenance_fee, value2:lastSubFee && lastSubFee.general_maintenance_fee},
{label: "청소비", value1:subFee && subFee.cleaning_fee, value2:lastSubFee && lastSubFee.cleaning_fee},
{label: "경비비", value1:subFee && subFee.security_fee, value2:lastSubFee && lastSubFee.security_fee},
Expand All @@ -151,6 +159,21 @@ export default function DetailFeeContent({
{label: "대표회의운영비", value1:subFee && subFee.representative_meeting_fee, value2:lastSubFee && lastSubFee.representative_meeting_fee},
]

const dropdownOptions = [
{
value: "bill",
name: "고지서 순"
},
{
value: "high",
name: "높은 요금 순"
},
{
value: "low",
name: "낮은 요금 순"
},

]
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1; //왜 4월로 나오지...?

Expand Down Expand Up @@ -226,6 +249,22 @@ export default function DetailFeeContent({
compareAverageUsage()
},[energyIndex])




const sortByDifferenceDesc = (a: DetailItems, b: DetailItems) => {
const diff1 = (a.value1 ?? 0) - (a.value2 ?? 0)
const diff2 = (b.value1 ?? 0) - (b.value2 ?? 0)
return diff2 - diff1
}
const sortByDifferenceAsc = (a: DetailItems, b: DetailItems) => {
const diff1 = (a.value1 ?? 0) - (a.value2 ?? 0)
const diff2 = (b.value1 ?? 0) - (b.value2 ?? 0)
return diff1 - diff2
}
const sortedByDifferenceDesc = [...detailItems].sort(sortByDifferenceDesc)
const sortedByDifferenceAsc = [...detailItems].sort(sortByDifferenceAsc)

const handleSelectYearChange = (event : React.ChangeEvent<HTMLSelectElement>) => {
const select = parseInt(event.target.value)
setSelectedYear(select)
Expand All @@ -237,6 +276,18 @@ export default function DetailFeeContent({
router.push(`/fee/detail?year=${selectedYear}&month=${select}`)
}

const [sortedByDifferenceItem, setSortedByDifferenceItem] = useState(detailItems)

const handleDropdownChange = (e:any) => {
if(e === "high"){
setSortedByDifferenceItem(sortedByDifferenceDesc)
} else if(e === "low"){
setSortedByDifferenceItem(sortedByDifferenceAsc)
} else {
setSortedByDifferenceItem(detailItems)
}
}

return (
<>
<div className="flex flex-col gap-8 max-w-[1200px] m-auto pb-10">
Expand Down Expand Up @@ -396,8 +447,9 @@ export default function DetailFeeContent({
</div>

<div className="flex flex-col bg-white rounded-2xl border border-grey_200">
<div className="border-b border-grey_200 px-10 py-6">
{selectedMonth}월 고지서 상세 내역
<div className="inline-flex justify-between border-b border-grey_200 px-10 py-6">
<p className="text-xl font-medium">{selectedMonth}월 고지서 상세내역</p>
<FeeDropDown label={"고지서 순"} options={dropdownOptions} event={handleDropdownChange} initialValue={"bill"}/>
</div>
<div className="border-b border-grey_100 px-10 py-6 flex justify-between text-grey_400 text-base font-medium">
<p className="text-left pr-5">항목</p>
Expand All @@ -408,34 +460,12 @@ export default function DetailFeeContent({
</span>
</div>
<div className="flex flex-col justify-start">
{detailItems && detailItems.map((item, index) => (
<div key={index} className="px-10 py-6 flex justify-between">
<p className="w-[750px] text-left text-lg font-medium">{item.label}</p>
<span className="w-full flex gap-[130px]">
<p className="w-full text-right text-lg font-semibold">{item.value1 === undefined ? "-" : item.value1.toLocaleString('ko-KR')}원</p>
<p className="w-full text-right text-lg font-semibold">{item.value2 === undefined ? "-" : item.value2.toLocaleString('ko-KR')}원</p>
<p className={`w-full text-right text-lg font-semibold
${item.value1 !== undefined && item.value2 !== undefined && (item.value1 - item.value2) > 0 ? "text-increase_color"
: item.value1 !== undefined && item.value2 !== undefined && (item.value1 - item.value2) < 0 ? "text-decrease_color" : "text-grey_500"}`}>
{item.value1 !== undefined && item.value2 !== undefined &&
((item.value1 - item.value2) > 0)
? `+${(item.value1 - item.value2).toLocaleString('ko-KR')}원`
: ((item.value1 - item.value2) < 0
? `${(item.value1 - item.value2).toLocaleString('ko-KR')}원`
: "-")}
</p>
</span>
</div>
))}
<DetailFeeItems items={sortedByDifferenceItem} />
</div>

</div>

</div>
</div>

</div>

</div>
</div>
</>
)
}
37 changes: 37 additions & 0 deletions components/DetailFeeItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
type DetailItems = {
label: string;
value1?: number;
value2?: number;
}
export default function DetailFeeItems({items} : {items:DetailItems[]}) {
return (
<>
{items.map((item, index) => (
<div key={index} className="px-10 py-6 flex justify-between">
<p className="w-[750px] text-left text-lg font-medium">{item.label}</p>
<span className="w-full flex gap-[130px]">
<p className="w-full text-right text-lg font-semibold">{item.value1 === undefined ? "-" : item.value1.toLocaleString('ko-KR')}원</p>
<p className="w-full text-right text-lg font-semibold">{item.value2 === undefined ? "-" : item.value2.toLocaleString('ko-KR')}원</p>
<p
className={`w-full text-right text-lg font-semibold ${
item.value1 !== undefined && item.value2 !== undefined && item.value1 - item.value2 > 0
? "text-increase_color"
: item.value1 !== undefined && item.value2 !== undefined && item.value1 - item.value2 < 0
? "text-decrease_color"
: "text-grey_500"
}`}
>
{item.value1 !== undefined &&
item.value2 !== undefined &&
(item.value1 - item.value2 > 0
? `+${(item.value1 - item.value2).toLocaleString('ko-KR')}원`
: item.value1 - item.value2 < 0
? `${(item.value1 - item.value2).toLocaleString('ko-KR')}원`
: "-")}
</p>
</span>
</div>
))}
</>
)
}
111 changes: 1 addition & 110 deletions components/LoginContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,3 @@
// "use client"

// import Link from "next/link"
// import { useState } from "react"
// import { useRouter } from "next/navigation"

// import autologin_false_icon from "@/public/icon/auto_login_false.svg"
// import autologin_true_icon from "@/public/icon/auto_login_true.svg"

// export default function LoginContent() {
// const [id, setId] = useState("")
// const [pwd, setPwd] = useState("")
// const [autoLogin, setAutoLogin] = useState(false)

// const handleIdChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
// setId(event.currentTarget.value)
// }

// const handlePwdChange = (
// event: React.ChangeEvent<HTMLInputElement>
// ): void => {
// setPwd(event.currentTarget.value)
// }

// const router = useRouter()

// const onClickJoinButton = () => {
// router.push("/user/join/terms")
// }

// const width = 486
// const height = 455

// function inputComponent(text: string) {
// return (
// <input
// required={true}
// className="w-[486px] px-4 py-6 bg-grey_25
// rounded border border-gray-200
// text-grey_250 text-base font-normal"
// placeholder={text}></input>
// )
// }
// return (
// <>
// <div className="flex flex-col gap-20">
// <div className="flex flex-col gap-10">
// <div className="flex flex-col gap-2">
// {inputComponent("아이디 입력")}
// {inputComponent("비밀번호 입력")}
// </div>
// <div className="flex flex-col gap-4">
// <button
// className="w-[486px] px-[200px] py-6 gap-2.5
// bg-main_color rounded
// text-center text-white text-lg font-semibold"
// onClick={() => {}}>
// 로그인
// </button>
// <div className="inline-flex justify-between">
// <span
// className="inline-flex gap-1 hover:cursor-pointer"
// onClick={() => setAutoLogin(!autoLogin)}>
// <img
// src={
// autoLogin == false
// ? autologin_false_icon.src
// : autologin_true_icon.src
// }
// />
// <p
// className={`hover:cursor-pointer hover:text-grey_500 text-center text-base font-normal
// ${autoLogin == false ? "text-grey_200" : "text-main_color"}`}>
// 자동로그인
// </p>
// </span>
// <span className="justify-center items-center gap-2 inline-flex flex-end">
// <Link
// href="/user/find/by-name-and-phone"
// className="text-center text-neutral-300 text-base font-medium
// hover:text-grey_500">
// 아이디찾기
// </Link>
// <p className="text-center w-4 rotate-90 border border-neutral-300"></p>
// <Link
// href="/user/find/by-id-and-phone"
// className="text-center text-neutral-300 text-base font-medium
// hover:text-grey_500">
// 비밀번호찾기
// </Link>
// </span>
// </div>
// </div>
// </div>
// <div className="flex flex-col gap-4">
// <p className="text-grey_200 text-base font-normal">
// 회원이 아니시라면?
// </p>
// <button
// className="w-[486px] px-[200px] py-6 rounded border border-grey_250
// text-center text-grey_400 text-lg font-semibold"
// onClick={onClickJoinButton}>
// 회원가입
// </button>
// </div>
// </div>
// </>
// )
// }
"use client"

import Link from "next/link"
Expand Down Expand Up @@ -219,7 +110,7 @@ export default function LoginContent() {
}
/>
<p
className={`hover:cursor-pointer hover:text-grey_500 text-center text-base font-normal
className={`hover:cursor-pointer text-center text-base font-normal
${autoLogin == false ? "text-grey_200" : "text-main_color"}`}>
자동로그인
</p>
Expand Down
Loading

0 comments on commit cf780e6

Please sign in to comment.