Merge pull request #12 from HaruDamda/feature/#8-프레임-제작-기능-구현

#11 chore: Github Actions

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Auto Deploy after push
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@master
+
+      - name: Cache node modules # node modules 캐싱
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-master-build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+        env:
+          CI: ""
+
+      - name: Deploy
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        run: |
+          aws s3 sync --region ap-northeast-2 ./dist s3://picpic-bucket

src/component/AllFrameCpn/FrameList.jsx

@@ -3,55 +3,68 @@ import styles from "./FrameList.module.css";
 import axios from "axios";
 import { Link } from "react-router-dom";
 // import { getAllFrames } from "../../apis/getFrame";
-import { useAtom } from 'jotai';
-import { accessTokenAtom } from '../../store/jotaiAtoms';
+import { useAtom } from "jotai";
+import { accessTokenAtom } from "../../store/jotaiAtoms";
 
 const FrameList = () => {
   const [frames, setFrames] = useState([]);
   const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+
   useEffect(() => {
     // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
     if (accessToken) {
-      console.log('Framelist ACT:', accessToken); // accessToken jotai에서 잘 불러오는지 확인
+      console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인
       // axios 요청 설정
       const config = {
         headers: {
           Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
         },
       };
-       // API 요청 보내기
-      axios.get('http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/frameList', config)
+      // API 요청 보내기
+      axios
+        .get(
+          "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/list",
+          config
+        )
         .then((res) => {
           console.log(res.data);
           // 성공적으로 데이터를 받아온 경우
           setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
         })
         .catch((err) => {
           // 오류 처리
-          console.error('API 요청 중 오류 발생:', err);
+          console.error("API 요청 중 오류 발생:", err);
         });
-      }
-    }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
+    }
+  }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
 
   return (
     <div className={styles.FrameList}>
       <Link to="/makeframe">
         <button className={styles.newFrame}>새 프레임 만들기</button>
       </Link>
       <div className={styles.FrameScroll}>
-        <ul className={styles.FrameUl}>
-          {frames.map((frame, index) => (
-            <li key={frame.id} className={styles.FrameItem}>
-              <div>
-                <img src={frame} alt="frame" className={styles.FrameImage} />
-              </div>
-              <div>
-                <p>프레임 ID: {frame.id}</p>
-                <p>프레임 제목: {frame.title}</p>
-              </div>
-            </li>
-          ))}
-        </ul>
+        {frames.length === null ? ( // frames 배열이 비어 있는 경우
+          <div className={styles.InfoMsg}>
+            <h3>새 프레임을 추가해주세요</h3>
+          </div>
+        ) : (
+          // frames 배열에 프레임이 있는 경우
+          <ul className={styles.FrameUl}>
+            {frames.map((frame, index) => (
+              <li key={frame.id} className={styles.FrameItem}>
+                <button>
+                  <img
+                    key={index}
+                    src={frame}
+                    alt="frame"
+                    className={styles.FrameImage}
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     </div>
   );

src/component/AllFrameCpn/FrameList.module.css

@@ -1,3 +1,9 @@
+ul {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+}
+
 .FrameList {
   width: 390px;
   height: 689px;
@@ -19,3 +25,39 @@
   border-radius: 10px;
   border-color: #009eff;
 }
+
+.FrameScroll {
+  height: 619px;
+}
+
+.InfoMsg {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.FrameUl {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap; /* 너비를 넘어가면 다음 줄로 넘어감 */
+}
+
+.FrameItem {
+  width: calc(40% - 10px);
+  gap: 10px;
+  margin: 20px 10px;
+}
+
+.FrameItem button {
+  background: #ffffff;
+  border: none;
+}
+
+.FrameImage {
+  width: 100%;
+  height: auto;
+}

src/component/MakeFrameCpn/Background.module.css

@@ -5,7 +5,7 @@
 
 .ListTop {
   height: 40px;
-  padding: 14px 14px 14px 18px;
+  padding: 10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -22,17 +22,17 @@
 .ListView {
   width: 100%;
   height: 160px;
-  padding: 15px 0px 15px 18px;
+  padding: 10px 0px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 18px;
+  gap: 30px;
 }
 
 .FirstLine {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-evenly;
 }
 
 .FirstLine button {
@@ -60,7 +60,7 @@
 .SecondLine {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-evenly;
 }
 
 .SecondLine button {

src/component/MakeFrameCpn/Sticker.jsx

@@ -16,7 +16,7 @@ const Sticker = ({ handleStickerSelect }) => {
   const fetchStickers = async (theme) => {
     try {
       const res = await axios.get(
-        `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/get/sticker/${theme}`
+        `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/stickerList/${theme}`
       );
       const imageStickers = res.data.filter((url, index) => index !== 0);
       console.log("이미지 URL 리스트:", imageStickers);

src/component/MakeFrameCpn/Template.jsx

@@ -13,12 +13,7 @@ const Template = ({ changeFrameImage }) => {
   return (
     <div className={styles.Bottom}>
       <div className={styles.ListTop}>
-        <button>테마</button>
-        <button>테마</button>
-        <button>테마</button>
-        <button>테마</button>
-        <button>테마</button>
-        <button>테마</button>
+        <button>테마 for.. Beta</button>
       </div>
       <div className={styles.ListView}>
         <button onClick={() => handleFrameButtonClick(template0)}>

src/component/MakeFrameCpn/Template.module.css

@@ -15,8 +15,11 @@
 }
 
 .ListTop button {
+  width: 100%;
   background-color: #ffffff;
   border: none;
+  display: flex;
+  justify-content: center;
 }
 
 .ListView {

src/pages/Frame/Frame.jsx

@@ -40,9 +40,6 @@ const Frame = () => {
     case "포토북":
       middleContent = "dd";
       break;
-    case "마이":
-      middleContent = "dd";
-      break;
     default:
       middleContent = "dd";
       break;
@@ -67,10 +64,6 @@ const Frame = () => {
             <img src={book} alt="book"></img>
             포토북
           </button>
-          <button onClick={() => handleButtonClick("마이")}>
-            <img src={person} alt="person"></img>
-            마이
-          </button>
         </div>
       </div>
     </div>

src/pages/Frame/Frame.module.css

@@ -95,7 +95,7 @@
   background: #f7f8f8;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
   gap: 20px;
 }

src/pages/Main/Main.jsx

@@ -1,12 +1,15 @@
-import styles from './Main.module.scss'
-import { Link } from 'react-router-dom'
+import styles from "./Main.module.scss";
+import { Link } from "react-router-dom";
+import main_logo from "../../assets/main-logo.png";
 
 export default function Login() {
   return (
     <>
-      <Link to="/login" className={styles.linkBtn}>
-        <button className={styles.linkBtn}>로그인</button>
+      <Link to="/login" className={styles.linkBtn_container}>
+        <button className={styles.linkBtn}>
+          <img src={main_logo} alt="main-logo" />
+        </button>
       </Link>
     </>
   );
-}
+}

src/pages/Main/Main.module.scss

@@ -0,0 +1,10 @@
+.linkBtn {
+  background-color: #ffffff;
+  border: none;
+
+  img {
+    width: 50%;
+    height: 50%;
+    display: inline-flex;
+  }
+}