[축구모임 홈페이지개발] 01/23 개발일지 Nodejs, css / 사진탭 기능구현

시험 합격 후 다시 프로젝트를 달리기 위해서 돌아왔다.

우선 사진&앨범 탭에서 등록된 사진의 개수에 따라서 

id를 동적으로 생성하여 각 Carousel에 고유한 id를 부여해 각각의 앨범마다 고유의 번호가 있게 해야했다.

 

<%for (j=0; i<???; i++) {%>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"

                                class="active" aria-current="true" aria-label="Slide 1"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"

                                aria-label="Slide 2"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"

                                aria-label="Slide 3"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"

                                aria-label="Slide 4"></button>

                                <%}%>

 

다음과 같은 꼴로 하려고 했는데, 생각해보니까 저렇게 되면 결국 넘버링이 계속 고정으로 0,1,2,3 이 안에서 놀게 될텐데,,

그러면 다른 게시글의 Next, Prev 버튼을 눌러도 제일 상단 게시글의 사진이 넘어가진다.

그러면 고유의 번호를 갖게 해야하나? 

 

보니까 저건 사진의 개수를 담당하는 부분이고,

버튼에 따라서 각각의 게시물을 컨트롤하려면 

 

                    <div id="carouselExampleIndicators<%=i%>" class="carousel slide">

 

(생략)

                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators<%=i%>"

                            data-bs-slide="prev">

                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                            <span class="visually-hidden">Previous</span>

                        </button>

                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators<%=i%>"

                            data-bs-slide="next">

                            <span class="carousel-control-next-icon" aria-hidden="true"></span>

                            <span class="visually-hidden">Next</span>

                        </button>

 

 

위 처럼 carousel 에 넘버링을 해주고, prev next 버튼에 data-bs-target 으로 그 넘버링에 각각 맞춰주면 되었다.

 

이제 아래코드들을 사진의 개수만큼 반복을 해줘야한다.

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"

                                class="active" aria-current="true" aria-label="Slide 1"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"

                                aria-label="Slide 2"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"

                                aria-label="Slide 3"></button>

                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"

                                aria-label="Slide 4"></button>

 

<div class="carousel-container">

                            <div class="carousel-inner">

                                <div class="carousel-item active">

                                    <img class="carousel-img"

                                        src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/KakaoTalk_20240113_204247647_01.jpg?updatedAt=1705146335186"

                                        class="d-block w-100" alt="...">

                                </div>

                                <div class="carousel-item">

                                    <img class="carousel-img"

                                        src="https://ik.imagekit.io/wlalafg7g/a6ae8dcb-09e5-4785-a5a4-174d70f45529.png?updatedAt=1693287404305"

                                        class="d-block w-100" alt="...">

                                </div>

                                <div class="carousel-item">

                                    <img class="carousel-img"

                                        src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/KakaoTalk_20240113_204247647.jpg?updatedAt=1705146318141"

                                        class="d-block w-100" alt="...">

                                </div>

                                <div class="carousel-item">

                                    <img class="carousel-img"

                                        src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/logo.png?updatedAt=1700484789437"

                                        class="d-block w-100" alt="...">

                                </div>

                            </div>

                        </div>

 

내 기억에 사진 파일들이 Location 배열로 들어가기 때문에 그에 접근해서 개수를 확인하면 될것이다.

 

우선 mongoDB 에 저장된 값으로 확인을 했을 때, 

 

<div class="carousel-indicators">

                            <%for (j=0; j<포토[i].img.length; j++) {%>

                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<%=j%>"

                                    class="active" aria-current="true" aria-label="Slide <%=(j+1)%>"></button>

                                <%}%>

                        </div>

 

위와 같은 코드로 사진의 개수와 동일하게 next, prev 버튼이 작동되게 할 수 있었다.

 

다음은 그 만큼 반복을 똑같이 하면서 사진을 출력해야한다.

이는 공지사항 기능에서도 똑같이 구현한 적이 있다.

 

                            <div class="carousel-inner">

                                <% if (포토[i].img[1] === undefined ) {%>

                                    <div class="carousel-item active">

                                        <img class="carousel-img d-block w-100" src="<%= 포토[i].img[0].location%>" alt="...">

                                    </div>

                                    <%} else {%>

                                        <div class="carousel-item active">

                                            <img class="carousel-img d-block w-100" src="<%= 포토[i].img[0].location%>" alt="...">

                                        </div>

                                        <%for (k=1; k<포토[i].img.length; k++) {%>

                                            <div class="carousel-item">

                                                <img class="carousel-img d-block w-100" src="<%= 포토[i].img[k].location%>" alt="...">

                                            </div>

                                            <%}%>

                                                <%}%>

                            </div>

 

공지사항 때와 다른 점은 undefined 가 뜬다는 점이다. 아예 지정이 안되어있었는데,

알아보니 undefined 와 비교하기 위해서는 위와 같이 === 를 이용하면 된다고 한다.

 

응용해서 사진이 하나만 등록되었을 경우 양 옆 방향키가 필요 없기 때문에,

 

                        <% if (포토[i].img[1] != undefined ) {%>

                        <button class="carousel-control-prev" type="button"

                            data-bs-target="#carouselExampleIndicators<%=i%>" data-bs-slide="prev">

                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                            <span class="visually-hidden">Previous</span>

                        </button>

                        <button class="carousel-control-next" type="button"

                            data-bs-target="#carouselExampleIndicators<%=i%>" data-bs-slide="next">

                            <span class="carousel-control-next-icon" aria-hidden="true"></span>

                            <span class="visually-hidden">Next</span>

                        </button>

                        <%}%>

 

이렇게 만들어줬다.

 

---

 

.top-area-fixed {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000; 

  background-color: #fff; 

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 

}

 

 

위 코드를 추가해줌으로서 position: fixed ; 속성을 이용해 상단 바 고정시킴.