clonecoding 과제

README.md

@@ -21,9 +21,7 @@ https://getbootstrap.com/docs/4.3/examples/album/
 
 ## 구현 화면
 
-(이곳에 구현한 이미지를 이곳에 첨부해주세요. 아래는 예시 이미지입니다.)
-
-![](https://velog.velcdn.com/images/wuzoo/post/509d4112-3edb-482d-82cb-89edf105a060/image.png)
+![](https://velog.velcdn.com/images/boyeon0628/post/e732f899-31b5-47fc-94ae-e637befd9e6d/image.png)
 
 ## 구현 조건
 
@@ -32,7 +30,24 @@ https://getbootstrap.com/docs/4.3/examples/album/
 2. 상단에 `Header`는 스크롤하여도 화면에 고정되어 보이도록 합니다.
 
 ## 컴포넌트 계층 구조
+! 이 페이지의 구조와 대략적인 기능을 참고, 이름과 테마는 제가 새롭게 정하였습니다.
+! 페이지 이름은 "Pocket 
+
+
+💥assets : img1 ~ img5
+Photo.jsx에서 불러와서 사용할 이미지 저장.
+
+
+💥components : Header.jsx, PhotoCard.jsx
+
+Header.jsx - 상단 고정되는 로고, 메뉴를 포함한 바. header_container 안에 크게 header_left, header_menu 요소들을 넣어서 설계, flex를 이용하여 각각 왼쪽, 오른쪽으로 붙게 정렬. hover를 이용하여 menu 안의 home과 contact를 누르면 언더바가 생기게 동적인 기능을 넣음. 
+
+PhotoCard.jsx - Photo 페이지의 사진 카드 틀. 사진인 image, 제목인 title, 설명인 description을 변수 설정함. 사진, 제목, 설명을 적을 곳을 설정하고 view (자세히 보기), edit (수정하기) 버튼을 추가함. 여기에도 hover 효과를 추가하여 마우스를 가져다대면 부드럽게 잠시 커지게 됨. 세로로 정렬하여 순서대로 사진, 제목, 설명 순으로 카드의 형태 지정.
+
+
+💥pages : Home.jsx, Photo.jsx
+
+Home.jsx - 사용자가 페이지에 접속하였을 때 가장 먼저 보게 되는 화면. (헤더 밑에 위치) 먼저 useEffect, 라우터 기능을 사용하여 콘솔에 페이지에 접속한 것을 보내게 함. 간단한 환영 인사, 설명이 뜨고 밑에 "회원가입 / 로그인" 버튼과 "자세히 알아보기" 버튼을 삽입. 각각 누르게 되면 화면 위에 "~~ 화면으로 이동합니다." 라는 메시지가 뜨도록 함. 또한 hover 효과를 삽입하여 동적 효과 부여.
 
-주된 컴포넌트인 헤더, 푸터, 포토카드(사진과 글이 있는 것), 버튼에 대해 어떤 계층으로 설계했는지 이곳에 작성해주세요. 그리고 자식 컴포넌트 들에 대해서 어떤 의도를 갖고 설계했는지(ex 정렬하기 위해서, border를 주기 위해서 등) 부담없이 간단하게 적으면 됩니다. (아래는 예시입니다.)
+Photo.jsx - 먼저, components에 있는 PhotoCard 파일과 assets에 있는 사진들을 불러옴. 사진 카드에 들어갈 이미지, 제목, 설명을 적은 배열. map을 이용하여 photolist 배열에 적은 항목들을 PhotoCard 컴포넌트로 만들어 props 로 사진, 제목, 설명을 전달하여 여러 개의 사진 카드가 만들어지게 됨. 배열은 flex를 이용하여 가로로 가운데 정렬하게 설정.
 
-![](https://velog.velcdn.com/images/wuzoo/post/ab092dd4-595e-41ab-a850-85cab0c83e80/image.png)

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/App.jsx

@@ -1,8 +1,15 @@
+import React from "react";
+import Header from "./components/Header";
+import Home from "./pages/Home";
+import Photo from "./pages/Photo";
+
 function App() {
 
   return (
     <>
-      화이팅! 
+      <Header />
+      <Home />
+      <Photo />
     </>
   )
 }

src/components/Header.css

@@ -0,0 +1,47 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #56abff;
+  color: white;
+  padding: 16px 0;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.header_container {
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header_left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 30px;
+  font-size: 0.7rem;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.header_menu {
+  list-style: none;
+  display: flex;
+  gap: 24px;
+  margin: 0;
+  padding-right: 30px;
+}
+
+.header_menu li a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.header_menu li a:hover {
+  text-decoration: underline;
+}

src/components/Header.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "./Header.css";
+
+function Header() {
+  return (
+    <div className="header">
+      <div className="header_container">
+        <div className="header_left">
+          <h1 className="header_logo">📷 Pocket Album </h1>
+          </div>
+        <ul className="header_menu">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default Header;

src/components/PhotoCard.css

@@ -0,0 +1,60 @@
+.photo-card {
+  width: 400px;
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+  margin: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.photo-card:hover {
+    transition: transform 0.3s ease;
+    transform: scale(1.03);
+}
+
+.photo-img {
+  width: 180px;
+  height: 180px;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+.photo-card h2 {
+  margin: 10px;
+  font-size: 20px;
+  text-align : center;
+  color: #333;
+}
+
+.photo-card p {
+  margin: 10px;
+  font-size: 14px;
+  text-align : center;
+  color: #333;
+}
+
+.photo-action {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin: 10px 0 16px;
+}
+
+.photo-action button {
+  padding: 6px 12px;
+  font-size: 13px;
+  background-color: #f0f0f0;
+  border: 1px solid #bbb;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.photo-action button:hover {
+  background-color: #e0e0e0;
+  transform: scale(1.05);
+}

src/components/PhotoCard.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./PhotoCard.css";
+
+function PhotoCard({image, title, description}){
+    return(
+        <div className="photo-card">
+            <img src={image} alt="사진" className="photo-img"/>
+            <h2>{title}</h2>
+            <p>{description}</p>
+            <div className="photo-action">
+                <button>view</button>
+                <button>edit</button>
+            </div>
+        </div>
+    )
+
+}
+
+export default PhotoCard

src/pages/Home.css

@@ -0,0 +1,54 @@
+.intro {
+  text-align: center;
+  padding: 100px 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.intro h1 {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+
+.intro p {
+  font-size: 1.1rem;
+  color: #555;
+  margin-bottom: 40px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+
+.btn1 {
+  font-size: 1rem;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #007bff;
+  color: white;
+}
+
+.btn2 {
+  font-size: 1rem;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn1:hover {
+    transition: transform 0.3s ease;
+    transform: scale(1.1);
+}
+
+.btn2:hover {
+    transition: transform 0.3s ease;
+    transform: scale(1.1);
+}

src/pages/Home.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import "./Home.css";
+
+function Home(){
+  useEffect(() => {
+    console.log("Home 페이지에 접속했습니다.");
+  }, []);
+
+  const handleJoinClick = () => {
+    alert("회원가입 / 로그인 화면으로 이동합니다.");
+  };
+
+  const handleEtcClick = () => {
+    alert("자세히 알아보기 화면으로 이동합니다.");
+  };
+
+
+  return(
+    <section className="intro">
+        <h1> Welcome to Pocket Album!</h1>
+        <p>
+        포켓앨범에 오신 것을 환영합니다! 이곳은 여러분의 소중한 추억을 혼자만의 공간에 < br />
+        가볍게 스크랩할 수 있는 서비스를 제공합니다. 간단한 회원가입을 통하여 저희 서비스를
+        즐겨주세요!
+        </p>
+        <div className="buttons">
+            <button className="btn1" onClick={handleJoinClick}> 회원가입 / 로그인 </button>
+            <button className="btn2" onClick={handleEtcClick}> 자세히 알아보기 </button>
+        </div>
+    </section>
+  );
+}
+
+export default Home;

src/pages/Photo.css

@@ -0,0 +1,6 @@
+.photo-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 32px;
+}