diff --git a/index.html b/index.html index a66e939..25daa4e 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,13 @@ - + - + Digging Club diff --git a/public/about/ConceptSavoring/concept-savoring-bg.svg b/public/about/ConceptSavoring/concept-savoring-bg.svg index 30177d7..38ed0da 100644 --- a/public/about/ConceptSavoring/concept-savoring-bg.svg +++ b/public/about/ConceptSavoring/concept-savoring-bg.svg @@ -1,8 +1,8 @@ - - + + - + diff --git a/public/about/MainTitle/main_stars.svg b/public/about/MainTitle/main_stars.svg new file mode 100644 index 0000000..baa94eb --- /dev/null +++ b/public/about/MainTitle/main_stars.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 76194a0..6e90fd6 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,7 +1,7 @@ export const NAVIGATION_ITEMS = [ { name: 'ABOUT', path: '/' }, - { name: 'WORKS', path: 'work' }, - { name: 'GUEST', path: 'guest' }, + { name: 'WORKS', path: '/work' }, + { name: 'GUEST', path: '/guest' }, ]; export const MOBILE_BREAKPOINT = 768; @@ -49,3 +49,5 @@ export const WORDS = [ // CategoriesSection.tsx export const CATEGORIES = ['ALL', 'UX', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const; +export const DETAIL_RESPONSE_CATEGORIES = ['ALL', 'UXUI', 'BX', 'GRAPHIC', 'ILLUSTRATION', 'MEDIA'] as const; +export const WORK_CATEGORIES = ['ALL', 'UX/UI', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const; diff --git a/src/hooks/queries/useGetWorkList.tsx b/src/hooks/queries/useGetWorkList.tsx index 6baa843..4658794 100644 --- a/src/hooks/queries/useGetWorkList.tsx +++ b/src/hooks/queries/useGetWorkList.tsx @@ -20,14 +20,21 @@ const getWorkList = async (category: string, currentPage: number) => { const res = await get( `work?category=${mappedCategory}¤tPage=${currentPage}` ); - console.log('API Response:', res); return res.result.works as WorkListType[]; }; export const useGetWorkList = ({ category, currentPage }: WorkListRequestType) => { + let mappedCategory = (() => { + switch (category) { + case 'UX/UI': + return 'UX'; + default: + return category; + } + })(); const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({ - queryKey: WORK_KEYS.list(category, currentPage), - queryFn: ({ pageParam = currentPage }) => getWorkList(category, pageParam), + queryKey: WORK_KEYS.list(mappedCategory, currentPage), + queryFn: ({ pageParam = currentPage }) => getWorkList(mappedCategory, pageParam), getNextPageParam: (lastPage, allPages) => { if (lastPage && Array.isArray(lastPage) && lastPage?.length === 10) { return allPages?.length ? allPages.length + 1 : 1; diff --git a/src/main.tsx b/src/main.tsx index a246860..fd003d0 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import { RouterProvider } from 'react-router-dom'; import router from './routes/Router'; +import './../public/fonts/font.css'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx index 48399e2..7ae614d 100644 --- a/src/pages/About/About.tsx +++ b/src/pages/About/About.tsx @@ -1,7 +1,6 @@ import { Helmet } from 'react-helmet-async'; import styled from 'styled-components'; import MainTitle from './components/MainTitle/MainTitle'; -import ExhibitionInfo from './components/ExhibitionInfo/ExhibitionInfo'; import ExhibitionIntroduction from './components/ExhibitionIntroduction/ExhibitionIntroduction'; import ExhibitionMeaning from './components/ExhibitionMeaning/ExhibitionMeaning'; import GraduationCommittee from './components/GraduationCommittee/GraduationCommittee'; @@ -32,7 +31,7 @@ function About() { /> {isMobile ? <> : } - + {/* */} diff --git a/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx b/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx index 0a662ca..0c4a6a9 100644 --- a/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx +++ b/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx @@ -77,19 +77,20 @@ const MatterJsContainer = styled.div<{ isMobile: boolean }>` const ContentWrapper = styled.div<{ isMobile: boolean }>` display: flex; flex-direction: ${(props) => (props.isMobile ? 'column' : 'row')}; - gap: ${(props) => (props.isMobile ? '30px' : '300px')}; - align-items: ${(props) => (props.isMobile ? 'center' : 'flex-start')}; + gap: ${(props) => (props.isMobile ? '30px' : '250px')}; + align-items: flex-start; `; const Title = styled.h1<{ isMobile: boolean }>` font-size: ${(props) => (props.isMobile ? '32px' : '40px')}; font-weight: 800; - text-align: ${(props) => (props.isMobile ? 'center' : 'left')}; + text-align: left; + line-height: 140%; `; const Description = styled.p<{ isMobile: boolean }>` - font-size: ${(props) => (props.isMobile ? '14px' : '16px')}; + font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 500; - line-height: 150%; - text-align: ${(props) => (props.isMobile ? 'center' : 'left')}; + line-height: 140%; + text-align: left; `; diff --git a/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx b/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx index 645333c..0a17f48 100644 --- a/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx +++ b/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx @@ -12,12 +12,16 @@ export default function ConceptImmersing() { - Immersing은 어떤 활동이나 주제에 완전히 빠져들어 집중하는 것을 의미한다. -
+ Immersing은 어떤 활동이나 주제에 완전히 빠져들어 + {isMobile ?
: ' '} + 집중하는 것을 의미한다. +
Digging이 어떤 것을 알아가고 발견하는 과정이라면,
- Immersing은 그 과정에서 얻은 것을 깊고 완전히 경험하며 새로운 시각과 경험을 얻는 것이다. -
+ Immersing은 그 과정에서 얻은 것을 잊고 + {isMobile ?
: ' '} + 완전히 경험하며 새로운 시각과 경험을 얻는 것이다. +
우리는 몰입을 통해 더 창의적이고 깊이 있는 결과를 얻어낼 수 있다. @@ -37,7 +41,7 @@ const ImmersingWrapper = styled.div<{ isMobile: boolean }>` `; const Description = styled.p<{ isMobile: boolean }>` - font-size: ${props => props.isMobile ? '14px' : '16px'}; + font-size: ${props => props.isMobile ? '12px' : '16px'}; font-weight: 500; line-height: 140%; max-width: ${props => props.isMobile ? '100%' : '80%'}; diff --git a/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx b/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx index b15c949..a8f92c8 100644 --- a/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx +++ b/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx @@ -1,7 +1,7 @@ import Marquee from './components/Marquee'; import { useRef } from 'react'; import styled from 'styled-components'; -import { useIsMobile } from '../../../../hooks/useIsMobile'; // 경로를 실제 프로젝트 구조에 맞게 조정해주세요 +import { useIsMobile } from '../../../../hooks/useIsMobile'; function ConceptReflecting() { const containerRef = useRef(null); @@ -13,13 +13,20 @@ function ConceptReflecting() { - Reflecting은 특정한 경험이나 지식에 대해 깊이 생각하고 그 의미를 되새기는 과정을 의미한다. -
- Digging을 통해 얻게 된 정보나 경험을 Reflecting함으로써, 그것이 우리의 삶에 어떤 의미를 + Reflecting은 특정한 경험이나 지식에 대해 깊이 생각하고 + {isMobile ?
: ' '} + 그 의미를 되새기는 과정을 의미한다. + {isMobile ?
:
} + Digging을 통해 얻게 된 정보나 경험을 Reflecting함으로써, + {isMobile ?
: ' '} + 그것이 우리의 삶에 어떤 의미를 가지는지,
- 어떤 교훈을 줄 수 있는지 고민하게 된다. 이러한 반추의 과정에서 우리는 더 깊이 있는 통찰과 - 이해를 얻는다. + 어떤 교훈을 줄 수 있는지 고민하게 된다. + {isMobile ?
: ''} + 이러한 반추의 과정에서 우리는 + {isMobile ?
: ' '} + 더 깊이 있는 통찰과 이해를 얻는다.
@@ -47,9 +54,8 @@ const ReflectingContainer = styled.div<{ isMobile: boolean }>` const Description = styled.p<{ isMobile: boolean }>` margin-top: ${(props) => (props.isMobile ? '30px' : '46px')}; - font-size: ${(props) => (props.isMobile ? '14px' : '16px')}; + font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 500; line-height: 140%; - letter-spacing: ${(props) => (props.isMobile ? '-0.56px' : '-0.64px')}; text-align: left; `; diff --git a/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx b/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx index d3ff99d..cbf8b23 100644 --- a/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx +++ b/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx @@ -16,11 +16,16 @@ export default function ConceptSavoring() { - Savoring은 어떤 경험이나 감정을 깊이 있게 즐기고 음미하는 것을 의미한다. -
+ Savoring은 어떤 경험이나 감정을 + {isMobile ?
: ' '} + 깊이 있게 즐기고 음미하는 것을 의미한다. + + Digging이 무언가를 탐구하고 발견하는 과정이라면,
- Savoring은 그 과정에서 얻은 결과를 천천히 그리고 깊이 있게 즐기는 것이다. + Savoring은 그 과정에서 얻은 결과를 + {isMobile ?
: ' '} + 천천히 그리고 깊이 있게 즐기는 것이다. 우리는 Digging을 통해 발견한 것들을 Savoring함으로써 @@ -50,17 +55,19 @@ const PageWrapper = styled.div<{ isMobile: boolean }>` const TitleText = styled.h1<{ isMobile: boolean }>` font-size: ${(props) => (props.isMobile ? '24px' : '40px')}; font-weight: 800; - line-height: 120%; + line-height: 140%; letter-spacing: ${(props) => (props.isMobile ? '-1.28px' : '-1.52px')}; text-align: center; `; const Title = styled(TitleText)` margin-bottom: ${(props) => (props.isMobile ? '10px' : '20px')}; + line-height: 140%; `; const Subtitle = styled(TitleText)` margin-bottom: ${(props) => (props.isMobile ? '40px' : '85px')}; + line-height: 140%; `; const DescriptionContainer = styled.div<{ isMobile: boolean }>` @@ -68,7 +75,8 @@ const DescriptionContainer = styled.div<{ isMobile: boolean }>` flex-direction: column; align-items: center; justify-content: center; - gap: ${(props) => (props.isMobile ? '30px' : '60px')}; + line-height: 140%; + gap: ${(props) => (props.isMobile ? '16px' : '60px')}; `; const Description = styled.p<{ isMobile: boolean }>` diff --git a/src/pages/About/components/Designers/Designers.tsx b/src/pages/About/components/Designers/Designers.tsx index 2977970..d0d8444 100644 --- a/src/pages/About/components/Designers/Designers.tsx +++ b/src/pages/About/components/Designers/Designers.tsx @@ -94,6 +94,7 @@ const Title = styled.h1<{ isMobile: boolean }>` margin-bottom: ${(props) => (props.isMobile ? '40px' : '80px')}; margin-left: ${(props) => (props.isMobile ? '10px' : '30px')}; text-align: start; + line-height: 140%; `; const DesignersGrid = styled.div<{ isMobile: boolean }>` @@ -107,4 +108,5 @@ const DesignerName = styled.span<{ isMobile: boolean }>` font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 500; text-align: center; + line-height: 140%; `; diff --git a/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx b/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx index a058020..07f1214 100644 --- a/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx +++ b/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx @@ -60,18 +60,21 @@ const TitleContainer = styled.div<{ isMobile: boolean }>` const Title = styled.h1<{ isMobile: boolean }>` font-size: ${props => props.isMobile ? '24px' : '40px'}; font-weight: 900; + line-height: 140%; `; const Subtitle = styled.h2<{ isMobile: boolean }>` margin-bottom: ${props => props.isMobile ? '50px' : '139px'}; font-size: ${props => props.isMobile ? '10px' : '20px'}; font-weight: 500; + line-height: 140%; `; const InfoSection = styled.div<{ isMobile: boolean }>` margin-bottom: 20px; font-size: ${props => props.isMobile ? '10px' : '16px'}; font-weight: 700; + line-height: 140%; `; const Label = styled.span<{ isMobile: boolean }>` @@ -79,4 +82,5 @@ const Label = styled.span<{ isMobile: boolean }>` font-size: ${props => props.isMobile ? '10px' : '16px'}; font-weight: 700; color: #00b4db; + line-height: 140%; `; \ No newline at end of file diff --git a/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx b/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx index 68f7735..6ec7ed4 100644 --- a/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx +++ b/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx @@ -34,24 +34,26 @@ export default function ExhibitionIntroduction() { const IntroductionWrapper = styled.div<{ isMobile: boolean }>` height: ${(props) => (props.isMobile ? 'auto' : '1080px')}; - padding: ${(props) => (props.isMobile ? '40px 20px' : '0px 140px')}; + padding: ${(props) => (props.isMobile ? '40px 20px' : '80px 310px')}; `; const Title = styled.h1<{ isMobile: boolean }>` margin-bottom: ${(props) => (props.isMobile ? '50px' : '100px')}; font-size: ${(props) => (props.isMobile ? '32px' : '40px')}; font-weight: 900; + line-height: 140%; `; const Paragraph = styled.p<{ isMobile: boolean }>` - margin-bottom: ${(props) => (props.isMobile ? '40px' : '60px')}; - font-size: ${(props) => (props.isMobile ? '14px' : '16px')}; + margin-bottom: ${(props) => (props.isMobile ? '16px' : '60px')}; + font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 500; - line-height: 1.5; + line-height: 140%; `; const Highlight = styled.span<{ isMobile: boolean }>` color: #00b4db; - font-size: ${(props) => (props.isMobile ? '14px' : '16px')}; + font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 700; + line-height: 140%; `; diff --git a/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx b/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx index 93103eb..02f116b 100644 --- a/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx +++ b/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx @@ -34,7 +34,7 @@ export default function ExhibitionMeaning() { const IntroductionWrapper = styled.div<{ isMobile: boolean }>` height: ${(props) => (props.isMobile ? 'auto' : '1080px')}; - padding: ${(props) => (props.isMobile ? '40px 20px' : '0px 140px')}; + padding: ${(props) => (props.isMobile ? '40px 20px' : '80px 310px')}; `; const TitleContainer = styled.div<{ isMobile: boolean }>` @@ -53,11 +53,12 @@ const Paragraph = styled.p<{ isMobile: boolean }>` margin-bottom: ${(props) => (props.isMobile ? '40px' : '60px')}; font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; font-weight: 500; - line-height: 1.5; + line-height: 140%; `; const Highlight = styled.span<{ isMobile: boolean }>` color: #00b4db; font-weight: 700; font-size: ${(props) => (props.isMobile ? '12px' : '16px')}; + line-height: 140%; `; diff --git a/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx b/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx index b71c13f..ff1fdeb 100644 --- a/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx +++ b/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx @@ -64,7 +64,7 @@ export default function GraduationCommittee(): React.ReactElement { const CommitteeWrapper = styled.div<{ isMobile: boolean }>` height: ${(props) => (props.isMobile ? 'auto' : '1080px')}; - padding: ${(props) => (props.isMobile ? '40px 20px' : '0px 140px')}; + padding: ${(props) => (props.isMobile ? '40px 20px' : '80px 310px')}; `; const Title = styled.h1<{ isMobile: boolean }>` diff --git a/src/pages/About/components/MainTitle/MainTitle.tsx b/src/pages/About/components/MainTitle/MainTitle.tsx index 9377d78..81be669 100644 --- a/src/pages/About/components/MainTitle/MainTitle.tsx +++ b/src/pages/About/components/MainTitle/MainTitle.tsx @@ -8,6 +8,18 @@ import { EXHIBITION_TITLE, } from '../../../../constants/constants'; +interface InfoItem { + label: string; + content: string; +} + +const infoItems: InfoItem[] = [ + { label: '', content: '가천대학교 시각디자인학과 졸업전시 2025' }, + { label: '기간', content: '2024. 10. - 2024. 10.' }, + { label: '시간', content: '10:00 - 18:00' }, + { label: '장소', content: '가천대학교 비전타워 B1' }, +]; + export default function MainTitle() { const isMobile = useIsMobile(); const globeRef = useRef(null); @@ -29,12 +41,17 @@ export default function MainTitle() { }, []); return ( - + +
+ {/* Exhibition Info */} + + + + Digging Club + + + 발견의 여정 : 숨겨진 가능성을 찾아서 + + + {infoItems.map((item, index) => ( + + + {item.content} + + ))} + {[...Array(20)].map((_, index) => ( @@ -65,12 +102,13 @@ export default function MainTitle() { ); } -const MainTitleWrapper = styled.div` +const MainTitleWrapper = styled.div<{ isMobile: boolean }>` position: relative; - height: 1000px; + height: ${(props) => (props.isMobile ? '1300px' : '2400px')}; display: flex; flex-direction: column; align-items: center; + margin-bottom: ${(props) => (props.isMobile ? '' : '300px')}; overflow: hidden; `; @@ -95,11 +133,22 @@ const BackgroundImage = styled.img<{ isMobile: boolean }>` left: 0; width: 100%; height: 100%; - object-fit: cover; + object-fit: fill; object-position: center; z-index: 0; `; +const BackgroundStarsImage = styled.img<{ isMobile: boolean }>` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: contain; + object-position: center top; + z-index: 1; +`; + const BackgroundTopImage = styled.img<{ isMobile: boolean }>` position: absolute; top: 0; @@ -158,6 +207,7 @@ const SubtitleText = styled.p` flex-direction: column; justify-content: flex-start; gap: 10px; + line-height: 140%; @media (max-width: 768px) { font-size: 10px; @@ -175,7 +225,7 @@ const FloatingCircles = styled.div` z-index: 3; `; -const Circle = styled.div<{size: number}>` +const Circle = styled.div<{ size: number }>` position: absolute; width: ${(props) => props.size}px; height: ${(props) => props.size}px; @@ -184,3 +234,54 @@ const Circle = styled.div<{size: number}>` top: ${() => Math.random() * 100}vh; left: ${() => Math.random() * 100}vw; `; + +const TitleContainer = styled.div<{ isMobile: boolean }>` + width: ${(props) => (props.isMobile ? '400px' : '1000px')}; + height: ${(props) => (props.isMobile ? '400px' : '1000px')}; + padding-bottom: 500px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: ${(props) => (props.isMobile ? '200px' : '500px')}; +`; + +const ExhibitionBackgroundImage = styled.img<{ isMobile: boolean }>` + position: absolute; + width: ${(props) => (props.isMobile ? '600px' : '1600px')}; + height: ${(props) => (props.isMobile ? '600px' : '1600px')}; + object-fit: contain; + object-position: center top; +`; + +const Title = styled.h1<{ isMobile: boolean }>` + font-size: ${(props) => (props.isMobile ? '24px' : '40px')}; + font-weight: 900; + line-height: 140%; + z-index: 1000; +`; + +const Subtitle = styled.h2<{ isMobile: boolean }>` + margin-bottom: ${(props) => (props.isMobile ? '50px' : '139px')}; + font-size: ${(props) => (props.isMobile ? '10px' : '20px')}; + font-weight: 500; + line-height: 140%; + z-index: 1000; +`; + +const InfoSection = styled.div<{ isMobile: boolean }>` + margin-bottom: 20px; + font-size: ${(props) => (props.isMobile ? '10px' : '16px')}; + font-weight: 700; + line-height: 140%; + z-index: 1000; +`; + +const Label = styled.span<{ isMobile: boolean }>` + margin-right: 8px; + font-size: ${(props) => (props.isMobile ? '10px' : '16px')}; + font-weight: 700; + line-height: 140%; + color: #00b4db; + z-index: 1000; +`; diff --git a/src/pages/About/components/ScrollToTopButton/ScrollToTopButton.tsx b/src/pages/About/components/ScrollToTopButton/ScrollToTopButton.tsx index de88ce4..0605697 100644 --- a/src/pages/About/components/ScrollToTopButton/ScrollToTopButton.tsx +++ b/src/pages/About/components/ScrollToTopButton/ScrollToTopButton.tsx @@ -36,8 +36,9 @@ const ButtonWrapper = styled.button` right: 20px; width: 70px; height: 70px; - background-color: #00B4DB; - color: #fff; + background-color: transparent; + border: 3px solid #00b4db; + color: #00b4db; font-size: 16px; font-weight: 900; border-radius: 50%; @@ -46,13 +47,11 @@ const ButtonWrapper = styled.button` align-items: center; cursor: pointer; z-index: 1000; - border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.2s, opacity 0.5s, transform 0.5s; &:hover { - background-color: transparent; - border: 3px solid #00B4DB; - color: #00B4DB; + background-color: #00b4db; + color: #fff; } `; diff --git a/src/pages/Guest/Guest.tsx b/src/pages/Guest/Guest.tsx index cf8a852..5b75181 100644 --- a/src/pages/Guest/Guest.tsx +++ b/src/pages/Guest/Guest.tsx @@ -9,9 +9,9 @@ import { GUEST_KEYS } from '../../constants/QueryKey'; const Guest = () => { const { data: guestBookData } = useGetGuestBookList(); - console.log('실행', guestBookData); const { GuestBookMutation } = usePostGuestBook(); const [isAnimating, setIsAnimating] = useState(false); + const [isTyping, setIsTyping] = useState(false); const [formValues, setFormValues] = useState({ name: '', @@ -46,14 +46,20 @@ const Guest = () => { const handleInputChange = useCallback((e: React.ChangeEvent) => { const { name, value } = e.target; + setIsTyping(true); setFormValues((prevValues) => ({ ...prevValues, [name]: value, })); }, []); + const handleInputBlur = useCallback(() => { + setIsTyping(false); + }, []); const scrollToBottom = () => { - entriesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + if (!isTyping) { + entriesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + } }; const handleSubmit = async () => { @@ -118,6 +124,7 @@ const Guest = () => { type="text" value={formValues.name} onChange={handleInputChange} + onBlur={handleInputBlur} placeholder="이름을 입력하세요" autoComplete="off" /> @@ -126,6 +133,7 @@ const Guest = () => { type="text" value={formValues.comment} onChange={handleInputChange} + onBlur={handleInputBlur} placeholder="댓글을 입력하세요" autoComplete="off" /> @@ -198,6 +206,7 @@ const Title = styled.h1` font-weight: 900; color: ${({ theme }) => theme.colors.primaryBlue}; line-height: normal; + padding: 1rem; @media (max-width: 768px) { font-size: 28px; @@ -236,7 +245,11 @@ const EntriesContainer = styled.div` overflow-x: scroll; justify-content: center; padding: 20px; - margin-bottom: 7rem; + margin-bottom: 4rem; + + ::-webkit-scrollbar { + display: none; + } @media (max-width: 768px) { padding: 10px; @@ -264,7 +277,7 @@ const ComentContainer = styled.article` position: fixed; width: 55%; gap: 0.5rem; - padding-bottom: 2%; + margin-bottom: 2rem; left: 50%; transform: translateX(-50%); bottom: 0; @@ -273,7 +286,7 @@ const ComentContainer = styled.article` @media (max-width: 768px) { width: 90%; gap: 0.2rem; - margin-bottom: 3rem; + margin-bottom: 1rem; } `; @@ -315,7 +328,6 @@ const SubmitButton = styled.button<{ isAnimating: boolean }>` border: none; transition: background-color 0.3s ease; - // 기본적으로 애니메이션 적용 animation: ${({ isAnimating }) => (isAnimating ? expandCircle : 'none')} 1s ease; &:hover { @@ -324,9 +336,9 @@ const SubmitButton = styled.button<{ isAnimating: boolean }>` @media (max-width: 768px) { width: 100%; - height: 60px; - border-radius: 10px; - font-size: 20px; + height: 45px; + border-radius: 5px; + font-size: 17px; animation: none; border: none; } @@ -361,7 +373,7 @@ const TextInput = styled(NameInput)` display: flex; padding-left: 1rem; font-size: 16px; - height: 160px; + height: 133px; border-radius: 0px 0px 14px 14px; border-top: none; diff --git a/src/pages/Guest/components/GuestBookEntry.tsx b/src/pages/Guest/components/GuestBookEntry.tsx index fb45861..bca88da 100644 --- a/src/pages/Guest/components/GuestBookEntry.tsx +++ b/src/pages/Guest/components/GuestBookEntry.tsx @@ -44,7 +44,7 @@ const GuestBoxHeader = styled.div` margin-bottom: 8px; @media (max-width: 768px) { - font-size: 8px; + font-size: 10px; margin-bottom: 11px; } `; @@ -58,8 +58,9 @@ const GuestBoxContent = styled.div` margin-bottom: 16px; @media (max-width: 768px) { - font-size: 10px; + font-size: 12px; margin-bottom: 12px; + padding-top: 1rem; } `; @@ -70,6 +71,6 @@ const GuestBoxFooter = styled.div` text-align: right; @media (max-width: 768px) { - font-size: 8px; + font-size: 10px; } `; diff --git a/src/pages/Work/Work.tsx b/src/pages/Work/Work.tsx index b46eccd..936dcfa 100644 --- a/src/pages/Work/Work.tsx +++ b/src/pages/Work/Work.tsx @@ -4,13 +4,13 @@ import ExhibitionSection from './components/work/ExhibitionSection'; import styled from 'styled-components'; import { useGetWorkList } from '../../hooks/queries/useGetWorkList'; import { useState } from 'react'; -import { Category } from '../../types/types'; +import { WorkCategory } from '../../types/types'; import { useIsMobile } from '../../hooks/useIsMobile'; import MobileHeader from './components/mobile/MobileHeader'; import background from '../../assets/img/workBackground.png'; const Work = () => { - const [category, setCategory] = useState('ALL'); + const [category, setCategory] = useState('ALL'); const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useGetWorkList({ category, currentPage: 1, diff --git a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx index 54da01d..2ab6628 100644 --- a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx +++ b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx @@ -1,19 +1,19 @@ import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; -import { CATEGORIES } from '../../../../constants/constants'; +import { WorkCategory } from '../../../../types/types'; +import { WORK_CATEGORIES } from '../../../../constants/constants'; import { useQueryClient } from '@tanstack/react-query'; import { usePrefetchWorkList } from '../../../../hooks/queries/usePrefetchWorkList'; import { WORK_KEYS } from '../../../../constants/QueryKey'; interface MobileCategoriesSectionProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const MobileCategoriesSection = ({ category, setCategory }: MobileCategoriesSectionProps) => { const queryClient = useQueryClient(); const { prefetchWorkList } = usePrefetchWorkList(); - const handleClick = (name: Category) => { + const handleClick = (name: WorkCategory) => { queryClient.removeQueries({ queryKey: WORK_KEYS.all }); prefetchWorkList(category, 1); setCategory(name); @@ -21,7 +21,7 @@ const MobileCategoriesSection = ({ category, setCategory }: MobileCategoriesSect return ( - {CATEGORIES.map((item) => ( + {WORK_CATEGORIES.map((item) => ( handleClick(item)} selected={category === item}> {item} diff --git a/src/pages/Work/components/mobile/MobileHeader.tsx b/src/pages/Work/components/mobile/MobileHeader.tsx index dcb105a..0bf443b 100644 --- a/src/pages/Work/components/mobile/MobileHeader.tsx +++ b/src/pages/Work/components/mobile/MobileHeader.tsx @@ -1,11 +1,11 @@ import { useState, useEffect } from 'react'; import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; +import { WorkCategory } from '../../../../types/types'; import MobileCategoriesSection from './MobileCategoriesSection'; interface MobileHeaderProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const MobileHeader = ({ category, setCategory }: MobileHeaderProps) => { diff --git a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx index 4d022d5..01d47c0 100644 --- a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx +++ b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx @@ -5,10 +5,22 @@ interface WorkInfoSectionProps { } const MobileWorkInfoSection = ({ data }: WorkInfoSectionProps) => { + const mappedCategory = (() => { + switch (data.category) { + case 'UXUI': + return 'UX/UI'; + case 'ILLUSTRATION': + return 'ILLUST'; + case 'BX': + return 'BRAND'; + default: + return data.category; + } + })(); return ( - {data.category} + {mappedCategory} {data.studentName} {data.studentId} @@ -52,6 +64,8 @@ const WorkCategory = styled.span` margin-left: 1.6rem; font-size: 1.8rem; + font-style: normal; + font-weight: 900; line-height: 120%; color: ${({ theme }) => theme.colors.primaryBlue}; `; @@ -65,9 +79,12 @@ const WorkAuthorInfo = styled.div` const AuthorSpan = styled.span` font-size: 1.2rem; + font-style: normal; + font-weight: 700; line-height: 100%; &.studentId { + font-weight: 500; color: #7ca2b0; } `; diff --git a/src/pages/Work/components/work/CategoriesSection.tsx b/src/pages/Work/components/work/CategoriesSection.tsx index 3621c9e..d0924d7 100644 --- a/src/pages/Work/components/work/CategoriesSection.tsx +++ b/src/pages/Work/components/work/CategoriesSection.tsx @@ -1,19 +1,19 @@ import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; -import { CATEGORIES } from '../../../../constants/constants'; +import { WorkCategory } from '../../../../types/types'; +import { WORK_CATEGORIES } from '../../../../constants/constants'; import { useQueryClient } from '@tanstack/react-query'; import { usePrefetchWorkList } from '../../../../hooks/queries/usePrefetchWorkList'; import { WORK_KEYS } from '../../../../constants/QueryKey'; interface CategoriesSectionProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const CategoriesSection = ({ category, setCategory }: CategoriesSectionProps) => { const queryClient = useQueryClient(); const { prefetchWorkList } = usePrefetchWorkList(); - const handleClick = (name: Category) => { + const handleClick = (name: WorkCategory) => { queryClient.removeQueries({ queryKey: WORK_KEYS.all }); prefetchWorkList(category, 1); setCategory(name); @@ -21,7 +21,7 @@ const CategoriesSection = ({ category, setCategory }: CategoriesSectionProps) => return ( - {CATEGORIES.map((item) => ( + {WORK_CATEGORIES.map((item) => ( handleClick(item)} selected={category === item}> {item} diff --git a/src/pages/Work/components/workDetail/WorkInfoSection.tsx b/src/pages/Work/components/workDetail/WorkInfoSection.tsx index c818630..7ebb7d2 100644 --- a/src/pages/Work/components/workDetail/WorkInfoSection.tsx +++ b/src/pages/Work/components/workDetail/WorkInfoSection.tsx @@ -5,9 +5,21 @@ interface WorkInfoSectionProps { } const WorkInfoSection = ({ data }: WorkInfoSectionProps) => { + const mappedCategory = (() => { + switch (data.category) { + case 'UXUI': + return 'UX/UI'; + case 'ILLUSTRATION': + return 'ILLUST'; + case 'BX': + return 'BRAND'; + default: + return data.category; + } + })(); return ( - {data.category} + {mappedCategory} 제목 : {data.title} {data.subtitle} @@ -32,7 +44,9 @@ const WorkInfoWrapper = styled.section` const WorkCategory = styled.span` margin-bottom: 6rem; - font-size: 5rem; + font-size: 3rem; + font-style: normal; + font-weight: 900; line-height: 120%; color: ${({ theme }) => theme.colors.primaryBlue}; `; @@ -46,9 +60,12 @@ const WorkAuthorInfo = styled.div` const AuthorSpan = styled.span` font-size: 1.6rem; + font-style: normal; + font-weight: 700; line-height: 100%; &.studentId { + font-weight: 500; color: #7ca2b0; } `; @@ -56,7 +73,9 @@ const AuthorSpan = styled.span` const WorkTitle = styled.span` margin-bottom: 2rem; - font-size: 3.2rem; + font-size: 3rem; + font-style: normal; + font-weight: 900; line-height: 120%; `; @@ -64,7 +83,9 @@ const WorkSubtitle = styled.span` margin-bottom: 4rem; font-size: 1.6rem; - line-height: 120%; + font-style: normal; + font-weight: 700; + line-height: 100%; `; const WorkBody = styled.span` diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index 85d1942..c254434 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -53,7 +53,6 @@ const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; - /* 폰트 */ color: #FFFFFF; font-family: 'Pretendard'; -webkit-text-size-adjust: 100%; diff --git a/src/types/types.ts b/src/types/types.ts index eb404f1..a8114b4 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,6 +1,8 @@ -import { CATEGORIES } from '../constants/constants'; +import { CATEGORIES, DETAIL_RESPONSE_CATEGORIES, WORK_CATEGORIES } from '../constants/constants'; export type Category = (typeof CATEGORIES)[number]; +export type WorkCategory = (typeof WORK_CATEGORIES)[number]; +export type DetailWorkCategory = (typeof DETAIL_RESPONSE_CATEGORIES)[number]; export interface ResponseType> { isSuccess: boolean; @@ -20,7 +22,7 @@ export type GuestBookListResponseType = ResponseType<{ }>; export type WorkListRequestType = { - category: Category; + category: WorkCategory; currentPage: number; }; @@ -49,7 +51,7 @@ export type WorkDetailType = { studentName: string; studentId: string; contact: string; - category: Category; + category: DetailWorkCategory; title: string; subtitle: string; description: string;