From 1c1a047d02ca084eb7850f8b389b457911124c01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EA=B7=80=ED=98=84?= Date: Sat, 8 Jun 2024 15:32:43 +0900 Subject: [PATCH] =?UTF-8?q?[refactor]=20main,=20navbar=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/main/AboutUs.jsx | 105 ++++----- front-end/src/components/main/LogoHome.jsx | 66 +++--- front-end/src/components/main/Policy.jsx | 26 +-- front-end/src/components/main/Summary.jsx | 173 ++++++--------- front-end/src/components/navBar/navBar.jsx | 237 ++++++++++----------- front-end/src/pages/main/index.jsx | 1 - 6 files changed, 269 insertions(+), 339 deletions(-) diff --git a/front-end/src/components/main/AboutUs.jsx b/front-end/src/components/main/AboutUs.jsx index 6de77ed1..5e811aa6 100644 --- a/front-end/src/components/main/AboutUs.jsx +++ b/front-end/src/components/main/AboutUs.jsx @@ -1,71 +1,58 @@ import React, { useState, useEffect } from 'react'; import styled, { keyframes } from 'styled-components'; import 'tailwindcss/tailwind.css'; - import Introduce from '../../images/main/AboutUs/Introduce.gif'; import We from '../../images/main/AboutUs/We.gif'; -const frameInAnimation_gif = keyframes` - 0% { - opacity: 0; - transform: translateX(-100%); - } - - 100%{ - opacity: 1; - transform: translateX(0%); - } -`; - -const AnimateContainer_gif = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - &.frame-in { - animation: ${frameInAnimation_gif} 1s forwards; - } -`; - -const frameInAnimation_font = keyframes` - 0% { - opacity: 0; - transform: translateX(100%); - } - - 100%{ - opacity: 1; - transform: translateX(0%); - } -`; - -const AnimateContainer_font = styled.div` - display: flex; - - - &.frame-in { - animation: ${frameInAnimation_font} 1s forwards; - } -`; - export default function AboutUs({ fromRefFourElement }) { - const [animate, setAnimate] = useState(false); + const [animate, setAnimate] = useState(false); // 애니메이트 상태 관리 + + const frameInAnimation_gif = keyframes` + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100%{ + opacity: 1; + transform: translateX(0%); + } + `; + + const AnimateContainer_gif = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &.frame-in { + animation: ${frameInAnimation_gif} 1s forwards; + } + `; + + const frameInAnimation_font = keyframes` + 0% { + opacity: 0; + transform: translateX(100%); + } + 100%{ + opacity: 1; + transform: translateX(0%); + } + `; + + const AnimateContainer_font = styled.div` + display: flex; + &.frame-in { + animation: ${frameInAnimation_font} 1s forwards; + } + `; useEffect(() => { const handleScroll = () => { - // 특정 조건을 확인하여 animate 상태 토글 - const shouldAnimate = window.scrollY > 1500; + const shouldAnimate = window.scrollY > 1500; // 특정 조건을 확인하여 animate 상태 토글 setAnimate(shouldAnimate); }; - - // 스크롤 이벤트 리스너 등록 window.addEventListener('scroll', handleScroll); - - // 컴포넌트가 마운트될 때 애니메이션을 트리거 setAnimate(true); - - // 클린업 함수에서 이벤트 리스너 제거 return () => { window.removeEventListener('scroll', handleScroll); }; @@ -73,13 +60,7 @@ export default function AboutUs({ fromRefFourElement }) { return (
- {/* 위쪽과 아래쪽만 보일 div */}
- {/* 위쪽의 선 */} -
-
-
- {/* 중앙 컨텐츠 영역 */}
{/* 왼쪽 - Introduce GIF */} @@ -96,7 +77,7 @@ export default function AboutUs({ fromRefFourElement }) { {/* 오른쪽 - About Us 문구 */}

About Us

@@ -107,7 +88,7 @@ export default function AboutUs({ fromRefFourElement }) { 실시간 코딩 배틀의 특별함을 더해 코딩에 흥미를 느껴보세요!

- 개발자들은 여기에서 서로의 실력을 겨루며, 문제 해결 능력을 향상시키고 새로운 아이디어를 찾아갈 수 있습니다. + 여기에서 서로의 실력을 겨루며, 문제 해결 능력을 향상시키고 새로운 아이디어를 찾아갈 수 있습니다.

함께 성장하고 발전하는 코딩 커뮤니티, 코드 아레나! diff --git a/front-end/src/components/main/LogoHome.jsx b/front-end/src/components/main/LogoHome.jsx index d20d7146..785f4c6b 100644 --- a/front-end/src/components/main/LogoHome.jsx +++ b/front-end/src/components/main/LogoHome.jsx @@ -4,38 +4,38 @@ import 'tailwindcss/tailwind.css'; import Logo from '../../images/main/LogoHome/Logo.png'; import '../css/BlinkingElement.css'; -// 최초 렌더링 시에 대표 로고 나타나는 애니메이트 -const initialFadeInAnimation = keyframes` - 0% { - opacity: 0; - } +export default function LogoHome({ scrollToFourElement }) { + const [animate, setAnimate] = useState(false); // 스크롤 애니메이트 상태 관리 - 100% { - opacity: 1; - } -`; + // 최초 렌더링 시에 대표 로고 나타나는 애니메이트 + const initialFadeInAnimation = keyframes` + 0% { + opacity: 0; + } -// 로고 스크롤 애니메이트 이벤트 -const frameInAnimation = keyframes` - 0% { - opacity: 0; - transform: translateY(1%); - } + 100% { + opacity: 1; + } + `; - 100%{ - opacity: 1; - transform: translateY(0%); - } -`; + // 로고 스크롤 애니메이트 이벤트 + const frameInAnimation = keyframes` + 0% { + opacity: 0; + transform: translateY(1%); + } -const AnimateContainer = styled.div` - &.frame-in { - animation: ${frameInAnimation} 1.3s forwards; - } -`; + 100%{ + opacity: 1; + transform: translateY(0%); + } + `; -export default function LogoHome({ scrollToFourElement }) { - const [animate, setAnimate] = useState(false); + const AnimateContainer = styled.div` + &.frame-in { + animation: ${frameInAnimation} 1.3s forwards; + } + `; const handleLogoClick = () => { if (scrollToFourElement) { @@ -45,23 +45,19 @@ export default function LogoHome({ scrollToFourElement }) { useEffect(() => { const handleScroll = () => { - console.log('Scroll event 발생'); - // 특정 조건을 확인하여 animate 상태 토글 const shouldAnimate = window.scrollY < 700; setAnimate(shouldAnimate); }; - // 스크롤 이벤트 리스너 등록 - window.addEventListener('scroll', handleScroll); + window.addEventListener('scroll', handleScroll); // 스크롤 이벤트 리스너 등록 - // 클린업 함수에서 이벤트 리스너 제거 return () => { - window.removeEventListener('scroll', handleScroll); + window.removeEventListener('scroll', handleScroll); // 클린업 함수에서 이벤트 리스너 제거 }; }, []); + // 최초 렌더링 시 initial fade-in 애니메이션 적용 useEffect(() => { - // 최초 렌더링 시 initial fade-in 애니메이션 적용 setAnimate(true); }, []); @@ -79,7 +75,7 @@ export default function LogoHome({ scrollToFourElement }) { />

-

지금 배틀에 참여하세요!

+

지금 배틀에 참여하세요!

); } \ No newline at end of file diff --git a/front-end/src/components/main/Policy.jsx b/front-end/src/components/main/Policy.jsx index 47745f6c..9d11c472 100644 --- a/front-end/src/components/main/Policy.jsx +++ b/front-end/src/components/main/Policy.jsx @@ -1,28 +1,22 @@ import React from 'react'; import 'tailwindcss/tailwind.css'; - import ssafy from '../../images/main/Policy/ssafy.png'; -const ImageAndText = ({ image, title, children }) => ( -
- {title} -
-

{title}

-
-
{children}
+export default function Policy() { + const ImageAndText = ({ image, title }) => ( +
+ {title} +
+

삼성 전자 한마음프라자

+

경북 구미시 3공단3로 302 (임수동)

+

{title}

+
); -export default function Policy() { return (
-
-

- 삼성전자한마음프라자 -

-

- 경북 구미시 3공단3로 302 (임수동) -

+
diff --git a/front-end/src/components/main/Summary.jsx b/front-end/src/components/main/Summary.jsx index f0878ada..38e848d5 100644 --- a/front-end/src/components/main/Summary.jsx +++ b/front-end/src/components/main/Summary.jsx @@ -1,110 +1,63 @@ import React, { useState, useEffect } from 'react'; import 'tailwindcss/tailwind.css'; import styled, { keyframes } from 'styled-components'; -import Rank from '../../images/main/Summary/Rank.png'; import Hand from '../../images/main/Summary/hand.png'; import Plus from '../../images/main/Summary/Plus.png'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; -// 스크롤 애니메이트 이벤트 1 -const frameInAnimation_text = keyframes` +export default function Summary() { + const navigate = useNavigate() + const [animate_text, setAnimate_text] = useState(false); // 텍스트 애니메이트 상태 관리 + const [animate_que, setAnimate_que] = useState(false); // 최근 추가된 문제 애니메이트 상태 관리 + const [animate_add, setAnimate_add] = useState(false); // 질문 관련 애니메이트 상태 관리 + const [popularQuestions, setPopularQuestions] = useState([]); // 질문 카드 상태 관리 + const [addProblemSolve, setaddProblemSolve] = useState([]) // 최근 추가된 문제 상태 관리 + + // 스크롤 애니메이트 이벤트 - 텍스트 + const frameInAnimation_text = keyframes` 0% {opacity: 0; transform: translateY(100%);} 100%{opacity: 1; transform: translateY(0%);} -`; -const AnimateContainer_text = styled.div` + `; + const AnimateContainer_text = styled.div` &.ease-out { animation: ${frameInAnimation_text} 1s forwards; } -`; - -// 스크롤 애니메이트 이벤트 2 -// const frameInAnimation_rank = keyframes` -// 0% {opacity: 0; transform: translateY(50%);} -// 100%{opacity: 1; transform: translateY(0%);} -// `; -// const AnimateContainer_rank = styled.div` -// &.ease-out { -// animation: ${frameInAnimation_rank} 1.2s forwards; -// } -// `; + `; -// 스크롤 애니메이트 이벤트 3 -const frameInAnimation_que = keyframes` + // 스크롤 애니메이트 이벤트 - 인기 질문 + const frameInAnimation_que = keyframes` 0% {opacity: 0; transform: translateY(50%);} 100%{opacity: 1; transform: translateY(0%);} -`; -const AnimateContainer_que = styled.div` + `; + const AnimateContainer_que = styled.div` &.ease-out { animation: ${frameInAnimation_que} 1.2s forwards; } -`; + `; -// 스크롤 애니메이트 이벤트 4 -const frameInAnimation_add = keyframes` + // 스크롤 애니메이트 이벤트 - 최근 추가된 문제 + const frameInAnimation_add = keyframes` 0% {opacity: 0; transform: translateY(50%);} 100%{opacity: 1; transform: translateY(0%);} -`; -const AnimateContainer_add = styled.div` + `; + const AnimateContainer_add = styled.div` &.ease-out { animation: ${frameInAnimation_add} 1.2s forwards; } -`; - -export default function Summary() { - const navigate = useNavigate() - const [animate_text, setAnimate_text] = useState(false); - // const [animate_rank, setAnimate_rank] = useState(false); - const [animate_que, setAnimate_que] = useState(false); - const [animate_add, setAnimate_add] = useState(false); - const [problemNum,setProblemNum] = useState('') - - useEffect(() => { - axios.get('https://codearena.shop/api/problem?orderBy=date&cate=&word=&pgno=1&spp=6&tag=') - .then((res)=> { - console.log(res); - console.log(res.data.data.problemWithSearch) - - setaddProblemSolve(res.data.data.problemWithSearch) - }).catch((err)=> { - console.log(err); - }) - axios.get("https://codearena.shop/api/board/list?sortType=hit&key=&word=&langType=&pgno=1&spp=5") - .then((res)=> { - console.log(res); - setPopularQuestions(res.data.data.articles) - }).catch((err)=> { - console.log(err); - }) - - - - const handleScroll = () => { - console.log('스크롤 애니메이트 이벤트 발생 확인'); - // 특정 조건을 확인하여 animate 상태 토글 - const shouldAnimate = window.scrollY < 2000 && window.scrollY > 1150; - setAnimate_text(shouldAnimate); - // setAnimate_rank(shouldAnimate); - setAnimate_que(shouldAnimate); - setAnimate_add(shouldAnimate); - }; - // 스크롤 이벤트 리스너 등록 - window.addEventListener('scroll', handleScroll); - // 클린업 함수에서 이벤트 리스너 제거 - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); + `; // 인기 질문 카드 const QuestionCard = ({ question }) => ( {navigate(`/community/${question.articleNo}/detail`) - window.scrollTo({top:0,behavior:'smooth'})}} - > + onClick={() => { + navigate(`/community/${question.articleNo}/detail`) + window.scrollTo({ top:0, behavior:'smooth' }) + }} + >

{question.title}

{question.content}

 @@ -113,17 +66,19 @@ export default function Summary() { // 추가된 문제 카드 const ProblemCard = ({ problem }) => ( {navigate(`/problem/${problem.problemId}/detail`)}} + onClick={()=>{ + navigate(`/problem/${problem.problemId}/detail`) + }} > -

#{problem.problemId}

+

#{problem.problemId}

{problem.problemTitle}

 ); - // 이미지+제목 + // 이미지 + 제목 const ImageAndText = ({ image, title, children }) => ( ); - // 아레나 랭크 연동하여 수정필요 - // const ArenaRank = [ - // { title : '1', description: 'Username1'}, - // { title : '2', description: 'Username2'}, - // { title : '3', description: 'Username3'}, - // { title : '4', description: 'Username4'}, - // { title : '5', description: 'Username5'}, - // ] + useEffect(() => { + // 최근 추가된 문제 조회 + axios.get('https://codearena.shop/api/problem?orderBy=date&cate=&word=&pgno=1&spp=6&tag=') + .then + ((res)=> { + setaddProblemSolve(res.data.data.problemWithSearch) + }).catch + ((err)=> { + console.log(err); + }) - // 질문게시판과 연동하여 수정필요 - const [popularQuestions, setPopularQuestions] = useState([]); - // 문제페이지와 연동하여 수정 필요 - const [addProblemSolve, setaddProblemSolve] = useState([]) + // 질문 리스트 조회 + axios.get("https://codearena.shop/api/board/list?sortType=hit&key=&word=&langType=&pgno=1&spp=5") + .then + ((res)=> { + setPopularQuestions(res.data.data.articles) + }).catch + ((err)=> { + console.log(err); + }) + + // 사용자 스크롤 관련 애니메이트 조절 + const handleScroll = () => { + const shouldAnimate = window.scrollY < 2000 && window.scrollY > 1150; // 특정 조건을 확인하여 animate 상태 토글 + setAnimate_text(shouldAnimate); // 텍스트 관리 + setAnimate_que(shouldAnimate); // 질문 리스트 관리 + setAnimate_add(shouldAnimate); // 추가 문제 관리 + }; + window.addEventListener('scroll', handleScroll); // 스크롤 이벤트 리스너 등록 + return () => { + window.removeEventListener('scroll', handleScroll); // 이벤트 후에 클린업 함수에서 이벤트 리스너 제거 + }; + }, []); return (
- {/* Arena Rank */} - - {/* 구분선 */} -
-
-
- - {/* Popular Question */} + {/* 인기 질문 */}
{popularQuestions.map((question, index) => ( ))}
+ {/* 구분선 */}
- {/* The Last Addtion */} - + {/* 최근 추가된 문제 */} +
{addProblemSolve.map((problem, index) => ( diff --git a/front-end/src/components/navBar/navBar.jsx b/front-end/src/components/navBar/navBar.jsx index 26059678..6479ffbc 100644 --- a/front-end/src/components/navBar/navBar.jsx +++ b/front-end/src/components/navBar/navBar.jsx @@ -3,17 +3,12 @@ import { Link,useNavigate, useLocation } from 'react-router-dom' import { Disclosure, Menu, Transition } from '@headlessui/react' import { BellIcon } from '@heroicons/react/24/outline' import Logo from '../../images/common/logo.png' -import Profile from '../../images/common/profile.png' import { useSelector,useDispatch } from 'react-redux' import { logout } from '../../features/login/authSlice' -import axios from 'axios' import { setAccessToken } from '../../features/login/accessSlice' -import { error, get } from 'jquery' import swal from 'sweetalert' import '../css/dropdown.css' - - const navigation = [ { name: 'Problem', href: '/problem'}, { name: 'Arena', href: '/arena'}, @@ -21,7 +16,6 @@ const navigation = [ { name: 'Login', href: '/login'}, ] - function classNames(...classes) { return classes.filter(Boolean).join(' ') } @@ -34,145 +28,142 @@ export default function NavBar() { const dispatch = useDispatch(); const navigate = useNavigate() - - useEffect(()=> { - console.log(location); - },[location]) const filterNav = isLogin ? navigation.filter(item => item.name != 'Login') : navigation; - + const handleLogout = ()=>{ dispatch(logout()); dispatch(setAccessToken(null)); swal("로그아웃되었습니다", "", "success"); navigate('/') } - + const [showDropdown,setShowDropdown ] = useState(false) + + useEffect(()=> { + console.log(location); + }, [location]) return ( {({ open }) => ( <> -
-
-
- - CodaArena - -
-
-
- {filterNav.map((item) => ( -
- setShowDropdown(item.name ==='Problem' ? true : false)} - onMouseLeave={() => setShowDropdown(false)} - > - {item.name} - - {/* // 드롭다운 메뉴위치 */} - - {item.name === 'Problem' && showDropdown && ( -
setShowDropdown(true)} - onMouseLeave={() => setShowDropdown(false)} - > - {/* Submit */} - Category -
+
+
+
+ + CodaArena + +
+
+
+ {filterNav.map((item) => ( +
+ setShowDropdown(item.name ==='Problem' ? true : false)} + onMouseLeave={() => setShowDropdown(false)} + > + {item.name} + + {/* // 드롭다운 메뉴위치 */} + + {item.name === 'Problem' && showDropdown && ( +
setShowDropdown(true)} + onMouseLeave={() => setShowDropdown(false)} + > + {/* Submit */} + Category
- ))} - - {/* 벨아이콘 알림함 */} - { isLogin && ( - )} - {/* 프로필 드롭다운위치 */} - {isLogin && ( - -
- - - -
- + ))} + + {/* 벨아이콘 알림함 */} + { isLogin && ( + + )} + {/* 프로필 드롭다운 위치 */} + {isLogin && ( + +
+ + + +
+ + + + {({ active }) => ( + + {nickName}님 환영합니다 + + )} + - - {({ active }) => ( - - Sign out - - )} - - - - - )} -
+ + + {({ active }) => ( + + Profile + + )} + + + + + {({ active }) => ( + + Sign out + + )} + + + + + )}
-
+
diff --git a/front-end/src/pages/main/index.jsx b/front-end/src/pages/main/index.jsx index ca7f67b7..3101461f 100644 --- a/front-end/src/pages/main/index.jsx +++ b/front-end/src/pages/main/index.jsx @@ -6,7 +6,6 @@ import Summary from '../../components/main/Summary'; import AboutUs from '../../components/main/AboutUs'; import Policy from '../../components/main/Policy'; - export default function Main() { const fromRefLogoHome = useRef(null); const fromRefFourElement = useRef(null);