├── .DS_Store
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   ├── AWS-Cloudfront-Deploy.yml
    │   └── test-github-action.yml
├── .gitignore
├── LICENSE
├── README.md
├── css
    ├── default.css
    ├── default.css.map
    ├── home.css
    ├── home.css.map
    ├── question.css
    ├── question.css.map
    ├── result.css
    ├── result.css.map
    ├── variable.css
    └── variable.css.map
├── favicon
    ├── android-icon-144x144.png
    ├── android-icon-192x192.png
    ├── android-icon-36x36.png
    ├── android-icon-48x48.png
    ├── android-icon-72x72.png
    ├── android-icon-96x96.png
    ├── apple-icon-114x114.png
    ├── apple-icon-120x120.png
    ├── apple-icon-144x144.png
    ├── apple-icon-152x152.png
    ├── apple-icon-180x180.png
    ├── apple-icon-57x57.png
    ├── apple-icon-60x60.png
    ├── apple-icon-72x72.png
    ├── apple-icon-76x76.png
    ├── apple-icon-precomposed.png
    ├── apple-icon.png
    ├── browserconfig.xml
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── favicon.ico
    ├── manifest.json
    ├── ms-icon-144x144.png
    ├── ms-icon-150x150.png
    ├── ms-icon-310x310.png
    └── ms-icon-70x70.png
├── gh-pages.txt
├── html
    ├── home.html
    ├── question.html
    └── result.html
├── imgs
    ├── chracter-img
    │   └── ISFJ_I.png
    ├── desktop
    │   └── desktop_background_Frame48.png
    ├── index_left_btn_active.png
    ├── index_left_btn_not_active.png
    ├── index_right_btn_active.png
    ├── index_right_btn_not_active.png
    ├── instagram_download_img.png
    ├── loading_ment.png
    ├── mobile
    │   └── mobile_background_Frame96.png
    ├── movie_character
    │   ├── ISFJ_C.png
    │   ├── ISTJ_C.png
    │   └── soundofmusic_maria_s_image31.png
    ├── movie_title
    │   ├── ISFJ_T.png
    │   └── ISTJ_T.png
    ├── question_num
    │   ├── Q10_Frame909.png
    │   ├── Q11_Frame910.png
    │   ├── Q12_Frame899.png
    │   ├── Q1_Frame900.png
    │   ├── Q2_Frame901.png
    │   ├── Q3_Frame902.png
    │   ├── Q4_Frame903.png
    │   ├── Q5_Frame904.png
    │   ├── Q6_Frame905.png
    │   ├── Q7_Frame906.png
    │   ├── Q8_Frame907.png
    │   └── Q9_Frame908.png
    ├── replyBtn_Frame139.png
    ├── replyDeleteBtn_Frame896.png
    ├── replyReporteBtn_icon.png
    ├── restartBtn_Frame134.png
    ├── result_character_subject.png
    ├── share-icons
    │   ├── share_band_Frame88.png
    │   ├── share_facebook_Frame86.png
    │   ├── share_instagram_Frame89.png
    │   ├── share_kakaotalk_Frame85.png
    │   └── share_twitter_Frame87.png
    ├── showResult_Frame61.png
    ├── startBtn_Frame88.png
    ├── subTitle_Frame16.png
    ├── title.png
    ├── writeCommentBtn_Frame140.png
    └── writeCommentBtn_Frame69.png
├── index.html
├── javascript
    ├── comment.js
    ├── default.js
    ├── home.js
    ├── question.js
    └── userResult.js
└── scss
    ├── default.scss
    ├── home.scss
    ├── question.scss
    ├── result.scss
    └── variable.scss


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/.DS_Store


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: "[BUG]"
 5 | labels: bug
 6 | assignees:
 7 | ---
 8 | 
 9 | ## 증상
10 | 
11 | ## 시나리오
12 | 
13 | Steps to reproduce the behavior:
14 | 
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | ## 예상되는 부작용
21 | 
22 | ## Screenshots
23 | 
24 | ## 추가 질의사항
25 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ""
 5 | labels: enhancement
 6 | assignees:
 7 | ---
 8 | 
 9 | ## 기존 사항에 대한 문제점 / 구현 사항
10 | 
11 | ## 원하는 솔루션 설명
12 | 
13 | ## 고려했던 대안 설명
14 | 
15 | ## 추가 질의사항
16 | 


--------------------------------------------------------------------------------
/.github/workflows/AWS-Cloudfront-Deploy.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   push:
 3 |     branches:
 4 |       - main
 5 | 
 6 | jobs:
 7 |   deploy:
 8 |     runs-on: ubuntu-latest
 9 |     
10 |     permissions:
11 |       id-token: write
12 |       contents: read
13 |       
14 |     env:
15 |       AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
16 |       
17 |     steps:
18 |     - uses: actions/checkout@v2
19 |     - name: Setup Python
20 |       uses: actions/setup-python@v2
21 |       with:
22 |         python-version: '3.x'
23 |         architecture: 'x64'
24 |     - name: Install AWS CLI
25 |       run: pip3 install awscli --upgrade --user
26 |     - name: print secrets
27 |       run: echo My AWS_ACCOUNT_ID is $AWS_ACCOUNT_ID
28 |     - name: Configure AWS Credentials
29 |       uses: aws-actions/configure-aws-credentials@v1
30 |       with:
31 |         aws-region: ap-northeast-2
32 |         role-to-assume: arn:aws:iam::$AWS_ACCOUNT_ID:role/github-actions-${{ github.event.repository.name }}
33 |     - name: Cache node modules
34 |       uses: actions/cache@v2
35 |       with:
36 |         path: ~/.npm
37 |         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
38 |         restore-keys: |
39 |           ${{ runner.os }}-node-
40 |     - name: Install Dependencies   
41 |       run: npm install
42 |     - name: Build               
43 |       run: npm run build
44 |     - name: Push Contents to S3
45 |       run: aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }}
46 |     - name: Invalidate CloudFront Cache
47 |       run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
48 | 


--------------------------------------------------------------------------------
/.github/workflows/test-github-action.yml:
--------------------------------------------------------------------------------
 1 | name: test Github Action
 2 | 
 3 | on:
 4 |   # Triggers the workflow on push or pull request events but only for the main branch
 5 |   push:
 6 |     branches:
 7 |       - githubAction
 8 | 
 9 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
10 | jobs:
11 |   # This workflow contains a single job called "build"
12 |   build:
13 |     # The type of runner that the job will run on
14 |     runs-on: ubuntu-latest
15 | 
16 |     # Steps represent a sequence of tasks that will be executed as part of the job
17 |     steps:
18 |       - uses: actions/checkout@v2
19 |       - name: print secrets
20 |         run: echo My AWS_ACCOUNT_ID is '${{ secrets.AWS_ACCOUNT_ID }}'
21 |         
22 |       - name: print env
23 |         run: echo My AWS_ACCOUNT_ID is '${{ env.AWS_ACCOUNT_ID }}'
24 | 
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # api keys
2 | .env


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 MBTImaker
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MBTImaker-javascript-frontend
 2 | 
 3 | ### [소개](https://github.com/MBTImaker/Introduction/blob/main/README.md)
 4 | 
 5 | ### 개발 기한
 6 | 
 7 | - 2021.10.15 ~ 2021.12.21
 8 | 
 9 | ### 개발 규칙
10 | 
11 | 0. 모든 html 파일에서 default.css를 사용한다. 이 파일에는 전체적인 속성이 들어간다.
12 | 1. 모바일 뷰를 우선으로 개발한다.
13 | 2. js file을 import할 때는 defer를 사용한다.
14 | 5. 안 풀린 문제는 끝까지 해결한다.
15 | 


--------------------------------------------------------------------------------
/css/default.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | /* 모든 html 파일 안에 들어가는 css입니다. */
 3 | @font-face {
 4 |   font-family: "SBAggroM";
 5 |   src: local("SB 어그로 M"), local("SB 어그로OTF M"), url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff") format("woff");
 6 |   font-weight: normal;
 7 |   font-style: normal;
 8 |   font-display: fallback;
 9 |   unicode-range: U+0020-007E, U+0030-0039, U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
10 | }
11 | * {
12 |   padding: 0;
13 |   margin: 0;
14 |   box-sizing: border-box;
15 |   font-family: "SBAggroM", "NanumBarunGothic";
16 |   background: no-repeat center;
17 |   background-size: contain;
18 | }
19 | 
20 | html {
21 |   width: 100vw;
22 | }
23 | 
24 | body {
25 |   background: repeat #08623e url("../imgs/mobile/mobile_background_Frame96.png");
26 | }
27 | 
28 | button {
29 |   cursor: pointer;
30 |   background-color: transparent;
31 |   border: 0px;
32 |   opacity: 1;
33 | }
34 | 
35 | /* mobile(768px) labtop(1020px) / desktop(1400px) */
36 | @media screen and (min-width: 47.25rem) {
37 |   body {
38 |     background-image: url("../imgs/desktop/desktop_background_Frame48.png");
39 |   }
40 | }
41 | 
42 | /*# sourceMappingURL=default.css.map */
43 | 


--------------------------------------------------------------------------------
/css/default.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../scss/default.scss"],"names":[],"mappings":";AAAA;AAIA;EACE;EACA;EAGA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA,aANW;EAOX;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE","file":"default.css"}


--------------------------------------------------------------------------------
/css/home.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 |   height: 100vh;
 7 |   scrollbar-width: none;
 8 |   /* Firefox */
 9 | }
10 | 
11 | body::-webkit-scrollbar {
12 |   display: none;
13 |   width: 0;
14 | }
15 | 
16 | header {
17 |   display: flex;
18 |   flex-direction: column;
19 |   justify-content: center;
20 |   align-items: center;
21 | }
22 | header .t1 {
23 |   background: no-repeat center url("../imgs/subTitle_Frame16.png");
24 |   background-size: contain;
25 |   width: 90vw;
26 |   height: 3vh;
27 |   margin-top: 17.73vh;
28 | }
29 | header .t2 {
30 |   background: no-repeat center url("../imgs/title.png");
31 |   background-size: contain;
32 |   width: 100vw;
33 |   height: 20vh;
34 | }
35 | 
36 | .b1 {
37 |   display: flex;
38 |   flex-direction: column;
39 |   justify-content: flex-end;
40 |   align-items: center;
41 |   height: 60vh;
42 | }
43 | .b1 .b2 {
44 |   background: no-repeat center url("../imgs/startBtn_Frame88.png");
45 |   background-size: contain;
46 |   width: 89.1vw;
47 |   height: 9vh;
48 |   border-radius: 80px;
49 |   background-color: transparent;
50 | }
51 | .b1 .t1 {
52 |   color: #ffffff;
53 |   font-size: 0.875rem;
54 |   margin: 3.5vh 0 10vh 0;
55 | }
56 | 
57 | @media screen and (min-width: 47.25rem) and (min-height: 50.75rem) {
58 |   header .t1 {
59 |     width: 37vw;
60 |     height: 3.51vh;
61 |     margin-top: 13.33vh;
62 |   }
63 |   header .t2 {
64 |     width: 37vw;
65 |     height: 18.88vh;
66 |     margin-top: 1.94vh;
67 |   }
68 | 
69 |   .b1 .b2 {
70 |     width: 37vw;
71 |     height: 12.96vh;
72 |   }
73 |   .b1 .t1 {
74 |     font-size: 1.5rem;
75 |     line-height: 1.8125rem;
76 |     margin: 3.98vh 0 9.25vh 0;
77 |   }
78 | }
79 | 
80 | /*# sourceMappingURL=home.css.map */
81 | 


--------------------------------------------------------------------------------
/css/home.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../scss/home.scss","../scss/variable.scss"],"names":[],"mappings":"AAUA;ECkBE;EACA,gBAFmD;EAGnD,iBAH2B;EAI3B;EDnBA;EACA;AAAuB;;;AAGzB;EACE;EACA;;;AAGF;ECOE;EACA,gBAFmD;EAGnD,iBAH2B;EAI3B;;ADPA;EAlBA;EACA;EAmBE;EACA;EACA;;AAGF;EAzBA;EACA;EA0BE;EACA;;;AAIJ;ECVE;EACA,gBAFmD;EAGnD,iBDSc;ECRd;EDSA;;AAEA;EApCA;EACA;EAqCE;EACA;EACA;EACA;;AAGF;EACE,OCnDK;EDoDL,WAlDa;EAmDb;;;AAIJ;EAEI;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;;EAKF;IACE;IACA;;EAGF;IACE,WA5EY;IA6EZ;IACA","file":"home.css"}


--------------------------------------------------------------------------------
/css/question.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | ===========
  3 | Global
  4 | ===========
  5 | */
  6 | body {
  7 |   display: flex;
  8 |   flex-direction: column;
  9 |   justify-content: normal;
 10 |   align-items: center;
 11 |   width: 100%;
 12 |   margin: calc(7vh - 20px) 0 calc(8vh + 20px) 0;
 13 |   scrollbar-width: none;
 14 | }
 15 | 
 16 | body::-webkit-scrollbar {
 17 |   display: none;
 18 |   width: 0;
 19 | }
 20 | 
 21 | .hidden {
 22 |   height: 100%;
 23 |   min-height: 100%;
 24 |   overflow: hidden !important;
 25 |   touch-action: pan-y;
 26 | }
 27 | 
 28 | .b2 {
 29 |   display: flex;
 30 |   flex-direction: column;
 31 |   justify-content: center;
 32 |   align-items: center;
 33 |   text-align: center;
 34 |   width: 89.25vw;
 35 |   height: calc(var(--vh, 1vh) * 85);
 36 |   min-height: 480px;
 37 |   margin-top: 20px;
 38 |   border-radius: 20px;
 39 |   border: 2px #053f28 solid;
 40 |   background-color: #f5f5f5;
 41 | }
 42 | .b2 .q2 {
 43 |   display: none;
 44 |   width: 66px;
 45 |   height: 36px;
 46 |   margin-bottom: 14px;
 47 |   background-size: 100% 100%;
 48 | }
 49 | .b2 .q1 {
 50 |   font-size: 1.125rem;
 51 |   color: #222222;
 52 |   line-height: 167%;
 53 |   letter-spacing: 0.02em;
 54 | }
 55 | .b2 .q1.t0 {
 56 |   margin-bottom: 1.375rem;
 57 | }
 58 | .b2 .q1.b0 {
 59 |   margin-bottom: 1.75rem;
 60 | }
 61 | 
 62 | /*
 63 | ============
 64 | block - btns
 65 | ============
 66 | */
 67 | .n1 {
 68 |   background: linear-gradient(93.11deg, #dadcdd 4.01%, #bec0c2 97.86%);
 69 |   box-shadow: 0px 6px 0px #505050;
 70 |   border: 2px solid #6f6f70;
 71 |   border-radius: 80px;
 72 |   width: 78.66%;
 73 |   height: 8.62vh;
 74 |   min-height: 20px;
 75 |   max-height: 70px;
 76 |   position: fixed;
 77 |   top: 80%;
 78 |   line-height: 1.25rem;
 79 |   font-size: 0.875rem;
 80 |   color: #6f6f70;
 81 |   cursor: default;
 82 |   white-space: pre;
 83 | }
 84 | 
 85 | .s2 {
 86 |   background: linear-gradient(93.11deg, #f7202f 4.01%, #c11723 97.86%);
 87 |   box-shadow: 0px 6px 0px #56070c;
 88 |   border: 4px solid #9b151e;
 89 |   border-radius: 80px;
 90 |   width: 78.66%;
 91 |   height: 8.62vh;
 92 |   max-height: 70px;
 93 |   position: fixed;
 94 |   top: 80%;
 95 |   font-size: 0.875rem;
 96 |   line-height: 1.25rem;
 97 |   color: #ffffff;
 98 | }
 99 | 
100 | .b2 .t1 {
101 |   display: flex;
102 |   flex-direction: column;
103 |   justify-content: normal;
104 |   align-items: center;
105 |   width: 100%;
106 | }
107 | .b2 .t1 .s1 {
108 |   width: 88.05%;
109 |   height: 9.85vh;
110 |   min-height: 20px;
111 |   max-height: 80px;
112 |   margin-bottom: 1.25rem;
113 |   border-radius: 162px;
114 |   background-color: #e8e8e8;
115 |   color: #888888;
116 |   font-size: 0.875rem;
117 |   line-height: 1.25rem;
118 | }
119 | .b2 .t1 .s1.b0 {
120 |   margin-bottom: 10vh;
121 | }
122 | .b2 .t1 .s1.active {
123 |   background-color: #2d6242;
124 |   border: 2px solid #1a3e2a;
125 |   color: #ffffff;
126 |   pointer-events: none;
127 | }
128 | 
129 | /*
130 | ===========
131 | media
132 | ===========
133 | */
134 | /* (width < 428px) and (height > 812px) */
135 | @media screen and (max-width: 26.75rem) and (min-height: 50.75rem) {
136 |   body {
137 |     margin: calc(15vh - 20px) 0 calc(15vh + 20px) 0;
138 |   }
139 | 
140 |   .b2 {
141 |     height: 70vh;
142 |   }
143 | 
144 |   .n1,
145 | .s2 {
146 |     top: 70%;
147 |   }
148 | }
149 | /* width > 756px */
150 | @media screen and (min-width: 47.25rem) {
151 |   .b2 {
152 |     width: 37vw;
153 |     min-width: 716px;
154 |     height: 87.03vh;
155 |     border-width: 6px;
156 |   }
157 |   .b2 .q2 {
158 |     width: 6.875rem;
159 |     height: 3.375rem;
160 |     margin-bottom: 2.12vh;
161 |   }
162 |   .b2 .q1 {
163 |     font-size: 2rem;
164 |   }
165 |   .b2 .q1.b0 {
166 |     margin-bottom: 2.5rem;
167 |   }
168 |   .b2 .t1 .s1 {
169 |     width: 532px;
170 |     height: 11.11vh;
171 |     max-height: 120px;
172 |     line-height: 1.875rem;
173 |     font-size: 1.25rem;
174 |   }
175 | 
176 |   .n1,
177 | .s2 {
178 |     width: 532px;
179 |     height: 9.44vh;
180 |     max-height: 102px;
181 |     line-height: 2.5rem;
182 |     font-size: 1.375rem;
183 |   }
184 | }
185 | /* height < 756px */
186 | @media screen and (max-height: 47.25rem) {
187 |   .b2 .q1 {
188 |     font-size: 1.25rem;
189 |   }
190 | 
191 |   .n1,
192 | .s2 {
193 |     top: 77%;
194 |   }
195 | }
196 | /* width < 320px (Galaxy S5, iPhone 5, iPhone 6/7/8, fold)*/
197 | @media screen and (max-width: 23.4375rem) {
198 |   .b2 .q1 {
199 |     font-size: 0.9375rem;
200 |   }
201 | 
202 |   .b2 .t1 .s1,
203 | .n1,
204 | .s2 {
205 |     font-size: 0.75rem;
206 |   }
207 | }
208 | @media screen and (max-height: 32.56rem) {
209 |   .n1 {
210 |     display: none;
211 |   }
212 | }
213 | 
214 | /*# sourceMappingURL=question.css.map */
215 | 


--------------------------------------------------------------------------------
/css/question.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../scss/question.scss","../scss/variable.scss"],"names":[],"mappings":"AAaA;AAAA;AAAA;AAAA;AAAA;AAMA;ECSE;EACA,gBAFmD;EAGnD,iBDVc;ECWd;EDVA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECVE;EACA,gBAFmD;EAGnD,iBAH2B;EAI3B;EDSA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBC9CO;;ADgDP;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,WAvDkB;EAwDlB,OCtCK;EDuCL;EACA,gBAjDa;;AAoDf;EACE;;AAGF;EACE;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EC3CE;EACA;EACA;EACA;ED0CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WA/EwB;EAgFxB,OC5EM;ED6EN;EACA;;;AAGF;ECnDE;EACA;EACA;EACA;EDkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCtGO;;;AD0GP;EC9EA;EACA,gBAFmD;EAGnD,iBD6EgB;EC5EhB;ED6EE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC9GE;ED+GF,OC1GE;ED2GF,WA9GoB;EA+GpB;;AAGF;EACE;;AAGF;EACE,kBChHG;EDiHH;EACA,OCjIG;EDkIH;;;AAKN;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;EACE;IACE;;;EAGF;IACE;;;EAGF;AAAA;IAEE;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE,WAvKiB;;EA0KnB;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA,WAlLgB;;;EAuLtB;AAAA;IAEE;IACA;IACA;IACA;IACA,WA1LuB;;;AA8L3B;AACA;EACE;IACE,WArMsB;;;EAwMxB;AAAA;IAEE;;;AAIJ;AACA;EACE;IACE,WAnNqB;;;EAsNvB;AAAA;AAAA;IAGE,WApNyB;;;AAwN7B;EACE;IACE","file":"question.css"}


--------------------------------------------------------------------------------
/css/result.css:
--------------------------------------------------------------------------------
   1 | /*
   2 | ===========
   3 | Global
   4 | ===========
   5 | */
   6 | body {
   7 |   display: flex;
   8 |   flex-direction: column;
   9 |   justify-content: normal;
  10 |   align-items: center;
  11 |   padding: 2.5rem 1.25rem;
  12 | }
  13 | 
  14 | section {
  15 |   display: flex;
  16 |   flex-direction: column;
  17 |   justify-content: normal;
  18 |   align-items: center;
  19 |   width: 100%;
  20 |   height: 100%;
  21 |   background-color: #f8f8f8;
  22 |   border: 2px solid #ededed;
  23 |   border-radius: 10px;
  24 |   margin-bottom: 0.625rem;
  25 | }
  26 | 
  27 | li {
  28 |   text-decoration: none;
  29 |   list-style: none;
  30 | }
  31 | 
  32 | select {
  33 |   -o-appearance: none;
  34 |   -webkit-appearance: none;
  35 |   -moz-appearance: none;
  36 |   appearance: none;
  37 |   height: 13.33%;
  38 |   border-radius: 16px;
  39 |   padding: 0 1.5rem;
  40 | }
  41 | 
  42 | select option {
  43 |   font-size: 1.125rem;
  44 | }
  45 | 
  46 | .subTitle {
  47 |   width: 100%;
  48 |   height: 3.25rem;
  49 |   display: inline-block;
  50 |   font-size: 1.125rem;
  51 |   line-height: 3.375rem;
  52 |   margin-top: 1.375rem;
  53 | }
  54 | 
  55 | /*
  56 | ===========
  57 | loading
  58 | ===========
  59 | */
  60 | .l1 {
  61 |   display: flex;
  62 |   flex-direction: column;
  63 |   justify-content: normal;
  64 |   align-items: center;
  65 |   width: 100vw;
  66 |   height: 100vh;
  67 | }
  68 | .l1 img {
  69 |   width: 100%;
  70 | }
  71 | 
  72 | /* mobile(768px) labtop(1020px) / desktop(1024px) */
  73 | @media screen and (min-width: 47.25rem) {
  74 |   .l1 img {
  75 |     width: 37vw;
  76 |   }
  77 | }
  78 | /*
  79 | ===========
  80 | block
  81 | ===========
  82 | */
  83 | .b3 {
  84 |   width: 100%;
  85 |   height: 100%;
  86 |   display: none;
  87 |   flex-direction: column;
  88 |   align-items: center;
  89 |   text-align: center;
  90 |   background-color: #ffffff;
  91 |   border: 2px solid #053f28;
  92 |   border-radius: 20px;
  93 |   padding: 1.25rem;
  94 | }
  95 | .b3 .r1 .t2 {
  96 |   display: flex;
  97 |   flex-direction: column;
  98 |   justify-content: normal;
  99 |   align-items: center;
 100 |   width: 100%;
 101 |   height: 100%;
 102 | }
 103 | .b3 .r1 .t2 .subject {
 104 |   object-fit: contain;
 105 |   content: url("../imgs/result_character_subject.png");
 106 |   width: 90%;
 107 |   height: 1rem;
 108 |   margin-top: 2.5rem;
 109 | }
 110 | .b3 .r1 .t2 .movie-title {
 111 |   height: 1.25rem;
 112 |   margin-top: 1.6rem;
 113 | }
 114 | .b3 .r1 .t2 .movie-character {
 115 |   height: 1.875rem;
 116 |   margin-top: 1.375rem;
 117 | }
 118 | .b3 .r1 .t2 .character-img {
 119 |   width: 100%;
 120 |   padding: 0 1.25rem;
 121 |   object-fit: contain;
 122 |   margin-top: 2.375rem;
 123 | }
 124 | .b3 .r1 .c1 {
 125 |   display: inline-block;
 126 |   width: 100%;
 127 |   height: 3.25rem;
 128 |   font-size: 1.25rem;
 129 |   line-height: 1.875rem;
 130 |   font-weight: 400;
 131 |   margin-top: 1.75rem;
 132 | }
 133 | .b3 .r1 .f1 {
 134 |   display: flex;
 135 |   flex-direction: column;
 136 |   justify-content: center;
 137 |   align-items: center;
 138 |   width: 86.44%;
 139 |   margin-top: 1.3125rem;
 140 | }
 141 | .b3 .r1 .f2 {
 142 |   display: flex;
 143 |   flex-direction: row;
 144 |   justify-content: center;
 145 |   align-items: center;
 146 |   width: 100%;
 147 |   height: 3rem;
 148 |   background-color: #ffffff;
 149 |   border-radius: 16px;
 150 |   margin-top: 0.625rem;
 151 |   font-size: feature-mobile-font-size;
 152 |   line-height: feature-mobile-line-height;
 153 | }
 154 | .b3 .r1 .h1 {
 155 |   display: flex;
 156 |   flex-direction: row;
 157 |   justify-content: center;
 158 |   align-items: center;
 159 |   width: 86.1%;
 160 |   margin: 2.5625rem 0rem 2.5rem 0rem;
 161 | }
 162 | .b3 .r1 .h1 .chemi {
 163 |   display: flex;
 164 |   flex-direction: column;
 165 |   justify-content: normal;
 166 |   align-items: center;
 167 |   width: 100%;
 168 |   background-color: #ffffff;
 169 |   border: 2px solid #e5e5e5;
 170 |   border-radius: 10px;
 171 | }
 172 | .b3 .r1 .h1 .chemi .chemi-title {
 173 |   width: 100%;
 174 |   height: 2rem;
 175 |   display: inline-block;
 176 |   text-align: center;
 177 |   font-size: 0.875rem;
 178 |   line-height: 1.0625rem;
 179 |   margin-top: 1.5rem;
 180 | }
 181 | .b3 .r1 .h1 .chemi .character-img {
 182 |   width: 64.91%;
 183 |   object-fit: contain;
 184 | }
 185 | .b3 .r1 .h1 .chemi .movie-title {
 186 |   width: 67.21%;
 187 |   height: 1.75rem;
 188 |   display: inline-block;
 189 |   font-size: 0.75rem;
 190 |   line-height: 0.875rem;
 191 |   color: #4a4a4a;
 192 |   margin-top: 1rem;
 193 | }
 194 | .b3 .r1 .h1 .chemi .movie-character {
 195 |   width: 67.21%;
 196 |   height: 1.0625rem;
 197 |   display: inline-block;
 198 |   font-size: 0.875rem;
 199 |   line-height: 1.0625rem;
 200 |   color: #e10017;
 201 |   margin: 0.25rem 0rem 1.4375rem 0rem;
 202 | }
 203 | .b3 .r1 .h1 .good {
 204 |   margin-right: 0.625rem;
 205 | }
 206 | .b3 .likeMe,
 207 | .b3 .mostType {
 208 |   padding: 0 1.25rem 1.25rem 1.25rem;
 209 | }
 210 | .b3 .whiteBox {
 211 |   width: 100%;
 212 |   height: 100%;
 213 |   background-color: #ffffff;
 214 |   border: 2px solid #e5e5e5;
 215 |   border-radius: 16px;
 216 |   margin-top: 0.625rem;
 217 | }
 218 | .b3 .whiteBox .movie-title {
 219 |   font-size: 0.875rem;
 220 |   margin-top: 2.5rem;
 221 | }
 222 | .b3 .whiteBox .movie-character {
 223 |   font-size: 1.125rem;
 224 |   margin-top: 0.4375rem;
 225 | }
 226 | .b3 .whiteBox .imgAndGraph {
 227 |   display: flex;
 228 |   flex-direction: column;
 229 |   justify-content: center;
 230 |   align-items: center;
 231 | }
 232 | .b3 .whiteBox img {
 233 |   width: 9.25rem;
 234 |   margin: 1rem 0 1.875rem 0;
 235 | }
 236 | 
 237 | .circular {
 238 |   height: 160px;
 239 |   width: 160px;
 240 |   position: relative;
 241 |   top: 0px;
 242 |   margin-bottom: 3rem;
 243 | }
 244 | .circular .inner,
 245 | .circular .outer,
 246 | .circular .circle {
 247 |   position: absolute;
 248 |   z-index: 6;
 249 |   height: 100%;
 250 |   width: 100%;
 251 |   border-radius: 100%;
 252 | }
 253 | .circular .inner {
 254 |   top: 50%;
 255 |   left: 50%;
 256 |   height: 136px;
 257 |   width: 136px;
 258 |   margin: -68px 0 0 -68px;
 259 |   background-color: #ffffff;
 260 |   border-radius: 100%;
 261 | }
 262 | .circular .circle {
 263 |   z-index: 1;
 264 |   box-shadow: none;
 265 | }
 266 | .circular .numb {
 267 |   position: absolute;
 268 |   left: 50%;
 269 |   transform: translate(-50%, -50%);
 270 |   z-index: 10;
 271 |   color: #222222;
 272 |   white-space: nowrap;
 273 |   top: 45%;
 274 |   font-size: 2rem;
 275 | }
 276 | .circular .numb-title {
 277 |   position: absolute;
 278 |   left: 50%;
 279 |   transform: translate(-50%, -50%);
 280 |   z-index: 10;
 281 |   color: #222222;
 282 |   white-space: nowrap;
 283 |   top: 65%;
 284 |   font-size: 0.875rem;
 285 | }
 286 | .circular .bar {
 287 |   position: absolute;
 288 |   height: 100%;
 289 |   width: 100%;
 290 |   background: #e5e5e5;
 291 |   border-radius: 100%;
 292 |   clip: rect(0px, 160px, 160px, 80px);
 293 | }
 294 | 
 295 | .circle {
 296 |   opacity: 0;
 297 |   transition: all 0.5s ease;
 298 | }
 299 | .circle .bar .progress {
 300 |   position: absolute;
 301 |   height: 100%;
 302 |   width: 100%;
 303 |   border-radius: 100%;
 304 |   clip: rect(0px, 80px, 160px, 0px);
 305 | }
 306 | .circle .progress,
 307 | .circle .dot span,
 308 | .circle .fixed-dot span {
 309 |   background: #08623e;
 310 | }
 311 | .circle .left .progress {
 312 |   z-index: 1;
 313 |   animation: left 2s linear both;
 314 |   animation-play-state: paused;
 315 | }
 316 | .circle .left .progress.show,
 317 | .circle .right .progress.show,
 318 | .circle .dot.show {
 319 |   animation-play-state: running;
 320 | }
 321 | .circle .right {
 322 |   z-index: 3;
 323 |   transform: rotate(180deg);
 324 | }
 325 | .circle .right .progress {
 326 |   animation: right 2s linear both;
 327 |   animation-delay: 2s;
 328 |   animation-play-state: paused;
 329 | }
 330 | .circle .fixed-dot {
 331 |   z-index: 20;
 332 |   position: absolute;
 333 |   left: 50%;
 334 |   top: 50%;
 335 |   width: 50%;
 336 |   height: 12px;
 337 |   margin-top: -6px;
 338 |   animation: dot 4s linear both;
 339 |   transform-origin: 0% 50%;
 340 |   animation-play-state: paused;
 341 | }
 342 | .circle .dot {
 343 |   z-index: 2;
 344 |   position: absolute;
 345 |   left: 50%;
 346 |   top: 50%;
 347 |   width: 50%;
 348 |   height: 12px;
 349 |   margin-top: -6px;
 350 |   animation: dot 4s linear both;
 351 |   transform-origin: 0% 50%;
 352 |   animation-play-state: paused;
 353 | }
 354 | .circle .fixed-dot span,
 355 | .circle .dot span {
 356 |   position: absolute;
 357 |   right: 0;
 358 |   width: 12px;
 359 |   height: 12px;
 360 |   border-radius: 100%;
 361 | }
 362 | 
 363 | .circle.show {
 364 |   opacity: 1;
 365 |   transform: none;
 366 | }
 367 | 
 368 | @keyframes left {
 369 |   100% {
 370 |     transform: rotate(180deg);
 371 |   }
 372 | }
 373 | @keyframes right {
 374 |   100% {
 375 |     transform: rotate(180deg);
 376 |   }
 377 | }
 378 | @keyframes dot {
 379 |   0% {
 380 |     transform: rotate(-90deg);
 381 |   }
 382 |   50% {
 383 |     transform: rotate(90deg);
 384 |     z-index: 4;
 385 |   }
 386 |   100% {
 387 |     transform: rotate(270deg);
 388 |     z-index: 4;
 389 |   }
 390 | }
 391 | .b3 .s1 {
 392 |   height: 100%;
 393 | }
 394 | .b3 .s1 .s2 {
 395 |   width: 83.72%;
 396 |   height: 2.5rem;
 397 |   display: flex;
 398 |   flex-direction: row;
 399 |   justify-content: center;
 400 |   margin: 0.5rem 0 2.8025rem 0;
 401 | }
 402 | .b3 .s1 .s2 li {
 403 |   width: 20%;
 404 |   height: 100%;
 405 | }
 406 | .b3 .s1 .s2 li a {
 407 |   display: inline-block;
 408 |   width: 100%;
 409 |   height: 100%;
 410 |   background-color: rgba(0, 0, 0, 0);
 411 | }
 412 | .b3 .s1 .s2 li .kakaotalk {
 413 |   background-image: url("../imgs/share-icons/share_kakaotalk_Frame85.png");
 414 | }
 415 | .b3 .s1 .s2 li .facebook {
 416 |   background-image: url("../imgs/share-icons/share_facebook_Frame86.png");
 417 | }
 418 | .b3 .s1 .s2 li .twitter {
 419 |   background-image: url("../imgs/share-icons/share_twitter_Frame87.png");
 420 | }
 421 | .b3 .s1 .s2 li .band {
 422 |   background-image: url("../imgs/share-icons/share_band_Frame88.png");
 423 | }
 424 | .b3 .s1 .s2 li .instagram {
 425 |   background-image: url("../imgs/share-icons/share_instagram_Frame89.png");
 426 | }
 427 | .b3 .m1 {
 428 |   height: 100%;
 429 | }
 430 | .b3 .m1 .m2 {
 431 |   width: 55.93%;
 432 |   height: 100%;
 433 |   display: flex;
 434 |   flex-direction: column;
 435 |   align-items: center;
 436 |   margin: 0.375rem 0rem 1.875rem 0rem;
 437 | }
 438 | .b3 .m1 .m2 li {
 439 |   width: 100%;
 440 |   height: 100%;
 441 |   margin-bottom: 0.625rem;
 442 | }
 443 | .b3 .m1 .m2 li img {
 444 |   width: 100%;
 445 |   height: 14.875rem;
 446 |   object-fit: contain;
 447 | }
 448 | .b3 .restart {
 449 |   background-image: url("../imgs/restartBtn_Frame134.png");
 450 |   background-size: contain;
 451 |   width: 100%;
 452 |   height: 3.5rem;
 453 |   margin: 2rem 0 2.8125rem 0;
 454 | }
 455 | .b3 .communication .add-comment {
 456 |   display: flex;
 457 |   flex-direction: column;
 458 |   justify-content: normal;
 459 |   align-items: center;
 460 |   width: 100%;
 461 |   height: 30.14%;
 462 | }
 463 | .b3 .communication .add-comment .nickname {
 464 |   width: 89%;
 465 |   height: 2.75rem;
 466 |   margin: 2.5rem 1.25rem 0.625rem 1.25rem;
 467 |   display: flex;
 468 | }
 469 | .b3 .communication .add-comment .commentArea {
 470 |   width: 100%;
 471 |   position: relative;
 472 |   display: inlsine-block;
 473 | }
 474 | .b3 .communication .add-comment .commentArea .comment-area {
 475 |   width: 89%;
 476 |   height: 13.5rem;
 477 |   padding-top: 0.5rem;
 478 |   resize: none;
 479 | }
 480 | .b3 .communication .add-comment .commentArea span {
 481 |   position: absolute;
 482 |   bottom: 20px;
 483 |   right: 40px;
 484 | }
 485 | .b3 .communication .add-comment .commentArea #comment_count {
 486 |   font-size: 0.625em;
 487 |   color: #a8a8a8;
 488 | }
 489 | .b3 .communication .add-comment .add-comment-pw .password {
 490 |   width: 89%;
 491 |   height: 2.75rem;
 492 |   margin: 0.6875rem 0 0.625rem 0;
 493 | }
 494 | .b3 .communication .add-comment .add-comment-pw .wrtie-comment-btn {
 495 |   background-image: url("../imgs/writeCommentBtn_Frame140.png");
 496 |   background-size: contain;
 497 |   width: 70vw;
 498 |   height: 5vh;
 499 | }
 500 | .b3 .communication .show-comment {
 501 |   display: flex;
 502 |   flex-direction: column;
 503 |   justify-content: normal;
 504 |   align-items: center;
 505 |   width: 100%;
 506 |   height: 63.7%;
 507 |   margin: 2.0625rem 0 0.875rem 0;
 508 | }
 509 | .b3 .communication .show-comment .comment {
 510 |   display: flex;
 511 |   flex-direction: column;
 512 |   justify-content: normal;
 513 |   align-items: center;
 514 |   width: 90.15%;
 515 |   height: 20%;
 516 |   border: 2px solid #ededed;
 517 |   border-radius: 10px;
 518 |   margin-bottom: 0.75rem;
 519 | }
 520 | .b3 .communication .show-comment .comment .comment_header {
 521 |   width: 100%;
 522 |   height: 43.5%;
 523 |   display: flex;
 524 |   flex-direction: row;
 525 |   justify-content: space-between;
 526 |   box-sizing: border-box;
 527 |   border-radius: 10px 10px 0px 0px;
 528 |   background-color: #f5f5f5;
 529 | }
 530 | .b3 .communication .show-comment .comment .comment_header .info {
 531 |   display: flex;
 532 |   flex-direction: column;
 533 | }
 534 | .b3 .communication .show-comment .comment .comment_header .info .commentNickname {
 535 |   display: flex;
 536 |   align-items: start;
 537 |   margin: 1.25rem 0rem 0.6875rem 1.8125rem;
 538 |   color: #00010c;
 539 |   font-size: 1rem;
 540 |   line-height: 19px;
 541 | }
 542 | .b3 .communication .show-comment .comment .comment_header .info .commentMBTI {
 543 |   display: flex;
 544 |   align-items: center;
 545 |   justify-content: flex-start;
 546 |   margin: 0rem 0rem 1.3125rem 1.8125rem;
 547 |   color: #8a8a8a;
 548 |   font-size: 0.83rem;
 549 | }
 550 | .b3 .communication .show-comment .comment .comment_header .btn {
 551 |   display: flex;
 552 |   flex-direction: row;
 553 |   justify-content: space-evenly;
 554 |   align-items: center;
 555 |   width: 6rem;
 556 | }
 557 | .b3 .communication .show-comment .comment .comment_header .btn .del-reply-btn {
 558 |   display: flex;
 559 |   flex-direction: column;
 560 |   justify-content: row-reverse;
 561 |   align-items: center;
 562 |   width: 1.3rem;
 563 |   height: 1.3rem;
 564 |   background-color: #f5f5f5;
 565 |   background-size: 100% 100%;
 566 |   background-image: url("../imgs/replyDeleteBtn_Frame896.png");
 567 |   background-size: contain;
 568 | }
 569 | .b3 .communication .show-comment .comment .comment_header .btn .report-reply-btn {
 570 |   display: flex;
 571 |   flex-direction: column;
 572 |   justify-content: row-reverse;
 573 |   align-items: center;
 574 |   width: 1.3rem;
 575 |   height: 1.3rem;
 576 |   background-color: #f5f5f5;
 577 |   background-size: 100% 100%;
 578 |   background-image: url("../imgs/replyReporteBtn_icon.png");
 579 |   background-size: contain;
 580 | }
 581 | .b3 .communication .show-comment .comment_content {
 582 |   width: 100%;
 583 |   height: 100%;
 584 |   display: flex;
 585 |   flex-direction: column;
 586 |   border-radius: 0px 0px 10px 10px;
 587 |   background-color: #ffffff;
 588 | }
 589 | .b3 .communication .show-comment .comment_content .content {
 590 |   font-size: 1rem;
 591 |   color: #00010c;
 592 |   background-color: #ffffff;
 593 |   margin: 1.25rem 1.25rem 0rem 1.8125rem;
 594 |   display: flex;
 595 |   justify-content: flex-start;
 596 |   text-align: left;
 597 |   word-break: break-all;
 598 |   /* word-break: normal; */
 599 | }
 600 | .b3 .communication .show-comment .createdDate {
 601 |   display: flex;
 602 |   flex-direction: row;
 603 |   justify-content: flex-start;
 604 |   align-items: center;
 605 |   color: #8a8a8a;
 606 |   font-size: 0.75rem;
 607 |   margin: 0.6875rem 1.25rem 1.3125rem 1.8125rem;
 608 | }
 609 | .b3 .communication .comment-pages {
 610 |   background-color: #f8f8f8;
 611 |   width: 72%;
 612 |   height: 1.75rem;
 613 |   display: flex;
 614 |   justify-content: space-between;
 615 |   margin-bottom: 2.5rem;
 616 | }
 617 | .b3 .communication .comment-pages #index_left_btn_active {
 618 |   width: 20%;
 619 |   background-image: url("../imgs/index_left_btn_active.png");
 620 |   background-size: contain;
 621 |   background-color: #f8f8f8;
 622 |   margin-top: 0;
 623 | }
 624 | .b3 .communication .comment-pages #index_left_btn_not_active {
 625 |   width: 20%;
 626 |   background-image: url("../imgs/index_left_btn_not_active.png");
 627 |   background-size: contain;
 628 |   background-color: #f8f8f8;
 629 |   margin-top: 0;
 630 |   cursor: default;
 631 | }
 632 | .b3 .communication .comment-pages #index {
 633 |   display: flex;
 634 |   flex-direction: column;
 635 |   justify-content: space-between;
 636 |   align-items: center;
 637 |   font-size: 1rem;
 638 |   background-color: #f8f8f8;
 639 |   color: #2a2a2a;
 640 | }
 641 | .b3 .communication .comment-pages #index_right_btn_active {
 642 |   width: 20%;
 643 |   background-image: url("../imgs/index_right_btn_active.png");
 644 |   background-size: contain;
 645 |   background-color: #f8f8f8;
 646 |   margin-top: 0;
 647 | }
 648 | .b3 .communication .comment-pages #index_right_btn_not_active {
 649 |   width: 20%;
 650 |   background-image: url("../imgs/index_right_btn_not_active.png");
 651 |   background-size: contain;
 652 |   background-color: #f8f8f8;
 653 |   margin-top: 0;
 654 | }
 655 | 
 656 | .report-modal {
 657 |   position: fixed;
 658 |   top: 0;
 659 |   left: 0;
 660 |   width: 100%;
 661 |   height: 90%;
 662 |   background: transparent;
 663 |   display: grid;
 664 |   place-items: center;
 665 |   visibility: hidden;
 666 |   z-index: 10;
 667 | }
 668 | .report-modal .report-modal-container {
 669 |   display: flex;
 670 |   flex-direction: column;
 671 |   justify-content: normal;
 672 |   align-items: center;
 673 |   width: 72vw;
 674 |   height: 29rem;
 675 |   background: #ffffff;
 676 |   border: 2px solid #053f28;
 677 |   border-radius: 20px;
 678 |   text-align: center;
 679 |   padding: 1.25rem;
 680 | }
 681 | .report-modal .report-modal-container .input-area {
 682 |   width: 100%;
 683 |   height: 24rem;
 684 |   background-color: #f8f8f8;
 685 |   border: 2px solid #ededed;
 686 |   border-radius: 20px;
 687 | }
 688 | .report-modal .report-modal-container h2 {
 689 |   margin-top: 1rem;
 690 | }
 691 | .report-modal .report-modal-container select {
 692 |   width: 88.14%;
 693 |   font-size: 1rem;
 694 |   margin-top: 1rem;
 695 |   margin-bottom: 1rem;
 696 |   background-color: #ffffff;
 697 | }
 698 | .report-modal .report-modal-container .input-area .reportArea {
 699 |   height: 55%;
 700 | }
 701 | .report-modal .report-modal-container #description {
 702 |   width: 88.14%;
 703 |   height: 13.5rem;
 704 |   font-size: 0.8rem;
 705 |   border-radius: 20px;
 706 |   border: 2px solid #e8e8e8;
 707 |   padding: 1.25rem;
 708 |   word-break: break-all;
 709 |   resize: none;
 710 | }
 711 | .report-modal .report-modal-container #description::placeholder {
 712 |   color: #a8a8a8;
 713 | }
 714 | .report-modal .report-modal-container #report_count {
 715 |   position: absolute;
 716 |   bottom: 255px;
 717 |   right: 150px;
 718 |   font-size: 0.625em;
 719 |   color: #a8a8a8;
 720 | }
 721 | 
 722 | .open-modal {
 723 |   visibility: visible;
 724 |   z-index: 10;
 725 | }
 726 | 
 727 | .b3 .communication .add-comment .nickname::placeholder,
 728 | .comment-area::placeholder,
 729 | .password::placeholder {
 730 |   color: #a8a8a8;
 731 | }
 732 | 
 733 | .b3 .communication .add-comment .nickname,
 734 | .comment-area,
 735 | .password {
 736 |   background: #ffffff;
 737 |   border: 2px solid #e8e8e8;
 738 |   border-radius: 10px;
 739 |   font-size: 0.75rem;
 740 |   padding-left: 1.25rem;
 741 | }
 742 | 
 743 | .btns {
 744 |   margin-top: 1rem;
 745 | }
 746 | 
 747 | button#cancle,
 748 | button#submit {
 749 |   width: 29.62%;
 750 |   height: 2.625rem;
 751 |   font-size: 1rem;
 752 |   cursor: pointer;
 753 | }
 754 | 
 755 | button#cancle {
 756 |   background: linear-gradient(93.11deg, #dadcdd 4.01%, #bec0c2 97.86%);
 757 |   box-shadow: 0px 6px 0px #505050;
 758 |   border: 2px solid #6f6f70;
 759 |   border-radius: 80px;
 760 |   margin-right: 0.75rem;
 761 | }
 762 | 
 763 | button#submit {
 764 |   background: linear-gradient(93.11deg, #f7202f 4.01%, #c11723 97.86%);
 765 |   box-shadow: 0px 6px 0px #56070c;
 766 |   border: 4px solid #9b151e;
 767 |   border-radius: 80px;
 768 |   color: #ffffff;
 769 | }
 770 | 
 771 | .p1 {
 772 |   width: 100%;
 773 |   height: 0.625rem;
 774 |   background: linear-gradient(to right, #ededed 50%, rgba(255, 255, 255, 0) 0%) repeat-x bottom;
 775 |   background-size: 16px 2px;
 776 |   margin-top: 2.3125rem;
 777 | }
 778 | 
 779 | /*
 780 | ===========
 781 | media
 782 | ===========
 783 | */
 784 | /* width < 320px (Galaxy S5, iPhone 5, iPhone 6/7/8, fold)*/
 785 | @media screen and (max-width: 23.4375rem) {
 786 |   /* ----------------- conclusion ----------------- */
 787 |   .b3 .r1 .c1 {
 788 |     font-size: 1.1rem;
 789 |   }
 790 |   .b3 .r1 .f2 {
 791 |     font-size: 0.8rem;
 792 |   }
 793 | 
 794 |   .b3 .s1 span,
 795 | .b3 .m1 span,
 796 | .b3 .likeMe span,
 797 | .b3 .mostType span {
 798 |     font-size: 1.1rem;
 799 |   }
 800 | }
 801 | /* mobile(768px) labtop(1020px) / desktop(1024px) */
 802 | @media screen and (min-width: 47.25rem) {
 803 |   /* ----------------- Global ----------------- */
 804 |   body {
 805 |     padding: 0;
 806 |   }
 807 | 
 808 |   section {
 809 |     margin: 0.625rem 3.75rem;
 810 |     border-width: 4px;
 811 |     border-radius: 32px;
 812 |   }
 813 | 
 814 |   .subTitle {
 815 |     font-size: 1.75rem;
 816 |     margin-top: 3rem;
 817 |   }
 818 | 
 819 |   /* ----------------- block ----------------- */
 820 |   .b3 {
 821 |     width: 716px;
 822 |     border-width: 6px;
 823 |     border-radius: 40px;
 824 |     margin: 5rem 0;
 825 |     padding: 3.75rem;
 826 |   }
 827 |   .b3 .r1 .t2 .subject {
 828 |     height: 2rem;
 829 |     margin-top: 4rem;
 830 |   }
 831 |   .b3 .r1 .t2 .movie-title {
 832 |     height: 3rem;
 833 |     margin-top: 2.5rem;
 834 |   }
 835 |   .b3 .r1 .t2 .movie-character {
 836 |     height: 4rem;
 837 |   }
 838 |   .b3 .r1 .t2 .character-img {
 839 |     padding: 0 3.75rem;
 840 |   }
 841 |   .b3 .r1 .c1 {
 842 |     height: 100%;
 843 |     line-height: 2.625rem;
 844 |     font-size: 2rem;
 845 |     margin-top: 2.375rem;
 846 |   }
 847 |   .b3 .r1 .f1 {
 848 |     width: 79.86%;
 849 |   }
 850 |   .b3 .r1 .f2 {
 851 |     height: 3.5rem;
 852 |     font-size: 1.125rem;
 853 |     line-height: 1.35rem;
 854 |     font-weight: 300;
 855 |   }
 856 |   .b3 .r1 .h1 {
 857 |     width: 79.86%;
 858 |     margin: 4.125rem 0 3.75rem 0;
 859 |   }
 860 |   .b3 .r1 .h1 .chemi {
 861 |     height: 100%;
 862 |     border-radius: 16px;
 863 |   }
 864 |   .b3 .r1 .h1 .chemi .chemi-title {
 865 |     width: 100%;
 866 |     height: 3.25rem;
 867 |     font-size: 1.5rem;
 868 |     line-height: 1.8125rem;
 869 |     margin-top: 2.5rem;
 870 |   }
 871 |   .b3 .r1 .h1 .chemi .character-img {
 872 |     width: 64.91%;
 873 |     height: 10.75rem;
 874 |     margin-top: 0.625rem;
 875 |   }
 876 |   .b3 .r1 .h1 .chemi .movie-title {
 877 |     width: 100%;
 878 |     height: 1.375rem;
 879 |     font-size: 1rem;
 880 |     line-height: 1.1875rem;
 881 |     margin-top: 2.375rem;
 882 |   }
 883 |   .b3 .r1 .h1 .chemi .movie-character {
 884 |     width: 100%;
 885 |     height: 2.125rem;
 886 |     font-size: 1.625rem;
 887 |     line-height: 1.9375rem;
 888 |     margin-top: 0.75rem;
 889 |     margin-bottom: 2.25rem;
 890 |   }
 891 |   .b3 .r1 .h1 .good {
 892 |     margin-right: 1.25rem;
 893 |   }
 894 |   .b3 .communication .add-comment .nickname {
 895 |     width: 79.86%;
 896 |     height: 3.25rem;
 897 |     margin: 2.5rem 3.7rem 1.25rem 3.7rem;
 898 |   }
 899 |   .b3 .communication .add-comment .commentArea .comment-area {
 900 |     width: 79.86%;
 901 |   }
 902 |   .b3 .communication .add-comment .commentArea span {
 903 |     position: absolute;
 904 |     bottom: 20px;
 905 |     right: 90px;
 906 |   }
 907 |   .b3 .communication .add-comment .commentArea #comment_count {
 908 |     font-size: 0.625em;
 909 |   }
 910 |   .b3 .communication .add-comment .add-comment-pw {
 911 |     display: flex;
 912 |     flex-direction: row;
 913 |     width: 79.86%;
 914 |     /* align-items: start; */
 915 |   }
 916 |   .b3 .communication .add-comment .add-comment-pw .password {
 917 |     display: flex;
 918 |     flex-direction: row;
 919 |     justify-content: flex-start;
 920 |     align-items: center;
 921 |     width: 200vw;
 922 |     height: 3.25rem;
 923 |     margin: 1.25rem 1.25rem 0.625rem 0;
 924 |   }
 925 |   .b3 .communication .add-comment .add-comment-pw .wrtie-comment-btn {
 926 |     display: flex;
 927 |     flex-direction: row;
 928 |     justify-content: center;
 929 |     align-items: center;
 930 |     height: 3.25rem;
 931 |     background-image: url("../imgs/writeCommentBtn_Frame69.png");
 932 |     margin-top: 1.25rem;
 933 |   }
 934 |   .b3 .communication .show-comment {
 935 |     margin: 4.125rem 0 0.875rem 0;
 936 |   }
 937 |   .b3 .communication .show-comment .comment {
 938 |     border-radius: 20px;
 939 |     margin-bottom: 1.6875rem;
 940 |   }
 941 |   .b3 .communication .show-comment .comment .comment_header {
 942 |     border-radius: 20px 20px 0px 0px;
 943 |   }
 944 |   .b3 .communication .show-comment .comment .comment_content {
 945 |     border-radius: 0px 0px 20px 20px;
 946 |   }
 947 |   .b3 .communication .show-comment .comment .add-reply {
 948 |     display: flex;
 949 |     flex-direction: row;
 950 |     justify-content: flex-start;
 951 |     align-items: center;
 952 |   }
 953 |   .b3 .communication .show-comment .comment .add-reply .write-reply-btn {
 954 |     width: 17.02%;
 955 |     height: 3rem;
 956 |     background-image: url("../imgs/desktop/desktop_writeCommentBtn_Frame69.png");
 957 |     background-color: transparent;
 958 |     margin: 1.125rem 1.0625rem 0 0;
 959 |   }
 960 |   .b3 .communication .show-comment .comment .add-reply .comment-reply-area {
 961 |     margin: 1.25rem 1.25rem 1.125rem 1.0625rem;
 962 |   }
 963 |   .b3 .communication .comment-pages {
 964 |     width: 40%;
 965 |   }
 966 |   .b3 .likeMe,
 967 | .b3 .mostType {
 968 |     padding: 0 3.75rem 3.75rem 3.75rem;
 969 |   }
 970 |   .b3 .whiteBox .imgAndGraph {
 971 |     flex-direction: row;
 972 |     justify-content: center;
 973 |   }
 974 |   .b3 .whiteBox .movie-title {
 975 |     font-size: 1rem;
 976 |     margin-top: 2.5rem;
 977 |   }
 978 |   .b3 .whiteBox .movie-character {
 979 |     font-size: 1.5rem;
 980 |     margin-top: 0.5rem;
 981 |   }
 982 |   .b3 .whiteBox img {
 983 |     margin: 1rem 2.5rem 3.75rem 0;
 984 |   }
 985 |   .b3 .s1 .s2 {
 986 |     width: 79.86%;
 987 |     height: 4rem;
 988 |     margin: 1.75rem 0 4.25rem 0;
 989 |     padding: 0 1.875rem;
 990 |   }
 991 |   .b3 .m1 {
 992 |     height: 100%;
 993 |   }
 994 |   .b3 .m1 .m2 {
 995 |     width: 79.86%;
 996 |     height: 13.125rem;
 997 |     display: flex;
 998 |     flex-direction: row;
 999 |     justify-content: space-between;
1000 |     margin-top: 1.625rem;
1001 |     margin-bottom: 3.75rem;
1002 |   }
1003 |   .b3 .m1 .m2 li {
1004 |     width: 30%;
1005 |     margin-bottom: 0;
1006 |   }
1007 |   .b3 .restart {
1008 |     width: 63.75%;
1009 |     height: 5.875rem;
1010 |     margin: 2.5rem 0;
1011 |   }
1012 | 
1013 |   .circular {
1014 |     top: -20px;
1015 |     margin-bottom: 0;
1016 |   }
1017 | 
1018 |   .p1 {
1019 |     background-size: 28px 4px;
1020 |     border-width: 4px;
1021 |     margin-top: 62px;
1022 |   }
1023 | 
1024 |   .b3 .communication .add-comment .nickname,
1025 | .comment-area,
1026 | .password {
1027 |     border-width: 3px;
1028 |     border-radius: 20px;
1029 |     font-size: var(--placeholder-desktop-font-size);
1030 |   }
1031 | 
1032 |   .report-modal .report-modal-container {
1033 |     width: 36.9375rem;
1034 |     height: 33rem;
1035 |     border-width: 6px;
1036 |     border-radius: 40px;
1037 |   }
1038 |   .report-modal .report-modal-container .input-area {
1039 |     height: 27rem;
1040 |     border-radius: 32px;
1041 |   }
1042 |   .report-modal .report-modal-container select {
1043 |     margin-top: 2rem;
1044 |   }
1045 | }
1046 | 
1047 | /*# sourceMappingURL=result.css.map */
1048 | 


--------------------------------------------------------------------------------
/css/result.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../scss/result.scss","../scss/variable.scss"],"names":[],"mappings":"AAwCA;AAAA;AAAA;AAAA;AAAA;AAKA;ECjBE;EACA,gBAFmD;EAGnD,iBDgBc;ECfd;EDgBA;;;AAGF;ECtBE;EACA,gBAFmD;EAGnD,iBDqBc;ECpBd;EDqBA;EACA;EACA,kBCpDO;EDqDP;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA,WA5EuB;EA6EvB,aAvDyB;EAwDzB;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAMA;ECjEE;EACA,gBAFmD;EAGnD,iBDgEc;EC/Dd;EDgEA;EACA;;AAEA;EACE;;;AAIJ;AACA;EACE;IACE;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC1HO;ED2HP;EACA;EACA;;AAGE;ECpGF;EACA,gBAFmD;EAGnD,iBDmGkB;EClGlB;EDmGI;EACA;;AAEA;EC/EJ;EACA;EDgFM;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA,WAhKwB;EAiKxB,aA3I0B;EA4I1B,aAlI0B;EAmI1B;;AAGF;EC5IF;EACA,gBAFmD;EAGnD,iBAH2B;EAI3B;ED2II;EACA;;AAGF;EClJF;EACA,gBDkJ0B;ECjJ1B,iBDiJkB;EChJlB;EDiJI;EACA;EACA,kBClLG;EDmLH;EACA;EACA;EACA;;AAGF;EC7JF;EACA,gBD6J0B;EC5J1B,iBD4JkB;EC3JlB;ED4JI;EACA;;AAEA;EClKJ;EACA,gBAFmD;EAGnD,iBDiKoB;EChKpB;EDiKM;EACA,kBCjMC;EDkMD;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,WAtMqB;EAuMrB,aAjLuB;EAkLvB;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA,WAnN2B;EAoN3B,aA9L6B;EA+L7B,OC7MD;ED8MC;;AAGF;EACE;EACA;EACA;EACA,WA5N+B;EA6N/B,aAvMiC;EAwMjC,OC3MJ;ED4MI;;AAIJ;EACE;;AAKN;AAAA;EAEE;;AAGF;EACE;EACA;EACA,kBCvPK;EDwPL;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EC1OF;EACA,gBD0O0B;ECzO1B,iBDyOkB;ECxOlB;;AD2OE;EACE;EACA;;;AAKN;EACE,QA9Oc;EA+Od,OA/Oc;EAgPd;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,QAhQS;EAiQT,OAjQS;EAkQT;EACA,kBCxSK;EDySL;;AAGF;EACE;EACA;;AAGF;ECtPA;EACA;EACA;EACA;EACA,OA1CO;EA2CP;EDmPE;EACA;;AAGF;EC5PA;EACA;EACA;EACA;EACA,OA1CO;EA2CP;EDyPE;EACA;;AAGF;EACE;EACA;EACA;EACA,YC7TI;ED8TJ;EACA;;;AAIJ;EACE;EACA;;AAGE;EACE;EACA;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EAGE,YCxUK;;AD2UP;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;;AAEA;EACE;EACA,iBAvUa;EAwUb;;AAIJ;EC9SA,SD+Se;EC9Sf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADySA;EClTA,SDmTe;EClTf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD6SA;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAKF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMR;ECzbA;EACA;ED0bE;EACA;EACA;;AAIA;ECtdF;EACA,gBAFmD;EAGnD,iBDqdkB;ECpdlB;EDqdI;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA,OCzgBF;;AD8gBA;EACE;EACA;EACA;;AAGF;EC5eN;EACA;ED6eQ;EACA;;AAKN;ECzgBF;EACA,gBAFmD;EAGnD,iBDwgBkB;ECvgBlB;EDwgBI;EACA;EACA;;AAEA;EC/gBJ;EACA,gBAFmD;EAGnD,iBD8gBoB;EC7gBpB;ED8gBM;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBC1jBD;;AD4jBC;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA,OC/iBL;EDgjBK,WA7jBe;EA8jBf;;AAGF;EACE;EACA;EACA;EACA;EACA,OCrkBN;EDskBM,WAxkBc;;AA4kBlB;ECxjBR;EACA,gBDwjBsC;ECvjBtC,iBDujBwB;ECtjBxB;EDujBU;;AAEA;EC5jBV;EACA,gBAFmD;EAGnD,iBD2jB0B;EC1jB1B;EAkDA;EACA;EACA,kBAlFO;EAmFP;EAnCA;EACA;;AD4iBU;EClkBV;EACA,gBAFmD;EAGnD,iBDikB0B;EChkB1B;EAkDA;EACA;EACA,kBAlFO;EAmFP;EAnCA;EACA;;ADqjBI;EACE;EACA;EACA;EACA;EACA;EACA,kBC7mBC;;AD+mBD;EACE,WAvmBmB;EAwmBnB,OC3lBD;ED4lBC,kBClnBD;EDmnBC;EACA;EACA;EACA;EAEA;AACA;;AAIJ;ECjmBJ;EACA,gBDimBgC;EChmBhC,iBDgmBoB;EC/lBpB;EDgmBM,OCrnBA;EDsnBA,WA3nB6B;EA4nB7B;;AAIJ;EACE,kBCpoBG;EDqoBH;EACA;EACA;EACA;EACA;;AAEA;ECrjBJ;EACA;EACA;EACA,kBAzFO;EA0FP;;ADqjBI;ECzjBJ;EACA;EACA;EACA,kBAzFO;EA0FP;EDujBM;;AAGF;EC1nBJ;EACA,gBAFmD;EAGnD,iBDynBoB;ECxnBpB;EDynBM,WA/oBqB;EAgpBrB,kBCvpBC;EDwpBD,OCtoBC;;ADyoBH;ECrkBJ;EACA;EACA;EACA,kBAzFO;EA0FP;;ADqkBI;ECzkBJ;EACA;EACA;EACA,kBAzFO;EA0FP;;;AD4kBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;ECxpBA;EACA,gBAFmD;EAGnD,iBDupBgB;ECtpBhB;EDupBE;EACA;EACA,YCxrBK;EDyrBL;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,kBC/rBG;EDgsBH;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,kBC/sBG;;ADktBL;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,OCztBE;;AD4tBJ;EACE;EACA;EACA;EACA;EACA,OCjuBE;;;ADsuBR;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE,OC9uBM;;;ADivBR;AAAA;AAAA;EAGE,YC7vBO;ED8vBP;EACA;EACA,WAtvBsB;EAuvBtB;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EC7uBE;EACA;EACA;EACA;ED4uBA;;;AAGF;EC3uBE;EACA;EACA;EACA;ED0uBA,OCvxBO;;;AD0xBT;EACE;EACA;EACA;EAEA;EACA;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACE;EAEE;IACE,WA1xB2B;;EA6xB7B;IACE,WA7xBwB;;;EAiyB5B;AAAA;AAAA;AAAA;IAIE,WApyBwB;;;AAwyB5B;AACA;AACE;EACA;IACE;;;EAGF;IACE;IACA;IACA;;;EAGF;IACE,WA1zBsB;IA2zBtB;;;AAGF;EACA;IACE;IACA;IACA;IACA;IACA;;EAII;IACE;IACA;;EAEF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAIJ;IACE;IACA,aAt1ByB;IAu1BzB,WAl2BuB;IAm2BvB;;EAGF;IACE,OAx2Bc;;EA22BhB;IACE;IACA,WA32BoB;IA42BpB,aA31BsB;IA41BtB,aAv1BsB;;EA01BxB;IACE,OAn3Bc;IAo3Bd;;EAEA;IACE;IACA;;EAEA;IACE;IACA;IACA,WA13BoB;IA23BpB,aA12BsB;IA22BtB;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA,aAv3B4B;IAw3B5B;;EAGF;IACE;IACA;IACA,WA94B8B;IA+4B9B,aA93BgC;IA+3BhC;IACA;;EAIJ;IACE;;EAOF;IACE;IACA;IACA;;EAIA;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAIJ;IACE;IACA;IACA;AACA;;EAEA;IC76BR;IACA,gBD66BoC;IC56BpC,iBD46BwB;IC36BxB;ID46BU;IACA;IACA;;EAGF;ICp7BR;IACA,gBDo7BgC;ICn7BhC,iBDm7BwB;ICl7BxB;IDm7BU;IACA;IACA;;EAKN;IACE;;EAEA;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IC58BR;IACA,gBD48BoC;IC38BpC,iBD28BwB;IC18BxB;;ED48BU;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAMR;IACE;;EAIJ;AAAA;IAEE;;EAIA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAIJ;IACE,OA/gCgB;IAghChB;IACA;IACA;;EAGF;IACE;;EAEA;IACE,OAzhCc;IA0hCd;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAKN;IACE;IACA;IACA;;;EAIJ;IACE;IACA;;;EAGF;IACE;IACA;IACA;;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE","file":"result.css"}


--------------------------------------------------------------------------------
/css/variable.css:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | /*# sourceMappingURL=variable.css.map */
4 | 


--------------------------------------------------------------------------------
/css/variable.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"variable.css"}


--------------------------------------------------------------------------------
/favicon/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-144x144.png


--------------------------------------------------------------------------------
/favicon/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-192x192.png


--------------------------------------------------------------------------------
/favicon/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-36x36.png


--------------------------------------------------------------------------------
/favicon/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-48x48.png


--------------------------------------------------------------------------------
/favicon/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-72x72.png


--------------------------------------------------------------------------------
/favicon/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/android-icon-96x96.png


--------------------------------------------------------------------------------
/favicon/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-114x114.png


--------------------------------------------------------------------------------
/favicon/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-120x120.png


--------------------------------------------------------------------------------
/favicon/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-144x144.png


--------------------------------------------------------------------------------
/favicon/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-152x152.png


--------------------------------------------------------------------------------
/favicon/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-180x180.png


--------------------------------------------------------------------------------
/favicon/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-57x57.png


--------------------------------------------------------------------------------
/favicon/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-60x60.png


--------------------------------------------------------------------------------
/favicon/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-72x72.png


--------------------------------------------------------------------------------
/favicon/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-76x76.png


--------------------------------------------------------------------------------
/favicon/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/favicon/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/apple-icon.png


--------------------------------------------------------------------------------
/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>


--------------------------------------------------------------------------------
/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/favicon/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/favicon-96x96.png


--------------------------------------------------------------------------------
/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/favicon.ico


--------------------------------------------------------------------------------
/favicon/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |  "name": "App",
 3 |  "icons": [
 4 |   {
 5 |    "src": "\/android-icon-36x36.png",
 6 |    "sizes": "36x36",
 7 |    "type": "image\/png",
 8 |    "density": "0.75"
 9 |   },
10 |   {
11 |    "src": "\/android-icon-48x48.png",
12 |    "sizes": "48x48",
13 |    "type": "image\/png",
14 |    "density": "1.0"
15 |   },
16 |   {
17 |    "src": "\/android-icon-72x72.png",
18 |    "sizes": "72x72",
19 |    "type": "image\/png",
20 |    "density": "1.5"
21 |   },
22 |   {
23 |    "src": "\/android-icon-96x96.png",
24 |    "sizes": "96x96",
25 |    "type": "image\/png",
26 |    "density": "2.0"
27 |   },
28 |   {
29 |    "src": "\/android-icon-144x144.png",
30 |    "sizes": "144x144",
31 |    "type": "image\/png",
32 |    "density": "3.0"
33 |   },
34 |   {
35 |    "src": "\/android-icon-192x192.png",
36 |    "sizes": "192x192",
37 |    "type": "image\/png",
38 |    "density": "4.0"
39 |   }
40 |  ]
41 | }


--------------------------------------------------------------------------------
/favicon/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/ms-icon-144x144.png


--------------------------------------------------------------------------------
/favicon/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/ms-icon-150x150.png


--------------------------------------------------------------------------------
/favicon/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/ms-icon-310x310.png


--------------------------------------------------------------------------------
/favicon/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/favicon/ms-icon-70x70.png


--------------------------------------------------------------------------------
/gh-pages.txt:
--------------------------------------------------------------------------------
 1 | gh-pages update // 2021.12.19 13:55 gh-pages branch 부활
 2 | gh-pages update // 2021.12.19 16:18 복구 작업 진행중: html 페이지만 존재
 3 | gh-pages update // 2021.12.19 16:27 복구 작업 진행중: js 폴더만 추가
 4 | gh-pages update // 2021.12.19 16:30 복구 작업 진행중: css 폴더 추가
 5 | gh-pages update // 2021.12.19 16:40 복구 작업 진행중: imgs 폴더 추가
 6 | gh-pages update // 2021.12.19 17:56 복구 작업 진행중: favicon 폴더 추가
 7 | gh-pages update // 2022.01.03 21:30 리팩토링 진행중
 8 | gh-pages update // 2022.01.10 13:06 scss 추가
 9 | gh-pages update // 2022.01.10 14:49 github action (AWS-Cloudfront-Deploy)
10 | gh-pages update // 2022.01.10 15:03 dev branch 추가
11 | gh-pages update // 2022.01.10 15:42 다른 버전으로 github action 테스트
12 | gh-pages update // 2022.01.10 15:42 다른 버전으로 github action 테스트2
13 | gh-pages update // 2022.01.10 15:42 다른 버전으로 github action 테스트3
14 | gh-pages update // 2022.01.10 15:42 다른 버전으로 github action 테스트4
15 | 


--------------------------------------------------------------------------------
/html/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="../css/default.css">
 9 |     <link rel="stylesheet" href="../css/home.css">
10 |     <script src="../javascript/default.js" defer></script>
11 |     <script src="../javascript/home.js" defer></script>
12 | 
13 |     <meta property="og:title" content="나의 영화 캐릭터 유형은?">
14 |     <meta property="og:url" content="./html/home.html">
15 |     <meta property="og:type" content="website">
16 |     <meta property="og:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
17 |     <meta property="og:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!" />
18 | 
19 |     <meta name="twitter:card" content="summary_large_image">
20 |     <meta name="twitter:site" content="@https://github.com/MBTImaker">
21 |     <meta name="twitter:creator" content="@MBTImaker">
22 |     <meta name="twitter:title" content="나의 영화 캐릭터 유형은?">
23 |     <meta name="twitter:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!">
24 |     <meta name="twitter:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
25 | 
26 |     <title>크리스마스에 영화 뭐 보지?</title>
27 | </head>
28 | 
29 | <body class="body">
30 | 
31 |     <script>
32 |         let browser = navigator.userAgent.toLowerCase();
33 |         if (browser.indexOf('trident') != -1 || browser.indexOf("msie") != -1) {
34 |             alert('Internet Explorer는 호환되지 않는 브라우저 입니다.');
35 |         }
36 |     </script>
37 | 
38 |     <header>
39 |         <div class="t1"></div>
40 |         <div class="t2"></div>
41 |     </header>
42 | 
43 |     <div class="b1"></div>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/html/question.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"">
 8 |     <link rel="stylesheet" href="../css/default.css">
 9 |     <link rel="stylesheet" href="../css/question.css">
10 |     <script src="../javascript/default.js" defer></script>
11 |     <script src="../javascript/question.js" defer></script>
12 | 
13 |     <meta property="og:title" content="나의 영화 캐릭터 유형은?">
14 |     <meta property="og:url" content= "./html/home.html">
15 |     <meta property="og:type" content="website">
16 |     <meta property="og:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
17 |     <meta property="og:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!" />
18 | 
19 |     <meta name="twitter:card" content="summary_large_image">
20 |     <meta name="twitter:site" content="@https://github.com/MBTImaker">
21 |     <meta name="twitter:creator" content="@MBTImaker">
22 |     <meta name="twitter:title" content="나의 영화 캐릭터 유형은?">
23 |     <meta name="twitter:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!">
24 |     <meta name="twitter:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
25 | 
26 |     <title>크리스마스에 영화 뭐 보지?</title>
27 | </head>
28 | 
29 | <body class="hidden">
30 |     <button class="n1"></button>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/html/result.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |     <!-- ========================= files ========================= -->
 10 | 
 11 |     <link rel="stylesheet" href="../css/default.css">
 12 |     <link rel="stylesheet" href="../css/result.css">
 13 |     <script src="../javascript/default.js" defer></script>
 14 |     <script src="../javascript/userResult.js" defer></script>
 15 |     <script src="../javascript/comment.js" defer></script>
 16 | 
 17 |     <!-- Crypto CDN 로드 -->
 18 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
 19 | 
 20 |     <meta property="og:title" content="나의 영화 캐릭터 유형은?">
 21 |     <meta property="og:url" content="./html/home.html">
 22 |     <meta property="og:type" content="website">
 23 |     <meta property="og:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
 24 |     <meta property="og:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!" />
 25 | 
 26 |     <meta name="twitter:card" content="summary_large_image">
 27 |     <meta name="twitter:site" content="@https://github.com/MBTImaker">
 28 |     <meta name="twitter:creator" content="@MBTImaker">
 29 |     <meta name="twitter:title" content="나의 영화 캐릭터 유형은?">
 30 |     <meta name="twitter:description" content="나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!">
 31 |     <meta name="twitter:image" content="https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png">
 32 | 
 33 |     <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
 34 | 
 35 |     <title>크리스마스에 영화 뭐 보지?</title>
 36 | </head>
 37 | 
 38 | <body>
 39 |     <div class="l1">
 40 |         <img src="../imgs/loading_ment.png" alt="영화캐릭터 분석중">
 41 |     </div>
 42 | 
 43 |     <!-- facebook -->
 44 |     <div id="fb-root"></div>
 45 |     <script>(function (d, s, id) {
 46 |             var js, fjs = d.getElementsByTagName(s)[0];
 47 |             if (d.getElementById(id)) return;
 48 |             js = d.createElement(s); js.id = id;
 49 |             js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
 50 |             fjs.parentNode.insertBefore(js, fjs);
 51 |         }(document, 'script', 'facebook-jssdk'));</script>
 52 | 
 53 |     <!-- 하얀 영역 -->
 54 |     <div class="b3">
 55 |         <section class="r1">
 56 |             <div class="t2">
 57 |                 <img class="subject"></img>
 58 |                 <img class="movie-title"></img>
 59 |                 <img class="movie-character"></img>
 60 |                 <img class="character-img"></img>
 61 |             </div>
 62 | 
 63 |             <span class="c1"></span>
 64 |             <div class="f1">
 65 |                 <div class="f2"></div><div class="f2"></div><div class="f2"></div><div class="f2"></div><div class="f2"></div>
 66 |                 <div class="f2"></div><div class="f2"></div><div class="f2"></div><div class="f2"></div><div class="f2"></div>
 67 |             </div>
 68 | 
 69 |             <div class="p1"></div>
 70 | 
 71 |             <!-- 환상의 케이 & 환장의 케미 -->
 72 |             <div class="h1">
 73 |                 <div class="chemi good">
 74 |                     <span class="chemi-title">환상의 케미</span>
 75 |                     <img class="character-img"></img>
 76 |                     <span class="movie-title"></span>
 77 |                     <span class="movie-character"></span>
 78 |                 </div>
 79 |                 <div class="chemi bad">
 80 |                     <span class="chemi-title">환장의 케미</span>
 81 |                     <img class="character-img"></img>
 82 |                     <span class="movie-title"></span>
 83 |                     <span class="movie-character"></span>
 84 |                 </div>
 85 |             </div>
 86 |         </section>
 87 | 
 88 |         <!-- 나와 같은 유형 -->
 89 |         <section class="likeMe">
 90 |             <span class="subTitle">나와 같은 유형</span>
 91 |             <div class="whiteBox">
 92 |                 <div class="movie-title"></div>
 93 |                 <div class="movie-character"></div>
 94 |                 <div class="imgAndGraph">
 95 |                     <!-- img -->
 96 |                     <img src="" alt="">
 97 |                     <!-- graph -->
 98 |                     <div id="likeMe" class="circular">
 99 |                         <div class="inner"></div>
100 |                         <div class="outer"></div>
101 |                         <div class="numb">
102 |                             0%
103 |                         </div>
104 |                         <div class="numb-title">
105 |                             나와 같은 유형
106 |                         </div>
107 |                         <div class="circle">
108 |                             <div class="fixed-dot">
109 |                                 <span></span>
110 |                             </div>
111 |                             <div class="dot">
112 |                                 <span></span>
113 |                             </div>
114 |                             <div class="bar left">
115 |                                 <div class="progress"></div>
116 |                             </div>
117 |                             <div class="bar right">
118 |                                 <div class="progress"></div>
119 |                             </div>
120 |                         </div>
121 |                     </div>
122 |                 </div>
123 |             </div>
124 |         </section>
125 | 
126 |         <!-- 가장 많이 나온 유형 -->
127 |         <section class="mostType">
128 |             <span class="subTitle">가장 많이 나온 유형</span>
129 |             <div class="whiteBox">
130 |                 <div class="movie-title"></div>
131 |                 <div class="movie-character"></div>
132 |                 <div class="imgAndGraph">
133 |                     <!-- img -->
134 |                     <img src="" alt="">
135 |                     <!-- graph -->
136 |                     <div id="mostType" class="circular">
137 |                         <div class="inner"></div>
138 |                         <div class="outer"></div>
139 |                         <div class="numb">
140 |                             0%
141 |                         </div>
142 |                         <div class="numb-title">
143 |                             현재 1위 유형
144 |                         </div>
145 |                         <div class="circle">
146 |                             <div class="fixed-dot">
147 |                                 <span></span>
148 |                             </div>
149 |                             <div class="dot">
150 |                                 <span></span>
151 |                             </div>
152 |                             <div class="bar left">
153 |                                 <div class="progress"></div>
154 |                             </div>
155 |                             <div class="bar right">
156 |                                 <div class="progress"></div>
157 |                             </div>
158 |                         </div>
159 |                     </div>
160 |                 </div>
161 |         </section>
162 | 
163 |         <!-- 결과 공유하기 -->
164 |         <section class="s1">
165 |             <span class="subTitle">결과 공유하기</span>
166 |             <ul class="s2">
167 |                 <li><a href="javascript:shareKakaotalk();" class="kakaotalk"></a></li>
168 |                 <li><a href="javascript:shareFacebook();" class="facebook"></a></li>
169 |                 <li><a href="javascript:shareTwitter();" class="twitter"></a></li>
170 |                 <li><a href="javascript:shareBand();" class="band"></a></li>
171 |                 <li><a href="../imgs/instagram_download_img.png" class="instagram" download="나의 영화 캐릭터 유형은?.png"></a></li>
172 |             </ul>
173 |         </section>
174 | 
175 |         <!-- 추천 영화 -->
176 |         <section class="m1">
177 |             <span class="subTitle">추천 영화</span>
178 |             <ul class="m2">
179 |                 <li>
180 |                     <img class="movie-01"></img>
181 |                 </li>
182 |                 <li>
183 |                     <img class="movie-02"></img>
184 |                 </li>
185 |                 <li>
186 |                     <img class="movie-03"></img>
187 |                 </li>
188 |             </ul>
189 |         </section>
190 | 
191 |         <!-- 테스트 다시하기 -->
192 |         <a href="home.html" class="restart"></a>
193 | 
194 |         <!-- 댓글 -->
195 |         <section class="communication">
196 | 
197 |             <!-- 댓글 작성 -->
198 |             <div class="add-comment">
199 |                 <input type="text" class="nickname" id="nickname" name="nickname" placeholder="닉네임을 입력하세요.(2~10자)"
200 |                     onKeyup="checkInput(this.value, true, false, false, false);">
201 |                 <div class="commentArea">
202 |                     <textarea name="comment-area" class="comment-area" id="comment-area" rows="18"
203 |                         placeholder="댓글을 입력하세요. (500자 내외)"
204 |                         onKeyup="checkInput(this.value, false, true, false, false);"></textarea>
205 |                     <span id="comment_count">(0/500)</span>
206 |                 </div>
207 |                 <div class="add-comment-pw">
208 |                     <input type="password" class="password" id="password" name="password"
209 |                         placeholder="비밀번호를 입력하세요.(숫자만 4~20자)" onKeyup="checkInput(this.value, false, false, true, false);">
210 |                     <button type="submit" class="wrtie-comment-btn" id="commentInit" name="commentInit"
211 |                         onclick="commentWrite()"></button>
212 |                 </div>
213 |             </div>
214 | 
215 | 
216 |             <div class="p1"></div>
217 | 
218 |             <!-- 댓글 창 보여주기 -->
219 |             <div class="show-comment">
220 | 
221 |             </div>
222 | 
223 |             <!-- 신고 모달 -->
224 |             <div class="report-modal">
225 |                 <div class="report-modal-container">
226 |                     <h2>신고</h2>
227 |                     <!-- <img src="" alt="" class="report-modal-img"> -->
228 | 
229 |                     <div class="input-area">
230 |                         <select name="신고유형" id="subject">
231 |                             <option value="">신고유형</option>
232 |                             <option value="ABUSE">욕설/비하</option>
233 |                             <option value="PORNOGRAPHY">음란물/불건전한 대화</option>
234 |                             <option value="COMMERCIAL">상업적 광고/판매</option>
235 |                             <option value="PAPERING">낚시/도배</option>
236 |                             <option value="DISPUTE">지나친 정치/종교 논쟁</option>
237 |                             <option value="PROMOTION">불법 홍보</option>
238 |                         </select>
239 | 
240 |                         <div class="reportArea">
241 |                             <textarea name="description" class="description" id="description" rows="18"
242 |                             placeholder="신고 내용을 적어주세요. (500자 내외)"
243 |                             onKeyup="checkInput(this.value, false, false, false, true);"></textarea>
244 |                             <span id="report_count">(0/500)</span>
245 |                         </div>
246 | 
247 |                         <div class="btns">
248 |                             <button id="submit" onclick="sendReport()">제출</button>
249 |                             <button id="cancle" onclick="closeReportModal(false)">취소</button>
250 |                         </div>
251 |                     </div>
252 |                 </div>
253 |             </div>
254 | 
255 |             <!-- 페이지 넘기기 -->
256 |             <div class="comment-pages" id="comment-pages">
257 |             </div>
258 | 
259 |         </section>
260 | 
261 | 
262 |     </div>
263 | 
264 |     <div class="fb-quote"></div>
265 | </body>
266 | 
267 | </html>


--------------------------------------------------------------------------------
/imgs/chracter-img/ISFJ_I.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/chracter-img/ISFJ_I.png


--------------------------------------------------------------------------------
/imgs/desktop/desktop_background_Frame48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/desktop/desktop_background_Frame48.png


--------------------------------------------------------------------------------
/imgs/index_left_btn_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/index_left_btn_active.png


--------------------------------------------------------------------------------
/imgs/index_left_btn_not_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/index_left_btn_not_active.png


--------------------------------------------------------------------------------
/imgs/index_right_btn_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/index_right_btn_active.png


--------------------------------------------------------------------------------
/imgs/index_right_btn_not_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/index_right_btn_not_active.png


--------------------------------------------------------------------------------
/imgs/instagram_download_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/instagram_download_img.png


--------------------------------------------------------------------------------
/imgs/loading_ment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/loading_ment.png


--------------------------------------------------------------------------------
/imgs/mobile/mobile_background_Frame96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/mobile/mobile_background_Frame96.png


--------------------------------------------------------------------------------
/imgs/movie_character/ISFJ_C.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/movie_character/ISFJ_C.png


--------------------------------------------------------------------------------
/imgs/movie_character/ISTJ_C.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/movie_character/ISTJ_C.png


--------------------------------------------------------------------------------
/imgs/movie_character/soundofmusic_maria_s_image31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/movie_character/soundofmusic_maria_s_image31.png


--------------------------------------------------------------------------------
/imgs/movie_title/ISFJ_T.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/movie_title/ISFJ_T.png


--------------------------------------------------------------------------------
/imgs/movie_title/ISTJ_T.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/movie_title/ISTJ_T.png


--------------------------------------------------------------------------------
/imgs/question_num/Q10_Frame909.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q10_Frame909.png


--------------------------------------------------------------------------------
/imgs/question_num/Q11_Frame910.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q11_Frame910.png


--------------------------------------------------------------------------------
/imgs/question_num/Q12_Frame899.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q12_Frame899.png


--------------------------------------------------------------------------------
/imgs/question_num/Q1_Frame900.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q1_Frame900.png


--------------------------------------------------------------------------------
/imgs/question_num/Q2_Frame901.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q2_Frame901.png


--------------------------------------------------------------------------------
/imgs/question_num/Q3_Frame902.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q3_Frame902.png


--------------------------------------------------------------------------------
/imgs/question_num/Q4_Frame903.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q4_Frame903.png


--------------------------------------------------------------------------------
/imgs/question_num/Q5_Frame904.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q5_Frame904.png


--------------------------------------------------------------------------------
/imgs/question_num/Q6_Frame905.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q6_Frame905.png


--------------------------------------------------------------------------------
/imgs/question_num/Q7_Frame906.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q7_Frame906.png


--------------------------------------------------------------------------------
/imgs/question_num/Q8_Frame907.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q8_Frame907.png


--------------------------------------------------------------------------------
/imgs/question_num/Q9_Frame908.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/question_num/Q9_Frame908.png


--------------------------------------------------------------------------------
/imgs/replyBtn_Frame139.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/replyBtn_Frame139.png


--------------------------------------------------------------------------------
/imgs/replyDeleteBtn_Frame896.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/replyDeleteBtn_Frame896.png


--------------------------------------------------------------------------------
/imgs/replyReporteBtn_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/replyReporteBtn_icon.png


--------------------------------------------------------------------------------
/imgs/restartBtn_Frame134.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/restartBtn_Frame134.png


--------------------------------------------------------------------------------
/imgs/result_character_subject.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/result_character_subject.png


--------------------------------------------------------------------------------
/imgs/share-icons/share_band_Frame88.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/share-icons/share_band_Frame88.png


--------------------------------------------------------------------------------
/imgs/share-icons/share_facebook_Frame86.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/share-icons/share_facebook_Frame86.png


--------------------------------------------------------------------------------
/imgs/share-icons/share_instagram_Frame89.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/share-icons/share_instagram_Frame89.png


--------------------------------------------------------------------------------
/imgs/share-icons/share_kakaotalk_Frame85.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/share-icons/share_kakaotalk_Frame85.png


--------------------------------------------------------------------------------
/imgs/share-icons/share_twitter_Frame87.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/share-icons/share_twitter_Frame87.png


--------------------------------------------------------------------------------
/imgs/showResult_Frame61.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/showResult_Frame61.png


--------------------------------------------------------------------------------
/imgs/startBtn_Frame88.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/startBtn_Frame88.png


--------------------------------------------------------------------------------
/imgs/subTitle_Frame16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/subTitle_Frame16.png


--------------------------------------------------------------------------------
/imgs/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/title.png


--------------------------------------------------------------------------------
/imgs/writeCommentBtn_Frame140.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/writeCommentBtn_Frame140.png


--------------------------------------------------------------------------------
/imgs/writeCommentBtn_Frame69.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MBTImaker/MBTImaker-javascript-frontend/f76e84f19a8274c442acba9faaff504b9bbd53c1/imgs/writeCommentBtn_Frame69.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!-- github.io로 로딩했을 때 처음으로 보이는 페이지입니다. -->
2 | <!-- index.html -> html/home.html -->
3 | 
4 | <meta http-equiv="refresh" content="0; url=./html/home.html">
5 | <meta http-equiv='cache-control' content='no-cache'> 
6 | <meta http-equiv='expires' content='0'> 
7 | <meta http-equiv='pragma' content='no-cache'>


--------------------------------------------------------------------------------
/javascript/comment.js:
--------------------------------------------------------------------------------
  1 | // =========================== Comment ===========================
  2 | 
  3 | const showComment = document.querySelector(".show-comment");
  4 | const chkCommentInit = document.querySelector(".wrtie-comment-btn");
  5 | const chkcommentArea = document.querySelector(".comment-area");
  6 | const commentIndex = document.querySelector(".b3 .communication .comment-pages");
  7 | 
  8 | let isWriteCheck = true;  // write 함수에서 왔는지 확인하는 값. Write 함수를 호출했을 경우 true.
  9 | let isDeleteCheck = false;  // 해당 값이 true 일 경우, delete -> display 할 때 기존 댓글 목록들 전체를 지워줌.
 10 | let isFirst = false;
 11 | let isIndexCheck = false;  // index가 1234567812345678 이런 식으로 발생해서 구분 하기 위해 생성
 12 | let chkeckWrite = true; // wrtie-comment-btn 을 눌렀을 경우, 해당 댓글의 mbti 유형값을 따로 저장하기 위해 사용. display 해서 나오는 mbti 와 구분하기 위해 사용.
 13 | 
 14 | let errorMsg = '';  // 에러메시지 안내
 15 | let userMBTI;   // 서버의 response 로 오는 값인 'INTP..' 값들을 저장
 16 | let displayFuncText = { "text": "나의 영화 캐릭터 유형은? " };  // displayComment() 함수에서 getNamebyMBTI() 함수를 호출 할 때 따로 쓸 변수
 17 | 
 18 | /* displayComment() 함수의 index 부분에서 사용 */
 19 | let page = 1;   // 조회 할 페이지
 20 | let size = 3;   // 해당 페이지에서 보여 줄 댓글의 수
 21 | let currentPage = 1; // 현재 페이지
 22 | 
 23 | let commentReqURL = reqHOST + '/comment';
 24 | 
 25 | /* 해당 값이 true 일 경우, countCommentByte() 함수 부분에서 사용 */
 26 | let checkIsNickname = String(false); // 댓글 작성자 영역인지 확인
 27 | let checkIsComment = String(false);   // 댓글 본문 영역인지 확인
 28 | let checkIsPW = String(false);  // 댓글 비밀번호 영역인지 확인
 29 | let checkIsReport = String(false);  // 신고 부분 신고 내용 영역인지 확인
 30 | let commentCount = document.getElementById("comment_count");  // 작성한 댓글의 글자수 세기 (countCommentByte() 함수에서 사용)
 31 | let reportCount = document.getElementById("report_count");  // 신고 내용의 글자수 세기 (countCommentByte() 함수에서 사용)
 32 | 
 33 | 
 34 | window.addEventListener('load', searchComment(page, size));
 35 | 
 36 | 
 37 | // 댓글 닉네임, 댓글 본문, 댓글 비밀번호 입력시 입력값 검증 함수
 38 | function checkInput(userInput, isNickname, isComment, checkIsPW, checkIsReport) {
 39 |     let chk = /^[a-z|A-Z|0-9|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|~!@\#$%^&*\()\-=+_'\;<>\/.\`:\"\\,\[\]?|<>?:{}|\s|\s+$]*$/g;    // 영어소문자,대문자,숫자,한글,특수문자 구분하는 정규식
 40 |     let modInput;  // 정규식에 해당지 않는 문자를 입력했을 경우 이를 삭제한 뒤 문자열 저장.
 41 |     let chkInput;   // 검증해야 할 입력값
 42 |     let eachMaxByte;    // 댓글 작성자, 댓글 본문 마다 최대 입력값이 다르므로 따로 설정해줌
 43 | 
 44 |     let chkPWReg = /^[0-9]*$/g;    // 숫자를 입력하지 않았을 경우를 찾는 정규식. 댓글 닉네임, 댓글 본문과는 조건이 달라서 따로 설정.
 45 |     let modPW;  // 숫자가 아닌 문자를 입력했을 경우 이를 삭제하고 숫자만 남김.
 46 | 
 47 |     // 댓글 작성자 부분 인지, 댓글 본문 부분인지 확인 후 각각의 값 셋팅
 48 |     if (isNickname == true) {    // 댓글 작성자 부분 로직 검증시
 49 |         // 검증해야 할 값은 댓글 작성자 값. 댓글 작성자, 비밀번호는 글자 수 체킹
 50 |         chkInput = document.getElementById("nickname").value;
 51 |         eachMaxByte = Number(10);
 52 |         checkIsNickname = true;
 53 |         checkIsComment = false;
 54 |         checkIsPW = false;
 55 |         checkIsReport = false;
 56 |     } else if (isComment == true || checkIsReport == true) {  // 댓글 본문, 신고 내용 부분 로직 검증시 
 57 |         // 나머지 값은 동일하게 셋팅
 58 |         eachMaxByte = Number(500);
 59 |         checkIsNickname = false;
 60 |         checkIsPW = false;
 61 | 
 62 |         if (isComment == true) {
 63 |             // 검증해야 할 값은 댓글 본문 값.
 64 |             chkInput = document.getElementById("comment-area").value;
 65 |             checkIsComment = true;
 66 |             checkIsReport = false;
 67 |         } else {
 68 |             // 검증해야 할 값은 신고 내용 본문 값.
 69 |             chkInput = document.getElementById("description").value;
 70 |             checkIsComment = false;
 71 |             checkIsReport = true;
 72 |         }
 73 | 
 74 |     } else {    // 댓글 비밀번호 부분 로직 검증시
 75 |         chkInput = document.getElementById("password").value;
 76 |         eachMaxByte = Number(20);
 77 |         checkIsNickname = false;
 78 |         checkIsComment = false;
 79 |         checkIsPW = true;
 80 |         checkIsReport = false;
 81 | 
 82 |         if (chkPWReg.test(userInput)) {
 83 |             document.getElementById("password").value = userInput;
 84 |             countCommentByte(userInput, eachMaxByte, checkIsNickname, checkIsComment, checkIsPW, checkIsReport);
 85 |         } else {    // 숫자가 아닌 문자를 입력했을 경우
 86 |             alert("작성자 비밀번호는 4자 이상 20자 이하 숫자만 입력해주세요.");
 87 |             modPW = userInput.replace(/[^0-9]*$/g, '')   // 숫자가 아닌 문자 삭제
 88 |             document.getElementById("password").value = modPW;  // 사용자의 input 값에도 삭제한 패스워드 문자열 반영
 89 |             countCommentByte(modPW, eachMaxByte, checkIsNickname, checkIsComment, checkIsPW, checkIsReport);
 90 |         }
 91 |     }
 92 | 
 93 |     // 입력값 검증. 댓글 작성자와 댓글은 정규식이 같으므로 여기서 따로 입력값 검증.
 94 |     if (checkIsNickname == true || checkIsComment == true || checkIsReport == true) {
 95 |         if (chk.test(userInput)) {
 96 |             chkInput = userInput;
 97 |             countCommentByte(chkInput, eachMaxByte, checkIsNickname, checkIsComment, checkIsPW, checkIsReport);
 98 |         } else {    // 위의 정규식이 아닌 문자를 입력했을 경우
 99 |             modInput = userInput.replace(!chk, '')   // 숫자가 아닌 문자 삭제
100 |             chkInput = modInput;  // 사용자의 input 값에도 삭제한 패스워드 문자열 반영
101 |             countCommentByte(chkInput, eachMaxByte, checkIsNickname, checkIsComment, checkIsPW, checkIsReport);
102 |         }
103 |     }
104 | }
105 | 
106 | // 댓글 작성자, 댓글 내용, 댓글 비밀번호 의 자릿수를 체크하는 함수
107 | function countCommentByte(input, maxBytes, checkIsNickname, checkIsComment, checkIsPW, checkIsReport) {
108 |     let text_val = String(input);
109 |     let text_len = text_val.length; // 입력한 문자수
110 |     let maxByte = Number(maxBytes); // 최대 입력 가능한 바이트 수
111 |     let mod_text = "";   // maxBytes 바이트 넘었을 경우 문자열을 자른 뒤 내용 저장하는 변수
112 | 
113 |     let commentArea = document.getElementById("comment-area").value;  // 500 글자 이상 작성시 내용 자르기 위해 사용
114 |     let commentCountStr = text_len + "/500";
115 | 
116 |     let reportArea = document.getElementById("description").value;  // 500 글자 이상 작성시 내용 자르기 위해 사용
117 |     let reportCountStr = text_len + "/500";
118 | 
119 |     if (text_len > maxByte) {    // 입력한 댓글이 500자 이상일 경우
120 |         //alert("잘못된 입력 입니다. 다시 한번 입력해주세요.");
121 |         alert("1자 이상 500자 이하로 입력해주세요.");
122 |         mod_text = text_val.substring(0, maxByte); // 초과한 자리수 만큼 제거
123 |         text_val = mod_text;
124 | 
125 |         if (checkIsNickname == true) {    // 댓글 닉네임 일 경우
126 |             document.getElementById("nickname").value = text_val;
127 |         } else if (checkIsComment == true) {     // 댓글 본문 일 경우
128 |             commentArea.innerHTML += text_val;
129 |             document.getElementById("comment-area").value = text_val;
130 | 
131 |             // 댓글 본문 일 경우, 글자수를 동적으로 보여주기 위해 500자 이상의 경우 글자수 표시
132 |             commentCountStr = maxByte + "/500";
133 |             commentCount.innerText = commentCountStr;
134 |             commentCount.style.color = "green";
135 |             document.getElementById("comment-area").value = text_val;
136 |         } else if (checkIsPW == true) {    // 댓글 비밀번호 일 경우
137 |             document.getElementById("password").value = text_val;
138 |         } else {    // 신고 내용 부분일 경우
139 |             reportArea.innerHTML += text_val;
140 |             document.getElementById("description").value = text_val;
141 | 
142 |             // 댓글 본문 일 경우, 글자수를 동적으로 보여주기 위해 500자 이상의 경우 글자수 표시
143 |             reportCountStr = maxByte + "/500";
144 |             reportCount.innerText = reportCountStr;
145 |             reportCount.style.color = "green";
146 |             document.getElementById("description").value = text_val;
147 |         }
148 | 
149 |     } else {    // 해당 값이 허용한 범위 내에서 입력 됐을 경우
150 |         // 댓글 본문 일 경우에만, 글자수를 동적으로 보여줌
151 |         if (checkIsComment == true) {
152 |             commentCountStr = text_len + "/500";
153 |             commentCount.innerText = commentCountStr;
154 |             commentCount.style.color = "green";
155 |         } else if (checkIsReport == true) {   // 신고 내용일 경우
156 |             reportCountStr = text_len + "/500";
157 |             reportCount.innerText = reportCountStr;
158 |             reportCount.style.color = "green";
159 |         }
160 |     }
161 | 
162 | }
163 | 
164 | // 댓글 작성 날짜 작성 (ex) 11.08 22:49:51
165 | function dateToStr(svrDate) {
166 |     // 서버에서 보내주는 값: 2021-11-23T13:04:59.610937
167 |     let month = svrDate.substring(5, 7);
168 |     let day = svrDate.substring(8, 10);
169 |     let times = svrDate.substring(11, 19);
170 | 
171 |     let dateToString = month + '.' + day + " " + times;
172 | 
173 |     return dateToString;
174 | }
175 | 
176 | // 댓글 작성
177 | function commentWrite() {
178 | 
179 |     showComment.style.display = "flex";
180 | 
181 |     // 사용자가 입력 한 값을 받아온다.
182 |     let nickname = document.getElementById("nickname").value;
183 |     let content = document.getElementById("comment-area").value;
184 |     let password = document.getElementById("password").value;
185 | 
186 |     // 서버로 보낼 데이터 셋팅
187 |     let commentJson = { 'content': content, 'mbti': MBTI, 'name': nickname, 'password': password };
188 | 
189 |     fetch(commentReqURL, {
190 |         method: 'POST',
191 |         cache: 'no-cache',
192 |         headers: {
193 |             'Accept': '*',
194 |             'Content-Type': 'application/json',
195 |             'Access-Control-Allow-Origin': commentReqURL,
196 |             'Origin': reqHOST,
197 |             'Referer': reqHOST
198 |         },
199 |         body: JSON.stringify(commentJson),
200 |     })
201 |         .then((response) => {   // http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체. 응답 JSON 데이터를 사용하기 위해 return 해줌.
202 |             return response.json();
203 |         })
204 |         .then(response => {
205 |             if (response.status == 200) {
206 |                 alert("댓글이 정상적으로 작성 되었습니다.");
207 | 
208 |                 // 댓글 작성 후 해당 필드 빈값 처리
209 |                 document.getElementById("nickname").value = "";
210 |                 document.getElementById("comment-area").value = "";
211 |                 document.getElementById("password").value = "";
212 |                 commentCount.innerText = "(0/500)";
213 | 
214 |                 searchComment(page, size);  // 댓글 조회 함수 호출
215 |             }
216 |             else {
217 |                 // 오류 발생 시 alert 로 메시지 표출
218 |                 for (let i = 0; i < response.errors.length; i++) {
219 |                     errorMsg += response.errors[i].reason + '\n';
220 |                 }
221 |                 alert(errorMsg);
222 |                 errorMsg = '';  // 에러메시지 안내 후 에러메시지 초기화
223 | 
224 |             }
225 |         })
226 |         .catch((error) => alert("error: ", error));
227 | 
228 | }
229 | 
230 | // function commentWrite() {
231 | 
232 | // showComment.style.display = "flex";
233 | 
234 | //     // 사용자가 입력 한 값을 받아온다.
235 | //     let nickname = document.getElementById("nickname").value;
236 | //     let content = document.getElementById("comment-area").value;
237 | //     let password = document.getElementById("password").value;
238 | 
239 | //     // 서버로 보낼 데이터 셋팅
240 | //        let commentJson = { 'content': content, 'mbti': MBTI, 'name': nickname, 'password': password };
241 | 
242 | //     // 서버에서 받은 값 저장
243 | //     runFetch("POST", 'https://mbti-test.herokuapp.com/comment', commentJson)
244 | //         .then((response) => {
245 | //             alert("댓글 작성 성공!");
246 | //             searchComment(page, size);  // 댓글 조회 함수 호출
247 | //             [content.value, nickname.value, password.value] = [null, null, null];
248 | //         })
249 | //         .catch((error) => {
250 | //             //console.log(error);
251 | //             alert(JSON.stringify(error.errors));
252 | //         })
253 | // }
254 | 
255 | 
256 | // 화면에 댓글을 보여주기 위해 HTML 코드를 리턴하는 함수
257 | function displayComment(comment, size) {
258 | 
259 |     let comments = [];  // 배열 선언
260 |     let innerComment = '';  // 각 댓글의 전체 창을 만듬
261 |     let innerCommentIndex = '';  // 인덱스의 버튼 태그들을 만듬
262 |     let totalPages = comment.data.totalPages;  // 사이즈 수로 나눈 총 페이지 수
263 |     let displayFuncTextSplit;  // mainText 앞 부분인 "나의 영화 캐릭터 유형은? " 이 부분 제거 후 ' 여기 부터 끝까지 잘라온다
264 |     let charWithMovieName; // '' 를 기준으로 각 댓글 당 "영화 이름+영화 주인공" 을 값을 가져온다.
265 | 
266 |     let displayFuncStr = '';
267 | 
268 |     //    if (isDeleteCheck || isIndexCheck) { 
269 |     if (isDeleteCheck || isFirst || isIndexCheck) {     // 댓글 삭제 후 해당 함수를 호출 할 경우, 새로운 화면을 띄워줘야 하므로 아래의 값들을 초기화 해줌
270 |         for (let i = 0; i < size; i++) {
271 |             comments.length = 0;
272 |             innerComment = '';
273 |             showComment.innerHTML = '';
274 | 
275 |             // index 부분에서 1페이지, 2페이지를 누를 때 마다 index가 1234567812345678 이런식으로 계속 생겨서 초기화 해 줌
276 |             innerCommentIndex = '';
277 |             commentIndex.innerHTML = '';
278 |             displayFuncText = { "text": "나의 영화 캐릭터 유형은? " };  // 새로운 페이지 클릭 시 해당 문자열에 계속 이어져서 초기화 작업해줌.
279 |         }
280 |     }
281 | 
282 |     for (let i = 0; i < size; i++) {
283 |         //size 가 3인데, 댓글이 2개만 있는 경우엔 아래 코드가 실행 되지 않아서 2개만 보여주게 추가해줌.
284 |         if (comment.data.content[i] == null) {
285 |             break;
286 |         }
287 | 
288 |         // 서버의 response 값으로 mbti 값들은 'INTP' 와 같이 옴. 이를 영화 주인공 이름으로 변형 하기 위해 mbti 값을 변형 시켜 줌.
289 |         userMBTI = comment.data.content[i].mbti;
290 |         getNamebyMBTI(displayFuncText, userMBTI);
291 |         displayFuncStr = displayFuncText.text;
292 |         displayFuncTextSplit = displayFuncStr.substring(displayFuncStr.indexOf("?") + 3);   // ? 문자 3번째 뒤 부터 영화이름+영화주인공이름 시작
293 |         charWithMovieName = displayFuncTextSplit.split("''");
294 | 
295 |         comments.push({  //각 댓글마다 아래 항목들을 추가함
296 |             content: `${comment.data.content[i].content}`,  // 댓글 내용
297 |             mbti: `${charWithMovieName[i].substring(charWithMovieName[i].lastIndexOf("의 ") + 2, charWithMovieName[i].length - 1)}`,  // MBTI 유형
298 |             name: `${comment.data.content[i].name}`,  // 작성자 이름
299 |             password: `${comment.data.content[i].password}`,  // 작성자 비밀번호
300 |             id: `${comment.data.content[i].id}`,  // 해당 댓글의 id(서버에서 보관)
301 |             parentId: `${comment.data.content[i].parentId}`,  // 해당 댓글의 부모 id(서버에서 보관)
302 |             createdDate: `${comment.data.content[i].createdDate}`,  // 해당 댓글 작성 시간
303 |         });
304 |     }
305 | 
306 |     innerComment = comments.map(function (c) {  // 각 댓글별로 html 코드 작성
307 |         let changeCreatedDate = dateToStr(c.createdDate);
308 | 
309 |         return `
310 |         <div class="comment" id="comment-${c.id}">
311 |             <div class="comment_header">
312 |                 <div class="info">
313 |                     <span id="commentNickname" class="commentNickname">${c.name}</span>
314 |                     <span id="commentMBTI" class="commentMBTI">${c.mbti}</span>
315 |                 </div>
316 |                 <div class="btn">
317 |                 
318 |                     <button type="submit" class="del-reply-btn" id="commentDelete" name="commentDelete" onclick="commentDelete(${c.id}, '${c.name}', '${c.password}')"></button>
319 |                     <button type="submit" class="report-reply-btn" id="report-reply-btn" name="report-reply-btn" onclick="openReportModal(${c.id})"></button>
320 |                 </div>
321 |             
322 |             </div>
323 |             <div class="comment_content">             
324 |                 <span id="content" class="content">${c.content}</span>
325 |                 <span id="createdDate" class="createdDate">${changeCreatedDate}</span>
326 |             </div>
327 |         </div>
328 |         `;
329 |     });
330 | 
331 |     // string -> html
332 |     innerComment = innerComment.join("");
333 | 
334 |     // innerHTML
335 |     showComment.innerHTML += innerComment;
336 | 
337 | 
338 |     // =========================== 페이지 번호 표시 ===========================
339 | 
340 |     let b_pageNum_list = 3;  // 블럭에 나타낼 페이지 번호 갯수
341 | 
342 |     let block = Math.ceil(currentPage / b_pageNum_list);   //현재 리스트의 블럭 구하기
343 |     let b_start_page = ((block - 1) * b_pageNum_list) + 1;  //현재 블럭에서 시작페이지 번호
344 |     let b_end_page = b_start_page + b_pageNum_list - 1; //현재 블럭에서 마지막 페이지 번호
345 | 
346 |     if (b_end_page > totalPages) b_end_page = totalPages;  // 블럭의 마지막 페이지가 총 페이지 수보다 클 때 두 숫자를 같게 해줌.
347 | 
348 | 
349 |     // =========================== '이전' 버튼 만들기 ===========================
350 |     if (currentPage == 1) {  // 현재 페이지가 1 이면, 링크 없이 이전 버튼만 보여지게 함.
351 |         innerCommentIndex += `
352 |             <button type="submit" class="index" id="index_left_btn_not_active" value="1"></button>
353 |         `;
354 |     } else { // 현재 페이지가 1보다 크면, 이전 페이지로 갈 수 있도록 이전 버튼 생성
355 |         innerCommentIndex += `
356 |             <button type="submit" class="index" id="index_left_btn_active" onclick="searchComment(${currentPage - 1}, ${size})" value="${currentPage - 1}"></button>
357 |         `;
358 |     }
359 | 
360 |     for (let i = b_start_page; i <= b_end_page; i++) {
361 |         if (currentPage == i) {  // 현재 페이지 이면 그냥 현재 페이지만 출력
362 |             innerCommentIndex += `
363 |                 <button type="submit" class="index" id="index" style="color:#E10017;" value="${i}">${i}</button>
364 |             `;
365 |         } else {    // 현재 페이지를 제외한 나머지 페이지 번호들에 링크 달아서 출력
366 |             innerCommentIndex += `
367 |                 <button type="submit" class="index" id="index" onclick="searchComment(${i}, ${size})" value="${i}">${i}</button>
368 |             `;
369 |         }
370 |     }
371 | 
372 |     // =========================== '다음' 버튼 만들기 ===========================
373 |     if (currentPage >= totalPages) {  // block 과 총 block 갯수와 값이 같다면, 맨 마지막 블럭이므로 다음 링크버튼이 필요없으므로 보여주지 않는다.
374 |         innerCommentIndex += `
375 |             <button type="submit" class="index" id="index_right_btn_not_active" value="${currentPage + 1}"></button>
376 |         `;
377 |     } else {    // 그게 아니면 다음 링크 버튼을 걸어서 보여준다.
378 |         innerCommentIndex += `
379 |             <button type="submit" class="index" id="index_right_btn_active" onclick="searchComment(${currentPage + 1}, ${size})" value="${currentPage + 1}"></button>
380 |         `;
381 |     }
382 | 
383 |     commentIndex.innerHTML += innerCommentIndex;    // index 부분을 찾아서 1번부터 totalPages 까지 span 으로 추가함
384 | 
385 |     const indexBtns = document.querySelectorAll(".index:nth-child(n)");
386 | 
387 |     // 생성된 인덱스 버튼들이 몇 페이지 인지 인식한 뒤 currentPage 변수에 저장
388 |     indexBtns.forEach((idxbtn) => {
389 |         idxbtn.addEventListener("click", (e) => {
390 |             currentPage = Number(e.target.value);  // Number 로 형변환 해주지 않으니 String 으로 맘대로 변환 되서 처리해줌.
391 |         });
392 |     });
393 | }
394 | 
395 | // 댓글 삭제
396 | function commentDelete(id, name, password) {
397 |     // 서버로 보낼 데이터 셋팅
398 |     let commentJson = { 'id': id, 'name': name, 'password': password };
399 | 
400 |     let pwPrompt = prompt("비밀번호를 입력해주세요.");
401 | 
402 |     if (pwPrompt == null) {  // 취소를 누를 경우
403 |         return false;   // 아무런 알람 띄우지 않음
404 |     } else {
405 |         if (pwPrompt == password) {
406 |             runFetch("PATCH", commentReqURL, commentJson)
407 |                 .then((response) => {
408 |                     if (response.status == 200) {
409 |                         alert("댓글이 정상적으로 삭제 되었습니다.");
410 | 
411 |                         // 삭제 함수(commentDelete)를 호출했을 경우, 해당 값을 true 로 변경 후 댓글을 보여주는 함수 (displayComment)로 넘긴다.
412 |                         isDeleteCheck = 'true';
413 | 
414 |                         // 댓글 삭제에 성공할 경우, 조회 함수(searchComment)를 호출하여 화면에 띄울 댓글들의 목록을 조회해온다.
415 |                         searchComment(page, size);
416 |                     } else {
417 |                         // 오류 발생 시 alert 로 메시지 표출
418 |                         for (let i = 0; i < response.errors.length; i++) {
419 |                             errorMsg += response.errors[i].reason + '\n';
420 |                         }
421 |                         alert(errorMsg);
422 |                     }
423 | 
424 |                     [content.value, nickname.value, password.value] = [null, null, null];
425 |                 })
426 |                 .catch((error) => alert("error: ", error));
427 |         } else if (pwPrompt != password) {   // 비밀번호 입력에 실패했을 경우
428 |             alert("비밀번호가 일치하지 않습니다.");
429 |         }
430 |     }
431 | }
432 | 
433 | 
434 | function searchComment(page, size) {  // 댓글 페이징 조회
435 |     let reqURLSearch = commentReqURL + '?page=' + page + '&' + 'size=' + size;  // ex) https://mbti-test.herokuapp.com/comment?page=1&size=5
436 | 
437 |     // 서버로 부터 받은 값 저장
438 |     fetch(reqURLSearch)
439 |         .then((response) => {   // http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체. 응답 JSON 데이터를 사용하기 위해 return 해줌.
440 |             return response.json();
441 |         })
442 |         .then(response => {
443 |             if (response.status == 200) {
444 |                 isIndexCheck = true;
445 |                 displayComment(response, size);
446 |             } else {
447 |                 alert("오류 입니다.");
448 |             }
449 |         })
450 |         .catch((error) => alert("error:", error));
451 | }
452 | 


--------------------------------------------------------------------------------
/javascript/default.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /* 설명: 모든 페이지에 적용되는 사항입니다. */
 4 | 
 5 | // (0) github.io와 aws를 구분한다.
 6 | let checkHostName = String(document.location.hostname);
 7 | let reqHOST = (checkHostName === 'christmas-movie.net') ? 'https://mbtimaker.net' : 'https://mbti-test.herokuapp.com';
 8 | 
 9 | // (1) vh값을 css에서 정의된 값이 아닌 새로운 값을 사용한다.
10 | let vHeight = window.innerHeight * 0.01;
11 | document.documentElement.style.setProperty('--vh', `${vHeight}px`);
12 | 
13 | // (2) head tag 안에 favicon(타이틀 왼쪽에 들어가는 이미지)을 넣는다.
14 | const head = document.getElementsByTagName("head")[0];
15 | 
16 | const favicon = function () {
17 |     return `<link rel="shortcut icon" href="../favicon/favicon.ico">
18 |     <link rel="apple-touch-icon" sizes="57x57" href="../favicon/apple-icon-57x57.png">
19 |     <link rel="apple-touch-icon" sizes="60x60" href="../favicon/apple-icon-60x60.png">
20 |     <link rel="apple-touch-icon" sizes="72x72" href="../favicon/apple-icon-72x72.png">
21 |     <link rel="apple-touch-icon" sizes="76x76" href="../favicon/apple-icon-76x76.png">
22 |     <link rel="apple-touch-icon" sizes="114x114" href="../favicon/apple-icon-114x114.png">
23 |     <link rel="apple-touch-icon" sizes="120x120" href="../favicon/apple-icon-120x120.png">
24 |     <link rel="apple-touch-icon" sizes="144x144" href="../favicon/apple-icon-144x144.png">
25 |     <link rel="apple-touch-icon" sizes="152x152" href="../favicon/apple-icon-152x152.png">
26 |     <link rel="apple-touch-icon" sizes="180x180" href="../favicon/apple-icon-180x180.png">
27 |     <link rel="icon" type="image/png" sizes="192x192" href="../favicon/android-icon-192x192.png">
28 |     <link rel="icon" type="image/png" sizes="32x32" href="../favicon/favicon-32x32.png">
29 |     <link rel="icon" type="image/png" sizes="96x96" href="../favicon/favicon-96x96.png">
30 |     <link rel="icon" type="image/png" sizes="16x16" href="../favicon/favicon-16x16.png">
31 |     <link rel="manifest" href="../favicon/manifest.json">
32 |     <meta name="msapplication-TileColor" content="#ffffff">
33 |     <meta name="msapplication-TileImage" content="../favicon/ms-icon-144x144.png">
34 |     <meta name="theme-color" content="#ffffff">`;
35 | }
36 | 
37 | head.innerHTML += favicon();
38 | 
39 | // (3) fetch
40 | async function runFetch(method, postURL, body) {
41 |     const options = {
42 |         method: method,
43 |         headers: {
44 |             "Content-Type": "application/json",
45 |         },
46 |         body: JSON.stringify(body),
47 |     };
48 |     const res = await fetch(postURL, options);
49 |     const data = await res.json();
50 |     if (res.ok) {
51 |         return data;
52 |     } else {
53 |         throw Error(data);
54 |     }
55 | }


--------------------------------------------------------------------------------
/javascript/home.js:
--------------------------------------------------------------------------------
 1 | /* 설명: 현재까지 테스트에 참여한 사람의 수를 보여줍니다. */
 2 | 
 3 | "use strict";
 4 | 
 5 | const participants = document.querySelector(".participants");
 6 | const b1 = document.querySelector(".b1");
 7 | let testReqURL = reqHOST + '/test';
 8 | 
 9 | fetch(testReqURL)
10 |     .then((response) => response.json())
11 |     .then((info) => {
12 |         b1.innerHTML = `<button class="b2" onclick="location.href='question.html'"></button>
13 |         <span class="t1">현재 총 ${info.data.testCount}명이 참여했어요.</span>`;
14 |     }
15 |     );


--------------------------------------------------------------------------------
/javascript/question.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | /* 설명: 질문 12가지를 화면에 보여줍니다. */
  4 | 
  5 | // =========================== Variables ===========================
  6 | 
  7 | const questionList = [
  8 |     { // 01
  9 |         num: "../imgs/question_num/Q1_Frame900.png",
 10 |         qTop: "오늘은 크리스마스 홈파티 하는 날.<br>방을 어떻게 꾸밀까?",
 11 |         qBottom: "고민하는 나는?",
 12 |         btnTop: "오늘은 특별한 날 화려하게 꾸민다.",
 13 |         btnBottom: "그래도 단순한 게 좋다.<br>미니멀하게 꾸민다."
 14 |     },
 15 |     { // 02
 16 |         num: "../imgs/question_num/Q2_Frame901.png",
 17 |         qTop: "오늘은<br>크리스마스",
 18 |         qBottom: "집에 있는 나는?",
 19 |         btnTop: "친구들에게 연락해 약속을 잡는다.",
 20 |         btnBottom: "오늘은 그냥 평범한 하루,<br>집에서 쉰다."
 21 |     },
 22 |     { // 03
 23 |         num: "../imgs/question_num/Q3_Frame902.png",
 24 |         qTop: "내가 영화 속<br>히어로라면",
 25 |         qBottom: "나는?",
 26 |         btnTop: "불의를 못 참고,<br>바로 행동에 나서는 히어로.",
 27 |         btnBottom: "계획을 세우고<br>이후에 행동 개시하는 히어로."
 28 |     },
 29 |     { // 04
 30 |         num: "../imgs/question_num/Q4_Frame903.png",
 31 |         qTop: "지금 밖에<br>눈이 내린다.",
 32 |         qBottom: "옆 사람에게 나는?",
 33 |         btnTop: "\"눈이 2cm 정도 왔네. 내일은 더 쌓인대.<br>뉴스 봐야겠다.\" 라고 말한다.",
 34 |         btnBottom: "\"눈이 많이 왔네. 집 갈 때 조심해\"<br>라고 말한다."
 35 |     },
 36 |     { // 05
 37 |         num: "../imgs/question_num/Q5_Frame904.png",
 38 |         qTop: "크리스마스에<br>재밌는 영화를 보았다.",
 39 |         qBottom: "친구에게 묘사하는 나는?",
 40 |         btnTop: "\"주인공이...\" 스토리부터 길고 상세하게<br>구체적으로 설명한다.",
 41 |         btnBottom: "\"재밌게 볼만하더라.\" 라고 짧게<br>설명한다."
 42 |     },
 43 |     { // 06
 44 |         num: "../imgs/question_num/Q6_Frame905.png",
 45 |         qTop: "영화를 선택하려는데<br>평점이 생각보다 낮았다.",
 46 |         qBottom: "그러면 나는?",
 47 |         btnTop: "\"평점이 낮다면 재미없을 게 뻔해.\" 라며<br>다른 걸 찾아본다.",
 48 |         btnBottom: "\"평점이 낮지만 내용이 끌리는데,<br>한 번 봐볼까?\" 라며 영화를 감상한다."
 49 |     },
 50 |     { // 07
 51 |         num: "../imgs/question_num/Q7_Frame906.png",
 52 |         qTop: "크리스마스 데이트하는 날,<br>사고가 나 상대방이 늦었다.",
 53 |         qBottom: "그때 나는?",
 54 |         btnTop: "\"괜찮아? 놀랐겠다ㅠㅠ 병원 다녀왔어?\"<br>라고 말한다.",
 55 |         btnBottom: "\"무슨 사고? 어떻게 하다가 다쳤어?\"<br>라고 말한다."
 56 |     },
 57 |     { // 08
 58 |         num: "../imgs/question_num/Q8_Frame907.png",
 59 |         qTop: "크리스마스<br>선물을 받았다고",
 60 |         qBottom: "자랑하는 친구에게 나는?",
 61 |         btnTop: "\"진짜? 기분 좋겠다!\"라고 말한다.",
 62 |         btnBottom: "\"뭐 받았어? 봐봐!\" 라고 말한다."
 63 |     },
 64 |     { // 09
 65 |         num: "../imgs/question_num/Q9_Frame908.png",
 66 |         qTop: "영화를<br>볼 때,",
 67 |         qBottom: "나는?",
 68 |         btnTop: "주인공에게 감정을 이입해서 본다.",
 69 |         btnBottom: "상황이 어떻게 흘러가는지,<br>논리적으로 사고하면서 본다."
 70 |     },
 71 |     { // 10
 72 |         num: "../imgs/question_num/Q10_Frame909.png",
 73 |         qTop: "크리스마스 아침에<br>일어나서",
 74 |         qBottom: "나는?",
 75 |         btnTop: "오늘 할 일을 세세하게 계획한다.",
 76 |         btnBottom: "할 일을 대강 정해두었지만,<br>변경 가능성은 있다."
 77 |     },
 78 |     { // 11
 79 |         num: "../imgs/question_num/Q11_Frame910.png",
 80 |         qTop: "크리스마스<br>홈 파티가 끝나고,",
 81 |         qBottom: "나는?",
 82 |         btnTop: "어지러진 것들을 바로 치운다.",
 83 |         btnBottom: "친구들이 떠난 후, 치운다."
 84 |     },
 85 |     { // 12
 86 |         num: "../imgs/question_num/Q12_Frame899.png",
 87 |         qTop: "영화관에서 영화를 보려는데,<br>자리가 없다..",
 88 |         qBottom: "그때 나는?",
 89 |         btnTop: "\"오늘은 날이 아닌가보다. 다음에 봐야지\"<br>라며 돌아간다.",
 90 |         btnBottom: "\"그러면 지금 하는 다른 걸 볼까?\" 하며<br>다른 걸 본다."
 91 |     }
 92 | ];
 93 | 
 94 | const body = document.querySelector("body");
 95 | 
 96 | 
 97 | // =========================== window ===========================
 98 | window.addEventListener('load', () => {
 99 |     setTimeout(() => {
100 |         scrollTo(0, 0);
101 |     }, 10);
102 | });
103 | 
104 | window.onpageshow = function (event) {
105 |     // 뒤로가기 선택시
106 |     if (event.persisted) {
107 |         window.location.reload();
108 |     } // else - 새로운 페이지 로드 시
109 | }
110 | 
111 | let showCorrectQuestion = null;
112 | 
113 | // 브라우저 화면 크기가 바뀌었을 때 현문제 위치로 움직인다.
114 | window.addEventListener('resize', () => {
115 |     clearTimeout(showCorrectQuestion);
116 |     showCorrectQuestion = setTimeout(scrollToNextQuestion(document.documentElement, blocks[questionNum].offsetTop, 20), 200);
117 | });
118 | 
119 | // 화면에 문제 보여주기
120 | let innerQuestion = questionList.map(function (q) {
121 | 
122 |     return `
123 |         <div class="b2">
124 |             <div class="q2" style="background-image: url('${q.num}');"></div>
125 |             <span class="q1 t0">${q.qTop}</span>
126 |             <span class="q1 b0">${q.qBottom}</span>
127 |         
128 |             <div class="t1">
129 |                 <button class="s1 t0">${q.btnTop}</button>
130 |                 <button class="s1 b0">${q.btnBottom}</button>
131 |             </div>
132 |         </div>
133 |         `;
134 | });
135 | 
136 | innerQuestion = innerQuestion.join("");
137 | body.innerHTML += innerQuestion;
138 | 
139 | 
140 | // =========================== Variables ===========================
141 | // HTML에 block 12개가 들어가야 아래 변수를 얻을 수 있음.
142 | 
143 | const selectBtns = document.querySelectorAll(".s1:nth-child(n)");
144 | const qNums = document.querySelectorAll('.q2:nth-child(n)');
145 | const blocks = document.querySelectorAll(".b2:nth-child(n)");
146 | const next = document.querySelector(".n1");
147 | const questionNumMax = questionList.length;
148 | 
149 | let questionNum = 0;
150 | let clientClicked = "";
151 | let selectBtnIndex = 0;
152 | 
153 | // =========================== Functions ===========================
154 | 
155 | let changeNextText = function () {
156 |     let leftQuestion = questionNumMax - questionNum - 1;
157 | 
158 |     if (window.innerWidth < 756) {
159 |         next.textContent = `${leftQuestion}개의 항목이 남았습니다.\r\n`;
160 |         next.textContent += `(총 ${questionNumMax}문항)`;
161 |     }
162 |     else {
163 |         next.textContent = `${leftQuestion}개의 항목이 남았습니다. (총 ${questionNumMax}문항)`;
164 |     }
165 | }
166 | 
167 | let showNextQnum = function () {
168 |     qNums[questionNum].style.display = "block";
169 | }
170 | 
171 | // 부드럽게 아래로 이동할 떄 사용하는 함수
172 | // t = current time,  b = start value, c = change in value, d = duration
173 | Math.easeInOutQuad = function (t, b, c, d) {
174 |     t /= d / 2;
175 |     if (t < 1) return c / 2 * t * t + b;
176 |     t--;
177 |     return -c / 2 * (t * (t - 2) - 1) + b;
178 | };
179 | 
180 | let vh = function (value) {
181 |     let vHeight = window.innerHeight * 0.01;
182 |     return vHeight * value;
183 | }
184 | 
185 | // 버튼을 누를 때마다 다음 문제로 이동한다.
186 | let scrollToNextQuestion = function (element, nextQuestion, duration) {
187 |     let setBlockCenter = 0;
188 | 
189 |     // 가로로 긴 모바일 화면에서는 이전 문제의 하단이 더 많이 보인다. (iPhone X, Pixel XL)
190 |     setBlockCenter = (window.innerHeight > 811 && window.innerWidth < 429) ? vh(15) : vh(7);
191 | 
192 |     let start = element.scrollTop, change = nextQuestion - start - setBlockCenter, currentTime = 0, increment = 20;
193 | 
194 |     let animateScroll = function () {
195 |         currentTime += increment;
196 |         let movement = Math.easeInOutQuad(currentTime, start, change, duration);
197 |         element.scrollTop = movement;
198 | 
199 |         if (currentTime < duration) {
200 |             setTimeout(animateScroll, increment);
201 |         }
202 |     }
203 | 
204 |     // (1) next btn text 변경
205 |     changeNextText();
206 | 
207 |     // (2) 이동
208 |     animateScroll();
209 | 
210 |     // (3) 다음 q-num이 보인다.
211 |     showNextQnum();
212 | }
213 | 
214 | selectBtns.forEach((btn) => {
215 |     btn.addEventListener("click", (e) => {
216 | 
217 |         // 선택된 문항의 색을 바꾸어준다.
218 |         e.currentTarget.classList.add("active");
219 | 
220 |         if (e.currentTarget.classList.contains("t0")) {
221 |             clientClicked += "0";
222 |             selectBtns[selectBtnIndex + 1].style.pointerEvents = "none";
223 |         }
224 |         else {
225 |             clientClicked += "1";
226 |             selectBtns[selectBtnIndex].style.pointerEvents = "none";
227 |         }
228 | 
229 |         // 문항이 선택되면 아래로 이동한다.
230 |         if (questionNum < questionNumMax - 1) {
231 |             // 다음 문제로
232 |             questionNum += 1;
233 |             selectBtnIndex += 2;
234 | 
235 |             scrollToNextQuestion(document.documentElement, blocks[questionNum].offsetTop, 650);
236 |         } else {
237 |             // 모든 문항에 답변하면 결과를 볼 수 있는 버튼이 활성화된다.
238 |             next.textContent = `나랑 비슷한 영화 캐릭터 결과 보기`;
239 |             next.classList.remove("n1");
240 |             next.classList.add("s2");
241 |             next.onclick = function () {
242 |                 location.href = "result.html";
243 |                 window.sessionStorage.setItem('clientClicked', JSON.stringify(clientClicked));
244 |             }
245 |         }
246 |     });
247 | });
248 | 
249 | // 첫 문항의 이미지를 화면에 보여준다.
250 | qNums[0].style.display = "block";
251 | 
252 | changeNextText();


--------------------------------------------------------------------------------
/javascript/userResult.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | /* 설명: 사용자가 선택한 값에 따라 MBTI 결과값을 서버에서 가져와 화면에 보여줍니다. */
  4 | 
  5 | // ============================== Run ==============================
  6 | if (!document.referrer.includes("question.html")) {
  7 |     location.href = "home.html";
  8 | }
  9 | 
 10 | // =========================== Variables ===========================
 11 | 
 12 | let userResultTestReqURL = reqHOST + '/test';
 13 | let userResultReportReqURL = reqHOST + '/report';
 14 | const loading = document.querySelector(".l1");
 15 | const block = document.querySelector(".b3");
 16 | const circulars = document.querySelectorAll('.circular');
 17 | const chemistry = document.querySelector('.h1');
 18 | 
 19 | const showMargin = 900;
 20 | let likeMePercentage = 0;
 21 | let mostTypePercentage = 0;
 22 | let likeMeCounter = 0;
 23 | let mostTypeCounter = 0;
 24 | 
 25 | // ====================== Variables(share) ======================
 26 | const shareLink = "https://" + String(document.location.host) + "/html/home.html";
 27 | 
 28 | const subText = "나의 MBTI 유형과 어울리는 캐릭터와 영화를 알아보세요!";
 29 | const shareImage = "url(https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png)";
 30 | 
 31 | let mainText = { "text": "나의 영화 캐릭터 유형은? " };
 32 | let MBTI = '';
 33 | 
 34 | // ====================== Variables(report) ======================
 35 | /* 설명: 사용자가 선택한 값에 따라 MBTI 결과값을 서버에서 가져와 화면에 보여줍니다. */
 36 | 
 37 | let commentId = 0;
 38 | const reportModal = document.querySelector(".report-modal");
 39 | const reportSubject = document.querySelector("#subject");
 40 | const reportDescription = document.querySelector("#description");
 41 | let checkReportCommit = String(false);    // 신고 제출 후 취소 함수로 갈 경우, 이미 제출 완료 됐는데 취소가 자동으로 호출 되면서 '취소하겠습니까?' 라는 알림이 뜸. 이를 확인하기 위해 선언.
 42 | 
 43 | // =========================== Loading ===========================
 44 | 
 45 | // 페이지가 다시 로드되면 0ms만에 맨 위로 이동한다.
 46 | window.addEventListener('load', function () {
 47 |     loading.style.display = "none";
 48 |     block.style.display = "flex";
 49 | 
 50 |     setTimeout(function () {
 51 |         scrollTo(0, 0);
 52 |     }, 0);
 53 | });
 54 | 
 55 | // 새로고침 했을 때 위치가 맨 위로 움직이지 않으면 "circle"에 show가 들어가 있어서 삭제해줘야 한다.
 56 | window.addEventListener('load', () => {
 57 |     const circles = document.querySelectorAll(".circle");
 58 |     circles.forEach(circle => {
 59 |         if (circle.classList.contains("show"))
 60 |             circle.classList.remove("show");
 61 |     });
 62 | });
 63 | 
 64 | // ====================== Functions(report) ======================
 65 | 
 66 | // 신고한 댓글 아이디를 가져오고 모달을 연다.
 67 | const openReportModal = function (id) {
 68 |     reportModal.classList.add("open-modal");
 69 |     commentId = id;
 70 | }
 71 | 
 72 | // 서버에 댓글 신고 보내기
 73 | const sendReport = function () {
 74 |     const reportSubjectValue = reportSubject.options[reportSubject.selectedIndex].value;
 75 |     const reportDescriptionValue = reportDescription.value;
 76 | 
 77 |     if (reportDescriptionValue === "") {
 78 |         alert("신고 내용을 입력해 주세요.");
 79 |     }
 80 |     else {
 81 |         runFetch("POST", userResultReportReqURL, {
 82 |             "commentId": commentId,
 83 |             "description": reportDescriptionValue,
 84 |             "subject": reportSubjectValue,
 85 |         })
 86 |             .then(() => {
 87 |                 alert("신고가 접수되었습니다. 처리될 때까지 조금만 기다려주세요.");
 88 |                 checkReportCommit = true;
 89 |                 closeReportModal(checkReportCommit);
 90 |             })
 91 |             .catch(() => { alert("신고 유형을 선택해 주세요.") });
 92 |     }
 93 | }
 94 | 
 95 | // 모달 창 닫기
 96 | const closeReportModal = function (checkReportCommit) {
 97 |     // 사용자가 입력한 값 초기화
 98 |     [reportSubject.selectedIndex, reportDescription.value, reportCount.innerText] = [0, null, "(0/500)"];
 99 |     if (checkReportCommit === true) { // 신고 제출이 정상적으로 완료됐으면, 신고 취소 확인 멘트 안 내보냄
100 |         reportModal.classList.remove("open-modal");
101 |     } else {
102 |         if (confirm("신고를 취소 하시겠습니까? 취소를 원하시면 [예], 아니면 [아니오]를 선택해주세요.")) {
103 |             alert("신고가 취소 되었습니다.");
104 |             reportModal.classList.remove("open-modal");
105 |         }
106 |     }
107 | }
108 | 
109 | // ====================== Functions(share) ======================
110 | 
111 | // MBTI에 따라 공유되는 텍스트를 다르게 설정한다.
112 | const getNamebyMBTI = function (obj, userMBTI) {
113 |     switch (userMBTI) {
114 |         case "ISTJ": {
115 |             obj.text += "'킹스맨의 해리 하트'";
116 |             break;
117 |         }
118 |         case "ISFJ": {
119 |             obj.text += "'셜록홈즈의 왓슨'";
120 |             break;
121 |         }
122 |         case "ISTP": {
123 |             obj.text += "'007의 제임스 본드'";
124 |             break;
125 |         }
126 |         case "ISFP": {
127 |             obj.text += "'타이타닉의 로즈'";
128 |             break;
129 |         }
130 |         case "INTJ": {
131 |             obj.text += "'닥터 스트레인지의 닥터 스트레인지'";
132 |             break;
133 |         }
134 |         case "INTP": {
135 |             obj.text += "'이미테이션 게임의 앨런 튜링'";
136 |             break;
137 |         }
138 |         case "INFJ": {
139 |             obj.text += "'위대한 개츠비의 개츠비'";
140 |             break;
141 |         }
142 |         case "INFP": {
143 |             obj.text += "'신비한 동물사전의 뉴트 스캐맨더'";
144 |             break;
145 |         }
146 |         case "ESTJ": {
147 |             obj.text += "'해리포터의 헤르미온느'";
148 |             break;
149 |         }
150 |         case "ESFJ": {
151 |             obj.text += "'분노의 질주의 돔'";
152 |             break;
153 |         }
154 |         case "ESTP": {
155 |             obj.text += "'라푼젤의 플린 라이더'";
156 |             break;
157 |         }
158 |         case "ESFP": {
159 |             obj.text += "'수어사이드 스쿼드의 할리퀸'";
160 |             break;
161 |         }
162 |         case "ENTJ": {
163 |             obj.text += "'악마는 프라다를 입는다의 미란다'";
164 |             break;
165 |         }
166 |         case "ENTP": {
167 |             obj.text += "'크리스마스의 악몽의 잭 스켈레톤'";
168 |             break;
169 |         }
170 |         case "ENFJ": {
171 |             obj.text += "'금발이 너무해의 엘 우즈'";
172 |             break;
173 |         }
174 |         case "ENFP": {
175 |             obj.text += "'사운드 오브 뮤직의 마리아'";
176 |             break;
177 |         }
178 |         default: {
179 |             break;
180 |         }
181 |     }
182 | }
183 | 
184 | const shareKakaotalk = function () {
185 |     Kakao.Link.sendDefault({
186 |         objectType: 'feed',
187 |         content: {
188 |             title: mainText.text,
189 |             description: subText,
190 |             imageUrl:
191 |                 'https://mbti-image-server.s3.ap-northeast-2.amazonaws.com/og_image.png',
192 |             link: {
193 |                 mobileWebUrl: shareLink,
194 |                 webUrl: shareLink,
195 |             },
196 |         },
197 |         // 카카오톡 미설치 시 카카오톡 설치
198 |         installTalk: true,
199 |     })
200 | }
201 | 
202 | const shareFacebook = function () {
203 |     window.open("http://www.facebook.com/sharer/sharer.php?u=" + shareLink);
204 | }
205 | 
206 | const shareTwitter = function () {
207 |     window.open("https://twitter.com/intent/tweet?text=" + mainText.text + "&url=" + shareLink);
208 | }
209 | 
210 | const format = function () {
211 |     let args = Array.prototype.slice.call(arguments, 1);
212 |     return arguments[0].replace(/\{(\d+)\}/g, function (match, index) {
213 |         return args[index];
214 |     });
215 | }
216 | 
217 | const shareBand = function () {
218 |     let encodeBody = encodeURIComponent(format('{0}\n{1}', mainText.text, shareLink));
219 |     let encodeRoute = encodeURIComponent(window.location.href);
220 |     let link = format('http://band.us/plugin/share?body={0}&route={1}', encodeBody, encodeRoute);
221 |     window.open(link, 'share', 'width=500, height=500');
222 | }
223 | 
224 | // ========================= MBTI Result =========================
225 | 
226 | // 000000000000 -> 000-000-000-000
227 | let result = JSON.parse(window.sessionStorage.getItem('clientClicked'));
228 | result = result.slice(0, 3) + '-' + result.slice(3, 6) + '-' + result.slice(6, 9) + '-' + result.slice(9, 12);
229 | 
230 | runFetch("POST", userResultTestReqURL, {
231 |     "testCode": result,
232 | })
233 |     .then((info) => {
234 |         showResult(info.data);
235 | 
236 |         if (!Kakao.isInitialized()) {
237 |             Kakao.init(info.data.kakao_JAVASCRIPT_KEY);
238 |         }
239 |     })
240 |     .catch(() => { alert("카카오 공유가 불가능합니다.") });
241 | 
242 | 
243 | // 가져온 것들을 html에 설정한다.
244 | const showResult = function (data) {
245 |     const mbtiResult = data.mbtiResult;
246 |     MBTI = mbtiResult.mbti;
247 | 
248 |     const textAndImg = document.querySelector(".b3 .r1 .t2");
249 |     textAndImg.querySelector(".movie-title").src = mbtiResult.character.movieName.url;
250 |     textAndImg.querySelector(".movie-character").src = mbtiResult.character.name.url;
251 |     textAndImg.querySelector(".character-img").src = mbtiResult.character.image.url;
252 | 
253 |     // ---------------- conclusion ----------------
254 |     const conclusion = document.querySelector(".b3 .r1 .c1");
255 |     conclusion.innerHTML = mbtiResult.character.representativePersonality;
256 | 
257 |     const features = document.querySelectorAll(".b3 .r1 .f2:nth-child(n)");
258 |     for (let i = 0; i < features.length; i++) {
259 |         features[i].innerHTML = mbtiResult.character.personalities[i];
260 |     }
261 | 
262 |     // ---------------- chemistry ----------------
263 |     const goodChemi = document.querySelector(".b3 .r1 .h1 .good");
264 |     goodChemi.querySelector(".movie-title").innerHTML = mbtiResult.bestChemistry.movieName;
265 |     goodChemi.querySelector(".movie-character").innerHTML = mbtiResult.bestChemistry.characterName;
266 |     goodChemi.querySelector(".character-img").src = mbtiResult.bestChemistry.imageUrl;
267 | 
268 |     const badChemi = document.querySelector(".b3 .r1 .h1 .bad");
269 |     badChemi.querySelector(".movie-title").innerHTML = mbtiResult.worstChemistry.movieName;
270 |     badChemi.querySelector(".movie-character").innerHTML = mbtiResult.worstChemistry.characterName;
271 |     badChemi.querySelector(".character-img").src = mbtiResult.worstChemistry.imageUrl;
272 | 
273 |     // ------------------ graph -----------------
274 |     const likeMe = document.querySelector(".b3 .likeMe .whiteBox");
275 |     const sameType = data.sameType;
276 |     likeMe.querySelector(".movie-title").innerHTML = sameType.movieName;
277 |     likeMe.querySelector(".movie-character").innerHTML = sameType.characterName;
278 |     likeMe.querySelector("img").src = sameType.imageUrl;
279 |     likeMePercentage = sameType.percentage;
280 | 
281 |     const mostType = document.querySelector(".b3 .mostType .whiteBox");
282 |     const mostPopularType = data.mostPopularType;
283 |     mostType.querySelector(".movie-title").innerHTML = mostPopularType.movieName;
284 |     mostType.querySelector(".movie-character").innerHTML = mostPopularType.characterName;
285 |     mostType.querySelector("img").src = mostPopularType.imageUrl;
286 |     mostTypePercentage = mostPopularType.percentage;
287 | 
288 |     // ----------- recommendedMovies -----------
289 |     const movieList = document.querySelectorAll(".b3 .m1 .m2 li img:nth-child(n)");
290 |     const recommendedMovies = mbtiResult.recommendedMovies;
291 |     for (let i = 0; i < movieList.length; i++) {
292 |         movieList[i].src = recommendedMovies[i].url;
293 |     }
294 | 
295 |     getNamebyMBTI(mainText, mbtiResult.mbti);
296 | }
297 | 
298 | // =========================== Graph ===========================
299 | 
300 | // result.html에서 그래프 2개를 가져와서 애니메이션을 실행한다.
301 | const showAnimation = function () {
302 |     circulars.forEach((circular) => {
303 |         const circle = circular.querySelector('.circle');
304 |         const numb = circular.querySelector(".numb");
305 | 
306 |         if (!circle.classList.contains('show')) {
307 |             if (0 > chemistry.getBoundingClientRect().top) {
308 |                 circle.classList.add('show');
309 |                 toggleShow(circle);
310 | 
311 |                 let drawing = setInterval(() => {
312 |                     // id에 따라서 다른 숫자를 보여준다.
313 |                     if (circular.id === "likeMe") {
314 |                         if (likeMeCounter === likeMePercentage) {
315 |                             toggleShow(circle);
316 |                             clearInterval(drawing);
317 |                         } else {
318 |                             likeMeCounter += 1;
319 |                             numb.textContent = `${likeMeCounter}%`;
320 |                         }
321 |                     }
322 |                     else {
323 |                         if (mostTypeCounter === mostTypePercentage) {
324 |                             toggleShow(circle);
325 |                             clearInterval(drawing);
326 |                         } else {
327 |                             mostTypeCounter += 1;
328 |                             numb.textContent = `${mostTypeCounter}%`;
329 |                         }
330 |                     }
331 |                 }, 40); // 숫자가 작을수록 빠르다.
332 |             }
333 |         }
334 |     });
335 | }
336 | 
337 | // .show를 toggle한다. 처음엔 없다가 보여주고 숫자에 다다르면 애니메이션을 종료한다.
338 | const toggleShow = function (item) {
339 |     const leftProgress = item.querySelector(".circle .left .progress");
340 |     const rightProgress = item.querySelector(".circle .right .progress");
341 |     const dot = item.querySelector(".circle .dot");
342 | 
343 |     leftProgress.classList.toggle("show");
344 |     rightProgress.classList.toggle("show");
345 |     dot.classList.toggle("show");
346 | }
347 | 
348 | window.addEventListener('scroll', showAnimation);


--------------------------------------------------------------------------------
/scss/default.scss:
--------------------------------------------------------------------------------
 1 | /* 모든 html 파일 안에 들어가는 css입니다. */
 2 | 
 3 | @import "./variable.scss";
 4 | 
 5 | @font-face {
 6 |   font-family: "SBAggroM";
 7 |   src: local("SB 어그로 M"), local("SB 어그로OTF M"),
 8 |     url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff")
 9 |       format("woff");
10 |   font-weight: normal;
11 |   font-style: normal;
12 |   font-display: fallback;
13 |   unicode-range: U+0020-007E, U+0030-0039, U+AC00-D7A3, U+0041-005A, U+0061-007A,
14 |     U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
15 | }
16 | 
17 | $basic-font: "SBAggroM", "NanumBarunGothic";
18 | 
19 | * {
20 |   padding: 0;
21 |   margin: 0;
22 |   box-sizing: border-box;
23 |   font-family: $basic-font;
24 |   background: no-repeat center;
25 |   background-size: contain;
26 | }
27 | 
28 | html {
29 |   width: 100vw;
30 | }
31 | 
32 | body {
33 |   background: repeat $green2 url("../imgs/mobile/mobile_background_Frame96.png");
34 | }
35 | 
36 | button {
37 |   cursor: pointer;
38 |   background-color: transparent;
39 |   border: 0px;
40 |   opacity: 1;
41 | }
42 | 
43 | /* mobile(768px) labtop(1020px) / desktop(1400px) */
44 | @media screen and (min-width: 47.25rem) {
45 |   body {
46 |     background-image: url("../imgs/desktop/desktop_background_Frame48.png");
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/scss/home.scss:
--------------------------------------------------------------------------------
 1 | @import "./variable.scss";
 2 | 
 3 | $t1-mobile-size: 0.875rem;
 4 | $t1-desktop-size: 1.5rem;
 5 | 
 6 | @mixin background($BackgroundImg) {
 7 |   background: no-repeat center url($BackgroundImg);
 8 |   background-size: contain;
 9 | }
10 | 
11 | body {
12 |   @include flex();
13 |   height: 100vh;
14 |   scrollbar-width: none; /* Firefox */
15 | }
16 | 
17 | body::-webkit-scrollbar {
18 |   display: none;
19 |   width: 0;
20 | }
21 | 
22 | header {
23 |   @include flex();
24 | 
25 |   .t1 {
26 |     @include background("../imgs/subTitle_Frame16.png");
27 |     width: 90vw;
28 |     height: 3vh;
29 |     margin-top: 17.73vh;
30 |   }
31 | 
32 |   .t2 {
33 |     @include background("../imgs/title.png");
34 |     width: 100vw;
35 |     height: 20vh;
36 |   }
37 | }
38 | 
39 | .b1 {
40 |   @include flex(flex-end);
41 |   height: 60vh;
42 | 
43 |   .b2 {
44 |     @include background("../imgs/startBtn_Frame88.png");
45 |     width: 89.1vw;
46 |     height: 9vh;
47 |     border-radius: 80px;
48 |     background-color: transparent;
49 |   }
50 | 
51 |   .t1 {
52 |     color: $white1;
53 |     font-size: $t1-mobile-size;
54 |     margin: 3.5vh 0 10vh 0;
55 |   }
56 | }
57 | 
58 | @media screen and (min-width: 47.25rem) and (min-height: 50.75rem) {
59 |   header {
60 |     .t1 {
61 |       width: 37vw;
62 |       height: 3.51vh;
63 |       margin-top: 13.33vh;
64 |     }
65 | 
66 |     .t2 {
67 |       width: 37vw;
68 |       height: 18.88vh;
69 |       margin-top: 1.94vh;
70 |     }
71 |   }
72 | 
73 |   .b1 {
74 |     .b2 {
75 |       width: 37vw;
76 |       height: 12.96vh;
77 |     }
78 | 
79 |     .t1 {
80 |       font-size: $t1-desktop-size;
81 |       line-height: 1.8125rem;
82 |       margin: 3.98vh 0 9.25vh 0;
83 |     }
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/scss/question.scss:
--------------------------------------------------------------------------------
  1 | @import "./variable.scss";
  2 | 
  3 | $q-num-mobile-size: 1.75rem;
  4 | $q-title-mobile-size: 1.125rem;
  5 | $q-title-mobile-xs-size: 0.9375rem;
  6 | $q-title-desktop-size: 2rem;
  7 | $q-title-desktop-xs-size: 1.25rem;
  8 | $two-btns-desktop-size: 1.25rem;
  9 | $button-text-mobile-size: 0.875rem;
 10 | $button-text-mobile-xs-size: 0.75rem;
 11 | $button-text-desktop-size: 1.375rem;
 12 | $button-text-desktop-xs-size: 1.125rem;
 13 | $letter-spacing: 0.02em;
 14 | /*
 15 | ===========
 16 | Global
 17 | ===========
 18 | */
 19 | 
 20 | body {
 21 |   @include flex(normal);
 22 |   width: 100%;
 23 |   margin: calc(7vh - 20px) 0 calc(8vh + 20px) 0;
 24 |   scrollbar-width: none;
 25 | }
 26 | 
 27 | body::-webkit-scrollbar {
 28 |   display: none;
 29 |   width: 0;
 30 | }
 31 | 
 32 | .hidden {
 33 |   height: 100%;
 34 |   min-height: 100%;
 35 |   overflow: hidden !important;
 36 |   touch-action: pan-y;
 37 | }
 38 | 
 39 | .b2 {
 40 |   @include flex();
 41 |   text-align: center;
 42 |   width: 89.25vw;
 43 |   height: calc(var(--vh, 1vh) * 85);
 44 |   min-height: 480px;
 45 |   margin-top: 20px;
 46 |   border-radius: 20px;
 47 |   border: 2px $green4 solid;
 48 |   background-color: $white2;
 49 | 
 50 |   .q2 {
 51 |     display: none;
 52 |     width: 66px;
 53 |     height: 36px;
 54 |     margin-bottom: 14px;
 55 |     background-size: 100% 100%;
 56 |   }
 57 | 
 58 |   .q1 {
 59 |     font-size: $q-title-mobile-size;
 60 |     color: $black2;
 61 |     line-height: 167%;
 62 |     letter-spacing: $letter-spacing;
 63 |   }
 64 | 
 65 |   .q1.t0 {
 66 |     margin-bottom: 1.375rem;
 67 |   }
 68 | 
 69 |   .q1.b0 {
 70 |     margin-bottom: 1.75rem;
 71 |   }
 72 | }
 73 | /*
 74 | ============
 75 | block - btns
 76 | ============
 77 | */
 78 | 
 79 | .n1 {
 80 |   @include greyBtn;
 81 |   width: 78.66%;
 82 |   height: 8.62vh;
 83 |   min-height: 20px;
 84 |   max-height: 70px;
 85 |   position: fixed;
 86 |   top: 80%;
 87 |   line-height: 1.25rem;
 88 |   font-size: $button-text-mobile-size;
 89 |   color: $grey9;
 90 |   cursor: default;
 91 |   white-space: pre;
 92 | }
 93 | 
 94 | .s2 {
 95 |   @include redBtn;
 96 |   width: 78.66%;
 97 |   height: 8.62vh;
 98 |   max-height: 70px;
 99 |   position: fixed;
100 |   top: 80%;
101 |   font-size: 0.875rem;
102 |   line-height: 1.25rem;
103 |   color: $white1;
104 | }
105 | 
106 | .b2 {
107 |   .t1 {
108 |     @include flex(normal);
109 |     width: 100%;
110 |     .s1 {
111 |       width: 88.05%;
112 |       height: 9.85vh;
113 |       min-height: 20px;
114 |       max-height: 80px;
115 |       margin-bottom: 1.25rem;
116 |       border-radius: 162px;
117 |       background-color: $grey3;
118 |       color: $grey8;
119 |       font-size: $button-text-mobile-size;
120 |       line-height: 1.25rem;
121 |     }
122 | 
123 |     .s1.b0 {
124 |       margin-bottom: 10vh;
125 |     }
126 | 
127 |     .s1.active {
128 |       background-color: $green1;
129 |       border: 2px solid $green3;
130 |       color: $white1;
131 |       pointer-events: none;
132 |     }
133 |   }
134 | }
135 | 
136 | /*
137 | ===========
138 | media
139 | ===========
140 | */
141 | 
142 | /* (width < 428px) and (height > 812px) */
143 | @media screen and (max-width: 26.75rem) and (min-height: 50.75rem) {
144 |   body {
145 |     margin: calc(15vh - 20px) 0 calc(15vh + 20px) 0;
146 |   }
147 | 
148 |   .b2 {
149 |     height: 70vh;
150 |   }
151 | 
152 |   .n1,
153 |   .s2 {
154 |     top: 70%;
155 |   }
156 | }
157 | 
158 | /* width > 756px */
159 | @media screen and (min-width: 47.25rem) {
160 |   .b2 {
161 |     width: 37vw;
162 |     min-width: 716px;
163 |     height: 87.03vh;
164 |     border-width: 6px;
165 | 
166 |     .q2 {
167 |       width: 6.875rem;
168 |       height: 3.375rem;
169 |       margin-bottom: 2.12vh;
170 |     }
171 | 
172 |     .q1 {
173 |       font-size: $q-title-desktop-size;
174 |     }
175 | 
176 |     .q1.b0 {
177 |       margin-bottom: 2.5rem;
178 |     }
179 | 
180 |     .t1 {
181 |       .s1 {
182 |         width: 532px;
183 |         height: 11.11vh;
184 |         max-height: 120px;
185 |         line-height: 1.875rem;
186 |         font-size: $two-btns-desktop-size;
187 |       }
188 |     }
189 |   }
190 | 
191 |   .n1,
192 |   .s2 {
193 |     width: 532px;
194 |     height: 9.44vh;
195 |     max-height: 102px;
196 |     line-height: 2.5rem;
197 |     font-size: $button-text-desktop-size;
198 |   }
199 | }
200 | 
201 | /* height < 756px */
202 | @media screen and (max-height: 47.25rem) {
203 |   .b2 .q1 {
204 |     font-size: $q-title-desktop-xs-size;
205 |   }
206 | 
207 |   .n1,
208 |   .s2 {
209 |     top: 77%;
210 |   }
211 | }
212 | 
213 | /* width < 320px (Galaxy S5, iPhone 5, iPhone 6/7/8, fold)*/
214 | @media screen and (max-width: 23.4375rem) {
215 |   .b2 .q1 {
216 |     font-size: $q-title-mobile-xs-size;
217 |   }
218 | 
219 |   .b2 .t1 .s1,
220 |   .n1,
221 |   .s2 {
222 |     font-size: $button-text-mobile-xs-size;
223 |   }
224 | }
225 | 
226 | @media screen and (max-height: 32.56rem) {
227 |   .n1 {
228 |     display: none;
229 |   }
230 | }
231 | 


--------------------------------------------------------------------------------
/scss/result.scss:
--------------------------------------------------------------------------------
   1 | @import "./variable.scss";
   2 | 
   3 | $conclusion-mobile-font-size: 1.25rem;
   4 | $feature-mobile-font-size: 0.875rem;
   5 | $chemi-title-mobile-font-size: 0.875rem;
   6 | $chemi-movie-title-mobile-font-size: 0.75rem;
   7 | $chemi-movie-character-mobile-font-size: 0.875rem;
   8 | $share-mobile-font-size: 1.125rem;
   9 | $comment-created-font-size: 0.83rem;
  10 | $comment-nickname-font-size: 1rem;
  11 | $placeholder-font-size: 0.75rem;
  12 | $basic-desktop-width: 79.86%;
  13 | $conclusion-desktop-font-size: 2rem;
  14 | $feature-desktop-font-size: 1.125rem;
  15 | $chemi-title-desktop-font-size: 1.5rem;
  16 | $chemi-movie-title-desktop-font-size: 1rem;
  17 | $chemi-movie-character-desktop-font-size: 1.625rem;
  18 | $share-desktop-font-size: 1.75rem;
  19 | $placeholder-desktop-font-size: 1rem;
  20 | $conclusion-mobile-font-xs-size: 1.1rem;
  21 | $feature-mobile-font-xs-size: 0.8rem;
  22 | $share-mobile-font-xs-size: 1.1rem;
  23 | $admin-margin-top-size: 0.833rem;
  24 | $conclusion-desktop-line-height: 2.625rem;
  25 | $conclusion-mobile-line-height: 1.875rem;
  26 | $feature-mobile-line-height: 1.5rem;
  27 | $chemi-title-mobile-line-height: 1.0625rem;
  28 | $chemi-movie-title-mobile-line-height: 0.875rem;
  29 | $chemi-movie-character-mobile-line-height: 1.0625rem;
  30 | $share-mobile-line-height: 3.375rem;
  31 | $feature-desktop-line-height: 1.35rem;
  32 | $chemi-title-desktop-line-height: 1.8125rem;
  33 | $chemi-movie-title-desktop-line-height: 1.1875rem;
  34 | $chemi-movie-character-desktop-line-height: 1.9375rem;
  35 | $conclusion-mobile-font-weight: 400;
  36 | $feature-desktop-font-weight: 300;
  37 | $circular-size: 160px;
  38 | $inner-size: 136px;
  39 | $circle-half-time: 2s;
  40 | 
  41 | /*
  42 | ===========
  43 | Global
  44 | ===========
  45 | */
  46 | body {
  47 |   @include flex(normal);
  48 |   padding: 2.5rem 1.25rem;
  49 | }
  50 | 
  51 | section {
  52 |   @include flex(normal);
  53 |   width: 100%;
  54 |   height: 100%;
  55 |   background-color: $white3;
  56 |   border: 2px solid $grey4;
  57 |   border-radius: 10px;
  58 |   margin-bottom: 0.625rem;
  59 | }
  60 | 
  61 | li {
  62 |   text-decoration: none;
  63 |   list-style: none;
  64 | }
  65 | 
  66 | select {
  67 |   -o-appearance: none;
  68 |   -webkit-appearance: none;
  69 |   -moz-appearance: none;
  70 |   appearance: none;
  71 |   height: 13.33%;
  72 |   border-radius: 16px;
  73 |   padding: 0 1.5rem;
  74 | }
  75 | 
  76 | select option {
  77 |   font-size: 1.125rem;
  78 | }
  79 | 
  80 | .subTitle {
  81 |   width: 100%;
  82 |   height: 3.25rem;
  83 |   display: inline-block;
  84 |   font-size: $share-mobile-font-size;
  85 |   line-height: $share-mobile-line-height;
  86 |   margin-top: 1.375rem;
  87 | }
  88 | /*
  89 | ===========
  90 | loading
  91 | ===========
  92 | */
  93 | 
  94 | .l1 {
  95 |   @include flex(normal);
  96 |   width: 100vw;
  97 |   height: 100vh;
  98 | 
  99 |   img {
 100 |     width: 100%;
 101 |   }
 102 | }
 103 | 
 104 | /* mobile(768px) labtop(1020px) / desktop(1024px) */
 105 | @media screen and (min-width: 47.25rem) {
 106 |   .l1 img {
 107 |     width: 37vw;
 108 |   }
 109 | }
 110 | /*
 111 | ===========
 112 | block
 113 | ===========
 114 | */
 115 | 
 116 | .b3 {
 117 |   width: 100%;
 118 |   height: 100%;
 119 |   display: none;
 120 |   flex-direction: column;
 121 |   align-items: center;
 122 |   text-align: center;
 123 |   background-color: $white1;
 124 |   border: 2px solid $green4;
 125 |   border-radius: 20px;
 126 |   padding: 1.25rem;
 127 | 
 128 |   .r1 {
 129 |     .t2 {
 130 |       @include flex(normal);
 131 |       width: 100%;
 132 |       height: 100%;
 133 | 
 134 |       .subject {
 135 |         @include imgContent("../imgs/result_character_subject.png");
 136 |         width: 90%;
 137 |         height: 1rem;
 138 |         margin-top: 2.5rem;
 139 |       }
 140 | 
 141 |       .movie-title {
 142 |         height: 1.25rem;
 143 |         margin-top: 1.6rem;
 144 |       }
 145 | 
 146 |       .movie-character {
 147 |         height: 1.875rem;
 148 |         margin-top: 1.375rem;
 149 |       }
 150 | 
 151 |       .character-img {
 152 |         width: 100%;
 153 |         padding: 0 1.25rem;
 154 |         object-fit: contain;
 155 |         margin-top: 2.375rem;
 156 |       }
 157 |     }
 158 | 
 159 |     .c1 {
 160 |       display: inline-block;
 161 |       width: 100%;
 162 |       height: 3.25rem;
 163 |       font-size: $conclusion-mobile-font-size;
 164 |       line-height: $conclusion-mobile-line-height;
 165 |       font-weight: $conclusion-mobile-font-weight;
 166 |       margin-top: 1.75rem;
 167 |     }
 168 | 
 169 |     .f1 {
 170 |       @include flex();
 171 |       width: 86.44%;
 172 |       margin-top: 1.3125rem;
 173 |     }
 174 | 
 175 |     .f2 {
 176 |       @include flex(center, row);
 177 |       width: 100%;
 178 |       height: 3rem;
 179 |       background-color: $white1;
 180 |       border-radius: 16px;
 181 |       margin-top: 0.625rem;
 182 |       font-size: feature-mobile-font-size;
 183 |       line-height: feature-mobile-line-height;
 184 |     }
 185 | 
 186 |     .h1 {
 187 |       @include flex(center, row);
 188 |       width: 86.1%;
 189 |       margin: 2.5625rem 0rem 2.5rem 0rem;
 190 | 
 191 |       .chemi {
 192 |         @include flex(normal);
 193 |         width: 100%;
 194 |         background-color: $white1;
 195 |         border: 2px solid $grey1;
 196 |         border-radius: 10px;
 197 | 
 198 |         .chemi-title {
 199 |           width: 100%;
 200 |           height: 2rem;
 201 |           display: inline-block;
 202 |           text-align: center;
 203 |           font-size: $chemi-title-mobile-font-size;
 204 |           line-height: $chemi-title-mobile-line-height;
 205 |           margin-top: 1.5rem;
 206 |         }
 207 | 
 208 |         .character-img {
 209 |           width: 64.91%;
 210 |           object-fit: contain;
 211 |         }
 212 | 
 213 |         .movie-title {
 214 |           width: 67.21%;
 215 |           height: 1.75rem;
 216 |           display: inline-block;
 217 |           font-size: $chemi-movie-title-mobile-font-size;
 218 |           line-height: $chemi-movie-title-mobile-line-height;
 219 |           color: $grey10;
 220 |           margin-top: 1rem;
 221 |         }
 222 | 
 223 |         .movie-character {
 224 |           width: 67.21%;
 225 |           height: 1.0625rem;
 226 |           display: inline-block;
 227 |           font-size: $chemi-movie-character-mobile-font-size;
 228 |           line-height: $chemi-movie-character-mobile-line-height;
 229 |           color: $red;
 230 |           margin: 0.25rem 0rem 1.4375rem 0rem;
 231 |         }
 232 |       }
 233 | 
 234 |       .good {
 235 |         margin-right: 0.625rem;
 236 |       }
 237 |     }
 238 |   }
 239 | 
 240 |   .likeMe,
 241 |   .mostType {
 242 |     padding: 0 1.25rem 1.25rem 1.25rem;
 243 |   }
 244 | 
 245 |   .whiteBox {
 246 |     width: 100%;
 247 |     height: 100%;
 248 |     background-color: $white1;
 249 |     border: 2px solid $grey1;
 250 |     border-radius: 16px;
 251 |     margin-top: 0.625rem;
 252 | 
 253 |     .movie-title {
 254 |       font-size: 0.875rem;
 255 |       margin-top: 2.5rem;
 256 |     }
 257 | 
 258 |     .movie-character {
 259 |       font-size: 1.125rem;
 260 |       margin-top: 0.4375rem;
 261 |     }
 262 | 
 263 |     .imgAndGraph {
 264 |       @include flex(center, column);
 265 |     }
 266 | 
 267 |     img {
 268 |       width: 9.25rem;
 269 |       margin: 1rem 0 1.875rem 0;
 270 |     }
 271 |   }
 272 | }
 273 | 
 274 | .circular {
 275 |   height: $circular-size;
 276 |   width: $circular-size;
 277 |   position: relative;
 278 |   top: 0px;
 279 |   margin-bottom: 3rem;
 280 | 
 281 |   .inner,
 282 |   .outer,
 283 |   .circle {
 284 |     position: absolute;
 285 |     z-index: 6;
 286 |     height: 100%;
 287 |     width: 100%;
 288 |     border-radius: 100%;
 289 |   }
 290 | 
 291 |   .inner {
 292 |     top: 50%;
 293 |     left: 50%;
 294 |     height: $inner-size;
 295 |     width: $inner-size;
 296 |     margin: calc(-1 * $inner-size / 2) 0 0 calc(-1 * $inner-size / 2);
 297 |     background-color: $white1;
 298 |     border-radius: 100%;
 299 |   }
 300 | 
 301 |   .circle {
 302 |     z-index: 1;
 303 |     box-shadow: none;
 304 |   }
 305 | 
 306 |   .numb {
 307 |     @include numb();
 308 |     top: 45%;
 309 |     font-size: 2rem;
 310 |   }
 311 | 
 312 |   .numb-title {
 313 |     @include numb();
 314 |     top: 65%;
 315 |     font-size: 0.875rem;
 316 |   }
 317 | 
 318 |   .bar {
 319 |     position: absolute;
 320 |     height: 100%;
 321 |     width: 100%;
 322 |     background: $grey1;
 323 |     border-radius: 100%;
 324 |     clip: rect(0px, $circular-size, $circular-size, calc($circular-size / 2));
 325 |   }
 326 | }
 327 | 
 328 | .circle {
 329 |   opacity: 0;
 330 |   transition: all 0.5s ease;
 331 | 
 332 |   .bar {
 333 |     .progress {
 334 |       position: absolute;
 335 |       height: 100%;
 336 |       width: 100%;
 337 |       border-radius: 100%;
 338 |       clip: rect(0px, calc($circular-size / 2), $circular-size, 0px);
 339 |     }
 340 |   }
 341 | 
 342 |   .progress,
 343 |   .dot span,
 344 |   .fixed-dot span {
 345 |     background: $green2;
 346 |   }
 347 | 
 348 |   .left .progress {
 349 |     z-index: 1;
 350 |     animation: left $circle-half-time linear both;
 351 |     animation-play-state: paused;
 352 |   }
 353 | 
 354 |   .left .progress.show,
 355 |   .right .progress.show,
 356 |   .dot.show {
 357 |     animation-play-state: running;
 358 |   }
 359 | 
 360 |   .right {
 361 |     z-index: 3;
 362 |     transform: rotate(180deg);
 363 | 
 364 |     .progress {
 365 |       animation: right $circle-half-time linear both;
 366 |       animation-delay: $circle-half-time;
 367 |       animation-play-state: paused;
 368 |     }
 369 |   }
 370 | 
 371 |   .fixed-dot {
 372 |     @include dot(20);
 373 |   }
 374 | 
 375 |   .dot {
 376 |     @include dot(2);
 377 |   }
 378 | 
 379 |   .fixed-dot span,
 380 |   .dot span {
 381 |     position: absolute;
 382 |     right: 0;
 383 |     width: calc(($circular-size - $inner-size) / 2);
 384 |     height: calc(($circular-size - $inner-size) / 2);
 385 |     border-radius: 100%;
 386 |   }
 387 | }
 388 | 
 389 | .circle.show {
 390 |   opacity: 1;
 391 |   transform: none;
 392 | }
 393 | 
 394 | @keyframes left {
 395 |   100% {
 396 |     transform: rotate(180deg);
 397 |   }
 398 | }
 399 | 
 400 | @keyframes right {
 401 |   100% {
 402 |     transform: rotate(180deg);
 403 |   }
 404 | }
 405 | 
 406 | @keyframes dot {
 407 |   0% {
 408 |     transform: rotate(-90deg);
 409 |   }
 410 |   50% {
 411 |     transform: rotate(90deg);
 412 |     z-index: 4;
 413 |   }
 414 |   100% {
 415 |     transform: rotate(270deg);
 416 |     z-index: 4;
 417 |   }
 418 | }
 419 | 
 420 | .b3 {
 421 |   .s1 {
 422 |     height: 100%;
 423 | 
 424 |     .s2 {
 425 |       width: 83.72%;
 426 |       height: 2.5rem;
 427 |       display: flex;
 428 |       flex-direction: row;
 429 |       justify-content: center;
 430 |       margin: 0.5rem 0 2.8025rem 0;
 431 | 
 432 |       li {
 433 |         width: 20%;
 434 |         height: 100%;
 435 | 
 436 |         a {
 437 |           display: inline-block;
 438 |           width: 100%;
 439 |           height: 100%;
 440 |           background-color: rgba(0, 0, 0, 0);
 441 |         }
 442 | 
 443 |         .kakaotalk {
 444 |           background-image: url("../imgs/share-icons/share_kakaotalk_Frame85.png");
 445 |         }
 446 | 
 447 |         .facebook {
 448 |           background-image: url("../imgs/share-icons/share_facebook_Frame86.png");
 449 |         }
 450 | 
 451 |         .twitter {
 452 |           background-image: url("../imgs/share-icons/share_twitter_Frame87.png");
 453 |         }
 454 | 
 455 |         .band {
 456 |           background-image: url("../imgs/share-icons/share_band_Frame88.png");
 457 |         }
 458 | 
 459 |         .instagram {
 460 |           background-image: url("../imgs/share-icons/share_instagram_Frame89.png");
 461 |         }
 462 |       }
 463 |     }
 464 |   }
 465 | 
 466 |   .m1 {
 467 |     height: 100%;
 468 | 
 469 |     .m2 {
 470 |       width: 55.93%;
 471 |       height: 100%;
 472 |       display: flex;
 473 |       flex-direction: column;
 474 |       align-items: center;
 475 |       margin: 0.375rem 0rem 1.875rem 0rem;
 476 | 
 477 |       li {
 478 |         width: 100%;
 479 |         height: 100%;
 480 |         margin-bottom: 0.625rem;
 481 | 
 482 |         img {
 483 |           width: 100%;
 484 |           height: 14.875rem;
 485 |           object-fit: contain;
 486 |         }
 487 |       }
 488 |     }
 489 |   }
 490 | 
 491 |   .restart {
 492 |     @include background("../imgs/restartBtn_Frame134.png");
 493 |     width: 100%;
 494 |     height: 3.5rem;
 495 |     margin: 2rem 0 2.8125rem 0;
 496 |   }
 497 | 
 498 |   .communication {
 499 |     .add-comment {
 500 |       @include flex(normal);
 501 |       width: 100%;
 502 |       height: 30.14%;
 503 | 
 504 |       .nickname {
 505 |         width: 89%;
 506 |         height: 2.75rem;
 507 |         margin: 2.5rem 1.25rem 0.625rem 1.25rem;
 508 |         display: flex;
 509 |       }
 510 | 
 511 |       .commentArea {
 512 |         width: 100%;
 513 |         position: relative;
 514 |         display: inlsine-block;
 515 | 
 516 |         .comment-area {
 517 |           width: 89%;
 518 |           height: 13.5rem;
 519 |           padding-top: 0.5rem;
 520 |           resize: none;
 521 |         }
 522 | 
 523 |         span {
 524 |           position: absolute;
 525 |           bottom: 20px;
 526 |           right: 40px;
 527 |         }
 528 | 
 529 |         #comment_count {
 530 |           font-size: 0.625em;
 531 |           color: $grey6;
 532 |         }
 533 |       }
 534 | 
 535 |       .add-comment-pw {
 536 |         .password {
 537 |           width: 89%;
 538 |           height: 2.75rem;
 539 |           margin: 0.6875rem 0 0.625rem 0;
 540 |         }
 541 | 
 542 |         .wrtie-comment-btn {
 543 |           @include background("../imgs/writeCommentBtn_Frame140.png");
 544 |           width: 70vw;
 545 |           height: 5vh;
 546 |         }
 547 |       }
 548 |     }
 549 | 
 550 |     .show-comment {
 551 |       @include flex(normal);
 552 |       width: 100%;
 553 |       height: 63.7%;
 554 |       margin: 2.0625rem 0 0.875rem 0;
 555 | 
 556 |       .comment {
 557 |         @include flex(normal);
 558 |         width: 90.15%;
 559 |         height: 20%;
 560 |         border: 2px solid $grey4;
 561 |         border-radius: 10px;
 562 |         margin-bottom: 0.75rem;
 563 | 
 564 |         .comment_header {
 565 |           width: 100%;
 566 |           height: 43.5%;
 567 |           display: flex;
 568 |           flex-direction: row;
 569 |           justify-content: space-between;
 570 |           box-sizing: border-box;
 571 |           border-radius: 10px 10px 0px 0px;
 572 |           background-color: $white2;
 573 | 
 574 |           .info {
 575 |             display: flex;
 576 |             flex-direction: column;
 577 | 
 578 |             .commentNickname {
 579 |               display: flex;
 580 |               align-items: start;
 581 |               margin: 1.25rem 0rem 0.6875rem 1.8125rem;
 582 |               color: $black3;
 583 |               font-size: $comment-nickname-font-size;
 584 |               line-height: 19px;
 585 |             }
 586 | 
 587 |             .commentMBTI {
 588 |               display: flex;
 589 |               align-items: center;
 590 |               justify-content: flex-start;
 591 |               margin: 0rem 0rem 1.3125rem 1.8125rem;
 592 |               color: $grey7;
 593 |               font-size: $comment-created-font-size;
 594 |             }
 595 |           }
 596 | 
 597 |           .btn {
 598 |             @include flex(space-evenly, row);
 599 |             width: 6rem;
 600 | 
 601 |             .del-reply-btn {
 602 |               @include flex(row-reverse);
 603 |               @include replyBtn();
 604 |               @include background("../imgs/replyDeleteBtn_Frame896.png");
 605 |             }
 606 | 
 607 |             .report-reply-btn {
 608 |               @include flex(row-reverse);
 609 |               @include replyBtn();
 610 |               @include background("../imgs/replyReporteBtn_icon.png");
 611 |             }
 612 |           }
 613 |         }
 614 |       }
 615 | 
 616 |       .comment_content {
 617 |         width: 100%;
 618 |         height: 100%;
 619 |         display: flex;
 620 |         flex-direction: column;
 621 |         border-radius: 0px 0px 10px 10px;
 622 |         background-color: $white1;
 623 | 
 624 |         .content {
 625 |           font-size: $comment-nickname-font-size;
 626 |           color: $black3;
 627 |           background-color: $white1;
 628 |           margin: 1.25rem 1.25rem 0rem 1.8125rem;
 629 |           display: flex;
 630 |           justify-content: flex-start;
 631 |           text-align: left;
 632 | 
 633 |           word-break: break-all;
 634 |           /* word-break: normal; */
 635 |         }
 636 |       }
 637 | 
 638 |       .createdDate {
 639 |         @include flex(flex-start, row);
 640 |         color: $grey7;
 641 |         font-size: $chemi-movie-title-mobile-font-size;
 642 |         margin: 0.6875rem 1.25rem 1.3125rem 1.8125rem;
 643 |       }
 644 |     }
 645 | 
 646 |     .comment-pages {
 647 |       background-color: $white3;
 648 |       width: 72%;
 649 |       height: 1.75rem;
 650 |       display: flex;
 651 |       justify-content: space-between;
 652 |       margin-bottom: 2.5rem;
 653 | 
 654 |       #index_left_btn_active {
 655 |         @include indexBtn("../imgs/index_left_btn_active.png");
 656 |       }
 657 | 
 658 |       #index_left_btn_not_active {
 659 |         @include indexBtn("../imgs/index_left_btn_not_active.png");
 660 |         cursor: default;
 661 |       }
 662 | 
 663 |       #index {
 664 |         @include flex(space-between);
 665 |         font-size: $comment-nickname-font-size;
 666 |         background-color: $white3;
 667 |         color: $black1;
 668 |       }
 669 | 
 670 |       #index_right_btn_active {
 671 |         @include indexBtn("../imgs/index_right_btn_active.png");
 672 |       }
 673 | 
 674 |       #index_right_btn_not_active {
 675 |         @include indexBtn("../imgs/index_right_btn_not_active.png");
 676 |       }
 677 |     }
 678 |   }
 679 | }
 680 | 
 681 | .report-modal {
 682 |   position: fixed;
 683 |   top: 0;
 684 |   left: 0;
 685 |   width: 100%;
 686 |   height: 90%;
 687 |   background: transparent;
 688 |   display: grid;
 689 |   place-items: center;
 690 |   visibility: hidden;
 691 |   z-index: 10;
 692 | 
 693 |   .report-modal-container {
 694 |     @include flex(normal);
 695 |     width: 72vw;
 696 |     height: 29rem;
 697 |     background: $white1;
 698 |     border: 2px solid #053f28;
 699 |     border-radius: 20px;
 700 |     text-align: center;
 701 |     padding: 1.25rem;
 702 | 
 703 |     .input-area {
 704 |       width: 100%;
 705 |       height: 24rem;
 706 |       background-color: $white3;
 707 |       border: 2px solid $grey4;
 708 |       border-radius: 20px;
 709 |     }
 710 | 
 711 |     h2 {
 712 |       margin-top: 1rem;
 713 |     }
 714 | 
 715 |     select {
 716 |       width: 88.14%;
 717 |       font-size: 1rem;
 718 |       margin-top: 1rem;
 719 |       margin-bottom: 1rem;
 720 |       background-color: $white1;
 721 |     }
 722 | 
 723 |     .input-area .reportArea {
 724 |       height: 55%;
 725 |     }
 726 | 
 727 |     #description {
 728 |       width: 88.14%;
 729 |       height: 13.5rem;
 730 |       font-size: 0.8rem;
 731 |       border-radius: 20px;
 732 |       border: 2px solid $grey3;
 733 |       padding: 1.25rem;
 734 |       word-break: break-all;
 735 |       resize: none;
 736 |     }
 737 | 
 738 |     #description::placeholder {
 739 |       color: $grey6;
 740 |     }
 741 | 
 742 |     #report_count {
 743 |       position: absolute;
 744 |       bottom: 255px;
 745 |       right: 150px;
 746 |       font-size: 0.625em;
 747 |       color: $grey6;
 748 |     }
 749 |   }
 750 | }
 751 | 
 752 | .open-modal {
 753 |   visibility: visible;
 754 |   z-index: 10;
 755 | }
 756 | 
 757 | .b3 .communication .add-comment .nickname::placeholder,
 758 | .comment-area::placeholder,
 759 | .password::placeholder {
 760 |   color: $grey6;
 761 | }
 762 | 
 763 | .b3 .communication .add-comment .nickname,
 764 | .comment-area,
 765 | .password {
 766 |   background: $white1;
 767 |   border: 2px solid $grey3;
 768 |   border-radius: 10px;
 769 |   font-size: $placeholder-font-size;
 770 |   padding-left: 1.25rem;
 771 | }
 772 | 
 773 | .btns {
 774 |   margin-top: 1rem;
 775 | }
 776 | 
 777 | button#cancle,
 778 | button#submit {
 779 |   width: 29.62%;
 780 |   height: 2.625rem;
 781 |   font-size: 1rem;
 782 |   cursor: pointer;
 783 | }
 784 | 
 785 | button#cancle {
 786 |   @include greyBtn();
 787 |   margin-right: 0.75rem;
 788 | }
 789 | 
 790 | button#submit {
 791 |   @include redBtn();
 792 |   color: $white1;
 793 | }
 794 | 
 795 | .p1 {
 796 |   width: 100%;
 797 |   height: 0.625rem;
 798 |   background: linear-gradient(to right, $grey4 50%, rgba(255, 255, 255, 0) 0%)
 799 |     repeat-x bottom;
 800 |   background-size: 16px 2px;
 801 |   margin-top: 2.3125rem;
 802 | }
 803 | /*
 804 | ===========
 805 | media
 806 | ===========
 807 | */
 808 | 
 809 | /* width < 320px (Galaxy S5, iPhone 5, iPhone 6/7/8, fold)*/
 810 | @media screen and (max-width: 23.4375rem) {
 811 |   /* ----------------- conclusion ----------------- */
 812 |   .b3 .r1 {
 813 |     .c1 {
 814 |       font-size: $conclusion-mobile-font-xs-size;
 815 |     }
 816 | 
 817 |     .f2 {
 818 |       font-size: $feature-mobile-font-xs-size;
 819 |     }
 820 |   }
 821 | 
 822 |   .b3 .s1 span,
 823 |   .b3 .m1 span,
 824 |   .b3 .likeMe span,
 825 |   .b3 .mostType span {
 826 |     font-size: $share-mobile-font-xs-size;
 827 |   }
 828 | }
 829 | 
 830 | /* mobile(768px) labtop(1020px) / desktop(1024px) */
 831 | @media screen and (min-width: 47.25rem) {
 832 |   /* ----------------- Global ----------------- */
 833 |   body {
 834 |     padding: 0;
 835 |   }
 836 | 
 837 |   section {
 838 |     margin: 0.625rem 3.75rem;
 839 |     border-width: 4px;
 840 |     border-radius: 32px;
 841 |   }
 842 | 
 843 |   .subTitle {
 844 |     font-size: $share-desktop-font-size;
 845 |     margin-top: 3rem;
 846 |   }
 847 | 
 848 |   /* ----------------- block ----------------- */
 849 |   .b3 {
 850 |     width: 716px;
 851 |     border-width: 6px;
 852 |     border-radius: 40px;
 853 |     margin: 5rem 0;
 854 |     padding: 3.75rem;
 855 | 
 856 |     .r1 {
 857 |       .t2 {
 858 |         .subject {
 859 |           height: 2rem;
 860 |           margin-top: 4rem;
 861 |         }
 862 |         .movie-title {
 863 |           height: 3rem;
 864 |           margin-top: 2.5rem;
 865 |         }
 866 | 
 867 |         .movie-character {
 868 |           height: 4rem;
 869 |         }
 870 | 
 871 |         .character-img {
 872 |           padding: 0 3.75rem;
 873 |         }
 874 |       }
 875 | 
 876 |       .c1 {
 877 |         height: 100%;
 878 |         line-height: $conclusion-desktop-line-height;
 879 |         font-size: $conclusion-desktop-font-size;
 880 |         margin-top: 2.375rem;
 881 |       }
 882 | 
 883 |       .f1 {
 884 |         width: $basic-desktop-width;
 885 |       }
 886 | 
 887 |       .f2 {
 888 |         height: 3.5rem;
 889 |         font-size: $feature-desktop-font-size;
 890 |         line-height: $feature-desktop-line-height;
 891 |         font-weight: $feature-desktop-font-weight;
 892 |       }
 893 | 
 894 |       .h1 {
 895 |         width: $basic-desktop-width;
 896 |         margin: 4.125rem 0 3.75rem 0;
 897 | 
 898 |         .chemi {
 899 |           height: 100%;
 900 |           border-radius: 16px;
 901 | 
 902 |           .chemi-title {
 903 |             width: 100%;
 904 |             height: 3.25rem;
 905 |             font-size: $chemi-title-desktop-font-size;
 906 |             line-height: $chemi-title-desktop-line-height;
 907 |             margin-top: 2.5rem;
 908 |           }
 909 | 
 910 |           .character-img {
 911 |             width: 64.91%;
 912 |             height: 10.75rem;
 913 |             margin-top: 0.625rem;
 914 |           }
 915 | 
 916 |           .movie-title {
 917 |             width: 100%;
 918 |             height: 1.375rem;
 919 |             font-size: 1rem;
 920 |             line-height: $chemi-movie-title-desktop-line-height;
 921 |             margin-top: 2.375rem;
 922 |           }
 923 | 
 924 |           .movie-character {
 925 |             width: 100%;
 926 |             height: 2.125rem;
 927 |             font-size: $chemi-movie-character-desktop-font-size;
 928 |             line-height: $chemi-movie-character-desktop-line-height;
 929 |             margin-top: 0.75rem;
 930 |             margin-bottom: 2.25rem;
 931 |           }
 932 |         }
 933 | 
 934 |         .good {
 935 |           margin-right: 1.25rem;
 936 |         }
 937 |       }
 938 |     }
 939 | 
 940 |     .communication {
 941 |       .add-comment {
 942 |         .nickname {
 943 |           width: 79.86%;
 944 |           height: 3.25rem;
 945 |           margin: 2.5rem 3.7rem 1.25rem 3.7rem;
 946 |         }
 947 | 
 948 |         .commentArea {
 949 |           .comment-area {
 950 |             width: 79.86%;
 951 |           }
 952 | 
 953 |           span {
 954 |             position: absolute;
 955 |             bottom: 20px;
 956 |             right: 90px;
 957 |           }
 958 | 
 959 |           #comment_count {
 960 |             font-size: 0.625em;
 961 |           }
 962 |         }
 963 | 
 964 |         .add-comment-pw {
 965 |           display: flex;
 966 |           flex-direction: row;
 967 |           width: 79.86%;
 968 |           /* align-items: start; */
 969 | 
 970 |           .password {
 971 |             @include flex(flex-start, row);
 972 |             width: 200vw;
 973 |             height: 3.25rem;
 974 |             margin: 1.25rem 1.25rem 0.625rem 0;
 975 |           }
 976 | 
 977 |           .wrtie-comment-btn {
 978 |             @include flex(center, row);
 979 |             height: 3.25rem;
 980 |             background-image: url("../imgs/writeCommentBtn_Frame69.png");
 981 |             margin-top: 1.25rem;
 982 |           }
 983 |         }
 984 |       }
 985 | 
 986 |       .show-comment {
 987 |         margin: 4.125rem 0 0.875rem 0;
 988 | 
 989 |         .comment {
 990 |           border-radius: 20px;
 991 |           margin-bottom: 1.6875rem;
 992 | 
 993 |           .comment_header {
 994 |             border-radius: 20px 20px 0px 0px;
 995 |           }
 996 | 
 997 |           .comment_content {
 998 |             border-radius: 0px 0px 20px 20px;
 999 |           }
1000 | 
1001 |           .add-reply {
1002 |             @include flex(flex-start, row);
1003 | 
1004 |             .write-reply-btn {
1005 |               width: 17.02%;
1006 |               height: 3rem;
1007 |               background-image: url("../imgs/desktop/desktop_writeCommentBtn_Frame69.png");
1008 |               background-color: transparent;
1009 |               margin: 1.125rem 1.0625rem 0 0;
1010 |             }
1011 | 
1012 |             .comment-reply-area {
1013 |               margin: 1.25rem 1.25rem 1.125rem 1.0625rem;
1014 |             }
1015 |           }
1016 |         }
1017 |       }
1018 | 
1019 |       .comment-pages {
1020 |         width: 40%;
1021 |       }
1022 |     }
1023 | 
1024 |     .likeMe,
1025 |     .mostType {
1026 |       padding: 0 3.75rem 3.75rem 3.75rem;
1027 |     }
1028 | 
1029 |     .whiteBox {
1030 |       .imgAndGraph {
1031 |         flex-direction: row;
1032 |         justify-content: center;
1033 |       }
1034 | 
1035 |       .movie-title {
1036 |         font-size: 1rem;
1037 |         margin-top: 2.5rem;
1038 |       }
1039 | 
1040 |       .movie-character {
1041 |         font-size: 1.5rem;
1042 |         margin-top: 0.5rem;
1043 |       }
1044 | 
1045 |       img {
1046 |         margin: 1rem 2.5rem 3.75rem 0;
1047 |       }
1048 |     }
1049 | 
1050 |     .s1 .s2 {
1051 |       width: $basic-desktop-width;
1052 |       height: 4rem;
1053 |       margin: 1.75rem 0 4.25rem 0;
1054 |       padding: 0 1.875rem;
1055 |     }
1056 | 
1057 |     .m1 {
1058 |       height: 100%;
1059 | 
1060 |       .m2 {
1061 |         width: $basic-desktop-width;
1062 |         height: 13.125rem;
1063 |         display: flex;
1064 |         flex-direction: row;
1065 |         justify-content: space-between;
1066 |         margin-top: 1.625rem;
1067 |         margin-bottom: 3.75rem;
1068 | 
1069 |         li {
1070 |           width: 30%;
1071 |           margin-bottom: 0;
1072 |         }
1073 |       }
1074 |     }
1075 | 
1076 |     .restart {
1077 |       width: 63.75%;
1078 |       height: 5.875rem;
1079 |       margin: 2.5rem 0;
1080 |     }
1081 |   }
1082 | 
1083 |   .circular {
1084 |     top: -20px;
1085 |     margin-bottom: 0;
1086 |   }
1087 | 
1088 |   .p1 {
1089 |     background-size: 28px 4px;
1090 |     border-width: 4px;
1091 |     margin-top: 62px;
1092 |   }
1093 | 
1094 |   .b3 .communication .add-comment .nickname,
1095 |   .comment-area,
1096 |   .password {
1097 |     border-width: 3px;
1098 |     border-radius: 20px;
1099 |     font-size: var(--placeholder-desktop-font-size);
1100 |   }
1101 | 
1102 |   .report-modal .report-modal-container {
1103 |     width: 36.9375rem;
1104 |     height: 33rem;
1105 |     border-width: 6px;
1106 |     border-radius: 40px;
1107 | 
1108 |     .input-area {
1109 |       height: 27rem;
1110 |       border-radius: 32px;
1111 |     }
1112 | 
1113 |     select {
1114 |       margin-top: 2rem;
1115 |     }
1116 |   }
1117 | }
1118 | 


--------------------------------------------------------------------------------
/scss/variable.scss:
--------------------------------------------------------------------------------
 1 | $white1: #ffffff;
 2 | $white2: #f5f5f5;
 3 | $white3: #f8f8f8;
 4 | 
 5 | $grey1: #e5e5e5;
 6 | $grey2: #e6e6e6;
 7 | $grey3: #e8e8e8;
 8 | $grey4: #ededed;
 9 | $grey5: #d1d1d1;
10 | $grey6: #a8a8a8;
11 | $grey7: #8a8a8a;
12 | $grey8: #888888;
13 | $grey9: #6f6f70;
14 | $grey10: #4a4a4a;
15 | 
16 | $green1: #2d6242;
17 | $green2: #08623e;
18 | $green3: #1a3e2a;
19 | $green4: #053f28;
20 | 
21 | $black1: #2a2a2a;
22 | $black2: #222222;
23 | $black3: #00010c;
24 | 
25 | $navy: #060713;
26 | $red: #e10017;
27 | 
28 | @mixin flex($JustifyContent: center, $FlexDirection: column) {
29 |   display: flex;
30 |   flex-direction: $FlexDirection;
31 |   justify-content: $JustifyContent;
32 |   align-items: center;
33 | }
34 | 
35 | @mixin greyBtn {
36 |   background: linear-gradient(93.11deg, #dadcdd 4.01%, #bec0c2 97.86%);
37 |   box-shadow: 0px 6px 0px #505050;
38 |   border: 2px solid #6f6f70;
39 |   border-radius: 80px;
40 | }
41 | 
42 | @mixin redBtn {
43 |   background: linear-gradient(93.11deg, #f7202f 4.01%, #c11723 97.86%);
44 |   box-shadow: 0px 6px 0px #56070c;
45 |   border: 4px solid #9b151e;
46 |   border-radius: 80px;
47 | }
48 | 
49 | @mixin background($ImgUrl) {
50 |   background-image: url($ImgUrl);
51 |   background-size: contain;
52 | }
53 | 
54 | @mixin imgContent($ContentUrl) {
55 |   object-fit: contain;
56 |   content: url($ContentUrl);
57 | }
58 | 
59 | @mixin numb {
60 |   position: absolute;
61 |   left: 50%;
62 |   transform: translate(-50%, -50%);
63 |   z-index: 10;
64 |   color: $black2;
65 |   white-space: nowrap;
66 | }
67 | 
68 | @mixin dot($zIndex) {
69 |   z-index: $zIndex;
70 |   position: absolute;
71 |   left: 50%;
72 |   top: 50%;
73 |   width: 50%;
74 |   height: calc(($circular-size - $inner-size) / 2);
75 |   margin-top: calc(-1 * ($circular-size - $inner-size) / 4);
76 |   animation: dot calc($circle-half-time) * 2 linear both;
77 |   transform-origin: 0% 50%;
78 |   animation-play-state: paused;
79 | }
80 | 
81 | @mixin replyBtn {
82 |   width: 1.3rem;
83 |   height: 1.3rem;
84 |   background-color: $white2;
85 |   background-size: 100% 100%;
86 | }
87 | 
88 | @mixin indexBtn($ImgUrl) {
89 |   width: 20%;
90 |   background-image: url($ImgUrl);
91 |   background-size: contain;
92 |   background-color: $white3;
93 |   margin-top: 0;
94 | }
95 | 


--------------------------------------------------------------------------------