Daily10Minute_FrontSample/search.html at master · cho881020/Daily10Minute_FrontSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <!-- 커스터마이징한 axiosInstace 들고있는 파일 -->
        <script src="/custom_axios.js"></script>

    </head>
    <body>
        검색결과 / 키워드 : <span id='keywordSpan'>??</span>

        <ul>
            <li class='parent'>프로젝트 목록
                <ul id='projectListUl'>

                </ul>
            </li>
            <li class='parent'>태그 목록
                <ul id='tagListUl'>

                </ul>
            </li>
        </ul>

        <script>

            // 들고온 검색어를 받아서 search API에 전달
            // 주소창에 적힌 keyword를 변수로 저장.

            // 주소창의 데이터를 분석해주는 클래스를 변수에 담자.
            let searchParams = new URLSearchParams(window.location.search)

            // 주소창에 keyword가 뭐라고 적혀있는지 찾아서 저장.
            let searchKeyword = searchParams.get('keyword')

            // keywordSpan에 반영
            $('#keywordSpan').text(searchKeyword)


            // 실제 search API를 키워드를 담아서 호출
            axiosInstance.get('/search', {
                params: {
                    'keyword': searchKeyword
                }
            })
            .then(function (res) {
                console.log(res)

                // 응답의 프로젝트 목록을 변수로 저장
                let projectList = res.data.data.projects

                // 해당 목록으로 반복
                projectList.forEach(project => {


                    // 하나하나의 프로젝트 모양을 나타내는 li를 변수로 담자.
                    let projectLi = $(`
                    <li project_id=${project.id} class='projectLink'>
                        <span>${project.title}</span>
                    </li>
                    `)

                    // 완성된 li를 projectListUl 의 내용물로 추가
                    $('#projectListUl').append(projectLi)

                });

                // 응답의 태그목록을 변수로 저장 => 반복

                let tagList = res.data.data.tags

                tagList.forEach(tag => {

                    console.log(tag)
                    // 하나하나의 태그 모양을 나타내는 li를 변수로
                    // 태그용 li는 내부에 ul을 하나 더 가짐. (해당 태그의 프로젝트 목록)
                    let tagLi = $(`
                    <li tag_id=${tag.id}>
                        <span>${tag.title}</span>
                        <ul class='tagProjectUl'>
                        </ul>
                    </li>
                    `)

                    // tagLi의 자녀중 tagProjectUl 클래스를 찾자
                    let tagProjectUl = tagLi.children('.tagProjectUl')


                    // 태그의 프로젝트 목록을 가지고 반복

                    tag.projects.forEach(project => {

                        // 태그 내에 들어갈 프로젝트를 표현하는 li

                        let tagProjectLi = $(`
                        <li project_id=${project.id} class='projectLink'>
                            <span>${project.title}</span>
                        </li>
                        `)

                        // 아까 찾아둔 태그의 프로젝트 목록 ul에 담아주기.
                        tagProjectUl.append(tagProjectLi)


                    });

                    // 태그목록에 추가
                    $('#tagListUl').append(tagLi)

                });


                // 추가해준 모든 projectLink에게 이벤트 부여
                $('.projectLink').click(function () {

                    // 어느 프로젝트로 가야하는지?
                    let projectId = $(this).attr('project_id')


                    // 해당 프로젝트 상세 조회로 이동
                    $(location).attr('href', `project_detail.html?id=${projectId}`)

                })

            })
            .catch(function (error) {
                // 실패시 error의 응답에 담긴 message를 얼럿으로
                alert(error.response.data.message)
            })

        </script>
    </body>
</html>