portfolio/react.html at main · ImSinYeong/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>illustrator</title>
    <!-- fontawesome -->
    <script
      src="https://kit.fontawesome.com/1e4c7e5b61.js"
      crossorigin="anonymous"
    ></script>
    <!-- jQuery-->
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"
    ></script>
    <!-- custom -->
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./responsive.css" />
    <script src="./custom.js"></script>
  </head>
  <body>
    <div class="container react">
      <header>
        <h1>영화 리뷰 사이트 “M-archive”</h1>
      </header>
      <section class="project-react">
        <div class="introduces">
          <h2>소개</h2>
          <div class="introduce">
            <div class="introduce-img">
              <img
                src="./images/project-images/project-1-main.gif"
                alt="프로젝트 메인"
              />
            </div>
            <div class="introduce-desc">
              <div class="introduce-stacks">
                <i class="fa-brands fa-react"></i>
                <i class="fa-brands fa-html5"></i>
                <i class="fa-brands fa-sass"></i>
                <i class="fa-brands fa-js"></i>
              </div>
              <p>국내 영화들의 정보를 장르별로 조회할 수 있다.</p>
              <p>각 영화에 좋아요, 리뷰를 작성할 수 있다.</p>
              <p>다른 유저의 리뷰를 볼 수 있다.</p>
              <p>나의 좋아요와 리뷰들을 한 눈에 볼 수 있다.</p>
            </div>
          </div>
        </div>
        <div class="my-part">
          <h2>WHAT I DID 😃</h2>
          <div class="login-page">
            <div class="image">
              <img
                src="images/project-images/project-1-login.gif"
                alt="로그인페이지"
              />
            </div>
            <div class="desc">
              <h2>로그인페이지</h2>
              <p>
                이메일, 비밀번호를 입력해 로그인할 수 있고 실패시 실패 메세지를
                보여줍니다.
              </p>
            </div>
          </div>
          <div class="register-page">
            <div class="desc">
              <h2>회원가입페이지</h2>
              <p>
                회원가입을 위한 이름, 닉네임, 이메일, 비밀번호, 비밀번호
                재확인을 입력받고 입력 후 올바른 형식이 아닌 경우 오류 메세지를
                보여줍니다. 모든 입력이 올바를 경우 회원가입이 완료되며 선호
                장르를 선택하는 페이지로 이동합니다.
              </p>
            </div>
            <div class="image">
              <img
                src="images/project-images/project-1-register.gif"
                alt="회원가입페이지"
              />
            </div>
          </div>
          <div class="register-page">
            <div class="image">
              <img
                src="images/project-images/project-1-register-genre.gif"
                alt="회원가입-장르"
              />
            </div>
            <div class="desc">
              <h2>회원가입-장르</h2>
              <p>
                선호하는 장르를 다중으로 선택할 수 있습니다. 확인을 누르면
                선택된 장르가 회원정보에 저장되고 건너뛰기를 누르면 알림메세지를
                보여줍니다.
              </p>
            </div>
          </div>
          <div class="main-genre-page">
            <div class="desc">
              <h2>메인-장르</h2>
              <p>
                원하는 장르를 선택하면 해당 장르의 영화들을 볼 수 있습니다.
                최신순, 가나다순, 좋아요순으로 정렬할 수 있습니다. 장르,
                정렬기준에 따라 24개씩 무한 스크롤로 영화를 불러오도록
                만들었습니다.
              </p>
            </div>
            <div class="image">
              <img
                src="images/project-images/project-1-genre.gif"
                alt="메인-장르"
              />
            </div>
          </div>
          <div class="search-page">
            <div class="image">
              <img
                src="images/project-images/project-1-search.gif"
                alt="검색페이지"
              />
            </div>
            <div class="desc">
              <h2>검색페이지</h2>
              <p>
                검색창의 입력값을 영화제목, 감독이름, 배우이름 중 일치하는 값이
                있을 경우 불러와 영화카드를 보여줍니다. 해당하는 검색결과가 없을
                경우 결과없음을 알려줍니다.
              </p>
            </div>
          </div>
          <div class="like-page">
            <div class="desc">
              <h2>마이페이지-좋아요</h2>
              <p>
                내가 좋아요를 누른 영화들을 볼 수 있는 페이지입니다. 마우스를
                올리면 줄거리를 볼 수 있고 마우스로 클릭하면 영화 상세 페이지로
                이동합니다. 하트 아이콘을 눌러 좋아요가 취소되면 좋아요 영화
                리스트에서 사라집니다.
              </p>
            </div>
            <div class="image">
              <img
                src="images/project-images/project-1-like.gif"
                alt="마이페이지-좋아요"
              />
            </div>
          </div>
          <div class="review-comment-page">
            <div class="image">
              <img
                src="images/project-images/project-1-review-comment.gif"
                alt="마이페이지-리뷰,댓글"
              />
            </div>
            <div class="desc">
              <h2>마이페이지-리뷰,댓글</h2>
              <p>
                '리뷰관리'에서는 내가 쓴 영화 리뷰들을 볼 수 있고 클릭하면 영화
                상세페이지로 이동합니다. '댓글관리'에서는 내 리뷰에 남긴 다른
                사람들의 댓글을 볼 수 있습니다. 클릭하면 리뷰페이지로
                이동합니다.
              </p>
            </div>
          </div>
          <div class="components"></div>
        </div>
      </section>
    </div>
  </body>
</html>