Showing
2 changed files
with
73 additions
and
9 deletions
... | @@ -70,9 +70,8 @@ const GifEditor = ({ previewURL }) => { | ... | @@ -70,9 +70,8 @@ const GifEditor = ({ previewURL }) => { |
70 | const res = await postGif(formData); | 70 | const res = await postGif(formData); |
71 | 71 | ||
72 | setIsUploadLoading(false); | 72 | setIsUploadLoading(false); |
73 | - setViewLink( | 73 | + // https://gif-generator.bu.to |
74 | - `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif` | 74 | + setViewLink(`http://localhost:3000/${res.id}`); |
75 | - ); | ||
76 | }; | 75 | }; |
77 | 76 | ||
78 | return ( | 77 | return ( | ... | ... |
1 | +import Header from "components/Header"; | ||
1 | import { useRouter } from "next/dist/client/router"; | 2 | import { useRouter } from "next/dist/client/router"; |
3 | +import styled from "styled-components"; | ||
2 | 4 | ||
3 | const Detail = () => { | 5 | const Detail = () => { |
4 | const id = useRouter().query.id; | 6 | const id = useRouter().query.id; |
5 | - | ||
6 | return ( | 7 | return ( |
7 | - <div> | 8 | + <Container> |
8 | - <img | 9 | + <Header /> |
9 | - src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`} | 10 | + <ImgBox> |
10 | - /> | 11 | + <img |
11 | - </div> | 12 | + className="img" |
13 | + src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`} | ||
14 | + /> | ||
15 | + </ImgBox> | ||
16 | + </Container> | ||
12 | ); | 17 | ); |
13 | }; | 18 | }; |
14 | 19 | ||
20 | +const Container = styled.div` | ||
21 | + position: fixed; | ||
22 | + top: 0; | ||
23 | + left: 0; | ||
24 | + width: 100%; | ||
25 | + height: 100vh; | ||
26 | + overflow: hidden; | ||
27 | + display: flex; | ||
28 | + align-items: center; | ||
29 | + justify-content: center; | ||
30 | +`; | ||
31 | +const ImgBox = styled.div` | ||
32 | + position: relative; | ||
33 | + max-width: 60%; | ||
34 | + max-height: 60%; | ||
35 | + background-color: white; | ||
36 | + box-shadow: ${({ theme }) => theme.boxShadow.normal}; | ||
37 | + border-radius: 2rem; | ||
38 | + margin-top: 2rem; | ||
39 | + display: flex; | ||
40 | + align-items: center; | ||
41 | + justify-content: center; | ||
42 | + font-size: 1rem; | ||
43 | + display: flex; | ||
44 | + padding: 3rem; | ||
45 | + /* flex: 0.6; */ | ||
46 | + /* .sub-flex { | ||
47 | + position: relative; | ||
48 | + width: 100%; | ||
49 | + height: 100%; | ||
50 | + display: flex; | ||
51 | + align-items: center; | ||
52 | + justify-content: center; | ||
53 | + :first-child { | ||
54 | + border-right: 1px solid ${({ theme }) => theme.color.gray}; | ||
55 | + } | ||
56 | + } */ | ||
57 | + .img { | ||
58 | + max-width: 100%; | ||
59 | + max-height: 100%; | ||
60 | + } | ||
61 | +`; | ||
62 | + | ||
63 | +const Wrapper = styled.div` | ||
64 | + width: 100%; | ||
65 | + height: 100vh; | ||
66 | + .box { | ||
67 | + width: 90%; | ||
68 | + border-radius: 1.5rem; | ||
69 | + box-shadow: ${({ theme }) => theme.boxShadow.normal}; | ||
70 | + display: flex; | ||
71 | + flex-direction: column; | ||
72 | + align-items: center; | ||
73 | + } | ||
74 | + .img { | ||
75 | + max-width: 90%; | ||
76 | + max-height: 90%; | ||
77 | + } | ||
78 | +`; | ||
79 | + | ||
15 | export default Detail; | 80 | export default Detail; | ... | ... |
-
Please register or login to post a comment