Merge pull request #63 from Jr-YongFill/develop/style/#59

Develop/style/#59
Jr-YongFill · Aug 2, 2024 · 068ceae · 068ceae
2 parents c83df2d + 1aa9783
commit 068ceae
Show file tree

Hide file tree

Showing 23 changed files with 995 additions and 730 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanskr.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />    
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,10 @@
     transform: rotate(360deg);
   }
 }
+
+@font-face {
+  font-family: 'Cafe24Moyamoya-Regular-v1.0';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Moyamoya-Regular-v1.0.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/assets/background.png b/src/assets/background.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/planet.png b/src/assets/planet.png
diff --git a/src/components/Block.js b/src/components/Block.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+
+const Container = styled.div`
+  height: 10vh;
+`;
+
+const Block = () => {
+
+  return (
+
+    <Container>
+    </Container>
+  );
+};
+
+export default Block;
diff --git a/src/components/CustomButton.js b/src/components/CustomButton.js
@@ -1,23 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
+import palette from '../styles/pallete';
 
 const MyBtn = styled.button`
-  background-color: ${(props) => props.color || 'blue'}; /* 기본 색상 설정 */
+  background-color: ${(props) => props.color || palette.dark }; /* 기본 색상 설정 */
   border: none;
-  width: 150px;
-  height: 60px;
-  border-radius: 20px;
-  font-size: 18px;
+  width: ${(props) => props.width || '10vw' };
+  height: 5vh;
+  border-radius: 40px;
+  font-size: 1em;
   font-weight: bold;
   color: white;
-  margin: 30px;
   cursor:pointer;
+  padding: 10px;
 `;
 
 
-const CustomButton = ({ color, children, onClick }) => {
+const CustomButton = ({ color, children, onClick, width }) => {
   return (
-    <MyBtn color={color} onClick={onClick}>
+    <MyBtn color={color} onClick={onClick} width={width}>
       {children}
     </MyBtn>
   );

diff --git a/src/components/CustomInputField.js b/src/components/CustomInputField.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import palette from '../styles/pallete';
+
+const Container = styled.div``
+
+
+const InputField = styled.input`
+  background-color: ${(props) => props.color || palette.dark }; /* 기본 색상 설정 */
+  border: none;
+  width: ${(props) => props.width || '10vw' };
+  height: 5vh;
+  border-radius: 40px;
+  font-size: 1em;
+  font-weight: bold;
+  color: white;
+  cursor:pointer;
+  padding: 10px;
+`;
+
+
+const CustomInput = ({ type, children, onChange, placeholder }) => {
+  return (
+    <InputField type={type} onChange={onChange} placeholder={placeholder}>
+      {children}
+    </InputField>
+  );
+};
+export default CustomInput;
diff --git a/src/components/CustomLi.js b/src/components/CustomLi.js
@@ -1,29 +1,36 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { baseAPI } from "../config";
 
 const Container = styled.li`
   display: flex;
   justify-content: space-between;
   margin: 5px 0;
   list-style: none;
-  padding:3px 0px;
-  cursor:pointer;
-`
+  padding: 3px 0px;
+  cursor: pointer;
+`;
 
 const CustomLi = ({ data }) => {
-
   const navigate = useNavigate();
 
-  const handleClick = () => {
-    navigate(`/post/${data.postId}`);
-  };
+  const handleClick = async () => {
+    try {
+      console.log(data.postId);
+      const response = await baseAPI.get(`api/posts/${data.postId}`);
+      navigate(`/post/${data.postId}`);
+    } catch (error) {
+      alert("삭제된 게시글입니다.");
+      window.location.reload(); //새로고침
 
+    }
+  };
+
   return (
-
     <Container onClick={handleClick}>
-      <div style={{fontSize:16}}>{data.title}</div>
-      <div style={{fontSize:10}}>{data.writerName}</div>
+      <div style={{ fontSize: 16 }}>{data.title}</div>
+      <div style={{ fontSize: 10 }}>{data.writerName}</div>
     </Container>
   );
 };

diff --git a/src/components/GlassCard.js b/src/components/GlassCard.js
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+
+const GlassContainer = styled.div`
+  width: ${props => props.width ? props.width : '100%'};
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin:  ${props => props.margin ? props.margin : '10px 0;'};
+  padding: 20px;
+  text-align: left;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+`;
+
+const GlassCard = ({ children , width, margin}) => {
+
+    return(
+        <GlassContainer width={width} margin={margin}>
+            {children}
+        </GlassContainer>
+    )
+
+}
+
+export default GlassCard;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,32 +1,41 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import palette from '../styles/pallete';
-import { localStorageGetValue, localStorageSetValue } from '../utils/CryptoUtils';
+import { localStorageGetValue } from '../utils/CryptoUtils';
+
+const Logo = styled.div`
+  font-size: 1.5rem;
+  color: white;
+`
 
 const HeaderContainer = styled.header`
+  position: absolute;
   top: 0;
-  height: 80px;
+  height: 10vh;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 30px;
-  z-index: 9;
-  background: ${palette.skyblue};
+  width:90vw;
+  z-index: 999;
+  background: transparent;
 `;
-
 const StyledLink = styled(Link)`
   text-decoration: none;
-  color: var(--color);
-  font-size: 18px;
+  color: ${props => props.active ? 'white' : palette.gray};
+  font-size: 1rem;
   cursor: pointer;
   margin-left: 15px;
+
+  &:hover {
+    color: white;
+  }
 `;
 
 const HeaderGnb = styled.div`
   display: flex;
-  justify-content: flex-start;
-  gap: 100px;
+  justify-content: space-between;
 `;
 
 const MainLink = styled(StyledLink)`
@@ -36,27 +45,32 @@ const MainLink = styled(StyledLink)`
 
 const GnbMenu = styled.div`
   display: flex;
-  gap: 30px;
+  gap: 3vw;
   align-items: center;
+  margin-left:5vw;
 `;
 
 const HeaderSign = styled.div`
-  display: flex;
-  gap: 30px;
+ display: flex;
+  gap: 3vw;
+  align-items: center;
 `;
 
 const LogoutButton = styled.span`
-  color: var(--color);
-  font-size: 18px;
+  color: ${palette.gray};
   cursor: pointer;
   margin-left: 10px;
+
+  &:hover {
+    color: white;
+  }
 `;
 
 const Header = ({ color }) => {
-  const [memberId, setMemberId] = useState('')
   const [nickName, setNickName] = useState('');
   const [role, setRole] = useState('');
   const navigate = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     const nickName = localStorageGetValue('member-nickName');
@@ -70,55 +84,69 @@ const Header = ({ color }) => {
     window.location.href = '/';
   };
 
-  const style = {
-    background: color,
-    color: 'black'
-  };
-
   const LinkClick = (event, path) => {
     if (!role) {
       event.preventDefault();
-      alert('로그인이 필요한 페이지 입니다.')
+      alert('로그인이 필요한 페이지 입니다.');
       navigate('/auth/sign-in');
     } else {
       navigate(path);
     }
   };
 
   return (
-    <HeaderContainer style={style}>
-      <HeaderGnb style={style}>
+    <HeaderContainer style={{ background: color }}>
+      <HeaderGnb>
         <MainLink to="/">
-          <span>용가리</span>
+          <Logo>모시모시</Logo>
         </MainLink>
-        <GnbMenu>
-          <StyledLink to="/interview/main" onClick={(event) => LinkClick(event, '/interview/main')}>
-            <span>면접보러가기</span>
-          </StyledLink>
-          <StyledLink to="/store" onClick={(event) => LinkClick(event, '/store')}>
-            <span>상점</span>
-          </StyledLink>
-          <StyledLink to="/community/main">
-            <span>커뮤니티</span>
-          </StyledLink>
-        </GnbMenu>
+
       </HeaderGnb>
-      <HeaderSign style={style}>
-        {nickName ? (
-          <div>
-            <span>{nickName}</span>
-            <StyledLink to="/member" onClick={(event) => LinkClick(event, '/member')}>마이페이지</StyledLink>
-            <LogoutButton onClick={logoutHandle}>로그아웃</LogoutButton>
-          </div>
-        ) : (
-          <div>
-            <StyledLink to="/auth/sign-in">로그인</StyledLink>
-            <StyledLink to="/auth/sign-up">회원가입</StyledLink>
-          </div>
-        )}
-      </HeaderSign>
+          <GnbMenu>
+            <StyledLink
+              to="/interview/main"
+              onClick={(event) => LinkClick(event, '/interview/main')}
+              active={location.pathname === '/interview/main'}
+            >
+              <span>면접보러가기</span>
+            </StyledLink>
+            <StyledLink
+              to="/store"
+              onClick={(event) => LinkClick(event, '/store')}
+              active={location.pathname === '/store'}
+            >
+              <span>상점</span>
+            </StyledLink>
+            <StyledLink
+              to="/community/main"
+              active={location.pathname === '/community/main' || location.pathname === '/post'}
+            >
+              <span>커뮤니티</span>
+            </StyledLink>
+          </GnbMenu>
+          <HeaderSign>
+          {nickName ? (
+            <div>
+              <span>{nickName}</span>
+              <StyledLink
+                to="/member"
+                onClick={(event) => LinkClick(event, '/member')}
+                active={location.pathname === '/member'}
+              >
+                마이페이지
+              </StyledLink>
+              <LogoutButton onClick={logoutHandle}>로그아웃</LogoutButton>
+            </div>
+          ) : (
+            <div>
+              <StyledLink to="/auth/sign-in">로그인</StyledLink>
+              <StyledLink to="/auth/sign-up">회원가입</StyledLink>
+            </div>
+          )}
+          </HeaderSign>
+
     </HeaderContainer>
   );
 };
 
-export default Header;
+export default Header;