handleClick(props.category)}
43 | left={props.left}
44 | top={props.top}
45 | names={props.names}
46 | />
47 |
48 | );
49 | };
50 |
51 | export default RoadMapImg;
52 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App";
4 |
5 | const root = ReactDOM.createRoot(
6 | document.getElementById("root") as HTMLElement
7 | );
8 | root.render(
78 | {group}
79 | {describe}
80 |
81 |
82 | {bookList.map((el) => (
83 |
85 |
93 |
94 | ))}
95 |
96 |
97 |
98 | );
99 | }
100 |
101 | export default Category;
102 |
--------------------------------------------------------------------------------
/src/pages/detail.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { useParams } from "react-router-dom";
3 | import styled from "styled-components";
4 | import { DetailBook } from "../components/DetailBook";
5 | import { shareKakao } from "../api/shareKakao";
6 | import kakaoIcon from "../assets/ico_sns_kakao.svg";
7 | import Utterances from "../api/utterances";
8 | import ReactGA from "react-ga";
9 |
10 | const Section = styled.div`
11 | width: 80%;
12 | height: 100%;
13 | margin: 100px auto 0;
14 | @media screen and (max-width: 768px) {
15 | width: 100%;
16 | margin: 82px 10px 10px 0;
17 | }
18 | padding-bottom: 80px;
19 | `;
20 |
21 | const FlexWrapper = styled.div`
22 | display: flex;
23 | justify-content: space-between;
24 | .links {
25 | justify-content: space-between;
26 | }
27 | @media screen and (max-width: 1024px) {
28 | flex-direction: column;
29 | }
30 | `;
31 |
32 | const BookInfo = styled.div`
33 | color: #f0efef;
34 | position: relative;
35 | margin: 0px auto;
36 | margin-top: 70px;
37 | width: 80%;
38 | max-width: 600px;
39 | @media screen and (min-width: 1024px) {
40 | left: -8%;
41 | width: 45%;
42 | }
43 | @media screen and (min-width: 1300px) {
44 | left: -13%;
45 | width: 40%;
46 | }
47 | `;
48 |
49 | const Title = styled.h1`
50 | font-weight: 800;
51 | font-size: 1.8rem;
52 | line-height: 2.2rem;
53 | `;
54 |
55 | const SubTitle = styled.h2`
56 | font-size: 1.2rem;
57 | line-height: 1.3rem;
58 | margin: 1rem 0;
59 | word-break: keep-all;
60 | `;
61 |
62 | const HorizontalLine = styled.hr`
63 | border-top: 0;
64 | border-bottom: solid 1px #d8d8d8;
65 | max-width: 750px;
66 | `;
67 |
68 | const VerticalLine = styled.em`
69 | margin: 4px 4px 0 4px;
70 | width: 1px;
71 | height: 12px;
72 | text-indent: -999em;
73 | border-right: solid 1px #ccc;
74 | overflow: hidden;
75 | text-align: left;
76 | vertical-align: top;
77 | display: inline-block;
78 | zoom: 1.4;
79 | `;
80 |
81 | const Author = styled.span``;
82 |
83 | const Publisher = styled.span``;
84 |
85 | const Suggestion = styled.p`
86 | width: 70%;
87 | margin: 3rem auto;
88 | white-space: pre-wrap;
89 | text-align: center;
90 | color: #f0efef;
91 | @media screen and (max-width: 768px) {
92 | width: 90%;
93 | margin: 2rem auto;
94 | }
95 | `;
96 |
97 | const Summary = styled.p`
98 | width: 100%;
99 | margin: 1rem auto;
100 | white-space: pre-wrap;
101 | color: #f0efef;
102 | @media screen and (max-width: 768px) {
103 | width: 90%;
104 | margin: 2rem auto;
105 | }
106 | max-width: 750px;
107 | margin-bottom: 30px;
108 | `;
109 |
110 | const Links = styled.div`
111 | display: flex;
112 | line-height: 50px;
113 | vertical-align: center;
114 | margin-top: 20px;
115 | `;
116 |
117 | const PurchaseLink = styled.a`
118 | display: block;
119 | width: 100px;
120 | height: 55px;
121 | margin-left: 1rem;
122 | line-height: 55px;
123 | text-align: center;
124 | text-decoration: none;
125 | color: black;
126 | background: #ececec;
127 | border-radius: 30px;
128 | cursor: pointer;
129 | font-weight: bold;
130 | font-size: 16px;
131 |
132 | & + & {
133 | margin-left: 1rem;
134 | }
135 | transition: transform 0.2s ease-in-out;
136 | &:hover {
137 | transform: scale(1.05) translateY(-3px);
138 | }
139 | `;
140 |
141 | const SharingBtn = styled.a`
142 | cursor: pointer;
143 | width: 56px;
144 | display: block;
145 | margin-left: 2rem;
146 | &:after {
147 | background: url(${kakaoIcon}) no-repeat 0 0;
148 | position: absolute;
149 | width: 56px;
150 | height: 56px;
151 | content: "";
152 | }
153 | transition: transform 0.2s ease-in-out;
154 | &:hover {
155 | transform: scale(1.05) translateY(-3px);
156 | }
157 | `;
158 |
159 | interface DetailProps {
160 | id: string;
161 | bookTitle: string;
162 | bookSubTitle: string;
163 | author: string;
164 | publisher: string;
165 | img: string;
166 | kyobo: string;
167 | sharing: string;
168 | summary: string;
169 | yes24: string;
170 | suggestion: string;
171 | }
172 |
173 | function Detail({ match }: any) {
174 | const { group, id } = useParams();
175 | const [param, setParam] = useState(0);
176 |
177 | const [selectedBook, setSelectedBook] = useState({
178 | id: "",
179 | bookTitle: "",
180 | bookSubTitle: "",
181 | author: "",
182 | publisher: "",
183 | img: "https://i.imgur.com/HxbUvqG.png",
184 | kyobo: "",
185 | sharing: "",
186 | summary: "",
187 | yes24: "",
188 | suggestion: "",
189 | });
190 |
191 | useEffect(() => {
192 | setParam(+id - 1);
193 | fetch(window.location.origin + "/data/bookMock.json", {})
194 | .then((response) => response.json())
195 | .then((data) => {
196 | const entire = data.data;
197 | const length = Object.keys(entire).length;
198 |
199 | for (let i = 0; i < length; i++) {
200 | if (group === entire[i]["group"]) {
201 | setSelectedBook(data.data[i].bookList[param]);
202 | }
203 | }
204 | });
205 | }, [param, group, id]);
206 |
207 | return (
208 | <>
209 |
210 |
211 |
213 | {selectedBook.bookTitle}
214 | {selectedBook.bookSubTitle}
215 | {selectedBook.author}
216 | |
217 | {selectedBook.publisher}
218 |
220 |
221 |
226 | 교보문고
227 |
228 |
233 | YES24
234 |
235 | {
237 | e.preventDefault();
238 | shareKakao(
239 | selectedBook.bookTitle,
240 | selectedBook.img,
241 | window.location.href
242 | );
243 | ReactGA.event({
244 | category: "Button",
245 | action: "share kakao button",
246 | label: "share",
247 | });
248 | }}
249 | >
250 |
251 |
252 |
253 |
254 | "{selectedBook.suggestion[0]}"
255 | "{selectedBook.suggestion[1]}"
256 | {selectedBook.summary}
258 |
260 |
261 | );
262 | }
263 |
264 | export default Detail;
265 |
--------------------------------------------------------------------------------
/src/pages/roadMap.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { ReactComponent as RoadMapBaseSvg } from "../assets/roadmap-base.svg";
4 | import RoadMapImg from "../components/RoadMapImg";
5 | import htmlcss from "../assets/htmlcss.svg";
6 | import javascript from "../assets/javascript.svg";
7 | import git from "../assets/git.svg";
8 | import cooperation from "../assets/cooperation.svg";
9 | import react from "../assets/react.svg";
10 | import typescript from "../assets/typescript.svg";
11 | import computerscience from "../assets/computerscience.svg";
12 | import mainLogo from "../assets/main-logo.png";
13 | import downArrow from "../assets/down-arrow.svg";
14 | import { AnimationOnScroll } from "react-animation-on-scroll";
15 | import ReactGA from "react-ga";
16 |
17 | const RoadMapWrapper = styled.div`
18 | display: flex;
19 | justify-content: center;
20 | margin-top: 200px;
21 | `;
22 |
23 | const RoadMapBase = styled(RoadMapBaseSvg)``;
24 |
25 | const RoadMapImgContainer = styled.div`
26 | width: 100%;
27 | display: flex;
28 | flex-wrap: wrap;
29 | flex-direction: column;
30 | align-items: center;
31 | justify-content: center;
32 | position: absolute;
33 | left: 0;
34 | top: 100px;
35 | `;
36 |
37 | const IntroContainer = styled.div`
38 | height: 100vh;
39 | display: flex;
40 | justify-content: center;
41 | align-items: center;
42 | flex-direction: column;
43 | `;
44 |
45 | const IntroImage = styled.img`
46 | padding: 0 0 80px 0;
47 | margin-top: 50px;
48 | `;
49 |
50 | const IntroText = styled.div`
51 | margin: 0 auto;
52 | margin-bottom: 20px;
53 | text-align: center;
54 | font-size: 18px;
55 | width: 95%;
56 | `;
57 |
58 | const IntroSubText = styled.div`
59 | margin: 0 auto;
60 | text-align: center;
61 | font-size: 14px;
62 | max-width: 700px;
63 | width: 90%;
64 | `;
65 |
66 | const DownArrow = styled.span`
67 | background: url(${downArrow}) no-repeat center center / 100% 100%;
68 | width: 30px;
69 | height: 30px;
70 | margin-top: 35px;
71 | cursor: pointer;
72 | z-index: 98;
73 | transition: transform 0.2s ease-in-out;
74 | &:hover {
75 | transform: scale(1.05) translateY(-10px);
76 | }
77 | `;
78 |
79 | function RoadMap() {
80 | const handleDownArrowClick = () => {
81 | window.scrollTo({
82 | top: window.innerHeight,
83 | behavior: "smooth",
84 | });
85 | ReactGA.event({
86 | category: "Button",
87 | action: "scroll down arrow click",
88 | label: "scroll",
89 | });
90 | };
91 |
92 | return (
93 | <>
94 |
95 |
97 | 프론트엔드 개발자로 성장하고자 하는 사람들을 위한 "프론트엔드 장인의
98 | 서재"
99 |
100 |
101 | 기능 구현 중 모르는 지식이 나오면 유명 저자들의 책을 참고하며 학습하는
102 | 것은 기초를 탄탄하게 하는 지름길입니다. 그래서 프투스 교육 팀원들이
103 | 엄선한 책들만 모아 서재를 준비했습니다! FE 개발자들에게 꼭 추천하고
104 | 싶은 책들만 모았어요. 로드맵을 따라 함께 성장해봅시다 👍🏻
105 |
106 |
108 |
109 |
111 |
112 |
113 |
120 |
121 |
123 |
124 |
131 |
132 |
139 |
140 |
142 |
143 |
150 |
151 |
158 |
159 |
160 |
161 | );
162 | }
163 |
164 | export default RoadMap;
165 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 
4 |
5 | 
