Skip to content

Ver 1.0.2 #187

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

Merged
hi2242 merged 4 commits into from
Jul 24, 2025
Merged

Ver 1.0.2 #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0836c7
[refactor] 로그 메시지 삭제
hi2242 Jul 20, 2025
c9ab593
[design] 홈화면 반응형 디자인으로 변경
hi2242 Jul 24, 2025
ca3b9c5
Merge branch 'main' into fe/feat/project
hi2242 Jul 24, 2025
8050bdc
Merge pull request #186 from Gathering-Organization/fe/feat/project
hi2242 Jul 24, 2025
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
1 change: 0 additions & 1 deletion Gathering_fe/src/components/ApplyModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ const ApplyModal: React.FC = () => {
const dummySetSelectedStack = (value: string[]) => {};

const handleChangeIntroduction = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
console.log(applyInfo);
setApplyInfo({
...applyInfo,
message: e.target.value
Expand Down
4 changes: 2 additions & 2 deletions Gathering_fe/src/components/BannerCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const EmblaCarouselComponent: React.FC<EmblaCarouselProps> = ({ options, slides
{/* Navigation Arrows */}
<button
onClick={scrollPrev}
className="absolute left-6 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow-md p-3 rounded-full transition"
className="hidden sm:flex absolute left-6 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow-md p-3 rounded-full transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -72,7 +72,7 @@ const EmblaCarouselComponent: React.FC<EmblaCarouselProps> = ({ options, slides

<button
onClick={scrollNext}
className="absolute right-6 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow-md p-3 rounded-full transition"
className="hidden sm:flex absolute right-6 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white shadow-md p-3 rounded-full transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
2 changes: 1 addition & 1 deletion Gathering_fe/src/components/FilteringButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const FilteringButton: React.FC<ButtonFilter> = ({ title, option, onClick, icon,
onClick={onClick}
style={{ willChange: 'transform' }}
className={`
flex items-center space-x-2 border-solid rounded-lg border-2 px-4 py-1
flex items-center space-x-1 sm:space-x-2 border-solid rounded-lg border-2 px-3 py-1 sm:px-4 sm:py-1.5
transition-all duration-300 ease-in-out hover:scale-[1.02]
${option ? 'border-[#3387E5] text-[#3387E5] bg-[#EAF3FF]' : 'border-[#B4B4B4] bg-white'}
active:scale-95
Expand Down
12 changes: 8 additions & 4 deletions Gathering_fe/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
const Footer: React.FC = () => {
return (
<div className="text-sm/8 text-center flex items-center justify-between bg-[#000000]/80 text-[14px] text-[#D9D9D9]/70 font-bold p-[70px] px-[200px]">
<div>
<div
className="text-center flex flex-col sm:flex-row items-center justify-center sm:justify-between
bg-[#000000]/80 text-xs sm:text-sm md:text-base text-[#D9D9D9]/70 font-bold
p-4 sm:p-6 md:p-8 lg:p-[70px] px-4 sm:px-6 md:px-10 lg:px-[200px]"
>
<div className="mb-4 sm:mb-0 text-center sm:text-left">
<div>How to contact?</div>
<div>Email : [email protected]</div>
</div>
<hr className="w-[1px] h-24 bg-[#D9D9D9]/70 border-none" />
<div>
<hr className="hidden sm:block w-[1px] h-16 sm:h-20 md:h-24 bg-[#D9D9D9]/70 border-none mx-4 sm:mx-6 md:mx-10" />
<div className="text-center sm:text-right">
<div>Copyright ⓒ 2025 Gathering Team</div>
<div>윤종근, 최보근</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion Gathering_fe/src/components/GoogleRedirectHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const GoogleRedirectHandler: React.FC = () => {
if (code) {
try {
const result = await googleLogin(code);
console.log('googleLogin 응답', result);
if (result?.success) {
// showToast('로그인 되었습니다.', true);
// setTimeout(() => {
Expand Down
26 changes: 19 additions & 7 deletions Gathering_fe/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import LoginModal from '@/components/LoginModal';
import SignUpModal from '@/components/SignUpModal';
import LogoutButton from '@/components/LogoutButton';
import gatheringLogo from '/gathering_home.svg';
import writeLogo from '@/assets/otherIcons/post_edit_button.png';

const Header: React.FC = () => {
const [activeModal, setActiveModal] = useState<'login' | 'signup' | null>(null);
Expand All @@ -31,17 +32,28 @@ const Header: React.FC = () => {
return (
<header className="pb-10">
<div className="z-[49] fixed top-0 left-0 w-full bg-white border-b border-b-[#E7E7E7]">
<div className="px-24 ms-8 flex justify-between py-4 items-center">
<img className="cursor-pointer" src={gatheringLogo} onClick={onLogoClick} />
<div className="container mx-auto px-4 sm:px-6 lg:px-8 flex justify-between py-4 items-center">
<img
className="cursor-pointer h-6 sm:h-8 md:h-10"
src={gatheringLogo}
onClick={onLogoClick}
/>

<section className="flex items-center text-[#3f3f3f] text-[20px] font-bold space-x-4">
<section className="flex items-center text-[#3f3f3f] text-base sm:text-lg font-bold space-x-2 sm:space-x-4">
<button
className="absolute focus:outline-none right-[360px] bg-[#3387E5]
text-[16px] text-white font-bold border-solid rounded-[20px] px-4 py-1
transition-all ease-in-out duration-300 hover:scale-[1.02] will-change-transform"
className="bg-[#3387E5] text-white font-bold border-solid rounded-[20px]
transition-all ease-in-out duration-300 hover:scale-[1.02] will-change-transform focus:outline-none
flex items-center justify-center
px-0.5 py-0.5 sm:px-1.5 sm:py-1.5 md:px-4 md:py-1.5"
onClick={onClickPostingButton}
>
모집글 작성하기
{/* 작은 화면 (md 브레이크포인트 미만)에서 표시될 이미지 아이콘 */}
<span className="block md:hidden">
<img src={writeLogo} alt="모집글 작성" className="h-7 w-7" />{' '}
{/* SVG를 writeLogo 이미지로 대체 */}
</span>
{/* 중간 화면 (md 브레이크포인트 이상)에서 표시될 전체 텍스트 */}
<span className="hidden md:block text-sm sm:text-base">모집글 작성하기</span>
</button>
{/* {isLoggedIn && <button onClick={() => nav('/profile')}>프로필</button>} */}
{isLoggedIn ? (
Expand Down
7 changes: 4 additions & 3 deletions Gathering_fe/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ const Layout: React.FC = () => {

return (
<div className="flex flex-col min-h-screen select-none">
{!shouldHideHeader ? <Header /> : <div className="h-[100px]" />}
{!shouldHideHeader ? <Header /> : <div className="h-[56px] sm:h-[64px] md:h-[72px]" />}
<main
className={`flex-grow ${!shouldHideHeader ? 'pt-[72px]' : ''} min-h-[calc(150vh-72px)]`}
className={`flex-grow ${!shouldHideHeader ? 'pt-[56px] sm:pt-[64px] md:pt-[72px]' : ''}
min-h-[calc(150vh-56px)] sm:min-h-[calc(150vh-64px)] md:min-h-[calc(150vh-72px)]`}
>
<Outlet />
</main>
<div className="pt-[120px]" />
<div className="pt-20 sm:pt-24 lg:pt-32" />
<Footer />
{showScrollTop && (
<button
Expand Down
16 changes: 8 additions & 8 deletions Gathering_fe/src/components/MultiLevelDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
};

return (
<div className="relative inline-block text-left" ref={dropdownRef}>
<div className="relative inline-block text-left select-none" ref={dropdownRef}>
<button
type="button"
className={`inline-flex items-center justify-between min-w-[160px] px-4 py-2 text-sm font-medium text-black dark:text-white bg-white dark:bg-[#1E2028] border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none ${buttonClassName}`}
className={`inline-flex items-center justify-between min-w-[150px] sm:min-w-[150px] px-3 py-2 sm:px-4 sm:py-2 text-sm font-medium text-black dark:text-white bg-white dark:bg-[#1E2028] border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none ${buttonClassName}`}
onClick={toggleMainDropdown}
>
<span className="truncate">{selectedLabel}</span> {/* 선택된 항목 텍스트 */}
Expand All @@ -72,15 +72,15 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({

{isMainDropdownOpen && (
<div
className={`absolute ${align === 'left' ? 'left-0' : 'right-0'} mt-2 w-56 rounded-lg shadow-lg bg-white dark:bg-[#1E2028] ring-1 ring-black ring-opacity-5 animate-fadeDown`}
className={`absolute ${align === 'left' ? 'left-0' : 'right-0'} mt-2 w-full max-w-[160px] sm:max-w-56 rounded-lg shadow-lg bg-white dark:bg-[#1E2028] ring-1 ring-black ring-opacity-5 animate-fadeDown`}
>
<div className="py-1">
<a
href="#"
onClick={event => {
handleItemClick('전체', event);
}}
className="block px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="block px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
전체
</a>
Expand All @@ -90,7 +90,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
<a
href="#"
onClick={event => handleItemClick(item.title, event)}
className="block px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="block px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
{item.title}
</a>
Expand All @@ -101,17 +101,17 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
<a
href="#"
onClick={event => handleItemClick(item.title, event)}
className="block px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="block px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
{item.title}
</a>
<div className="pl-4">
<div className="pl-3 sm:pl-4">
{item.items.map(subItem => (
<a
key={subItem.id}
href="#"
onClick={event => handleItemClick(subItem.label, event)}
className="block px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="block px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
{subItem.label}
</a>
Expand Down
1 change: 0 additions & 1 deletion Gathering_fe/src/components/NicknameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const NicknameModal: React.FC<NicknameModalProps> = ({ nickname }) => {
} else {
const result = await setMyNickname(newNickname);
if (result?.success) {
console.log(nickname);
updateProfileData({ nickname: newNickname });
showToast('닉네임이 성공적으로 변경되었습니다.', true);
window.location.reload();
Expand Down
40 changes: 20 additions & 20 deletions Gathering_fe/src/components/OptionalDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({

useEffect(() => {
if (selectedItems.length > 0) {
console.log('API 호출: 선택된 항목들:', selectedItems);
// console.log('API 호출: 선택된 항목들:', selectedItems);
} else {
console.log('선택된 항목이 없습니다.');
// console.log('선택된 항목이 없습니다.');
}
}, [selectedItems]);

Expand All @@ -92,7 +92,7 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
{/* 드롭다운 버튼 */}
<button
type="button"
className={`inline-flex items-center justify-between min-w-[160px] px-4 py-2 text-sm font-medium text-black dark:text-white bg-white dark:bg-[#1E2028] border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none ${buttonClassName}`}
className={`inline-flex items-center justify-between min-w-[150px] sm:min-w-[150px] px-3 py-2 sm:px-4 sm:py-2 text-sm font-medium text-black dark:text-white bg-white dark:bg-[#1E2028] border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none ${buttonClassName}`}
onClick={toggleMainDropdown}
>
<span className="truncate">{label}</span>
Expand All @@ -109,15 +109,15 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
{/* 드롭다운 메뉴 */}
{isMainDropdownOpen && (
<div
className={`absolute ${align === 'left' ? 'left-0' : 'right-0'} mt-2 w-[600px] rounded-lg shadow-lg bg-white dark:bg-[#1E2028] ring-1 ring-black ring-opacity-5 overflow-hidden animate-fadeDown`}
className={`absolute ${align === 'left' ? 'left-0' : 'right-0'} mt-2 w-[330px] sm:max-w-[450px] md:max-w-[550px] lg:w-[600px] rounded-lg shadow-lg bg-white dark:bg-[#1E2028] ring-1 ring-black ring-opacity-5 overflow-hidden animate-fadeDown`}
>
<div className="grid grid-cols-[200px_200px_1fr]">
<div className="grid grid-cols-3">
{/* 1단계 메뉴 */}
<div className="w-[200px] border-r border-gray-300 dark:border-gray-600 py-1">
<div className="border-r border-gray-300 dark:border-gray-600 py-1">
{menuData.map(item => (
<div
key={item.id}
className={`px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer ${
className={`px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer ${
activeSubmenuId === item.id ? 'bg-gray-200 dark:bg-gray-700' : ''
}`}
onClick={() => {
Expand All @@ -134,14 +134,14 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
</div>

{/* 2단계 메뉴 */}
<div className="w-[200px] border-r border-gray-300 dark:border-gray-600 py-1">
<div className="border-r border-gray-300 dark:border-gray-600 py-1">
{activeSubmenuId &&
menuData
.find(item => item.id === activeSubmenuId)
?.items?.map(subItem => (
<div
key={subItem.id}
className={`px-4 py-2 text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer ${
className={`px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer ${
activeSubmenuId2 === subItem.id ? 'bg-gray-200 dark:bg-gray-700' : ''
}`}
onClick={() =>
Expand All @@ -154,7 +154,7 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
</div>

{/* 3단계 메뉴 */}
<div className="w-[200px] py-1">
<div className="py-1">
{activeSubmenuId2 &&
menuData
.find(item => item.id === activeSubmenuId)
Expand All @@ -166,19 +166,19 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
<div
key={subItem.id}
onClick={() => handleItemClick(subItem.id, subItem.label)}
className={`flex items-center px-4 py-2 text-sm text-black dark:text-white cursor-pointer
${
selectedItems.includes(subItem.id)
? 'bg-[#3387E5] text-white'
: 'hover:bg-gray-100 dark:hover:bg-gray-800'
} // hover 효과`}
className={`flex items-center px-3 py-2 text-xs sm:px-4 sm:py-2 sm:text-sm text-black dark:text-white cursor-pointer
${
selectedItems.includes(subItem.id)
? 'bg-[#3387E5] text-white'
: 'hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
{/* 스택 아이콘 표시 */}
{iconSrc && (
<img
src={iconSrc}
alt={subItem.label}
className="w-5 h-5 mr-2 object-contain"
className="w-4 h-4 mr-1 sm:w-5 sm:h-5 sm:mr-2 object-contain"
/>
)}
{subItem.label}
Expand All @@ -198,10 +198,10 @@ const OptionalDropdown: React.FC<MultiLevelDropdownProps> = ({
<button
key={index}
onClick={() => handleRemoveItem(selectedItems[index])}
className="flex items-center bg-blue-200 text-blue-800 px-2 py-1 rounded-full m-1 hover:bg-blue-300 transition"
className="flex items-center bg-blue-200 text-blue-800 px-2 py-1 rounded-full m-1 hover:bg-blue-300 transition text-xs"
>
<span className="text-sm">{label}</span>
<span className="ml-2 text-gray-500">✕</span>
<span className="text-xs sm:text-sm">{label}</span>
<span className="ml-1 sm:ml-2 text-gray-500 text-xs sm:text-sm">✕</span>
</button>
))}
</div>
Expand Down
Loading