feat: #110/대시보드 수정 페이지 컴포넌트로 분리 #109
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| "use client"; | ||
|
|
||
| import { useRouter } from "next/navigation"; | ||
| import Image from "next/image"; | ||
| import BackIcon from "../../../../../../../public/icon/arrow_right_icon.svg"; | ||
|
|
||
| export default function BackButton() { | ||
| const router = useRouter(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <button | ||
| type="button" | ||
| onClick={() => { | ||
| router.back(); | ||
| }} | ||
| className="flex gap-2 items-center" | ||
| > | ||
| <Image | ||
| src={BackIcon} | ||
| className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]" | ||
|
There was a problem hiding this comment. 아래처럼 한번에 적용 가능해요 w-[18px] h-[18px] -> size-[18px]
Owner
Author
There was a problem hiding this comment. 오 감사합니다! 가로세로 높이가 같은 경우에는 알려주신 방법으로 스타일을 적용하도록 하겠습니다! |
||
| alt="" | ||
| /> | ||
| <div className="font-medium text-md text-gray-800 tablet:text-lg"> | ||
|
There was a problem hiding this comment. 돌아가기는 텍스트를 담당하는거같은데 p, span같은 태그를 활용해주세요 |
||
| 돌아가기 | ||
| </div> | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| "use client"; | ||
|
|
||
| import Input from "@/components/common/input/Input"; | ||
| import Button from "@/components/common/button/Button"; | ||
|
|
||
| export default function DashboardEditSection() { | ||
| return ( | ||
| <div className="w-full p-4 rounded-lg bg-white tablet:p-6"> | ||
| <div className="flex flex-col gap-10 tablet:gap-6"> | ||
| <div className="font-bold text-2lg text-gray-800 tablet:text-2xl"> | ||
| 대시보드 이름 | ||
| </div> | ||
| <div className="flex flex-col gap-6"> | ||
| <div className="flex flex-col gap-4"> | ||
| <Input label="대시보드 이름" /> | ||
| </div> | ||
| <Button variant="purple">변경</Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| "use client"; | ||
|
|
||
| import Pagination from "@/components/common/pagenation-button/PagenationButton"; | ||
|
|
||
| export default function InvitationSection({ | ||
| id, | ||
| token, | ||
| }: { | ||
| id: number; | ||
| token: string; | ||
| }) { | ||
| // id 값과 token 값 사용하고 나서는 지워도 되는 코드들 | ||
| console.log(id); | ||
| console.log(token); | ||
|
|
||
| return ( | ||
| <div className="w-full p-4 rounded-lg bg-white tablet:p-6"> | ||
| <div className="flex items-center justify-between"> | ||
| <h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl"> | ||
| 초대 내역 | ||
| </h2> | ||
| <div className="flex items-center gap-2"> | ||
| <span>1 페이지 중 1</span> | ||
| <Pagination | ||
| currentPage={1} | ||
| totalPages={1} | ||
| onPageChange={(page) => { | ||
| console.log(`구성원 페이지 ${page}로 변경`); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| "use client"; | ||
|
|
||
| import Pagination from "@/components/common/pagenation-button/PagenationButton"; | ||
|
|
||
| export default function MemberSection({ | ||
| id, | ||
| token, | ||
| }: { | ||
| id: number; | ||
| token: string; | ||
| }) { | ||
| // id 값과 token 값 사용하고 나서는 지워도 되는 코드들 | ||
| console.log(id); | ||
| console.log(token); | ||
|
|
||
| return ( | ||
| <div className="w-full p-4 rounded-lg bg-white tablet:p-6"> | ||
| <div className="flex items-center justify-between"> | ||
| <h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl"> | ||
| 구성원 | ||
| </h2> | ||
| <div className="flex items-center gap-2"> | ||
| <span>1 페이지 중 1</span> | ||
| <Pagination | ||
| currentPage={1} | ||
| totalPages={1} | ||
| onPageChange={(page) => { | ||
| console.log(`구성원 페이지 ${page}로 변경`); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,25 @@ | ||
| import { cookies } from "next/headers"; | ||
| import BackButton from "./_components/BackButton"; | ||
| import DashboardEditSection from "./_components/DashboardEditSection"; | ||
| import InvitationSection from "./_components/InvitationSection"; | ||
| import MemberSection from "./_components/MemberSection"; | ||
|
|
||
| export default function Page({ params }: { params: { dashboardid: string } }) { | ||
| const dashboardId = Number(params.dashboardid); | ||
| const accessToken = cookies().get("accessToken")?.value ?? ""; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="flex flex-col px-3 py-4 tablet:px-5"> | ||
| <div className="flex flex-col gap-[6px] tablet:gap-[29px]"> | ||
| <BackButton /> | ||
| <div className="flex flex-col gap-4 max-w-[620px]"> | ||
| <DashboardEditSection /> | ||
| <MemberSection id={dashboardId} token={accessToken} /> | ||
| <InvitationSection id={dashboardId} token={accessToken} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
혹시 div로 감싼 이유가 있을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
빠르게 분리하느라 필요 없는 div 태그를 지우는 걸 잊었네요 지우겠습니다!