Merge pull request #97 from 2023-Summer-BootCamp-Team-I/FE/feat/#70

[FE/feat/#70] 포토 테마 페이지

frontend/src/assets/lottie/sendLodingLottie.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":"#FFFFFF"},"fr":30,"ip":0,"op":75,"w":1500,"h":1500,"nm":"message_sent","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[750,750,0],"ix":2},"a":{"a":0,"k":[19,46,0],"ix":1},"s":{"a":0,"k":[124,124,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[475.5,-168],[-275.403,166.387],[-240.194,386.403],[-219,240],[-123.565,296.419],[-216,223]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.1638,0.4371,0.6762,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.19019019019,"st":10.01001001001,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[750,750,0],"ix":2},"a":{"a":0,"k":[19,46,0],"ix":1},"s":{"a":0,"k":[124,124,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[488,-174],[-460,16],[-276,166],[-240,386],[-122,296],[4,404]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.24,0.6453,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.19019019019,"st":10.01001001001,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50.045,"s":[100]},{"t":60.0546875,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":45.04,"s":[1246,282,0],"to":[-3.667,52,0],"ti":[3.667,-52,0]},{"t":60.0546875,"s":[1224,594,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":45.04,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":50.045,"s":[4,4,100]},{"t":60.0546875,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1500,1500],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.1922,0.6,0.9608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":240,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.1638,0.4371,0.6762,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":5,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50.045,"s":[100]},{"t":60.0546875,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":45.04,"s":[1246,282,0],"to":[20,-19.333,0],"ti":[-20,19.333,0]},{"t":60.0546875,"s":[1366,166,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":45.04,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":50.045,"s":[4,4,100]},{"t":60.0546875,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1500,1500],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.1922,0.6,0.9608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":240,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.1638,0.4371,0.6762,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50.045,"s":[100]},{"t":60.0546875,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":45.04,"s":[1246,282,0],"to":[-55.833,11.333,0],"ti":[55.833,-11.333,0]},{"t":60.0546875,"s":[911,350,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":45.04,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":50.045,"s":[4,4,100]},{"t":60.0546875,"s":[0,0,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1500,1500],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.1922,0.6,0.9608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":45.04,"s":[240]},{"t":60.0546875,"s":[240]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.1638,0.4371,0.6762,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":5,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"New_Plane","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":45.03,"s":[100]},{"t":49.0341796875,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.832],"y":[0.461]},"o":{"x":[0.621],"y":[0]},"t":24.009,"s":[0]},{"i":{"x":[0.833],"y":[0.861]},"o":{"x":[0.413],"y":[0.079]},"t":32.018,"s":[-15.977]},{"i":{"x":[0.705],"y":[0.886]},"o":{"x":[0.167],"y":[0.244]},"t":40.025,"s":[-283.577]},{"i":{"x":[0.757],"y":[1]},"o":{"x":[0.413],"y":[-6.015]},"t":45.03,"s":[-379.036]},{"t":49.0341796875,"s":[-377]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.829},"o":{"x":0.333,"y":0},"t":24.009,"s":[615,880,0],"to":[0,0,0],"ti":[98.064,301.65,0]},{"i":{"x":0.833,"y":0.899},"o":{"x":0.167,"y":0.081},"t":35.021,"s":[1190,405,0],"to":[-72.384,-287.264,0],"ti":[-26.681,-317.47,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.197},"t":40.025,"s":[658.668,461.908,0],"to":[75.392,238.957,0],"ti":[-189.966,287.905,0]},{"t":49.0341796875,"s":[1200,320,0]}],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[564,826,0],"to":[29.5,-10.167,0],"ti":[-13,6.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24.009,"s":[741,765,0],"to":[13,-6.667,0],"ti":[16.5,-3.5,0]},{"t":31.0166015625,"s":[642,786,0]}],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.64,0.64,0.833],"y":[1,1,1]},"o":{"x":[0.145,0.145,0.167],"y":[0.231,0.231,0]},"t":15,"s":[80,80,100]},{"i":{"x":[0.376,0.376,0.833],"y":[0.139,0.139,1]},"o":{"x":[0.359,0.359,0.167],"y":[0,0,0]},"t":21.006,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.127,0.127,0.167],"y":[0.214,0.214,0]},"t":27.013,"s":[80,80,100]},{"t":49.0341796875,"s":[20,20,100]}],"ix":6}},"ao":0,"w":1500,"h":1500,"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[700,900,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-300,-124],[-65,67],[395,-459]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.174],"y":[0.832]},"o":{"x":[0.337],"y":[0]},"t":40.035,"s":[0]},{"t":62,"s":[82]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.1922,0.6,0.9608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":88,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[8,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":5,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[708,900,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-300,-124],[-65,67],[395,-459]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":40.035,"s":[0]},{"t":51.0458984375,"s":[96]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.1638,0.4371,0.6762,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":88,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":5,"bm":0}],"markers":[]}

frontend/src/components/CreateCapsuleNote/index.tsx

@@ -1,25 +1,24 @@
+import React from 'react';
 import noteImg2 from '../../assets/images/note/note2.png';
-
 import SendLottie from '../SendLottie';
 import ReactDatePicker from '../ReactDatePicker';
+import ImageUploadButton from '../ImageUploadButton';
 
-function CreateCapsuleNote() {
-  const capsule = [
-    {
-      img: 'https://cdn.aitimes.kr/news/photo/202303/27617_41603_044.jpg',
-      name: '제주도',
-    },
-  ];
+interface CreateCapsuleNoteProps {
+  onButtonClick: () => void;
+}
 
-  const handleGoBack = () => {
-    history.back(); // 이전 페이지로 돌아가는 함수
+const CreateCapsuleNote: React.FC<CreateCapsuleNoteProps> = ({ onButtonClick }) => {
+  const handleClick = () => {
+    onButtonClick();
   };
 
   return (
     <div className="relative mt-12">
-      <img className="h-[30rem] w-[30rem]" src={noteImg2} />
+      <img className="h-[30rem] w-[30rem]" src={noteImg2} alt="Note" />
       <div className="absolute flex flex-col items-center w-full h-full p-10 -ml-4 top-10 left-10">
-        <img src={capsule[0].img} className="h-[10rem] w-[10rem] object-cover bg-cover" />
+        <ImageUploadButton type="square" />
+
         <form
           className="flex flex-col h-32 text-lg justify-evenly w-68 "
           method="post"
@@ -29,7 +28,7 @@ function CreateCapsuleNote() {
           <div className="flex">
             <label className="w-16 text-left">제목</label>
             <input
-              className="w-40 text-center outline=none focus:outline-none bg-transparent"
+              className="w-40 text-center outline-none focus:outline-none bg-transparent"
               type="text"
               id="user"
               placeholder="제목을 입력하세요"
@@ -47,13 +46,13 @@ function CreateCapsuleNote() {
             캡슐 완성하기
             <br /> 오쪼꼰데
           </p>
-          <div onClick={handleGoBack}>
+          <div onClick={handleClick}>
             <SendLottie />
           </div>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default CreateCapsuleNote;

frontend/src/components/ImageUploadButton/index.tsx

@@ -1,7 +1,22 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+
+type typeProps = {
+  type: string;
+};
+
 // React 모듈과 useState, useRef 훅을 가져옴.
-function ImageUploadButton() {
+function ImageUploadButton({ type }: typeProps) {
   const [file, setFile] = useState<string | null>(null); //file, setfile 상태변수 선언. 초기값 null
+  const [shapeToShow, setShapeToShow] = useState('');
+
+  useEffect(() => {
+    if (type === 'circle') {
+      setShapeToShow('w-[7.5rem] h-[7.5rem] rounded-full ');
+    } else if (type === 'square') {
+      setShapeToShow('w-[8rem] h-[8rem] m-4');
+    }
+  }, [type]);
+
   // file과 setFile이라는 상태 변수를 선언하고 useState 훅을 사용하여 초기값을 null로 설정
   const fileInputRef = useRef<HTMLInputElement>(null); // 파일 입력시 함수
   // fileInputRef라는 변수를 선언하고 useRef 훅을 사용하여 초기값을 null로 설정. HTMLInputElement 타입으로 지정
@@ -51,10 +66,8 @@ function ImageUploadButton() {
       }}
     >
       <div
+        className={`${shapeToShow}`}
         style={{
-          width: '120px',
-          height: '120px',
-          borderRadius: '50%',
           backgroundColor: '#B6B2B4',
           display: 'flex',
           alignItems: 'center',

frontend/src/components/JoinModal/index.tsx

@@ -29,7 +29,7 @@ const JoinModal: React.FC<ModalProps> = ({ onClose }) => {
           </span>
           <div className="flex flex-col items-center">
             <div className="py-5">
-              <ImageUploadButton />
+              <ImageUploadButton type="circle" />
             </div>
             <div>
               <form method="post" action="서버의url" id="join-form">
@@ -57,6 +57,12 @@ const JoinModal: React.FC<ModalProps> = ({ onClose }) => {
                   title="join"
                   type="email"
                 />
+                <TextInput
+                  label="Tell"
+                  placeholder="전화번호를 입력해주세요"
+                  title="join"
+                  type="number"
+                />
                 <TextInput
                   label="Nickname"
                   placeholder="닉네임을 입력해주세요"

frontend/src/components/PhotoCard/PhotoCard1/index.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+import line1 from '../../../assets/images/PhotoTheme/line1.png';
+
+interface StoryType {
+  img: string;
+  owner: string;
+  title: string;
+  content: string;
+}
+
+interface PhotoCardProps {
+  data: StoryType;
+}
+
+function PhotoCard1({ data }: PhotoCardProps) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  const cardStyles =
+    'z-10 relative flex justify-center items-center h-[22rem] w-[17rem] bg-white cursor-pointer border border-MyBlue';
+
+  const circleStyles =
+    'absolute top-1 right-1/2 transform translate-x-1/2 -translate-y-1/2 h-[2.5rem] w-[2.5rem] bg-[#F0F1F3] rounded-full shadow-ButtonShadow ';
+
+  const imageStyles = `h-[20.5rem] w-[15.5rem] bg-gray-300 bg-center bg-no-repeat bg-cover cursor-pointer ${
+    isClicked ? 'hidden' : ''
+  }`;
+
+  const textStyles = `w-full p-10 flex flex-col  absolute top-0 left-0 ${
+    isClicked ? 'visible' : 'invisible'
+  }`;
+
+  return (
+    <div className="flex flex-col justify-start w-full h-full">
+      <div className="relative">
+        <img
+          src={line1}
+          alt="Leaf"
+          className="z-0 absolute bottom-[18rem] right-[18rem]  h-[5em] w-[3rem] "
+          style={{ transform: 'rotate(10deg)' }}
+        />
+
+        <div
+          className={cardStyles}
+          style={{
+            transform: 'rotate(-10deg)',
+          }}
+          onClick={handleClick}
+        >
+          <div className={circleStyles}></div>
+          <div className={imageStyles} style={{ backgroundImage: `url(${data.img})` }}></div>
+          <div className={textStyles}>
+            <div className="border-b pb-4 text-xl ">{data.title}</div>
+            <div className=" pt-4 text-lg">{data.content}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PhotoCard1;

frontend/src/components/PhotoCard/PhotoCard2/index.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+
+import star1 from '../../../assets/images/PhotoTheme/star1.png';
+
+interface StoryType {
+  img: string;
+  owner: string;
+  title: string;
+  content: string;
+}
+
+interface PhotoCardProps {
+  data: StoryType;
+}
+
+function PhotoCard2({ data }: PhotoCardProps) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  const cardStyles =
+    'z-10 relative flex justify-center items-center h-[22rem] w-[17rem] bg-white cursor-pointer  border border-MyBlue';
+
+  const circleStyles =
+    'absolute top-1 right-1/2 transform translate-x-1/2 -translate-y-1/2 h-[2.5rem] w-[2.5rem] bg-[#F0F1F3] rounded-full shadow-ButtonShadow ';
+
+  const imageStyles = `h-[20.5rem] w-[15.5rem] bg-gray-300 bg-center bg-no-repeat bg-cover cursor-pointer ${
+    isClicked ? 'hidden' : ''
+  }`;
+
+  const textStyles = `w-full p-10 flex flex-col  absolute top-0 left-0 ${
+    isClicked ? 'visible' : 'invisible'
+  }`;
+
+  return (
+    <div className="flex flex-col justify-end w-full h-full relative right-5 ">
+      <div className="z-20 relative">
+        <img
+          src={star1}
+          alt="Leaf"
+          className="z-20 absolute top-[17rem] left-[12rem]  h-[7em] w-[5rem] "
+          style={{ transform: 'rotate(-15deg)' }}
+        />
+        <div
+          className={cardStyles}
+          style={{
+            transform: 'rotate(15deg)',
+          }}
+          onClick={handleClick}
+        >
+          <div className={circleStyles}></div>
+          <div className={imageStyles} style={{ backgroundImage: `url(${data.img})` }}></div>
+          <div className={textStyles}>
+            <div className="border-b pb-4 text-xl">{data.title}</div>
+            <div className=" pt-4 text-lg">{data.content}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PhotoCard2;