Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: 스타일 리팩토링 #59

Merged
merged 2 commits into from
Jul 23, 2024
Merged

Refactor: 스타일 리팩토링 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5139e3
Refactor: 체험 후기 줄바꿈 반영
MEGUMMY1 Jul 22, 2024
249b3a4
Refactor: 스타일 리팩토링
MEGUMMY1 Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/ActivityDetails/ActivityDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
체험 설명
</p>
<textarea
className="py-[16px] px-[20px] h-[200px] resize-none custom-scrollbar dark:bg-var-dark1 dark:text-var-gray2 "
className="h-[200px] resize-none custom-scrollbar dark:bg-var-dark1 dark:text-var-gray2 "
disabled
>
{activityData?.description}
Expand Down Expand Up @@ -273,7 +273,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
{new Date(review.createdAt).toLocaleDateString()}
</p>
</div>
<p className="text-nomad-black tracking-tight dark:text-var-gray2">
<p className="text-nomad-black tracking-tight dark:text-var-gray2 whitespace-pre-wrap">
{review.content}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const primarySizeClasses = {
};

const primaryStyleClasses = {
dark: 'bg-nomad-black text-white dark:bg-var-dark3 dark:text-var-gray2 dark:hover:bg-nomad-black',
dark: 'bg-nomad-black text-white dark:text-var-gray2 dark:hover:bg-var-green2',
bright: 'bg-white text-nomad-black border border-nomad-black',
disabled: 'bg-var-gray6 text-white',
enabled: 'bg-nomad-black text-white',
Expand Down
35 changes: 17 additions & 18 deletions components/Lander/AllActivities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,32 +31,32 @@ export function AllActivity({
};

return (
<div onClick={handleClick} className="cursor-pointer">
<div
onClick={handleClick}
className="cursor-pointer flex flex-col items-start h-full"
>
<div
className="w-[276px] t:w-[206px] m:w-[146px] h-[276px] t:h-[206px] m:h-[146px] rounded-xl bg-[url('/image/Testimage.jpg')] bg-cover transition-transform duration-300 hover:scale-110 m:hover:scale-105"
className="self-center w-[276px] t:w-[206px] m:w-[146px] h-[276px] t:h-[206px] m:h-[146px] rounded-xl bg-[url('/image/Testimage.jpg')] bg-cover transition-transform duration-300 hover:scale-110 m:hover:scale-105"
style={{
backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.10) 20.33%, rgba(0, 0, 0, 0.60) 100%),url(${backgroundImage})`,
}}
></div>
/>
<div className="hover:bg-gray-200 dark:hover:bg-var-dark2 rounded px-[4px]">
<div className="flex items-center mt-[16.5px]">
<Image
src={StarImg}
alt="별점 표시 이미지"
width={20}
height={20}
></Image>
<div className="flex mt-3">
<Image src={StarImg} alt="별점 표시 이미지" width={20} height={20} />
<div className="font-sans text-[16px] font-[500] ml-[5px]">
{rating ? rating.toFixed(1) : 0}{' '}
<span className="font-sans text-[16px] text-[#A1A1A1] font-[500] ">
<span className="font-sans text-[16px] text-[#A1A1A1] font-[500]">
({reviewCount ? reviewCount : 0})
</span>
</div>
</div>
<div className="h-[70px] t:h-[30px] m:h-[20px] m:w-[146px] font-sans text-[24px] m:text-[16px] font-[600] mt-[10px] overfolow-hidden t:truncate ... m:truncate ...">
{title}
<div className="relative mt-[10px]">
<div className="font-sans text-[24px] m:text-[16px] font-[600] mt-[10px] line-clamp-2">
{title}
</div>
</div>
<div className="font-sans text-[28px] text-[20px] m:text-[18px] font-[700] p:mt-[0px] mt-[10px]">
<div className="font-sans text-[28px] m:text-[18px] font-[700] p:mt-[0px] mt-[16px] m:mb-6">
₩{price.toLocaleString()}{' '}
<span className="font-sans text-[16px] font-[400]">/ 인</span>
</div>
Expand Down Expand Up @@ -155,7 +155,6 @@ function AllActivities() {
};
}, [currentPage, items_per_page, selectedSorted, KategorieName]);

console.log(currentPage);
return (
<div ref={PaginationScrollRef}>
<div className="flex justify-between">
Expand All @@ -169,15 +168,15 @@ function AllActivities() {
</div>
<PriceFilterBtn />
</div>
<div className="font-sans text-[36px] font-[700] mt-[40px] mb-[30px]">
<div className="font-sans text-[36px] font-[700] mt-[40px] mb-[20px] m:text-lg m:my-5">
{KategorieName ? KategorieName : '🛼 모든 체험'}
</div>
{isLoading ? (
<div className="mt-[-300px]">
<Spinner />
</div>
) : (
<div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[8px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide px-[20px] pt-[20px]">
<div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-auto gap-[20px] t:gap-[14px] m:gap-[8px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide px-[20px] pt-[20px] m:px-0 m:pt-0 m:items-center">
{allActivitiesData?.activities.map((data) => (
<AllActivity
key={data.id}
Expand All @@ -191,7 +190,7 @@ function AllActivities() {
))}
</div>
)}
<div className="text-[30px] font-[700] flex justify-center mb-[342px] m:mb-[160px] mt-[70px]">
<div className="text-[30px] font-[700] flex justify-center mb-[50px] ">
{allActivitiesData && allActivitiesData.totalCount > 0 && (
<Pagination
totalItems={allActivitiesData?.totalCount}
Expand Down
2 changes: 1 addition & 1 deletion components/Lander/BestActivities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function BestActivities() {
)}
{bestActivitiesDataNotPc?.activities &&
bestActivitiesDataNotPc.activities.length > 0 ? (
<div className="flex gap-[32px] m:gap-[16px] mt-[34px] overflow-auto scrollbar-hide p:hidden">
<div className="flex gap-[32px] m:gap-[16px] m:mt-5 overflow-auto scrollbar-hide p:hidden">
{bestActivitiesDataNotPc.activities.map((item: ActivityDetail) => (
<BestActivity
key={item.id}
Expand Down
4 changes: 2 additions & 2 deletions components/Lander/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ function Main() {
<SearchResults SearchValue={SearchValue} />
) : (
<div>
<div className="mt-[40px]">
<div className="mt-[30px]">
<BestActivities></BestActivities>
</div>
<div className=" mt-[60px]">
<div className=" mt-[40px]">
<AllActivities></AllActivities>
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions components/Layout/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export default function NavigationBar() {
setDarkMode(!darkMode);
};

const handleDarkModeChange = () => {
setDarkMode(!darkMode);
};

const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};
Expand Down Expand Up @@ -65,9 +69,9 @@ export default function NavigationBar() {
type="checkbox"
name="checkbox"
className="switch"
onClick={toggleDarkMode}
onChange={handleDarkModeChange}
checked={darkMode}
></input>
/>
{isLoggedIn ? (
<div className="flex items-center gap-2">
<button onClick={toggleNotifyDropdown}>
Expand Down
6 changes: 3 additions & 3 deletions components/MyActivity/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Link from 'next/link';
function PopoverButton({ children, onClick }: PopoverButtonProps) {
return (
<button
className="rounded-[6px] px-[46px] py-[18px] w-auto text-[18px] font-[500] hover:bg-var-gray2 dark:hover:text-var-dark2"
className="rounded-[6px] w-full h-[57px] text-[18px] font-[500] hover:bg-var-gray2 dark:hover:text-var-dark2 m:text-sm"
onClick={onClick}
>
{children}
Expand Down Expand Up @@ -46,7 +46,7 @@ function Popover({ activityId, closePopover }: PopoverProps) {

return (
<div
className="flex flex-col absolute rounded-[6px] border border-solid border-var-gray3 dark:border-var-dark3 right-0 top-[50px] bg-white dark:bg-var-dark2 z-10 dark:text-var-gray2"
className="flex flex-col absolute rounded-[6px] w-40 h-[114px] m:w-24 m:h-20 border border-solid border-var-gray3 dark:border-var-dark3 right-0 top-[50px] m:top-10 bg-white dark:bg-var-dark2 z-10 dark:text-var-gray2"
ref={popoverRef}
>
<PopoverButton onClick={handleClickEdit}>수정하기</PopoverButton>
Expand Down Expand Up @@ -103,7 +103,7 @@ function Card({
<div className="h-[21px] text-var-black m:text-[14px] dark:text-var-gray2">{`${formatNumberToFixed(rating)} (${reviewCount})`}</div>
</div>
<Link href={`/activity-details/${activityId}`}>
<p className="text-[20px] mt-[8px] font-bold tracking-tight hover:underline t:text-[18px] t:mt-[0] m:text-[14px] m:mt-[0] m:py-[2px]">
<p className="text-[20px] mt-[8px] font-bold tracking-tight hover:underline t:text-[18px] t:mt-[0] m:text-[14px] m:mt-[0] m:py-[2px] line-clamp-2">
{title}
</p>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion components/MyActivity/Register/RegisterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
onSubmit={isEdit ? onSubmitEdit : onSubmitRegister}
className="m:w-full m:p-[16px]"
>
<div className="flex flex-col w-[792px] gap-[24px] t:w-[429px] t:h-full m:w-full m:h-full m:px-[15px]">
<div className="flex flex-col w-[792px] gap-[24px] t:w-[429px] t:h-full m:w-full m:h-full m:px-0">
<div className="flex justify-between items-center">
<div className="flex m:gap-[15px]">
<Image
Expand Down
2 changes: 1 addition & 1 deletion components/MyActivity/Register/TimeSlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function TimeSlotGroup({
}, [startTime[index], endTime[index]]);

return (
<div className="flex items-end t:justify-between m:justify-between gap-[20px] t:gap-[4px] m:gap-[6px]">
<div className="flex items-end t:justify-between m:justify-between gap-[20px] t:gap-[4px] m:gap-[6px] m:mr-4">
<div className="flex items-center gap-[20px] t:gap-[4px] m:gap-[6px] grow">
<div className="m:w-[50%]">
{isDefault && (
Expand Down
Loading