Skip to content

Commit

Permalink
Merge pull request #301 from Team-Blitz-Steady/style/#291/template
Browse files Browse the repository at this point in the history 
💄 Style(#291): 템플릿 페이지 반응형 작업
  • Loading branch information
@JeongWuk
JeongWuk authored Nov 30, 2023
2 parents 5101da9 + e65ffcf commit 67dd3d3
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 24 deletions.
12 changes: 6 additions & 6 deletions src/app/(user-menu)/mypage/template/create/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const CreateTemplatePage = () => {
return (
<div className="flex gap-30 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750">
<div className="w-full">
<div className="flex justify-between px-20 pb-10 text-25 font-bold lg:text-28 xl:text-30">
<div className="flex justify-between px-20 pb-10 text-20 font-bold lg:text-28 xl:text-30">
템플릿 생성
<Button
className={`${buttonSize.sm} bg-st-primary text-st-white`}
Expand All @@ -96,14 +96,14 @@ const CreateTemplatePage = () => {
{question.map((item, index) => (
<div
key={index}
className="flex h-70 w-full items-center gap-30 rounded-10 p-10 shadow-lg"
className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30"
>
<div className="h-60 w-10 rounded-full bg-st-skyblue-50"></div>
<div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
<input
type="text"
placeholder="질문을 입력해 주세요."
value={item.value}
className="h-50 w-full text-20 text-st-black outline-none"
className="h-50 w-full text-15 text-st-black outline-none lg:text-20"
onChange={(event) => handleInputChange(event, item.id)}
/>
<div
Expand All @@ -122,15 +122,15 @@ const CreateTemplatePage = () => {
<Icon
name="cross"
size={20}
color=""
color="w-15 h-15 lg:w-20 lg:h-20"
/>
</div>
</div>
))}
</div>
</div>
<div className="h-5 w-full bg-st-gray-400"></div>
<div className="mt-20 flex w-full justify-end gap-20">
<div className="mt-20 flex w-full justify-end gap-10 lg:gap-20">
<Button
onClick={() => backToTemplate()}
className={`${buttonSize.sm} bg-st-red text-st-white`}
Expand Down
22 changes: 11 additions & 11 deletions src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,18 +111,18 @@ const EditTemplatePage = () => {
return (
<div className="flex gap-30 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750">
<div className="w-full">
<div className="flex justify-between px-20 pb-10 text-25 font-bold lg:text-28 xl:text-30">
<div className="flex justify-between px-20 pb-10 text-20 font-bold lg:text-28 xl:text-30">
{data?.title} 템플릿
{isModify ? (
<div className="flex justify-center gap-20">
<div className="flex justify-center gap-10 lg:gap-20">
<Button
className={`${buttonSize.lg} bg-st-red text-st-white`}
className={`${buttonSize.sm} bg-st-red text-st-white`}
onClick={() => handleDeleteTemplate(templateId)}
>
템플릿 삭제
</Button>
<Button
className={`${buttonSize.lg} bg-st-primary text-st-white`}
className={`${buttonSize.sm} bg-st-primary text-st-white`}
onClick={() => handleAddQuestion(content)}
>
질문 추가
Expand All @@ -143,16 +143,16 @@ const EditTemplatePage = () => {
{question.map((item, index) => (
<div
key={index}
className="flex h-70 w-full items-center gap-30 rounded-10 p-10 shadow-lg"
className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30"
>
<div className="h-60 w-10 rounded-full bg-st-skyblue-50"></div>
<div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
<input
type="text"
placeholder="질문을 입력해 주세요."
value={item.value}
disabled={!isModify}
onChange={(event) => handleInputChange(event, item.id)}
className="h-50 w-5/6 bg-st-white text-20 text-st-black outline-none"
className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20"
/>
{isModify && (
<div
Expand All @@ -171,7 +171,7 @@ const EditTemplatePage = () => {
<Icon
name="cross"
size={20}
color=""
color="w-15 h-15 lg:w-20 lg:h-20"
/>
</div>
)}
Expand All @@ -180,18 +180,18 @@ const EditTemplatePage = () => {
</div>
</div>
<div className="h-5 w-full bg-st-gray-400"></div>
<div className="mt-20 flex w-full justify-end gap-20">
<div className="mt-20 flex w-full justify-end gap-10 lg:gap-20">
{isModify && (
<>
<Button
onClick={() => backToTemplate()}
className={`${buttonSize.lg} bg-st-red text-st-white`}
className={`${buttonSize.sm} bg-st-red text-st-white`}
>
취소하기
</Button>
<Button
onClick={() => openModal()}
className={`${buttonSize.lg} bg-st-primary text-st-white`}
className={`${buttonSize.sm} bg-st-primary text-st-white`}
>
수정완료
</Button>
Expand Down
12 changes: 6 additions & 6 deletions src/app/(user-menu)/mypage/template/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ const MyTemplatePage = () => {
return (
<div className="flex gap-30 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750">
<div className="w-full">
<div className="flex justify-between px-20 pb-10 text-25 font-bold lg:text-28 xl:text-30">
<div className="flex justify-between px-20 pb-10 text-20 font-bold lg:text-28 xl:text-30">
내 템플릿
<Link href={"/mypage/template/create"}>
<Button className={`${buttonSize.md} bg-st-primary text-st-white`}>
<Button className={`${buttonSize.sm} bg-st-primary text-st-white`}>
템플릿 생성
</Button>
</Link>
Expand All @@ -59,11 +59,11 @@ const MyTemplatePage = () => {
onClick={() => handleTemplateDetail(template.id)}
className="group flex cursor-pointer items-center justify-between p-40 transition hover:scale-105 hover:bg-st-gray-50"
>
<div className="text-20 font-bold lg:text-23 xl:text-25">
<div className="text-10 font-bold sm:text-16">
{template.title}
</div>
<div className="group flex">
<div className="transform text-15 font-bold text-st-gray-100 transition group-hover:-translate-x-[30px]">
<div className="transform text-10 font-bold text-st-gray-100 transition group-hover:-translate-x-[15px] lg:text-15 lg:group-hover:-translate-x-[30px]">
생성일 {template.createdAt.slice(0, 10)}
</div>
<div
Expand All @@ -75,8 +75,8 @@ const MyTemplatePage = () => {
>
<Icon
name="trash"
size={25}
color="text-st-gray-100"
size={20}
color="text-st-gray-100 w-15 h-15 lg:w-20 lg:h-20"
/>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/components/TabBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { usePathname } from "next/navigation";
const TabBar = () => {
const path = usePathname();

console.log(path);

return (
<div className="flex h-41 justify-between gap-20 border-b-3 border-st-gray-100 sm:h-47 md:hidden">
<Link href={"/mypage"}>
Expand All @@ -20,7 +22,7 @@ const TabBar = () => {
<Link href={"/mypage/template"}>
<div
className={`${
path === "/mypage/template" &&
path.split("/")[2] === "template" &&
"border-b-3 border-st-primary text-st-primary"
} p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
>
Expand Down

0 comments on commit 67dd3d3

Please sign in to comment.