Merge pull request #15 from a-romantic-cat/feature/4

낭만 우편함: 편지쓰기, 답장하기

front-end/package.json

@@ -8,6 +8,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.5",
+    "date-fns-tz": "^2.0.0",
     "date-fns": "^3.3.1",
     "moment": "^2.30.1",
     "react": "^18.2.0",

front-end/src/App.js

@@ -18,6 +18,11 @@ import OpenLetter1 from './components/MyLetterbox/OpenLetter1';
 import CreateAccount from './components/Login/CreateAccount';
 import Terms from './components/Login/Terms';
 import MakeLetterbox from './components/Login/MakeLetterbox';
+import WritingLetter  from './components/RomanticLetterbox/WritingLetter/WritingLetter';
+import CompletedLetterWriting from './components/RomanticLetterbox/WritingLetter/CompletedLetterWriting';
+import CompletedLetterReplying from './components/RomanticLetterbox/ReplyingLetter/CompletedLetterReplying';
+import ReplyingLetterMain from './components/RomanticLetterbox/ReplyingLetter/ReplyingLetterMain';
+import ReplyingLetter from './components/RomanticLetterbox/ReplyingLetter/ReplyingLetter';
 import BoxSetting1 from './components/Login/BoxSetting1';
 import BoxSetting2 from './components/Login/BoxSetting2';
 import BoxSetting3 from './components/Login/BoxSetting3';
@@ -40,6 +45,11 @@ function App() {
           <Route path="/MyLetterbox" element={<MyLetterbox />} />
           <Route path="/AddressBook" element={<AddressBook />} />
           <Route path="/RomanticLetterbox" element={<RomanticLetterbox />} />
+          <Route path="/WritingLetter" element={<WritingLetter />} />
+          <Route path="/CompletedLetterWriting" element={<CompletedLetterWriting />} />
+          <Route path="/CompletedLetterReplying" element={<CompletedLetterReplying />} />
+          <Route path="/ReplyingLetterMain" element={<ReplyingLetterMain />} />
+          <Route path="/ReplyingLetter" element={<ReplyingLetter />} />
           <Route path="/Store" element={<Store />} />
           <Route path="/MyPage" element={<MyPage />} />
           <Route path="/Check1" element={<Check1 />} />

front-end/src/components/AddressBook/Address/AddressList.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styled from 'styled-components';
 import { GiCircle } from 'react-icons/gi';
-import { CiStar } from 'react-icons/ci';
+import ShiningImage from '../../../assets/img/SS.svg';
+import UnshiningImage from '../../../assets/img/S.svg';
+
 const ItemContainer = styled.div`
   display: flex;
 `;
@@ -43,31 +45,32 @@ const CircleImg = styled(GiCircle)`
   color: #081A2F;
   margin-right: 12.5px;
 `;
-const StarImg = styled(CiStar)`
+const StarImage = styled.img`
   position: absolute;
+  width: 16.34px;
+  height: 16.34px;
   left: 5px;
   cursor: pointer;
-  color: #000;
-  // color: ${({ isStarred }) => (isStarred ? '#FFD700' : '#000')};
-  transition: color 0.3s ease; /* Optional: Add a smooth transition effect */
 `;
-
 const AddressList = ({ postInfo }) => {
   // 즐겨찾기?인데 추후 서버랑 연동되고 Boolean값을 넣어서 작동하는 것을 봐야 주소록에서 눌렀을 때, 친한친구 데이터로 빠지는 걸 볼 수 있을 것 같음
-  // const [isStarred, setIsStarred] = useState(false);
+  const [isStarred, setIsStarred] = useState(false);
 
-  // const handleStarClick = () => {
-  //   setIsStarred((prevIsStarred) => !prevIsStarred);
-  // };
+  const handleStarClick = () => {
+    setIsStarred((prevIsStarred) => !prevIsStarred);
+  };
 
   return (
 
     <div>
       <ItemContainer>
         <Item>
           <CircleImg />
-          {/* isStarred={isStarred} onClick={handleStarClick}  */}
-          <StarImg />
+          {isStarred ? (
+            <StarImage src={ShiningImage} alt="빛나는 별" onClick={handleStarClick} />
+          ) : (
+            <StarImage src={UnshiningImage} alt="별" onClick={handleStarClick} />
+          )}
           <Name>
             {postInfo.NickName}
           </Name>

front-end/src/components/AddressBook/Friends/FriendsList.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styled from 'styled-components';
 import { GiCircle } from 'react-icons/gi';
-import { CiStar } from 'react-icons/ci';
+import ShiningImage from '../../../assets/img/SS.svg';
+import UnshiningImage from '../../../assets/img/S.svg';
 
 const ItemContainer = styled.div`
   display: flex;
@@ -41,20 +42,31 @@ const CircleImg = styled(GiCircle)`
   margin-right: 12.5px;
 `;
 
-const StarImg = styled(CiStar)`
+const StarImage = styled.img`
   position: absolute;
+  width: 16.34px;
+  height: 16.34px;
   left: 5px;
   cursor: pointer;
 `;
-
 const FriendsList = ({ postInfo }) => {
+  const [isStarred, setIsStarred] = useState(false);
+
+  const handleStarClick = () => {
+    setIsStarred((prevIsStarred) => !prevIsStarred);
+
+  };
   return (
 
     <div>
       <ItemContainer>
         <Item>
           <CircleImg />
-          <StarImg />
+          {isStarred ? (
+            <StarImage src={UnshiningImage} alt="빛나는 별" onClick={handleStarClick} />
+          ) : (
+            <StarImage src={ShiningImage} alt="별" onClick={handleStarClick} />
+          )}
           <Name>
             {postInfo.NickName}
           </Name>

front-end/src/components/Header/Header.jsx

@@ -9,11 +9,14 @@ import '../../index.css';
 const Container = styled.div`
   width: 1486px;
   height: 100px;
-  background: '#FFFEF8';
+  background : #FFFEF8;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   padding: 0 217px;
+  // 낭만 우편함 배치때문에 추가한 코드
+  position: relative;
+  z-index: 3;
 `;
 
 const InnerContainer = styled.div`