likelion-inha-13 · leedasom050115 · Jun 22, 2025 · Jun 22, 2025
diff --git a/README.md b/README.md
@@ -1,38 +1,24 @@
 ## 멋쟁이사자처럼 13기 클론코딩 과제
-
-이번 시간에는 그동안 배운 React, CSS, React hook(useState, useEffect)을 사용하여 직접 클론코딩을 진행해볼 겁니다.
-이전 세션에 비해 다소 난이도가 올라갈 수 있으나 실제 구현되어있는 서비스를 직접 따라 만들면서 배우는 것만큼 빠르고 효과적인 공부법은 없으니까요.
-모두 화이팅!
-
-## 실습 진행방법
-
-이번 주차는 과제 중심으로 세션이 진행됩니다!
-직접 Component를 만들어서 아래의 홈페이지와 같은 페이지를 구현해보세요.
-
-https://getbootstrap.com/docs/4.3/examples/album/
-
-- Icon 이미지 가져오기 : https://heroicons.com
-
-### 심화학습 (필수 x)
-
-1. 우측 상단 햄버거 버튼 클릭 시 진행되는 동적 기능
-2. 기타 애니메이션 효과
-3. 하단 Footer
-
-## 구현 화면
-
-(이곳에 구현한 이미지를 이곳에 첨부해주세요. 아래는 예시 이미지입니다.)
-
-![](https://velog.velcdn.com/images/wuzoo/post/509d4112-3edb-482d-82cb-89edf105a060/image.png)
-
-## 구현 조건
-
-1. `components`, `assets`, `pages` 3개의 폴더로 구분하여 개발합니다.
-   - components 폴더엔 내가 구현한 컴포넌트들을, assets 에는 이미지 파일들을, pages 에는 내가 보여줄 페이지 컴포넌트를 위치시킵니다.
-2. 상단에 `Header`는 스크롤하여도 화면에 고정되어 보이도록 합니다.
-
-## 컴포넌트 계층 구조
-
-주된 컴포넌트인 헤더, 푸터, 포토카드(사진과 글이 있는 것), 버튼에 대해 어떤 계층으로 설계했는지 이곳에 작성해주세요. 그리고 자식 컴포넌트 들에 대해서 어떤 의도를 갖고 설계했는지(ex 정렬하기 위해서, border를 주기 위해서 등) 부담없이 간단하게 적으면 됩니다. (아래는 예시입니다.)
-
-![](https://velog.velcdn.com/images/wuzoo/post/ab092dd4-595e-41ab-a850-85cab0c83e80/image.png)
+ **App**  
+  - 최상위 컴포넌트, Header · Home · Footer 렌더링
+
+- **Header**  
+  - `HeaderWrapper` (고정 헤더)  
+    - 의도: 스크롤해도 상단에 남도록 `position: sticky`
+
+- **Home**  
+  - `MainSection` (전체 레이아웃)  
+  - `Intro` (소개 텍스트 & 버튼)  
+    - 의도: 중앙 정렬, 버튼 사이 간격 조절  
+  - `Grid`  
+    - `PhotoCard` 6개 렌더링  
+      - 의도: 카드마다 동일한 스타일·정렬 적용
+
+- **PhotoCard**  
+  - `Card` (박스)  
+  - `CardImage`, `CardBody`, `Title`, `Description`, `ButtonGroup`, `Time`  
+    - 의도: 재사용 가능한 카드 구조, View/Edit 버튼, 시간 표시
+
+- **Footer**  
+  - `FooterWrapper` → `FooterContainer` → `LeftContainer` · `RightContainer`  
+    - 의도: 텍스트 중앙 정렬 · 좌우 콘텐츠 배치
diff --git a/docs/스크린샷 2025-06-22 135309.png b/docs/스크린샷 2025-06-22 135309.png
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>멋사 앨범 클론코딩</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,26 @@
-function App() {
+import React from "react";
+import styled from "styled-components";
+import Header from "./components/Header.jsx";
+import Home from "./Home.jsx";
+import Footer from "./components/Footer.jsx";
+
+const AppWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f8f9fa;
+  margin: 0;
+  font-family: sans-serif;
+`;
 
+function App() {
   return (
-    <>
-      화이팅! 
-    </>
-  )
+    <AppWrapper>
+      <Header />
+      <Home />
+      <Footer />
+    </AppWrapper>
+  );
 }
 
-export default App
+export default App;