Skip to content

Commit

Permalink
[#234] Fix: 업로드 페이지 레이아웃 짤림 버그 해결 (#238)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yjc2021
yjc2021 authored Mar 22, 2024
1 parent 87d3685 commit a915c84
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 147 deletions.
112 changes: 57 additions & 55 deletions src/components/UploadZzal/UploadTagAutoComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,72 +38,74 @@ const UploadTagAutoComplete = ({
};

return (
<div className="absolute z-10 box-border w-full rounded-b-25pxr border border-t-0 border-gray-300 bg-background px-4 pb-4 pt-40pxr shadow-md outline-none sm:rounded-b-30pxr">
<div className="absolute z-10 box-border w-full overflow-hidden rounded-b-25pxr border border-t-0 border-gray-300 bg-background pt-40pxr shadow-md outline-none sm:rounded-b-30pxr">
<hr className="absolute left-0 top-25pxr w-full sm:top-30pxr" />
{selectedUploadTags.length > 0 && (
<div className="mb-10pxr border-b-2">
<div className="mb-10pxr text-sm font-semibold text-text-primary">
선택된 태그
<span className="ml-5pxr">
{selectedUploadTags.length}/{MAX_SEARCH_TAG_UPLOAD}
</span>
</div>
<ul className="flex-column mb-10pxr flex flex-wrap gap-6pxr">
<div className="w-full">
<TagSlider tags={selectedUploadTags.map(({ tagName }) => tagName)} />
</div>
</ul>
</div>
)}
<ul
className={cn("pb-10pxr", autoCompletedTags.length > 0 && "mb-10pxr border-b-2")}
tabIndex={0}
>
{autoCompletedTags.map(({ tagId, tagName }, index) => (
<li
onMouseDown={handleMouseDownTagName(tagId, tagName)}
onMouseOver={handleMouseOverTag(index)}
key={tagId}
className={cn(
"py-2",
index === cursorIndex && "box-border rounded-md bg-gray-200 font-bold text-black",
)}
>
<div className="flex items-center gap-2">
<Search size={16} color="#807F7F" />
{tagName}
<div className="h-full max-h-400pxr overflow-auto px-4 pb-4">
{selectedUploadTags.length > 0 && (
<div className="mb-10pxr border-b-2">
<div className="mb-10pxr text-sm font-semibold text-text-primary">
선택된 태그
<span className="ml-5pxr">
{selectedUploadTags.length}/{MAX_SEARCH_TAG_UPLOAD}
</span>
</div>
</li>
))}
</ul>

{recommendedTags.length && (
<div className="text-sm font-semibold text-neutral">추천 태그</div>
)}

<ul>
{recommendedTags.map(({ tagId, tagName }, index) => {
const recommendedIndex = index + autoCompletedTags.length;

return (
<ul className="flex-column mb-10pxr flex flex-wrap gap-6pxr">
<div className="w-full">
<TagSlider tags={selectedUploadTags.map(({ tagName }) => tagName)} />
</div>
</ul>
</div>
)}
<ul
className={cn("pb-10pxr", autoCompletedTags.length > 0 && "mb-10pxr border-b-2")}
tabIndex={0}
>
{autoCompletedTags.map(({ tagId, tagName }, index) => (
<li
onMouseOver={handleMouseOverTag(recommendedIndex)}
onMouseDown={handleMouseDownTagName(tagId, tagName)}
onMouseOver={handleMouseOverTag(index)}
key={tagId}
className={cn(
"px-2 py-2",
recommendedIndex === cursorIndex &&
"box-border rounded-md bg-gray-200 font-bold text-black",
"py-2",
index === cursorIndex && "box-border rounded-md bg-gray-200 font-bold text-black",
)}
onMouseDown={handleMouseDownTagName(tagId, tagName)}
>
<div className="flex items-center gap-2">
<Bookmark size={16} />
<Search size={16} color="#807F7F" />
{tagName}
</div>
</li>
);
})}
</ul>
))}
</ul>

{recommendedTags.length && (
<div className="text-sm font-semibold text-neutral">추천 태그</div>
)}

<ul>
{recommendedTags.map(({ tagId, tagName }, index) => {
const recommendedIndex = index + autoCompletedTags.length;

return (
<li
onMouseOver={handleMouseOverTag(recommendedIndex)}
key={tagId}
className={cn(
"px-2 py-2",
recommendedIndex === cursorIndex &&
"box-border rounded-md bg-gray-200 font-bold text-black",
)}
onMouseDown={handleMouseDownTagName(tagId, tagName)}
>
<div className="flex items-center gap-2">
<Bookmark size={16} />
{tagName}
</div>
</li>
);
})}
</ul>
</div>
</div>
);
};
Expand Down
112 changes: 57 additions & 55 deletions src/components/common/SearchTag/TagAutoComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,72 +38,74 @@ const TagAutoComplete = ({
};

return (
<div className="absolute z-10 box-border w-full rounded-b-25pxr border border-t-0 border-gray-300 bg-background px-4 pb-4 pt-40pxr shadow-md shadow-adaptive-shadow outline-none sm:rounded-b-30pxr">
<div className="absolute z-10 box-border w-full overflow-hidden rounded-b-25pxr border border-t-0 border-gray-300 bg-background pt-40pxr shadow-md shadow-adaptive-shadow outline-none sm:rounded-b-30pxr">
<hr className="absolute left-0 top-25pxr w-full sm:top-30pxr" />
{selectedTags.length > 0 && (
<div className="mb-10pxr border-b-2">
<div className="mb-10pxr text-sm font-semibold text-text-primary">
선택된 태그
<span className="ml-5pxr">
{selectedTags.length}/{MAX_SEARCH_TAG}
</span>
</div>
<ul className="flex-column mb-10pxr flex flex-wrap gap-6pxr">
<div className="w-full">
<TagSlider tags={selectedTags} />
</div>
</ul>
</div>
)}
<ul
className={cn("pb-10pxr", autoCompletedTags.length > 0 && "mb-10pxr border-b-2")}
tabIndex={0}
>
{autoCompletedTags.map(({ tagId, tagName }, index) => (
<li
onMouseDown={handleMouseDownTagName(tagName)}
onMouseOver={handleMouseOverTag(index)}
key={tagId}
className={cn(
"py-2",
index === cursorIndex && "box-border rounded-md bg-gray-200 font-bold text-black",
)}
>
<div className="flex items-center gap-2">
<Search size={16} color="#807F7F" />
{tagName}
<div className="h-full max-h-400pxr overflow-auto px-4 pb-4">
{selectedTags.length > 0 && (
<div className="sticky top-0 mb-10pxr border-b-2 bg-background">
<div className="mb-10pxr text-sm font-semibold text-text-primary">
선택된 태그
<span className="ml-5pxr">
{selectedTags.length}/{MAX_SEARCH_TAG}
</span>
</div>
</li>
))}
</ul>

{recommendedTags.length && (
<div className="text-sm font-semibold text-neutral">추천 태그</div>
)}

<ul>
{recommendedTags.map(({ tagId, tagName }, index) => {
const recommendedIndex = index + autoCompletedTags.length;

return (
<ul className="flex-column mb-10pxr flex flex-wrap gap-6pxr">
<div className="w-full">
<TagSlider tags={selectedTags} />
</div>
</ul>
</div>
)}
<ul
className={cn("pb-10pxr", autoCompletedTags.length > 0 && "mb-10pxr border-b-2")}
tabIndex={0}
>
{autoCompletedTags.map(({ tagId, tagName }, index) => (
<li
onMouseOver={handleMouseOverTag(recommendedIndex)}
onMouseDown={handleMouseDownTagName(tagName)}
onMouseOver={handleMouseOverTag(index)}
key={tagId}
className={cn(
"px-2 py-2",
recommendedIndex === cursorIndex &&
"box-border rounded-md bg-gray-200 font-bold text-black",
"py-2",
index === cursorIndex && "box-border rounded-md bg-gray-200 font-bold text-black",
)}
onMouseDown={handleMouseDownTagName(tagName)}
>
<div className="flex items-center gap-2">
<Bookmark size={16} />
<Search size={16} color="#807F7F" />
{tagName}
</div>
</li>
);
})}
</ul>
))}
</ul>

{recommendedTags.length && (
<div className="text-sm font-semibold text-neutral">추천 태그</div>
)}

<ul>
{recommendedTags.map(({ tagId, tagName }, index) => {
const recommendedIndex = index + autoCompletedTags.length;

return (
<li
onMouseOver={handleMouseOverTag(recommendedIndex)}
key={tagId}
className={cn(
"px-2 py-2",
recommendedIndex === cursorIndex &&
"box-border rounded-md bg-gray-200 font-bold text-black",
)}
onMouseDown={handleMouseDownTagName(tagName)}
>
<div className="flex items-center gap-2">
<Bookmark size={16} />
{tagName}
</div>
</li>
);
})}
</ul>
</div>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/routes/__root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ interface RouterContext {

const RootComponent = () => {
return (
<div className="relative h-[100dvh] w-[100dvw] overflow-hidden sm:h-screen">
<div className="relative h-[100dvh] w-[100dvw] overflow-hidden">
<Header />
<div className="h-[calc(100%-4.25rem)] sm:pb-0">
<Outlet />
Expand Down
72 changes: 36 additions & 36 deletions src/routes/_authentication/upload-zzal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,24 +102,24 @@ const UploadZzal = () => {
<title>짤 업로드 - 짤뮤니티</title>
<meta name="description" content="새로운 짤을 짤뮤니티에 업로드해보세요!" />
</Helmet>
<div className="flex flex-col justify-center gap-20pxr overflow-auto px-10pxr pb-60pxr pt-30pxr sm:px-100pxr sm:pb-0">
<div className="mx-auto flex h-full flex-col justify-start overflow-auto px-10pxr pb-70pxr">
<div className="text-xl font-extrabold text-text-primary">짤 업로드</div>
<div className="m-auto flex w-full flex-col flex-wrap sm:mt-30pxr sm:flex-row">
<div className="mx-auto mb-8">
<div className="mb-2 font-bold">
업로드할 파일
<Asterisk
aria-label="필수 입력 항목 표시"
className="inline-block"
color="#ED0000"
size={16}
/>
<div className="mt-30pxr flex w-full flex-col flex-wrap sm:flex-row">
<div className="mx-auto mb-8 flex w-full flex-col gap-8 sm:w-640pxr sm:min-w-440pxr sm:px-24pxr">
<div className="mb-8">
<div className="font-bold">
태그 검색 및 추가
<Asterisk
aria-label="필수 입력 항목 표시"
className="inline-block"
color="#ED0000"
size={16}
/>
</div>
<UploadTagSearchForm />
</div>
<ImageUpload changeFile={changeFile} file={file} />
</div>
<div className="mx-auto mt-4 flex w-full flex-col sm:mt-0 sm:w-640pxr sm:min-w-440pxr sm:px-24pxr">
<div>
<div className="mb-2 font-bold">
<div className="font-bold">
짤 제목
<Asterisk
aria-label="필수 입력 항목 표시"
Expand All @@ -128,38 +128,38 @@ const UploadZzal = () => {
size={16}
/>
</div>
<div className="mb-4 flex h-50pxr max-w-650pxr flex-wrap rounded-full border border-gray-300 py-1 pl-4 pr-2 shadow-md sm:h-60pxr sm:min-w-440pxr">
<div className="flex h-50pxr max-w-650pxr rounded-full border border-gray-300 px-2 shadow-md sm:h-60pxr sm:min-w-440pxr sm:px-4">
<input
id="imageTitleInput"
name="imageTitle"
onChange={handleChangeImageTitle}
value={imageTitle}
className="z-20 h-50pxr flex-1 rounded-xl border-none bg-transparent outline-none"
className="h-50pxr flex-1 rounded-xl border-none bg-transparent outline-none sm:h-60pxr"
/>
</div>
</div>
<div>
<div className="mb-2 font-bold">
태그 검색 및 추가
<Asterisk
aria-label="필수 입력 항목 표시"
className="inline-block"
color="#ED0000"
size={16}
/>
</div>
<UploadTagSearchForm />
</div>
<div className="pb-60pxr pt-120pxr sm:pt-30pxr">
<button
className="mt-20pxr h-60pxr w-full rounded-full bg-gradient-to-r from-primary to-[#78C6FF] text-lg font-bold text-white sm:mt-100pxr sm:max-w-650pxr"
onClick={handleClickUploadButton}
>
업로드하기
</button>
</div>
<div className="mx-auto mb-8">
<div className="mb-2 font-bold">
업로드할 파일
<Asterisk
aria-label="필수 입력 항목 표시"
className="inline-block"
color="#ED0000"
size={16}
/>
</div>
<ImageUpload changeFile={changeFile} file={file} />
</div>
</div>
<div className="flex w-full items-center justify-center">
<button
className="mt-20pxr h-50pxr w-full rounded-full bg-gradient-to-r from-primary to-[#78C6FF] text-lg font-bold text-white sm:h-60pxr sm:max-w-360pxr"
onClick={handleClickUploadButton}
>
업로드하기
</button>
</div>
</div>
</div>
);
Expand Down

0 comments on commit a915c84

Please sign in to comment.