Develop/style/#59

package.json

@@ -14,6 +14,7 @@
     "@toast-ui/react-editor": "^3.2.3",
     "axios": "^1.7.2",
     "crypto-js": "^4.2.0",
+    "date-fns": "^3.6.0",
     "http-proxy-middleware": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -38,8 +39,7 @@
     "rules": {
       "react-hooks/exhaustive-deps": "off",
       "no-unused-vars": "off",
-      "eqeqeq":"off"
-
+      "eqeqeq": "off"
     }
   },
   "browserslist": {

src/App.css

@@ -42,4 +42,4 @@
   src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Moyamoya-Regular-v1.0.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
-}
+}

src/App.js

@@ -4,18 +4,15 @@ import Home from './pages/Home';
 import Member from './pages/Member';
 import Signin from './pages/auth/Signin';
 import Signup from './pages/auth/Signup';
-import ChoiceInterviewMode from './pages/interview/ChoiceInterviewMode';
 import InterviewChoiceStack from './pages/interview/InterviewChoiceStack';
 import InterviewMain from './pages/interview/InterviewMain';
 import InterviewResult from './pages/interview/InterviewResult';
 import PracticeChoiceStack from './pages/interview/PracticeChoiceStack';
 import PracticeInterview from './pages/interview/PracticeInterview';
-import PracticeInterviewMain from './pages/interview/PracticeInterviewMain';
 import CommunityMain from './pages/community/CommunityMain';
 import CommunityInfo from './pages/community/CommunityInfo';
 import CommunityQNA from './pages/community/CommunityQNA';
 import UpdatePost from './pages/posts/UpdatePost';
-import WritePost from './pages/posts/WritePost';
 import Store from './pages/Store';
 import Vote from './pages/Vote';
 import Interview from './pages/interview/Interview';
@@ -35,7 +32,6 @@ function App() {
           <Route path="/auth/sign-in" element={<Signin />} />
           <Route path="/auth/sign-up" element={<Signup />} />
 
-          <Route path="/interview/choice-mode" element={<ChoiceInterviewMode />} />
           <Route path="/interview" element={<Interview />} />
           <Route path="/interview/choice-stack" element={<InterviewChoiceStack />} />
           <Route path="/interview/main" element={<InterviewMain />} />
@@ -44,19 +40,18 @@ function App() {
 
           <Route path="/interview/practice-choice-stack" element={<PracticeChoiceStack />} />
           <Route path="/interview/practice" element={<PracticeInterview />} />
-          <Route path="/interview/practice-main" element={<PracticeInterviewMain />} />
 
-          <Route path="/community/main" element={<CommunityMain/>} />
+          <Route path="/community/main" element={<CommunityMain />} />
           <Route path="/community/info" element={<CommunityInfo />} />
-          <Route path="/community/qna" element={<CommunityQNA/>} />
+          <Route path="/community/qna" element={<CommunityQNA />} />
 
-          <Route path="/post/:id" element={<PostDetail/>} />
-          <Route path="/post/update" element={<UpdatePost/>}/>
-          <Route path="/post/qna/write" element={<PostQNA/>}/>
-          <Route path="/post/info/write" element={<PostInfo/>}/>
-          
-          <Route path="/store" element={<Store/>} />
-          <Route path="/vote" element={<Vote/>} />
+          <Route path="/post/:id" element={<PostDetail />} />
+          <Route path="/post/update" element={<UpdatePost />} />
+          <Route path="/post/qna/write" element={<PostQNA />} />
+          <Route path="/post/info/write" element={<PostInfo />} />
+
+          <Route path="/store" element={<Store />} />
+          <Route path="/vote" element={<Vote />} />
         </Routes>
       </Router>
     </div>

src/components/Block.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 
 const Container = styled.div`
-  height: 10vh;
+  height: 5vh;
 `;
 
 const Block = () => {

src/components/CustomButton.js

@@ -2,25 +2,39 @@ import React from 'react';
 import styled from 'styled-components';
 import palette from '../styles/pallete';
 
-const MyBtn = styled.button`
-  background-color: ${(props) => props.color || palette.dark }; /* 기본 색상 설정 */
+
+
+const MyBtn = styled.button.attrs(props => ({
+  type: props.type || 'button', // 기본 type을 text로 설정
+}))`
+  background-color: ${(props) => props.color || palette.dark}; /* 기본 색상 설정 */
   border: none;
-  width: ${(props) => props.width || '10vw' };
+  width: ${(props) => props.width || 'auto'};
+  padding:0 10px;
   height: 5vh;
-  border-radius: 40px;
+  border-radius: 10px;
   font-size: 1em;
-  font-weight: bold;
   color: white;
   cursor:pointer;
-  padding: 10px;
+  text-align:center;
+  margin:10px 0;
+
+  ${(props) => props.isNotHover ?
+    null
+    :
+    `&:hover{
+      background-color:${palette.purple}
+    }`} 
 `;
 
 
-const CustomButton = ({ color, children, onClick, width }) => {
+const CustomButton = ({ color, children, onClick, width, myRef, isNotHover, type , disabled}) => {
   return (
-    <MyBtn color={color} onClick={onClick} width={width}>
+    <MyBtn ref={myRef} color={color} onClick={onClick} width={width} disabled={disabled} isNotHover={isNotHover} type={type} >
       {children}
     </MyBtn>
   );
 };
 export default CustomButton;
+
+

src/components/CustomInputField.js

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import palette from '../styles/pallete';
 
-const Container = styled.div``
 
 
 const InputField = styled.input`

src/components/CustomLi.js

@@ -2,6 +2,8 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { baseAPI } from "../config";
+import { ko } from "date-fns/locale";
+import { differenceInDays, formatDistanceToNow, parseISO } from "date-fns";
 
 const Container = styled.li`
   display: flex;
@@ -12,25 +14,72 @@ const Container = styled.li`
   cursor: pointer;
 `;
 
-const CustomLi = ({ data }) => {
+const MultiLineEllipsisText = styled.div`
+  width: 80%;
+  font-size: 1em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const CustomLi = ({ data, isMine = false }) => {
   const navigate = useNavigate();
 
+  const formatRelativeTime = (dateString) => {
+    const date = parseISO(dateString);
+    const now = new Date();
+    const daysDifference = differenceInDays(now, date);
+
+    if (daysDifference < 1) {
+      return formatDistanceToNow(date, { addSuffix: true, locale: ko });
+    }
+
+    return new Date(dateString).toLocaleString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  };
+
   const handleClick = async () => {
     try {
       console.log(data.postId);
-      const response = await baseAPI.get(`api/posts/${data.postId}`);
+      await baseAPI.get(`api/posts/${data.postId}`);
       navigate(`/post/${data.postId}`);
     } catch (error) {
       alert("삭제된 게시글입니다.");
-      window.location.reload(); //새로고침
-
+      window.location.reload(); // 새로고침
     }
   };
-  
+
   return (
     <Container onClick={handleClick}>
-      <div style={{ fontSize: 16 }}>{data.title}</div>
-      <div style={{ fontSize: 10 }}>{data.writerName}</div>
+      {isMine && data.content ? (
+        <>
+          <MultiLineEllipsisText>{data.content}</MultiLineEllipsisText>
+          <div style={{ fontSize: 10, width: "20%", textAlign: "right" }}>
+            {formatRelativeTime(data.createTime)}
+          </div>
+        </>
+      ) : isMine && data.title ? (
+        <>
+          <MultiLineEllipsisText>{data.title}</MultiLineEllipsisText>
+          <div style={{ fontSize: 10, width: "20%", textAlign: "right" }}>
+            {formatRelativeTime(data.createTime)}
+          </div>
+        </>
+      ) : (
+        <>
+          <MultiLineEllipsisText>{data.title}</MultiLineEllipsisText>
+          <div style={{ fontSize: 10, width: "20%", textAlign: "right" }}>
+            {data.writerName}
+          </div>
+        </>
+      )}
     </Container>
   );
 };

src/components/GlassCard.js

@@ -2,7 +2,8 @@ import styled from "styled-components";
 
 
 const GlassContainer = styled.div`
-  width: ${props => props.width ? props.width : '100%'};
+  width: ${props => props.width ? props.width : 'auto'};
+  height: ${props => props.height ? props.height : 'auto'};
   display: flex;
   flex-direction: column;
   background: rgba(255, 255, 255, 0.1);
@@ -15,10 +16,10 @@ const GlassContainer = styled.div`
   border: 1px solid rgba(255, 255, 255, 0.3);
 `;
 
-const GlassCard = ({ children , width, margin}) => {
+const GlassCard = ({ children, width, height, margin, onClick }) => {
 
-    return(
-        <GlassContainer width={width} margin={margin}>
+    return (
+        <GlassContainer width={width} height={height} margin={margin} onClick={onClick}>
             {children}
         </GlassContainer>
     )

src/components/GlassInput.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const Input = styled.input.attrs(props => ({
+  type: props.type || 'text', // 기본 type을 text로 설정
+}))`
+  margin: 10px 0;
+  padding: 15px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  color: white;
+  width: ${props => props.width ? props.width : 'auto'};
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: #ccc;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const GlassInput = ({ type, width, children, placeholder, value, onChange, required }) => {
+  return (
+    <Input
+      type={type} // 추가: type을 전달
+      onChange={onChange}
+      placeholder={placeholder}
+      value={value}
+      required={required}
+      width={width}>
+      {children}
+    </Input>
+  );
+}
+
+export default GlassInput;

src/components/GlassTitle.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+
+const TopContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+  padding: 10px 20px;
+`;
+
+
+const GlassTitle  = ({ children }) => {
+
+    return(
+        <TopContainer>
+            {children}
+        </TopContainer>
+    )
+
+}
+
+export default GlassTitle;