Feature/main page 메인 페이지 수정

package.json

@@ -17,6 +17,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "hangul-js": "^0.2.6",
+        "primereact": "^10.8.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.26.1",

src/Router.tsx

@@ -6,7 +6,7 @@ import HomePage from "./pages/HomePage";
 import LoadingPage from './pages/ResultLoading';
 import ResultShare from "./pages/ResultShare";
 import ResultPage from "./pages/ResultPage";
-
+import AnalyticsPage from "./pages/AnalyticsPage";
 
 export const Router = () => {
     return (
@@ -16,6 +16,7 @@ export const Router = () => {
                 <Route path="/loading" element={<LoadingPage />} /> 
                 <Route path="/result" element={<ResultPage />}></Route>
                 <Route path="/share" element={<ResultShare />}></Route>
+                <Route path="/analytics" element={<AnalyticsPage />}></Route>
             </Route>
         </Routes>
     );

src/components/display/Footer.style.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+export const FooterWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin: 20px;
+`;

src/components/display/Footer.tsx

@@ -0,0 +1,16 @@
+import { Text } from "@/components/typography/Text";
+
+import likelion from "@/assets/images/likelion.svg";
+import mir from "@/assets/images/mir.svg";
+
+import { FooterWrapper } from "./Footer.style";
+
+export default function Footer() {
+    return (
+        <FooterWrapper>
+            <img src={likelion} alt="멋쟁이사자처럼" width="20px" height="20px"></img>
+            <Text size="xs">X</Text>
+            <img src={mir} alt="총동아리연합회 미르" width="20px" height="20px"></img>
+        </FooterWrapper>
+    );
+}

src/components/form/DropDown.style.ts

@@ -0,0 +1,58 @@
+import { DropDownProps } from "./DropDown";
+import styled from "@emotion/styled";
+import { Dropdown } from "primereact/dropdown";
+
+interface LabelProps {
+    color: string;
+}
+
+const getBackgroundColor = (color: string) => {
+    switch (color) {
+        case "primary":
+            return "#ECECEC";
+        case "secondary":
+            return "#fff";
+        default:
+            return color;
+    }
+};
+
+export const DropDownWrapper = styled.div<DropDownProps>`
+    display: flex;
+    border-radius: 12px;
+    justify-content: center;
+
+    background-color: ${(props) => getBackgroundColor(props.color)};
+
+    height: ${(props) => props.height};
+    width: ${(props) => props.width};
+`;
+
+export const DropDownContainer = styled(Dropdown)`
+    width: 100%;
+    font-size: 15px;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+`;
+
+export const LabelContainer = styled.span<LabelProps>`
+    display: inline-block;
+    width: 100%;
+    color: #333;
+    padding: 10px;
+
+    background-color: ${(props) => getBackgroundColor(props.color)};
+
+    &:hover {
+        color: ${(props) => {
+            switch (props.color) {
+                case "primary":
+                case "secondary":
+                    return "#37cdcd";
+                default:
+                    return props.color;
+            }
+        }};
+    }
+`;

src/components/form/DropDown.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { DropDownWrapper, DropDownContainer, LabelContainer } from "./DropDown.style";
+
+export interface DropDownProps {
+    color: string;
+    width: string;
+    height: string;
+    selectedMajor?: string;
+    setSelectedMajor?: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function DropDown({ color, width, height, selectedMajor, setSelectedMajor }: DropDownProps) {
+    const majors = [
+        { label: "📖 인문대학", value: "인문대학" },
+        { label: "📋 사회과학대학", value: "사회과학대학" },
+        { label: "🔬 자연과학대학", value: "자연과학대학" },
+        { label: "📊 경상대학", value: "경상대학" },
+        { label: "🛠️ 공과대학", value: "공과대학" },
+        { label: "💻 IT대학", value: "IT대학" },
+        { label: "🥕 농업생명과학대학", value: "농업생명과학대학" },
+        { label: "🎨 예술대학", value: "예술대학" },
+        { label: "📚 사범대학", value: "사범대학" },
+        { label: "🥼 의과대학", value: "의과대학" },
+        { label: "🦷 치과대학", value: "치과대학" },
+        { label: "🐈 수의과대학", value: "수의과대학" },
+        { label: "🧼 생활과학대학", value: "생활과학대학" },
+        { label: "💉 간호대학", value: "간호대학" },
+        { label: "💊 약학대학", value: "약학대학" },
+        { label: "🚙 첨단기술융합대학", value: "첨단기술융합대학" },
+        { label: "🪵 생태환경대학", value: "생태환경대학" },
+        { label: "📡 과학기술대학", value: "과학기술대학" },
+        { label: "🖋️ 행정학부", value: "행정학부" },
+        { label: "💡 자율전공부", value: "자율전공부" },
+    ];
+
+    return (
+        <DropDownWrapper color={color} width={width} height={height}>
+            <DropDownContainer
+                value={selectedMajor}
+                onChange={(e) => setSelectedMajor && setSelectedMajor(e.value)}
+                options={majors}
+                optionLabel="label"
+                placeholder="단과 대학을 선택하세용"
+                itemTemplate={(option) => <LabelContainer color={color}>{option.label}</LabelContainer>}
+            />
+        </DropDownWrapper>
+    );
+}

src/components/form/Input.style.ts

@@ -2,12 +2,14 @@ import { InputProps } from "./Input";
 import styled from "@emotion/styled";
 
 export const InputElement = styled.input<InputProps>`
+    font-size: 15px;
+    font-family: "NanumSquareNeo";
     width: ${(props) => props.width};
     height: ${(props) => props.height};
 
     border-radius: 12px;
     border: none;
-    padding:5px;
+    padding: 10px;
 
     background-color: ${(props) => {
         switch (props.variants) {

src/components/navigation/SideBar.style.ts

@@ -1,32 +1,38 @@
 import styled from "@emotion/styled";
 
 export const SideBarWrapper = styled.div`
-    z-index: 5;  
-    padding: 20px;  
+    z-index: 5;
+    padding: 20px;
     border-radius: 0 0 15px 15px;
     height: auto;
     max-height: 100%;
     overflow-y: auto;
-    width:100%;
+    width: 100%;
     top: -80%;
-    backdrop-filter: blur(5px);
-    position: fixed;  
+    backdrop-filter: blur(10px);
+    position: fixed;
     align-items: flex-end;
-    transition: 0.5s ease; 
+    transition: 0.5s ease;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    &.open {    
-        top: 0;    
-        transition: 0.5s ease;  
+    &.open {
+        top: 0;
+        transition: 0.5s ease;
     }
     img {
         display: block;
-        margin-left: auto; /* Align the image to the right */
-        cursor: pointer; /* Add a pointer cursor for better UX */
+        margin-left: auto;
+        cursor: pointer;
     }
-`
+`;
 
-export const Menu = styled.li`  
+export const Menu = styled.li`
     margin: 20px 8px;
     list-style-type: none;
     cursor: pointer;
-`;
+    &:hover {
+        color: #37cdcd;
+    }
+    &.active {
+        color: #37cdcd;
+    }
+`;

src/components/navigation/SideBar.tsx

@@ -1,45 +1,46 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
-import {SideBarWrapper, Menu} from "./SideBar.style"
 import closeIcon from "@/assets/icons/close.svg";
 
+import { SideBarWrapper, Menu } from "./SideBar.style";
+
 interface SideBarProps {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const SideBar = ({isOpen, setIsOpen} : SideBarProps) => {
-    const outside = React.useRef<any>();
-
-    React.useEffect(() => {    
-        document.addEventListener('mousedown', handlerOutsie);    
-        return () => {      
-            document.removeEventListener('mousedown', handlerOutsie);    
-        };  
-    });   
-
-    const handlerOutsie = (e: any) => {    
-        if (!outside.current.contains(e.target)) {      
-            handleSideBar();    
-        }  
-    };   
-
-    const handleSideBar = () => {    
-        setIsOpen(false);  
+export const SideBar = ({ isOpen, setIsOpen }: SideBarProps) => {
+    const outside = React.useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+
+    React.useEffect(() => {
+        document.addEventListener("mousedown", handlerOutside);
+        return () => {
+            document.removeEventListener("mousedown", handlerOutside);
+        };
+    });
+
+    const handlerOutside = (e: MouseEvent) => {
+        if (outside.current && !outside.current.contains(e.target as Node)) {
+            setIsOpen(false);
+        }
     };
 
-  return (
-
-      <SideBarWrapper id="sidebar" ref={outside} className={isOpen ? "open" : ""}>
-        <img src = {closeIcon} onClick = {handleSideBar}/>
-
-        <ul>
-          <Menu>테스트</Menu>
-          <Menu>통계</Menu>
-          <Menu>만든이들</Menu>
-        </ul>
-      </SideBarWrapper>
-
-)
-}
+    const handleNavigation = (path: string) => {
+        navigate(path);
+        setIsOpen(false);
+    };
+
+    return (
+        <SideBarWrapper id="sidebar" ref={outside} className={isOpen ? "open" : ""}>
+            <img src={closeIcon} onClick={() => setIsOpen(false)} />
 
+            <ul>
+                <Menu onClick={() => handleNavigation("/")}>테스트</Menu>
+                <Menu onClick={() => handleNavigation("/analytics")}>통계</Menu>
+                <Menu onClick={() => handleNavigation("/")}>만든이들</Menu>
+            </ul>
+        </SideBarWrapper>
+    );
+};

src/pages/AnalyticsPage.style.ts

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+
+export const TitleContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 30px;
+`;
+
+export const TitleTop = styled.div`
+    display: flex;
+    width: 60%;
+    align-items: center;
+    justify-content: flex-start;
+`;
+
+export const Main = styled.div``;
+
+export const Content = styled.div`
+    margin: 20px;
+`;
+
+export const MiddleSection = styled.div`
+    flex-grow: 0.8;
+`;